EVOLUTION-MANAGER

Edit File: shinyjs-extend.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>extendShinyjs: Calling your own JavaScript functions from R</title>

body {
  max-width: 800px;
  margin: auto;
  padding: 1em;
  line-height: 20px;
}

tt, code, pre {
   font-family: 'DejaVu Sans Mono', 'Droid Sans Mono', 'Lucida Console', Consolas, Monaco, monospace;
}

h1 {
   font-size:2.2em;
}

h2 {
   font-size:1.8em;
}

h3 {
   font-size:1.4em;
}

h4 {
   font-size:1.0em;
}

h5 {
   font-size:0.9em;
}

h6 {
   font-size:0.8em;
}

a:visited {
   color: rgb(50%, 0%, 50%);
}

pre, img {
  max-width: 100%;
}
pre {
  overflow-x: auto;
}
pre code {
   display: block; padding: 0.5em;
}

code {
  font-size: 92%;
  border: 1px solid #ccc;
}

code[class] {
  background-color: #F8F8F8;
}

table, td, th {
  border: none;
}

blockquote {
   color:#666666;
   margin:0;
   padding-left: 1em;
   border-left: 0.5em #EEE solid;
}

hr {
   height: 0px;
   border-bottom: none;
   border-top-width: thin;
   border-top-style: dotted;
   border-top-color: #999999;
}

@media print {
   * {
      background: transparent !important;
      color: black !important;
      filter:none !important;
      -ms-filter: none !important;
   }

body {
      font-size:12pt;
      max-width:100%;
   }

a, a:visited {
      text-decoration: underline;
   }

hr {
      visibility: hidden;
      page-break-before: always;
   }

pre, blockquote {
      padding-right: 1em;
      page-break-inside: avoid;
   }

tr, img {
      page-break-inside: avoid;
   }

img {
      max-width: 100% !important;
   }

@page :left {
      margin: 15mm 20mm 15mm 10mm;
   }

@page :right {
      margin: 15mm 10mm 15mm 20mm;
   }

p, h2, h3 {
      orphans: 3; widows: 3;
   }

h2, h3 {
      page-break-after: avoid;
   }
}
</style>

</head>

<body>
<h1>extendShinyjs: Calling your own JavaScript functions from R</h1>

<h2 id="extendshinyjs-simple">Simple example</h2>

<p>Using <code>extendShinyjs()</code> is simple and makes defining and calling JavaScript functions painless. Here is a very basic example of using <code>extendShinyjs()</code> to define a (fairly useless) function that changes the colour of the page.</p>

<pre><code>library(shiny)
library(shinyjs)

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

shinyApp(
  ui = fluidPage(
    useShinyjs(),
    extendShinyjs(text = jsCode, functions = c(&quot;pageCol&quot;)),
    selectInput(&quot;col&quot;, &quot;Colour:&quot;,
                c(&quot;white&quot;, &quot;yellow&quot;, &quot;red&quot;, &quot;blue&quot;, &quot;purple&quot;))
  ),
  server = function(input, output) {
    observeEvent(input$col, {
      js$pageCol(input$col)
    })
  }
)
</code></pre>

<p>Running the code above produces this shiny app:</p>

<p>See how easy that was? All I had to do was make the JavaScript function <code>shinyjs.pageCol</code>, pass the JavaScript code as an argument to <code>extendShinyjs()</code>, and then I can call <code>js$pageCol()</code>.</p>

<p>That&#39;s the basic idea: any JavaScript function named <code>shinyjs.foo</code> will be available to call as <code>js$foo()</code>. You can either pass the JS code as a string to the <code>text</code> argument, or place the JS code in a separate JavaScript file and use the <code>script</code> argument to specify where the code can be found. Using a separate file is generally preferred over writing the code inline, but in these examples I will always use the <code>text</code> argument to keep it simple.</p>

<blockquote>
<p>Note on using the <code>script</code> parameter: The script path is not necessarily a local path to the script file, rather it&#39;s a path that must be discoverable by the browser. It either needs to be a public URL, inside a <code>www</code> folder, or available via <code>addResourcePath()</code>.</p>
</blockquote>

<h2 id="extendshinyjs-onload">Running JavaScript code on page load</h2>

<p>If there is any JavaScript code that you want to run immediately when the page loads rather than having to call it from the server, 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&#39;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.</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><code>jscode &lt;- &quot;
shinyjs.init = function() {
  $(document).keypress(function(e) { alert(&#39;Key pressed: &#39; + e.which); });
}&quot;

shinyApp(
  ui = fluidPage(
    useShinyjs(),
    extendShinyjs(text = jscode, functions = c()),
    &quot;Press any key&quot;
  ),
  server = function(input, output) {}
)
</code></pre>

<h2 id="extendshinyjs-args">Passing arguments from R to JavaScript</h2>

<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(&quot;bar&quot;, 5)</code> in R will call <code>shinyjs.foo([&quot;bar&quot;, 5])</code> in JS, while calling <code>js$foo(num = 5, id = &quot;bar&quot;)</code> in R will call <code>shinyjs.foo({num : 5, id : &quot;bar&quot;})</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><code>shinyjs.backgroundCol = function(params) {
  var defaultParams = {
    id : null,
    col : &quot;red&quot;
  };
  params = shinyjs.getParams(params, defaultParams);

var el = $(&quot;#&quot; + params.id);
  el.css(&quot;background-color&quot;, params.col);
}
</code></pre>

<p>Note the <code>defaultParams</code> that we defined and the call to <code>shinyjs.getParams</code>. It ensures that calling <code>js$backgroundCol(&quot;test&quot;, &quot;blue&quot;)</code> and <code>js$backgroundCol(id = &quot;test&quot;, col = &quot;blue&quot;)</code> and <code>js$backgroundCol(col = &quot;blue&quot;, id = &quot;test&quot;)</code> are all equivalent, and that if the colour parameter is not provided then &ldquo;red&rdquo; 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>For completeness, here is the code for a shiny app that uses the above function (it&#39;s not a very practical example, but it&#39;s great for showing how to use <code>extendShinyjs</code> with parameters):</p>

<pre><code>library(shiny)
library(shinyjs)

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

var el = $(&quot;#&quot; + params.id);
  el.css(&quot;background-color&quot;, params.col);
}&#39;

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

<p>And the resulting app:</p>

<p>Note that I chose to define the JS code as a string for illustration purposes, but in reality I would prefer to place the code in a separate file and use the <code>script</code> argument instead of <code>text</code>.</p>

</body>

</html>