@semantic-ui/templating - npm Package Compare versions

Comparing version 0.0.25 to 0.0.26

package.json

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

src/template-helpers.js

@@ -28,13 +28,7 @@ import { Reaction } from '@semantic-ui/reactivity';
   hasAny(a) {
-    a?.length > 0;
+    return a?.length > 0;
   },
-  is(a, b) {
-    return a == b;
-  },
   concat(a, b) {
     return a + b;
   },
-  not(a) {
-    return !a;
-  },
   both(a, b) {
@@ -83,15 +77,21 @@ return a && b;
   },
-  isEqual(a, b) {
-    return a == b;
-  },
   maybePlural(value, plural = 's') {
     return value == 1 ? '' : plural;
   },
-  isNotEqual(a, b) {
+  is(a, b) {
+    if(b == undefined) {
+      return a == true;
+    }
+    return a == b;
+  },
+  not(a, b) {
+    if(b == undefined) {
+      return a == false;
+    }
     return a != b;
   },
-  isExactlyEqual(a, b) {
+  isEqual(a, b) {
     return a === b;
   },
-  isNotExactlyEqual(a, b) {
+  isNotEqual(a, b) {
     return a !== b;
@@ -98,0 +98,0 @@ },

src/template.js

 import { $ } from '@semantic-ui/query';
-import { capitalize, fatal, each, remove, clone, generateID, isEqual, noop, isServer, inArray, isFunction, extend, wrapFunction } from '@semantic-ui/utils';
+import { capitalize, fatal, each, remove, any, clone, generateID, getKeyFromEvent, isEqual, noop, isServer, inArray, isFunction, extend, wrapFunction } from '@semantic-ui/utils';
 import { ReactiveVar, Reaction } from '@semantic-ui/reactivity';
@@ -23,2 +23,3 @@
     events,
+    keys,
     stateConfig,
@@ -42,2 +43,3 @@ subTemplates,
     this.events = events;
+    this.keys = keys || {};
     this.ast = ast;
@@ -88,3 +90,2 @@ this.css = css;
     this.data = data;
-    this.tpl.data = data;
     if(rerender) {
@@ -97,2 +98,5 @@ this.rendered = false;
   setParent(parentTemplate) {
+    if(!parentTemplate._childTemplates) {
+      parentTemplate._childTemplates = [];
+    }
     parentTemplate._childTemplates.push(this);
@@ -114,30 +118,11 @@ this.parentTemplate = parentTemplate;
     if (isFunction(this.createInstance)) {
-      this.tpl = { data: this.data };
+      this.tpl = {};
       tpl = this.call(this.createInstance) || {};
       extend(this.tpl, tpl);
     }
-    // reactions bound with tpl.reaction will be scoped to template
-    // and be removed when the template is destroyed
-    this.tpl.reaction = this.reaction.bind(this);
     if (isFunction(tpl.initialize)) {
       this.call(tpl.initialize.bind(this));
     }
-    this.tpl.data = this.data;
-    this.tpl._childTemplates = [];
-
-    /* This will be removed before release
-      will need to refactor some examples
-    */
-    this.tpl.$ = this.$.bind(this);
-    this.tpl.$$ = this.$$.bind(this);
-    this.tpl.attachEvent = this.attachEvent.bind(this);
     this.tpl.templateName = this.templateName;
 
-    this.tpl.findTemplate = this.findTemplate;
-    this.tpl.dispatchEvent = this.dispatchEvent.bind(this);
-    this.tpl.findParent = this.findParent.bind(this);
-    this.tpl.findChild = this.findChild.bind(this);
-    this.tpl.findChildren = this.findChildren.bind(this);
-    /* end of removed section */
-
     this.onCreated = () => {
@@ -199,4 +184,5 @@ this.call(this.onCreatedCallback);
     this.attachEvents();
+    this.bindKeys();
     if (this.attachStyles) {
-      await this.addAdoptedStylesheet();
+      await this.adoptStylesheet();
     }
@@ -213,3 +199,3 @@ }
 
-  async addAdoptedStylesheet() {
+  async adoptStylesheet() {
     if (!this.css) {
@@ -249,2 +235,3 @@ return;
       events: this.events,
+      keys: this.keys,
       renderingEngine: this.renderingEngine,
@@ -287,2 +274,3 @@ subTemplates: this.subTemplates,
     let addedEvents = false;
+    let addedSelectors = false;
     const eventNames = [];
@@ -292,23 +280,24 @@ const selectors = [];
       const value = part.replace(/(\,|\W)+$/, '').trim();
+      const hasComma = part.includes(',');
       if(!addedEvents) {
         eventNames.push(getBubbledEvent(value));
-        addedEvents = (part.includes(',') === false);
+        addedEvents = !hasComma;
       }
-      else {
-        selectors.push(value);
+      else if(!addedSelectors) {
+        const selectorParts = parts.slice(index).join(' ').split(',');
+        each(selectorParts, (value) => {
+          selectors.push(value.trim());
+        });
+        addedSelectors = true;
       }
     });
-    if(eventNames.length > 1) {
-      each(eventNames, (eventName) => {
-        events.push({ eventName, selector: selectors[0] });
-      });
-    }
-    else if(selectors.length > 1) {
+    each(eventNames, (eventName) => {
+      // this event has no selectors which means it should occur on component
+      if(!selectors.length) {
+        selectors.push('');
+      }
       each(selectors, (selector) => {
-        events.push({ eventName: eventNames[0], selector });
+        events.push({ eventName, selector });
       });
-    }
-    else {
-      events.push({ eventName: eventNames[0], selector: selectors[0] || '' });
-    }
+    });
     return events;
@@ -349,3 +338,3 @@ }
         }
-        $(this.renderRoot, { pierceShadow: true }).on(
+        $(this.renderRoot).on(
           eventName,
@@ -385,2 +374,63 @@ selector,
 
+  bindKeys(keys = this.keys) {
+    if(isServer) {
+      return;
+    }
+    if(Object.keys(keys).length == 0) {
+      return;
+    }
+    const sequenceTimeout = 500; // time in ms required between keypress
+    const eventSettings = { abortController: this.eventController };
+    this.currentSequence = '';
+    $(document)
+      .on('keydown', (event) => {
+        const key = getKeyFromEvent(event);
+        let repeatedKey = key == this.currentKey;
+        this.currentKey = key;
+        this.currentSequence += key;
+
+        // check for key event
+        each(this.keys, (handler, keySequence) => {
+          keySequence = keySequence.replace(/\s*\+\s*/g, '+'); // remove space around +
+          const keySequences = keySequence.split(',');
+          if(any(keySequences, sequence => this.currentSequence.endsWith(sequence))) {
+
+            const inputFocused = document.activeElement instanceof HTMLElement &&
+              (['input', 'select', 'textarea'].includes(document.activeElement.tagName.toLowerCase()) ||
+                document.activeElement.isContentEditable);
+
+            const eventResult = this.call(handler, { additionalData: { event: event, inputFocused, repeatedKey } });
+            if(eventResult !== true) {
+              event.preventDefault();
+            }
+          }
+        });
+
+        // start next sequence
+        this.currentSequence += ' ';
+
+        // end sequence if not occuring in time
+        clearTimeout(this.resetSequence);
+        this.resetSequence = setTimeout(() => { this.currentSequence = ''; }, sequenceTimeout);
+
+      }, eventSettings)
+      .on('keyup', (event) => { this.currentKey = ''; })
+    ;
+  }
+
+  bindKey(key, callback) {
+    if(!key || !callback) {
+      return;
+    }
+    const needsInit = Object.keys(this.keys).length == 0;
+    this.keys[key] = callback;
+    if(needsInit) {
+      this.bindKeys();
+    }
+  }
+
+  removeKey(key) {
+    delete this.keys[key];
+  }
+
   // Find the direct child of the renderRoot that is an ancestor of the event.target
@@ -435,10 +485,12 @@ // then confirm position
     this.setDataContext(dataContext, { rerender: false });
-    const html = this.renderer.render({
-      data: dataContext,
-    });
+
+    this.renderer.setData(dataContext);
+
+    // render will rerender the AST creating new lit html
     if (!this.rendered) {
+      this.html = this.renderer.render();
       setTimeout(this.onRendered, 0); // actual render occurs after html is parsed
     }
     this.rendered = true;
-    return html;
+    return this.html;
   }
@@ -491,7 +543,7 @@
 
-        data: this.tpl.data,
+        data: this.data,
         settings: this.element.settings,
         state: this.state,
 
-        isRendered: this.rendered,
+        isRendered: () => this.rendered,
         isServer: Template.isServer,
@@ -502,2 +554,3 @@ isClient: !Template.isServer,
         attachEvent: this.attachEvent.bind(this),
+        bindKey: this.bindKey.bind(this),
         abortController: this.eventController,
@@ -549,3 +602,3 @@
       const callback = this.element[callbackName];
-      wrapFunction(callback).call(this, eventData);
+      wrapFunction(callback).call(this.element, eventData);
     }
@@ -561,2 +614,4 @@
 
+  // reactions bound with this.reaction will be scoped to template
+  // and be removed when the template is destroyed
   reaction(reaction) {
@@ -563,0 +618,0 @@ this.reactions.push(Reaction.create(reaction));

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

76522

increased by2.24%

Lines of code

2195

increased by2.14%

Dependency changes

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

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

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

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

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

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

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

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

• Updated@semantic-ui/component@^0.0.26

• Updated@semantic-ui/query@^0.0.26

• Updated@semantic-ui/reactivity@^0.0.26

• Updated@semantic-ui/templating@^0.0.26

• Updated@semantic-ui/utils@^0.0.26