react-shadow - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

bower.json

 {
   "name": "react-shadow",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "homepage": "https://github.com/Wildhoney/ReactShadow",
@@ -5,0 +5,0 @@ "authors": [

component/ReactShadow.js

@@ -44,3 +44,8 @@ (function main($window, $document) {
 
-            this.shadowRoot.addEventListener('click', function onClick(event) {
+            /**
+             * @method redirectEvent
+             * @param event {Object}
+             * @return {Function}
+             */
+            var redirectEvent = function redirectEvent(event) {
 
@@ -51,6 +56,16 @@ event.stopPropagation();
                 var targetId = event.target.getAttribute('data-reactid'),
-                    element  = $document.querySelector('*[data-reactid="' + targetId + '"]');
+                    element = $document.querySelector('*[data-reactid="' + targetId + '"]');
 
-                element.click();
+                var customEvent = $document.createEvent('Events');
+                customEvent.initEvent(event.type, true, false );
+                element.dispatchEvent(customEvent);
 
+            };
+
+            // List of all events that should be intercepted and re-routed.
+            var eventsList = ['click', 'dblclick', 'mouseup', 'mouseout', 'mouseover', 'mousedown', 'mouseenter',
+                'mouseleave', 'contextmenu'];
+
+            eventsList.forEach(function forEach(eventName) {
+                this.shadowRoot.addEventListener(eventName, redirectEvent);
             }.bind(this));
@@ -57,0 +72,0 @@

dist/react-shadow.js

@@ -44,3 +44,8 @@ (function main($window, $document) {
 
-            this.shadowRoot.addEventListener('click', function onClick(event) {
+            /**
+             * @method redirectEvent
+             * @param event {Object}
+             * @return {Function}
+             */
+            var redirectEvent = function redirectEvent(event) {
 
@@ -51,6 +56,16 @@ event.stopPropagation();
                 var targetId = event.target.getAttribute('data-reactid'),
-                    element  = $document.querySelector('*[data-reactid="' + targetId + '"]');
+                    element = $document.querySelector('*[data-reactid="' + targetId + '"]');
 
-                element.click();
+                var customEvent = $document.createEvent('Events');
+                customEvent.initEvent(event.type, true, false );
+                element.dispatchEvent(customEvent);
 
+            };
+
+            // List of all events that should be intercepted and re-routed.
+            var eventsList = ['click', 'dblclick', 'mouseup', 'mouseout', 'mouseover', 'mousedown', 'mouseenter',
+                'mouseleave', 'contextmenu'];
+
+            eventsList.forEach(function forEach(eventName) {
+                this.shadowRoot.addEventListener(eventName, redirectEvent);
             }.bind(this));
@@ -57,0 +72,0 @@

dist/react-shadow.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"use strict";t.ReactShadow={shadowRoot:{},componentDidMount:function(){var t=this.shadowRoot=this.getDOMNode().parentNode.createShadowRoot(),n=e.createElement("template");n.content.appendChild(this.getDOMNode().cloneNode(!0)),this.attachCSSDocuments(n);var o=e.importNode(n.content,!0);t.appendChild(o),this.interceptEvents()},interceptEvents:function(){this.shadowRoot.addEventListener("click",function(t){t.stopPropagation(),t.preventDefault();var n=t.target.getAttribute("data-reactid"),o=e.querySelector('*[data-reactid="'+n+'"]');o.click()}.bind(this))},componentDidUpdate:function(){var t=this.shadowRoot.querySelector(":not(style)");t.innerHTML="";for(var e=this.getDOMNode(),n=e.children,o=n.length,i=0;o>i;i++)t.appendChild(e.children[i].cloneNode(!0))},attachCSSDocuments:function(t){if(this.cssDocuments){var n="function"==typeof this.cssDocuments,o=n?this.cssDocuments():this.cssDocuments;o.forEach(function(n){var o=e.createElement("style");o.innerHTML='@import "'+n+'"',t.content.appendChild(o)})}return t},cleanElements:function(){for(var t=this.getDOMNode().children,e=t.length;e--;)t[e].remove()}}}(window,window.document);
+!function(t,e){"use strict";t.ReactShadow={shadowRoot:{},componentDidMount:function(){var t=this.shadowRoot=this.getDOMNode().parentNode.createShadowRoot(),n=e.createElement("template");n.content.appendChild(this.getDOMNode().cloneNode(!0)),this.attachCSSDocuments(n);var o=e.importNode(n.content,!0);t.appendChild(o),this.interceptEvents()},interceptEvents:function(){var t=function(t){t.stopPropagation(),t.preventDefault();var n=t.target.getAttribute("data-reactid"),o=e.querySelector('*[data-reactid="'+n+'"]'),c=e.createEvent("Events");c.initEvent(t.type,!0,!1),o.dispatchEvent(c)},n=["click","dblclick","mouseup","mouseout","mouseover","mousedown","mouseenter","mouseleave","contextmenu"];n.forEach(function(e){this.shadowRoot.addEventListener(e,t)}.bind(this))},componentDidUpdate:function(){var t=this.shadowRoot.querySelector(":not(style)");t.innerHTML="";for(var e=this.getDOMNode(),n=e.children,o=n.length,c=0;o>c;c++)t.appendChild(e.children[c].cloneNode(!0))},attachCSSDocuments:function(t){if(this.cssDocuments){var n="function"==typeof this.cssDocuments,o=n?this.cssDocuments():this.cssDocuments;o.forEach(function(n){var o=e.createElement("style");o.innerHTML='@import "'+n+'"',t.content.appendChild(o)})}return t},cleanElements:function(){for(var t=this.getDOMNode().children,e=t.length;e--;)t[e].remove()}}}(window,window.document);

example/js/App.jsx

@@ -75,5 +75,4 @@ (function main($react) {
         render: function render() {
-            return <section>
-                       <h1 className="title">ReactShadow Example: {this.state.refreshed}</h1>
-                       <a title="Reset Counter" className="reset" onClick={this.reset}>Reset Counter</a>
+            return <section onClick={this.reset} title="Reset Counter">
+                       <h1 className="title">{this.state.refreshed}</h1>
                    </section>
@@ -80,0 +79,0 @@ }

package.json

 {
   "name": "react-shadow",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Use Shadow DOM with React.js and CSS imports; write your component styles in CSS!",
@@ -5,0 +5,0 @@ "main": "dist/react-shadow.min.js",

No alert changes

Improved metrics

Total package byte prevSize

20206

increased by7.29%

Lines of code

399

increased by5.84%

No dependency changes