Code Monkey home page Code Monkey logo

shinynotifyjs's Introduction

Bringing notifyjs in your golem app

Notes

Creating a custom JavaScript handler

golem::add_js_handler("name")

or add

$( document ).ready(function() {
  Shiny.addCustomMessageHandler('fun', function(arg) {
    
  })
});

In inst/app/www/handler.js

Link in your app

In R/app_ui.R :

golem_add_external_resources <- function(){
  
  addResourcePath(
    'www', system.file('app/www', package = 'nineties')
  )
  
  tags$head(
    golem::activate_js(),
    golem::favicon(), 
    tags$script(src="www/handlers.js")
  )
}

Calling custom handler

From the server side:

session$sendCustomMessage("fun", arg)

Good practice

$( document ).ready(function() {
  Shiny.addCustomMessageHandler('fun', function(arg) {
    arg.this + arg.that
  })
});

Call them with

session$sendCustomMessage(
  "fun", 
  list(
    this = 40, 
    that = 42
  )
)

About

notifyjs is an open source JavaScript library designed to create custom notification boxes, released under the MIT License.

Notify.js is a jQuery plugin to provide simple yet fully customisable notifications.

https://notifyjs.jpillora.com/

JS available at: https://rawgit.com/notifyjs/notifyjs/master/dist/notify.js

Our goal for today

Bring notifyjs to Shiny

Step by step

Create a {golem} app

Download notifyjs in the app

  • Should go into app/inst/www

Add to your app

  • Link the script to the app in R/app_ui.R, in the golem_add_external_resources

Use a tags$script or create an htmlDependency

Try it by adding an onclick alert on a button

Create a custom handler that takes a text as input and show a success alert with the text in it

Create a function that can call this custom handler

Create more custom alerts using the notifyjs options

See "Custom Styling Guide" at https://notifyjs.jpillora.com/

  • pop_succes(text)
  • pop_error(text)
  • pop_info(text)
  • pop_warn(text)
  • pop_succes(text, position)
  • pop_error(text, position)
  • pop_info(text, position)
  • pop_warn(text, position)
  • pop_succes(text, autoHide)
  • pop_error(text, duration)
  • pop_info(text, clickToHide)

shinynotifyjs's People

Contributors

colinfay avatar

Watchers

 avatar

Forkers

ysosirius

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.