@semantic-ui/templating - npm Package Compare versions

Comparing version 0.0.36 to 0.0.37

package.json

@@ -8,9 +8,9 @@ {
   "dependencies": {
-    "@semantic-ui/component": "^0.0.36",
-    "@semantic-ui/query": "^0.0.36",
-    "@semantic-ui/reactivity": "^0.0.36",
-    "@semantic-ui/templating": "^0.0.36",
-    "@semantic-ui/utils": "^0.0.36"
+    "@semantic-ui/component": "^0.0.37",
+    "@semantic-ui/query": "^0.0.37",
+    "@semantic-ui/reactivity": "^0.0.37",
+    "@semantic-ui/templating": "^0.0.37",
+    "@semantic-ui/utils": "^0.0.37"
   },
-  "version": "0.0.36"
+  "version": "0.0.37"
 }

src/template.js

@@ -264,2 +264,18 @@ import { $ } from '@semantic-ui/query';
   parseEventString(eventString) {
+
+    // we want to allow 3 types of event syntax
+    // 'deep eventType selector' - attach event to an
+    // 'global eventType selector' - attach event to an element on the page
+    // 'eventType selector' - bind to an element inside the web component
+    let eventType = 'delegated';
+    let keywords = ['deep', 'global'];
+    each(keywords, (keyword) => {
+      if(eventString.startsWith(keyword)) {
+        eventString = eventString.replace(keyword, '');
+        eventType = keyword;
+      }
+    });
+
+    eventString = eventString.trim();
+
     // we are using event delegation so we will have to bind
@@ -281,3 +297,2 @@ // some events to their corresponding event that bubbles
     };
-
     let events = [];
@@ -290,2 +305,3 @@ let parts = eventString.split(/\s+/);
     const selectors = [];
+    // parse out various syntax like `click, mousedown foo`, `click .foo, .bar`
     each(parts, (part, index) => {
@@ -312,3 +328,3 @@ const value = part.replace(/(\,|\W)+$/, '').trim();
       each(selectors, (selector) => {
-        events.push({ eventName, selector });
+        events.push({ eventName, eventType, selector });
       });
@@ -341,7 +357,8 @@ });
 
-    each(events, (eventHandler, eventString) => {
+    each(events, (userHandler, eventString) => {
       const subEvents = this.parseEventString(eventString);
       const template = this;
       each(subEvents, (event) => {
-        const { eventName, selector } = event;
+        const { eventName, selector, eventType } = event;
+
         // BUG: iOS Safari will not bubble the touchstart / touchend events
@@ -352,33 +369,53 @@ // if theres no handler on the actual element
         }
-        $(this.renderRoot).on(
-          eventName,
-          selector,
-          function(event) {
-            if (!template.isNodeInTemplate(event.target)) {
-              return;
-            }
-            if (inArray(eventName, ['mouseover', 'mouseout'])
-              && event.relatedTarget
-              && event.target.contains(event.relatedTarget)) {
-              return;
-            }
-            const targetElement = this;
-            const boundEvent = eventHandler.bind(targetElement);
-            const eventData = event?.detail || {};
-            const elData = targetElement?.dataset;
-            const elValue = targetElement?.value;
-            template.call(boundEvent, {
-              additionalData: {
-                event: event,
-                target: targetElement,
-                value: elValue,
-                data: {
-                  ...elData,
-                  ...eventData
-                }
-              },
-            });
-          },
-          { abortController: this.eventController }
-        );
+
+        const eventHandler = function(event) {
+
+          // check if the event occurred in the current template if not global
+          if (eventType !== 'global' && !template.isNodeInTemplate(event.target)) {
+            return;
+          }
+          // handle related target use case for special events
+          if (inArray(eventName, ['mouseover', 'mouseout'])
+            && event.relatedTarget
+            && event.target.contains(event.relatedTarget)) {
+            return;
+          }
+
+          // check if the event occurred in a slotted element or nested web component
+          const isDeep = $(event.target).closest(selector).length == 0;
+          if(isDeep && eventType !== 'deep') {
+            return;
+          }
+
+          // prepare data for users event handler
+          const targetElement = this;
+          const boundEvent = userHandler.bind(targetElement);
+          const eventData = event?.detail || {};
+          const elData = targetElement?.dataset;
+          const elValue = targetElement?.value;
+
+          template.call(boundEvent, {
+            additionalData: {
+              event: event,
+              isDeep,
+              target: targetElement,
+              value: elValue,
+              data: {
+                ...elData,
+                ...eventData
+              }
+            },
+          });
+        };
+
+        const eventSettings = { abortController: this.eventController };
+
+        if(eventType == 'global') {
+          // allow user to bind to global selectors if they opt in using the 'global' keyword
+          $(selector, { root: document }).on(eventName, eventHandler, eventSettings);
+        }
+        else {
+          // otherwise use event delegation at the components shadow root
+          $(this.renderRoot).on(eventName, selector, eventHandler, eventSettings);
+        }
       });
@@ -606,4 +643,4 @@ });
   // attaches an external event handler making sure to remove the event when the component is destroyed
-  attachEvent(selector, eventName, eventHandler, eventSettings) {
-    return $(selector, document, { pierceShadow: true }).on(eventName, eventHandler, {
+  attachEvent(selector, eventName, eventHandler, { eventSettings = {}, querySettings = { pierceShadow: true } } = {}) {
+    return $(selector, document, querySettings).on(eventName, eventHandler, {
       abortController: this.eventController,
@@ -632,3 +669,3 @@ returnHandler: true,
   /*******************************
-           Reactive Helpers
+          Reactive Helpers
   *******************************/
@@ -635,0 +672,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

82866

increased by1.83%

Lines of code

2359

increased by1.16%

Dependency changes

• + Added@semantic-ui/component@0.0.37(transitive)

• + Added@semantic-ui/query@0.0.37(transitive)

• + Added@semantic-ui/reactivity@0.0.37(transitive)

• + Added@semantic-ui/utils@0.0.37(transitive)

• - Removed@semantic-ui/component@0.0.36(transitive)

• - Removed@semantic-ui/query@0.0.36(transitive)

• - Removed@semantic-ui/reactivity@0.0.36(transitive)

• - Removed@semantic-ui/utils@0.0.36(transitive)

• Updated@semantic-ui/component@^0.0.37

• Updated@semantic-ui/query@^0.0.37

• Updated@semantic-ui/reactivity@^0.0.37

• Updated@semantic-ui/templating@^0.0.37

• Updated@semantic-ui/utils@^0.0.37