First customization of the shiny input

inst/shiny-input-app/dev-shiny-input.Rmd

@@ -117,6 +117,8 @@ ui <- fluidPage(
 
 ## Start creating an input binding for `typingSpeedInput()`
 
+`r github_sha_link("02adb896c50a97ebe7f9a7fef2a6f00488f9418d")`
+
 Now we can open `typing.js` and create a Shiny input binding.
 
 If you used `js4shiny::snippets_install()`,
@@ -193,3 +195,36 @@ Shiny.inputBindings.register(bindingName, 'pkgName.bindingName');
 ```
 
 </details>
+
+If you use the snippet,
+it automatically walks you through 
+the first pass of parts that need to be changed.
+If you copied the template,
+you need to find and replace all:
+
+- `bindingName`: the name of the JavaScript object with the specifics of your
+  Shiny input. This name isn't user facing, but helps Shiny keep track of which
+  the inputs in an app.
+  
+  We'll call ours `typingSpeed`
+  
+- `inputBindingSelector`: this is the CSS selector that can be used to find
+  the HTML element of your input. The element you find here is the element in
+  your input's HTML that has the `id` with the input's `inputId`.
+  
+  In our case, we want the `textarea` element 
+  that's a descendent of `.typing-speed`, so we use
+  
+  ```css
+  .typing-speed textarea
+  ```
+  
+- `change`: This is the event that will be listened to by Shiny to know when
+  the input has updated. For our typing speed input, we're going to listen to
+  the `keyup` event.
+  
+- `pkgName`: if you're writing this input as part of a package, use your package
+  name. It's not critical; this just provides some namespacing in case there's
+  another package that impelements an in put with the same `bindingName`.
+  
+  Here we use `js4shiny`.

inst/shiny-input-app/typing.js

@@ -1,15 +1,15 @@
 // Ref: https://shiny.rstudio.com/articles/building-inputs.html
 // Ref: https://github.com/rstudio/shiny/blob/master/srcjs/input_binding.js
 
-const bindingName = new Shiny.InputBinding();
+const typingSpeed = new Shiny.InputBinding();
 
-$.extend(bindingName, {
+$.extend(typingSpeed, {
   find: function(scope) {
     // Specify the selector that identifies your input. `scope` is a general
     // parent of your input elements. This function should return the nodes of
     // ALL of the inputs that are inside `scope`. These elements should all
     // have IDs that are used as the inputId on the server side.
-    return scope.querySelectorAll("inputBindingSelector");
+    return scope.querySelectorAll(".typing-speed textarea");
   },
   getValue: function(el) {
     // For a particular input, this function is given the element containing
@@ -25,24 +25,24 @@ $.extend(bindingName, {
     // Basically, reverses .getValue()
 
     // e.g.; el.value = value
-    console.error('bindingName.setValue() is not yet defined');
+    console.error('typingSpeed.setValue() is not yet defined');
   },
   receiveMessage: function(el, data) {
     // Given the input's container and data, update the input
     // and its elements to reflect the given data.
     // The messages are sent from R/Shiny via
     // R> session$sendInputMessage(inputId, data)
-    console.error('bindingName.receiveMessage() is not yet defined');
+    console.error('typingSpeed.receiveMessage() is not yet defined');
 
     // If you want the update to trigger reactivity, trigger a subscribed event
-    $(el).trigger("change")
+    // $(el).trigger("keyup")
   },
   subscribe: function(el, callback) {
     // Listen to events on your input element. The following block listens to
     // the change event, but you might want to listen to another event.
     // Repeat the block for each event type you want to subscribe to.
 
-    $(el).on("change.bindingName", function(e) {
+    $(el).on("keyup.typingSpeed", function(e) {
       // Use callback() or callback(true).
       // If using callback(true) the rate policy applies,
       // for example if you need to throttle or debounce
@@ -57,8 +57,8 @@ $.extend(bindingName, {
     };
   },
   unsubscribe: function(el) {
-    $(el).off(".bindingName");
+    $(el).off(".typingSpeed");
   }
 });
 
-Shiny.inputBindings.register(bindingName, 'pkgName.bindingName');
+Shiny.inputBindings.register(typingSpeed, 'js4shiny.typingSpeed');