From 1e2da7aefc9174d664cc56ddfaafadaf65bba77e Mon Sep 17 00:00:00 2001 From: Ifedapo Olarewaju Date: Thu, 7 Feb 2019 13:04:58 +0100 Subject: [PATCH] add support to trigger focus, click, scrollIntoView --- CHANGELOG.md | 8 ++++++++ dist/no.min.js | 2 +- example/index.html | 4 ++-- no.js | 51 ++++++++++++++++++++++++++++++---------------- package.json | 5 +++-- 5 files changed, 47 insertions(+), 23 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c3f8545..3329517 100644 --- 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 index c4d0886..61cf833 100644 --- a/dist/no.min.js +++ b/dist/no.min.js @@ -1 +1 @@ -(function(){function NoJS(e){this.js(e)}NoJS.prototype.js=function(e){e=e||"html";var t=this;var r=false;document.querySelector(e).querySelectorAll("[no-js]").forEach(function(e){Object.keys(e.attributes).forEach(function(o){var a=e.attributes[o];if(a.name.indexOf("on--")===0){var n=true;console.warn('Deprecation warning: using double dashes "--" are deprecated. Use a single dash "-" instead.')}else if(a.name.indexOf("on-")===0){var n=false}else{return}var i=a.name.split(n?"--":"-");var s=a.value.split(" ");var p=i[1],l=i[2],u=i[3];if(i.length===5&&i[4]==="self"){var c=e;r=true}else{var c=s[0]}var y;if(l!=="remove"||l!=="reset"){var f=t._getPropertyValueIndex(u,r);y=s.splice(f).join(" ")}var d={action:l,target:c,sourceElement:e,propertyType:u,propertyValue:y,propertyName:u==="attribute"?s[1]:u};e.addEventListener(p,function(e){t._handler(d)})})})};NoJS.prototype._handler=function(e){var t=typeof e.target==="string"?document.querySelectorAll(e.target):[e.target];t.forEach(function(t){if(e.propertyType==="class"){if(e.action==="set"){t.className=e.propertyValue}else if(e.action=="switch"){t.classList.remove(e.propertyValue);e.sourceElement.classList.add(e.propertyValue)}else{t.classList[e.action](e.propertyValue)}}else if(e.propertyType==="attribute"||e.propertyType==="id"){if(e.action==="remove"){t.removeAttribute(e.propertyName)}else if(e.action==="add"||e.action=="set"){t.setAttribute(e.propertyName,e.propertyValue)}}else if(e.propertyType==="dom"&&e.action==="remove"){t.remove()}else if(e.propertyType==="value"){if(e.action==="set"){t.value=e.propertyValue}else if(e.action==="reset"){t.value=null}}else if(e.propertyType==="text"&&e.action==="set"){t.innerText=e.propertyValue}})};NoJS.prototype._getPropertyValueIndex=function(e,t){var r=e==="attribute"?2:1;return t?r-1:r};document.addEventListener("DOMContentLoaded",function(){window.no=new NoJS})})(); \ No newline at end of file +!function(){function e(e){this.js(e)}e.prototype.js=function(e){e=e||"html";var t=this,r=!1;document.querySelector(e).querySelectorAll("[no-js]").forEach(function(e){Object.keys(e.attributes).forEach(function(n){var o=e.attributes[n];if(0===o.name.indexOf("on--")){var a=!0;console.warn('Deprecation warning: using double dashes "--" are deprecated. Use a single dash "-" instead.')}else{if(0!==o.name.indexOf("on-"))return;var a=!1}var p=o.name.split(a?"--":"-"),i=o.value.split(" "),s=p[1],u=p[2],c=p[3];if(p.length>3&&"self"===p[p.length-1]){var l=e;r=!0}else var l=i[0];var y;if("remove"!==u||"reset"!==u){var v=t._getPropertyValueIndex(c,r);y=i.splice(v).join(" ")}var d={action:u,target:l,sourceElement:e,propertyOrEventType:c,propertyValue:y,propertyName:"attribute"===c?i[1]:c};e.addEventListener(s,function(e){t._handler(d)})})})},e.prototype._handler=function(e){var t="string"==typeof e.target?document.querySelectorAll(e.target):[e.target];t.forEach(function(t){return"trigger"===e.action&&"function"==typeof t[e.propertyOrEventType]?void t[e.propertyOrEventType]():void("class"===e.propertyOrEventType?"set"===e.action?t.className=e.propertyValue:"switch"==e.action?(t.classList.remove(e.propertyValue),e.sourceElement.classList.add(e.propertyValue)):t.classList[e.action](e.propertyValue):"attribute"===e.propertyOrEventType||"id"===e.propertyOrEventType?"remove"===e.action?t.removeAttribute(e.propertyName):"add"!==e.action&&"set"!=e.action||t.setAttribute(e.propertyName,e.propertyValue):"dom"===e.propertyOrEventType&&"remove"===e.action?t.remove():"value"===e.propertyOrEventType?"set"===e.action?t.value=e.propertyValue:"reset"===e.action&&(t.value=null):"text"===e.propertyOrEventType&&"set"===e.action&&(t.innerText=e.propertyValue))})},e.prototype._getPropertyValueIndex=function(e,t){var r="attribute"===e?2:1;return t?r-1:r},document.addEventListener("DOMContentLoaded",function(){window.no=new e})}(); \ No newline at end of file diff --git a/example/index.html b/example/index.html index fd84161..beb4ed5 100644 --- a/example/index.html +++ b/example/index.html @@ -27,8 +27,8 @@

Select country

- Nigeria - Ghana + Nigeria + Ghana


diff --git a/no.js b/no.js index 5bcd7f2..a251dc3 100644 --- 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,30 +96,37 @@ 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') { @@ -119,14 +134,14 @@ } } - 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 index c11815c..3127118 100644 --- 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",