add support to trigger focus, click, scrollIntoView

ifedapoolarewaju · Feb 7, 2019 · 1e2da7a · 1e2da7a
1 parent c6cb672
commit 1e2da7a
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 23 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,11 @@
+### 0.1.2 / 2019-02-07 ###
+
+* Add support for triggers
+  - on-[eventType]-trigger-click="[target]"
+  - on-[eventType]-trigger-focus="[target]"
+  - on-[eventType]-trigger-blur="[target]"
+  - on-[eventType]-trigger-scrollIntoView="[target]"
+
 ### 0.1.1 / 2017-04-26 ###
 
 * Mangle variables in dist file for lighter file size.

diff --git a/dist/no.min.js b/dist/no.min.js
diff --git a/example/index.html b/example/index.html
@@ -27,8 +27,8 @@
     <form>
       <div>
         <p>Select country</p>
-        <input type="radio" name="country" value="NG" no-js on-click-set-value="[name=number] +234"> Nigeria
-        <input type="radio" name="country" value="GH" no-js on-click-set-value="[name=number] +233"> Ghana
+        <input type="radio" name="country" value="NG" no-js on-click-set-value="[name=number] +234" on-click-trigger-focus="[name=number]"> Nigeria
+        <input type="radio" name="country" value="GH" no-js on-click-set-value="[name=number] +233" on-click-trigger-focus="[name=number]"> Ghana
       </div>
       <br>
       <br>

diff --git a/no.js b/no.js
@@ -4,6 +4,9 @@
 *   on-[evtType]-[action]-[propertyType] = "target propertyValue"
 *   on-[evtType]-[action]-[propertyType]-self = "propertyName propertyValue"
 *
+* Supported actions:
+*   add, remove, set, toggle, switch, reset, trigger
+*
 * Supported propertyTypes:
 *   attribute:
 *     on-[eventType]-add||set-attribute="[target] [attributeName] [attributeValue]"
@@ -24,11 +27,16 @@
 *     on-[eventType]-reset-value="[form input target]"
 *   text:
 *     on-[eventType]-set-text="[target] [textValue]"
+*   click,blur,focus,scrollIntoView:
+*     on-[eventType]-trigger-click="[target]"
+*     on-[eventType]-trigger-focus="[target]"
+*     on-[eventType]-trigger-blur="[target]"
+*     on-[eventType]-trigger-scrollIntoView="[target]"
 *
 */
 (function() {
   function NoJS (dom) {
-    this.js(dom)
+    this.js(dom);
   }
 
   NoJS.prototype.js = function (dom) {
@@ -53,9 +61,9 @@
         var signatureParts = attr.name.split(doubleDash ? '--' : '-');
         var paramValues = attr.value.split(' ');
 
-        var eventType = signatureParts[1], action = signatureParts[2], propertyType = signatureParts[3];
+        var eventType = signatureParts[1], action = signatureParts[2], propertyOrEventType = signatureParts[3];
 
-        if (signatureParts.length === 5 && signatureParts[4] === 'self') {
+        if (signatureParts.length > 3 && signatureParts[signatureParts.length -1] === 'self') {
           var target = el;
           isSelf = true;
         } else {
@@ -64,7 +72,7 @@
 
         var propertyValue;
         if (action !== 'remove' || action !== 'reset') {
-          var index = this_._getPropertyValueIndex(propertyType, isSelf)
+          var index = this_._getPropertyValueIndex(propertyOrEventType, isSelf)
           // join space containing values that might have been split.
           propertyValue = paramValues.splice(index).join(' ')
         }
@@ -73,9 +81,9 @@
           action: action,
           target: target,
           sourceElement: el,
-          propertyType: propertyType,
+          propertyOrEventType: propertyOrEventType,
           propertyValue: propertyValue,
-          propertyName: propertyType === 'attribute' ? paramValues[1] : propertyType
+          propertyName: propertyOrEventType === 'attribute' ? paramValues[1] : propertyOrEventType
         }
 
         el.addEventListener(eventType, function(e) {
@@ -88,45 +96,52 @@
   NoJS.prototype._handler = function (options) {
     var targets = typeof options.target === "string" ? document.querySelectorAll(options.target) : [options.target];
     targets.forEach(function(el) {
-      if (options.propertyType === 'class') {
+      if (options.action === 'trigger' && typeof el[options.propertyOrEventType] === 'function') {
+        el[options.propertyOrEventType]();
+        return;
+      }
+
+      if (options.propertyOrEventType === 'class') {
         if (options.action === 'set') {
-          el.className = options.propertyValue
+          el.className = options.propertyValue;
         } else if (options.action == 'switch') {
-          el.classList.remove(options.propertyValue)
-          options.sourceElement.classList.add(options.propertyValue)
+          // @todo add and remove based on the class presence
+          // during time of action
+          el.classList.remove(options.propertyValue);
+          options.sourceElement.classList.add(options.propertyValue);
         } else {
-          el.classList[options.action](options.propertyValue)
+          el.classList[options.action](options.propertyValue);
         }
       }
 
-      else if (options.propertyType === 'attribute' || options.propertyType === 'id') {
+      else if (options.propertyOrEventType === 'attribute' || options.propertyOrEventType === 'id') {
         if (options.action === 'remove') {
-          el.removeAttribute(options.propertyName)
+          el.removeAttribute(options.propertyName);
         } else if (options.action === 'add' || options.action == 'set') {
           el.setAttribute(options.propertyName, options.propertyValue);
         }
       }
 
-      else if (options.propertyType === 'dom' && options.action === 'remove') {
+      else if (options.propertyOrEventType === 'dom' && options.action === 'remove') {
         el.remove();
       }
 
-      else if (options.propertyType === 'value') {
+      else if (options.propertyOrEventType === 'value') {
         if (options.action === 'set') {
           el.value = options.propertyValue;
         } else if (options.action === 'reset') {
           el.value = null;
         }
       }
 
-      else if (options.propertyType === 'text' && options.action === 'set') {
+      else if (options.propertyOrEventType === 'text' && options.action === 'set') {
         el.innerText = options.propertyValue;
       }
     })
   }
 
-  NoJS.prototype._getPropertyValueIndex = function (propertyType, isSelf) {
-    var index = propertyType === 'attribute' ? 2 : 1;
+  NoJS.prototype._getPropertyValueIndex = function (propertyOrEventType, isSelf) {
+    var index = propertyOrEventType === 'attribute' ? 2 : 1;
     return isSelf ? index - 1 : index;
   }
 

diff --git a/package.json b/package.json
@@ -1,10 +1,11 @@
 {
   "name": "nojs",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Library that helps minimize js you have to write",
   "main": "no.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "uglify": "uglifyjs --compress --mangle -o dist/no.min.js -- no.js"
   },
   "repository": {
     "type": "git",