EVOLUTION-MANAGER

Edit File: extendShinyjs.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>R: Extend shinyjs by calling your own JavaScript functions</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="R.css" />
</head><body>

<table width="100%" summary="page for extendShinyjs {shinyjs}"><tr><td>extendShinyjs {shinyjs}</td><td style="text-align: right;">R Documentation</td></tr></table>

<h2>Extend shinyjs by calling your own JavaScript functions</h2>

<h3>Description</h3>

<p>Add your own JavaScript functions that can be called from R as if they were
regular R functions. This is a more advanced technique and can only
be used if you know JavaScript. See 'Basic Usage' below for more information
or <a href="https://deanattali.com/shinyjs/">view the shinyjs webpage</a>
to learn more.
</p>

<h3>Usage</h3>

<pre>
extendShinyjs(script, text, functions)
</pre>

<h3>Arguments</h3>

<table summary="R argblock">
<tr valign="top"><td><code>script</code></td>
<td>
<p>Path to a JavaScript file that contains all the functions.
Each function name must begin with &quot;<code>shinyjs.</code>&quot;, for example
&quot;<code>shinyjs.myfunc</code>&quot;. Note that the path to the file must be discoverable by the browser
(meaning that it needs to be in a &quot;www/&quot; directory or available via <code>addResourcePath()</code>).
See 'Basic Usage' below for more details.</p>
</td></tr>
<tr valign="top"><td><code>text</code></td>
<td>
<p>Inline JavaScript code to use instead of providing a file.
See 'Basic Usage' below.</p>
</td></tr>
<tr valign="top"><td><code>functions</code></td>
<td>
<p>The names of the shinyjs JavaScript functions which are defined and
you want to be able to call using <code>shinyjs</code>. For example, if you defined JavaScript functions
named <code>shinyjs.foo</code> and <code>shinyjs.bar</code>, then use <code>functions = c("foo", "bar")</code>.</p>
</td></tr>
</table>

<h3>Value</h3>

<p>Scripts that are required by <code>shinyjs</code>.
</p>

<h3>Basic Usage</h3>

<p>Any JavaScript function defined in your script that begins with &quot;<code>shinyjs.</code>&quot;
and that's provided in the <code>functions</code> argument will be available to run
from R using the &quot;<code style="white-space: pre;">js$</code>&quot; variable. For example, if you write a JavaScript function
called &quot;<code>shinyjs.myfunc</code>&quot; and used <code>functions = c("myfunc")</code>, then you can call it
from R with <code>js$myfunc()</code>.
</p>
<p>It's recommended to write JavaScript code in a separate file and provide the
filename as the <code>script</code> argument, but it's also possible to use the
<code>text</code> argument to provide a string containing valid JavaScript code.
</p>
<p>Here is a basic example of using <code>extendShinyjs()</code>
to define a function that changes the colour of the page:
</p>
<pre>
library(shiny)
library(shinyjs)

jsCode &lt;- "shinyjs.pageCol = function(params){$('body').css('background', params);}"

shinyApp(
  ui = fluidPage(
    useShinyjs(),
    extendShinyjs(text = jsCode, functions = c("pageCol")),
    selectInput("col", "Colour:",
                c("white", "yellow", "red", "blue", "purple"))
  ),
  server = function(input, output) {
    observeEvent(input$col, {
      js$pageCol(input$col)
    })
  }
)
</pre>
<p>You can add more functions to the JavaScript code, but remember that every
function you want to use in R has to have a name beginning with
&quot;<code>shinyjs.</code>&quot;. See the section on passing arguments and the examples below
for more information on how to write effective functions.
</p>

<h3>Running JavaScript code on page load</h3>

<p>If there is any JavaScript code that you want to run immediately when the page loads,
you can place it inside a <code>shinyjs.init</code> function. The function <code>shinyjs.init</code>
will automatically be called when the Shiny app's HTML is initialized. A common
use for this is when registering event handlers or initializing JavaScript objects,
as these usually just need to run once when the page loads. The <code>functions</code> parameter
does not need to be told about the <code>init</code> function, so you can use an empty list
such as <code>functions = c()</code> (or if you have an init function together with other shinyjs
functions, simply list all the functions except for <code>init</code>).
</p>
<p>For example, the following example uses <code>shinyjs.init</code> to register an event
handler so that every keypress will print its corresponding key code:
</p>
<pre>
jscode &lt;- "
shinyjs.init = function() {
  $(document).keypress(function(e) { alert('Key pressed: ' + e.which); });
}"
shinyApp(
  ui = fluidPage(
    useShinyjs(),
    extendShinyjs(text = jscode, functions = c()),
    "Press any key"
  ),
  server = function(input, output) {}
)
</pre>

<h3>Passing arguments from R to JavaScript</h3>

<p>Any <code>shinyjs</code> function that is called will pass a single array-like
parameter to its corresponding JavaScript function. If the function in R was
called with unnamed arguments, then it will pass an Array of the arguments;
if the R arguments are named then it will pass an Object with key-value pairs.
</p>
<p>For example, calling <code>js$foo("bar", 5)</code> in R will call <code>shinyjs.foo(["bar", 5])</code>
in JS, while calling <code>js$foo(num = 5, id = "bar")</code> in R will call
<code>shinyjs.foo({num : 5, id : "bar"})</code> in JS. This means that the
<code>shinyjs.foo</code> function needs to be able to deal with both types of
parameters.
</p>
<p>To assist in normalizing the parameters, <code>shinyjs</code> provides a
<code>shinyjs.getParams()</code> function which serves two purposes. First of all,
it ensures that all arguments are named (even if the R function was called
without names). Secondly, it allows you to define default values for arguments.
</p>
<p>Here is an example of a JS function that changes the background colour of an
element and uses <code>shinyjs.getParams()</code>.
</p>
<pre>
shinyjs.backgroundCol = function(params) {
  var defaultParams = {
    id : null,
    col : "red"
  };
  params = shinyjs.getParams(params, defaultParams);

var el = $("#" + params.id);
  el.css("background-color", params.col);
}
</pre>
<p>Note the <code>defaultParams</code> object that was defined and the call to
<code>shinyjs.getParams</code>. It ensures that calling <code>js$backgroundCol("test", "blue")</code>
and <code>js$backgroundCol(id = "test", col = "blue")</code> and
<code>js$backgroundCol(col = "blue", id = "test")</code> are all equivalent, and
that if the colour parameter is not provided then &quot;red&quot; will be the default.
</p>
<p>All the functions provided in <code>shinyjs</code> make use of <code>shinyjs.getParams</code>,
and it is highly recommended to always use it in your functions as well.
Notice that the order of the arguments in <code>defaultParams</code> in the
JavaScript function matches the order of the arguments when calling the
function in R with unnamed arguments.
</p>
<p>See the examples below for a shiny app that uses this JS function.
</p>

<p>You still need to call <code>useShinyjs()</code> as usual, and the call to
<code>useShinyjs()</code> must come before the call to <code>extendShinyjs()</code>.
</p>

<p><code><a href="runExample.html">runExample</a></code>
</p>

<h3>Examples</h3>

<pre>
## Not run: 
  # Example 1:
  # Change the page background to a certain colour when a button is clicked.

jsCode &lt;- "shinyjs.pageCol = function(params){$('body').css('background', params);}"

# ==============

# Example 2:
  # Change the background colour of an element, using "red" as default

jsCode &lt;- '
    shinyjs.backgroundCol = function(params) {
      var defaultParams = {
        id : null,
        col : "red"
      };
      params = shinyjs.getParams(params, defaultParams);

var el = $("#" + params.id);
      el.css("background-color", params.col);
    }'

shinyApp(
      ui = fluidPage(
        useShinyjs(),
        extendShinyjs(text = jsCode, functions = c("backgroundCol")),
        p(id = "name", "My name is Dean"),
        p(id = "sport", "I like soccer"),
        selectInput("col", "Colour",
                    c("green", "yellow", "red", "blue", "white")),
        selectInput("selector", "Element", c("sport", "name", "button")),
        actionButton("button", "Go")
      ),
      server = function(input, output) {
        observeEvent(input$button, {
          js$backgroundCol(input$selector, input$col)
        })
      }
    )

# ==============

# Example 3:
  # Create an `increment` function that increments the number inside an HTML
  # tag (increment by 1 by default, with an optional parameter). Use a separate
  # file instead of providing the JS code in a string.

# Create a JavaScript file "myfuncs.js" in a "www/" directory:
    shinyjs.increment = function(params) {
      var defaultParams = {
        id : null,
        num : 1
      };
      params = shinyjs.getParams(params, defaultParams);

var el = $("#" + params.id);
      el.text(parseInt(el.text()) + params.num);
    }

# And a shiny app that uses the custom function we just defined. Note how
  # the arguments can be either passed as named or unnamed, and how default
  # values are set if no value is given to a parameter.

library(shiny)
      shinyApp(
        ui = fluidPage(
          useShinyjs(),
          extendShinyjs("myfuncs.js", functions = c("increment")),
          p(id = "number", 0),
          actionButton("add", "js$increment('number')"),
          actionButton("add5", "js$increment('number', 5)"),
          actionButton("add10", "js$increment(num = 10, id = 'number')")
        ),
        server = function(input, output) {
          observeEvent(input$add, {
            js$increment('number')
          })
          observeEvent(input$add5, {
            js$increment('number', 5)
          })
          observeEvent(input$add10, {
            js$increment(num = 10, id = 'number')
          })
        }
      )

## End(Not run)
</pre>

<hr /><div style="text-align: center;">[Package <em>shinyjs</em> version 2.1.0 <a href="00Index.html">Index</a>]</div>
</body></html>