expose methods on React.ujs

Author: robrobbins

lib/assets/javascripts/react_ujs_p.js

@@ -0,0 +1,93 @@
+// Unobtrusive scripting adapter for React
+(function(document, window, React) {
+  
+  // jQuery is optional. Use it to support legacy browsers.
+  var $ = (typeof window.jQuery !== 'undefined') && window.jQuery;
+  
+  // rather than create another namespace just for the 3 methods and 2
+  // propertios we expose just append them to the `React.ujs` object
+  React.ujs = {
+    
+    CLASS_NAME_ATTR: 'data-react-class',
+    
+    PROPS_ATTR: 'data-react-props',
+    
+    // helper method for the mount and unmount methods to find the 
+    // `data-react-class` DOM elements
+    findDOMNodes: function() {
+      
+      var selector = '[' + React.ujs.CLASS_NAME_ATTR + ']';
+      
+      if ($) return $(selector);
+      
+      else return document.querySelectorAll(selector);
+    },
+    
+    mountComponents: function() {
+      
+      // we will use fully qualified paths as we do not bind the callbacks
+      var nodes = React.ujs.findDOMNodes();
+      
+      for (var i = 0; i < nodes.length; ++i) {
+        var node = nodes[i];
+        var className = node.getAttribute(React.ujs.CLASS_NAME_ATTR);
+        
+        // Assume className is simple and can be found at top-level (window).
+        // Fallback to eval to handle cases like 'My.React.ComponentName'.
+        var constructor = window[className] || eval.call(window, className);
+        var propsJson = node.getAttribute(React.ujs.PROPS_ATTR);
+        var props = propsJson && JSON.parse(propsJson);
+        
+        React.render(React.createElement(constructor, props), node);
+      }
+    },
+    
+    unmountComponents: function() {
+      var nodes = React.ujs.findDOMNodes();
+      
+      for (var i = 0; i < nodes.length; ++i) {
+        
+        React.unmountComponentAtNode(nodes[i]);
+        
+      }
+    }
+  };
+
+  // functions not exposed publicly
+  function handleTurbolinksEvents () {
+    var handleEvent;
+    
+    if ($) {
+      
+      handleEvent = function(eventName, callback) {
+        $(document).on(eventName, callback);
+      };
+      
+    } else {
+      
+      handleEvent = function(eventName, callback) {
+        document.addEventListener(eventName, callback);
+      };
+      
+    }
+    handleEvent('page:change', React.ujs.mountComponents);
+    handleEvent('page:receive', React.ujs.unmountComponents);
+  }
+
+  function handleNativeEvents() {
+    if ($) {
+      
+      $(React.ujs.mountComponents);
+      $(window).unload(React.ujs.unmountComponents);
+      
+    } else {
+      
+      document.addEventListener('DOMContentLoaded', React.ujs.mountComponents);
+      window.addEventListener('unload', React.ujs.unmountComponents);
+    }
+  }
+
+  typeof Turbolinks !== 'undefined' ? 
+    handleTurbolinksEvents() : handleNativeEvents();
+  
+})(document, window, React);