New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
dominic - npm Package Compare versions
Comparing version 0.1.8 to 0.1.9
@@ -9,2 +9,3 @@ (function(root, factory) { | ||
| })(this, function () { | ||
| var win = window | ||
| var fakeArray = [] | ||
@@ -21,3 +22,3 @@ var fakeOpts = {} | ||
| } | ||
| var isDom = function (obj) { return obj instanceof Node } | ||
| var isDom = function (obj) { return obj instanceof win.Node } | ||
| var isObj = function (obj) { var objType = typeof obj; return objType === 'object' || objType === 'function' } | ||
@@ -96,3 +97,3 @@ var isStrOrNum = function (val) { var valType = typeof val; return valType === 'string' || valType === 'number' } | ||
| opts = opts || {} | ||
| var el = opts.el || document.documentElement | ||
| var el = opts.el || win.document.documentElement | ||
| var callback = opts.callback | ||
@@ -464,3 +465,3 @@ var capture = opts.capture || false | ||
| attrs = attrs || fakeOpts | ||
| var el = document.createElement(name) | ||
| var el = win.document.createElement(name) | ||
| root = root || el | ||
@@ -474,3 +475,5 @@ var attributes = Object.keys(attrs) | ||
| var injectOpts | ||
| var delayNoDisplay | ||
| if (attrs.hasOwnProperty('if') && !evalIf(attrs.if)) return null | ||
| if (attrs.hasOwnProperty('hide') && evalIf(attrs.hide)) delayNoDisplay = true | ||
| for (var i = 0, length = attributes.length; i < length; i++) { | ||
@@ -498,3 +501,3 @@ var key = attributes[i] | ||
| else if (keyIdx < textRange) | ||
| el.appendChild(document.createTextNode(val)) | ||
| el.appendChild(win.document.createTextNode(val)) | ||
| else | ||
@@ -518,2 +521,4 @@ delayRoot = val | ||
| } | ||
| if (delayNoDisplay) | ||
| el.style.display = 'none' | ||
| return el | ||
@@ -525,3 +530,11 @@ } | ||
| } | ||
| /** | ||
| * @Description set up window object for usage in non browser environment | ||
| * the Object should have document and Node that mimic document and Node of browser | ||
| */ | ||
| publicCreateElement.setWindow = function (obj) { | ||
| win = obj | ||
| } | ||
| return publicCreateElement | ||
| }); |
@@ -1,1 +0,1 @@ | ||
| !function(e,t){"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?module.exports=t():e.CreateElement=t()}(this,function(){var e=[],t={},r=function(e){return e instanceof Node},n=function(e){var t=typeof e;return"object"===t||"function"===t},o=function(e){var t=typeof e;return"string"===t||"number"===t},a=function(e){return e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()},i=function(e){e=e||{};for(var t=1;t<arguments.length;t++)for(var r=arguments[t],n=Object.keys(arguments[t]),o=0;o<n.length;o++)e[n[o]]=r[n[o]];return e},f=function(e){if(e=e||{},arguments.length<2)return e;var t=arguments[arguments.length-1];if("string"!=typeof t)return e;var r=t.split(",");if(!r.length)return e;for(var n=1;n<arguments.length-1;n++)for(var o=arguments[n],a=Object.keys(arguments[n]),i=0;i<a.length;i++){var f=a[i];if(-1!==r.indexOf(f)){var u=o[f];e[f]=u}}return e},u=function(e){e=e||{};for(var t=1;t<arguments.length;t++)for(var r=arguments[t],n=Object.keys(arguments[t]),o=0;o<n.length;o++){var a=n[o];if(Array.isArray(e))for(k=0;k<e.length;k++)e[k].hasOwnProperty(a)||(e[k][a]=r[a]);else e.hasOwnProperty(a)||(e[a]=r[a])}return e},l=function(t){var r=t.id?"#"+t.id:"",n=t.classList.toString(),o=n?n.split(" "):e,a=t.localName+r+(o.length?"."+o.join("."):"");return a},s=function(e,t,r){for(;t!==e;){if(t.matches(r))return t;t=t.parentNode}return null},c=function(e,t,r){t=t||{};var n=t.el||document.documentElement,o=t.callback,a=t.capture||!1,i=t.delegate,f=function(e){if("string"==typeof i){if(n===e.target)return;var t=s(n,e.target,i);if(!t)return;"function"==typeof o&&o.call(t,e)}else"function"==typeof o&&o.call(r,e)};return f.destroy=function(){return this.el=null,n.removeEventListener(e,f,a)},f.el=n,f.type=e,f.capture=a,n.addEventListener(e,f,a),f},p=Object.defineProperties,v=Object.defineProperty,h=function(){var e=function(){Array.call(this)};return e.prototype=Object.create(Array.prototype),p(e.prototype,{remove:{value:function(e){if("function"!=typeof e)return!1;for(var t=[],r=0,n=0;n<this.length;n++)e.call(null,this[n])&&t.push(this[n]);for(var o=0;o<t.length;o++){var a=t[o];a.destroy(),this.splice(this.indexOf(a),1),r++}return r==t.length}},removeEvent:{value:function(e,t,r){var n=this,o=[];return this.forEach(function(n){"*"!==e&&n.type!==e||"*"!==t&&n.el!==t||r&&n.capture!==r||o.push(n)}),o.forEach(function(e){e.destroy(),n.splice(n.indexOf(e),1)}),o.length}},removeAll:{value:function(){for(var e=0;e<this.length;e++)this[e].destroy();this.length=0}}}),e}(),d=function(){var e=function(){};return e.prototype=Object.create(Object.prototype),p(e.prototype,{remove:{value:function(e){if("function"!=typeof e)return!1;for(var t=Object.keys(this),r=0,n=0;n<t.length;n++){var o=t[n];e.call(null,this[o],o)&&(r+=delete this[o]?1:0)}return r==t.length}},removeRef:{value:function(e){return this.hasOwnProperty(e)?delete this[e]:!1}},removeAll:{value:function(){for(var e=Object.keys(this),t=0;t<e.length;t++)delete this[e[t]];return t===e.length}}}),e}(),y=function(){var e=function(e){if("undefined"==typeof e)throw new Error("No root provided");this.__owner=e};return e.prototype=Object.create(Object.prototype),p(e.prototype,{add:{value:function(e,t){var r=t.update?t.update.observeProp:"";if(!r||"__owner"===r||!o(r))return!1;var n=f({},t,{appendTo:e,obsProp:r},"tplFn,for,root,appendTo,obsProp,update");v(this,r,{set:function(t){for(n["for"]=t;e.firstChild;){var r=e.removeChild(e.firstChild);this.__owner.evts.remove(function(e){return r.contains(e.el)}),this.__owner.refs.remove(function(e,t){return r===e||r.contains(e)})}var o=m(e,n,this.__owner);w(e,o,this.__owner)}})}}}),e}(),g=function(e,t,r){var n=t.ref;if(o(n)){var a=t.refScope,i="parent"===a?e:r;i.refs=i.refs||new d,i.refs[n]=t}},m=function(e,t,r){var n,o=t["for"],a=t.root||"",i=a?o[a]:o,f=t.tplFn;if(i&&"function"==typeof f){var u=t.scope,l="root"===u?r:"parent"===u?e:u;n=Array.isArray(i)?i.map(f,l):f.call(l,i)}return n},b=function(e,t,r){r.observe=r.observe||new y(r),r.observe.add(e,t)},w=function(e,t,o,a){"use strict";if(n(t))if(r(t))e.appendChild(t),g(e,t,o);else if("function"==typeof t){var i=t();a&&u(i,a),w(e,i,o,a)}else if(Array.isArray(t))for(var f=0;f<t.length;f++){var l=t[f];a&&u(l,a),w(e,l,o,a)}else{var s=t.tag;if(s){delete t.tag,a&&u(t,a);var c=Q(s,t,o);w(e,c,o,a)}else if(t.hasOwnProperty("for")){if(!n(t["for"]))return;var p=m(e,t,o);w(e,p,o,a),n(t.update)&&b(e,t,o)}else{var v=t.fn;if("function"==typeof v){var h=t.scope,d="root"===h?o:"parent"===h?e:h,y=v.call(d);w(e,y,o,a)}}}},O=function(e,t,r){var n=t.type;if(!n)throw new Error("No event type specified");var o,a=t.handler,i=typeof a;r=r||e;var f="root"===t.scope?r:t.scope?t.scope:e;if("function"===i?o=a:"string"===i&&(o=f[a]),"function"!=typeof o)throw new Error('Cannot find handler: "'+a+'" on element: ['+l(f)+"].");var u=t.capture,s=t.delegate,p=c(n,{el:e,callback:o,capture:u,delegate:s},f);r.evts=r.evts||new h,r.evts.push(p)},j=function(e,t,r){if(Array.isArray(t))for(var n=0;n<t.length;n++)O(e,t[n],r);else O(e,t,r)},A=function(e,t){for(var r=Object.keys(t),n=0;n<r.length;n++){var o=r[n],i=t[o];e.setAttribute(a(o),i)}},x=function(e,t){for(var r=Object.keys(t),n=0;n<r.length;n++){var o=r[n],a=t[o];e.style[o]=isNaN(a)?a:a+"px"}},_={setevents:j,setattrs:A,setstyle:x,setchildren:w,setitems:w},C=function(e,t){for(var r=Object.keys(t),n=r.length,o=0;n>o;o++){var a=r[o],i=t[a];e[a]=(e[a]+i).trim()}},E=function(e,t,r,n){for(var o=0,a=t.length;a>o;o++){var i=t[o];_["set"+i.key](e,i.val,r,n)}},N=function(e,t,r){for(var n=0,o=t.length;o>n;n++){var a=t[n],f=i({},{type:a.key},a.val);O(e,f,r)}},P=function(e){var t;return t="function"==typeof e?e():e,Boolean(t)},L=["width","height","maxWidth","maxHeight","padding","margin"],T=["color","backgroundColor","background","display","position","opacity"],F=["defaults"],S=["style","children","items","attrs","events"],$=["click","mousedown","mouseup","mouseover","mouseout","mouseenter","mouseleave","dragstart","dragend","drag","dragover","dragenter","dragout","drop","blur","focus","keydown","keypress","keyup","change","input","submit","touchstart","touchmove","touchend","wheel","scroll"],z=["created","appended"],B=["className","id"],H=["text","textContent"],R=["parent"],W=L.concat(T,F,S,$,z,B,H,R),Z=L.length,q=Z+T.length,D=q+F.length,G=D+S.length,I=G+$.length,J=I+z.length,K=J+B.length,M=K+H.length,Q=function(e,n,o,a){n=n||t;var f=document.createElement(e);o=o||f;var u,l,s,c,p,v,h=Object.keys(n);if(n.hasOwnProperty("if")&&!P(n["if"]))return null;for(var d=0,y=h.length;y>d;d++){var g=h[d],m=n[g],b=W.indexOf(g);-1==b?f[g]=m:Z>b?f.style[g]=isNaN(m)?m:m+"px":q>b?f.style[g]=m:D>b?i(v=v||{},m):G>b?(u=u||[]).push({key:g,val:m}):I>b?(l=l||[]).push({key:g,val:m}):J>b?(s=s||{})[g]=m:K>b?(c=c||{})[g]=m:M>b?f.appendChild(document.createTextNode(m)):p=m}return c&&C(f,c),u&&E(f,u,o,v),l&&N(f,l,o),s&&"function"==typeof s.created&&s.created.call(f),p&&r(p)&&f===o&&(p.appendChild(f),s&&"function"==typeof s.appended&&s.appended.call(f,p)),f},U=function(e,t){return Q(e,t)};return U}); | ||
| !function(e,t){"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?module.exports=t():e.CreateElement=t()}(this,function(){var e=window,t=[],r={},n=function(t){return t instanceof e.Node},o=function(e){var t=typeof e;return"object"===t||"function"===t},a=function(e){var t=typeof e;return"string"===t||"number"===t},i=function(e){return e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()},f=function(e){e=e||{};for(var t=1;t<arguments.length;t++)for(var r=arguments[t],n=Object.keys(arguments[t]),o=0;o<n.length;o++)e[n[o]]=r[n[o]];return e},u=function(e){if(e=e||{},arguments.length<2)return e;var t=arguments[arguments.length-1];if("string"!=typeof t)return e;var r=t.split(",");if(!r.length)return e;for(var n=1;n<arguments.length-1;n++)for(var o=arguments[n],a=Object.keys(arguments[n]),i=0;i<a.length;i++){var f=a[i];if(-1!==r.indexOf(f)){var u=o[f];e[f]=u}}return e},l=function(e){e=e||{};for(var t=1;t<arguments.length;t++)for(var r=arguments[t],n=Object.keys(arguments[t]),o=0;o<n.length;o++){var a=n[o];if(Array.isArray(e))for(k=0;k<e.length;k++)e[k].hasOwnProperty(a)||(e[k][a]=r[a]);else e.hasOwnProperty(a)||(e[a]=r[a])}return e},s=function(e){var r=e.id?"#"+e.id:"",n=e.classList.toString(),o=n?n.split(" "):t,a=e.localName+r+(o.length?"."+o.join("."):"");return a},c=function(e,t,r){for(;t!==e;){if(t.matches(r))return t;t=t.parentNode}return null},p=function(t,r,n){r=r||{};var o=r.el||e.document.documentElement,a=r.callback,i=r.capture||!1,f=r.delegate,u=function(e){if("string"==typeof f){if(o===e.target)return;var t=c(o,e.target,f);if(!t)return;"function"==typeof a&&a.call(t,e)}else"function"==typeof a&&a.call(n,e)};return u.destroy=function(){return this.el=null,o.removeEventListener(t,u,i)},u.el=o,u.type=t,u.capture=i,o.addEventListener(t,u,i),u},v=Object.defineProperties,h=Object.defineProperty,d=function(){var e=function(){Array.call(this)};return e.prototype=Object.create(Array.prototype),v(e.prototype,{remove:{value:function(e){if("function"!=typeof e)return!1;for(var t=[],r=0,n=0;n<this.length;n++)e.call(null,this[n])&&t.push(this[n]);for(var o=0;o<t.length;o++){var a=t[o];a.destroy(),this.splice(this.indexOf(a),1),r++}return r==t.length}},removeEvent:{value:function(e,t,r){var n=this,o=[];return this.forEach(function(n){"*"!==e&&n.type!==e||"*"!==t&&n.el!==t||r&&n.capture!==r||o.push(n)}),o.forEach(function(e){e.destroy(),n.splice(n.indexOf(e),1)}),o.length}},removeAll:{value:function(){for(var e=0;e<this.length;e++)this[e].destroy();this.length=0}}}),e}(),y=function(){var e=function(){};return e.prototype=Object.create(Object.prototype),v(e.prototype,{remove:{value:function(e){if("function"!=typeof e)return!1;for(var t=Object.keys(this),r=0,n=0;n<t.length;n++){var o=t[n];e.call(null,this[o],o)&&(r+=delete this[o]?1:0)}return r==t.length}},removeRef:{value:function(e){return this.hasOwnProperty(e)?delete this[e]:!1}},removeAll:{value:function(){for(var e=Object.keys(this),t=0;t<e.length;t++)delete this[e[t]];return t===e.length}}}),e}(),g=function(){var e=function(e){if("undefined"==typeof e)throw new Error("No root provided");this.__owner=e};return e.prototype=Object.create(Object.prototype),v(e.prototype,{add:{value:function(e,t){var r=t.update?t.update.observeProp:"";if(!r||"__owner"===r||!a(r))return!1;var n=u({},t,{appendTo:e,obsProp:r},"tplFn,for,root,appendTo,obsProp,update");h(this,r,{set:function(t){for(n["for"]=t;e.firstChild;){var r=e.removeChild(e.firstChild);this.__owner.evts.remove(function(e){return r.contains(e.el)}),this.__owner.refs.remove(function(e,t){return r===e||r.contains(e)})}var o=b(e,n,this.__owner);O(e,o,this.__owner)}})}}}),e}(),m=function(e,t,r){var n=t.ref;if(a(n)){var o=t.refScope,i="parent"===o?e:r;i.refs=i.refs||new y,i.refs[n]=t}},b=function(e,t,r){var n,o=t["for"],a=t.root||"",i=a?o[a]:o,f=t.tplFn;if(i&&"function"==typeof f){var u=t.scope,l="root"===u?r:"parent"===u?e:u;n=Array.isArray(i)?i.map(f,l):f.call(l,i)}return n},w=function(e,t,r){r.observe=r.observe||new g(r),r.observe.add(e,t)},O=function(e,t,r,a){"use strict";if(o(t))if(n(t))e.appendChild(t),m(e,t,r);else if("function"==typeof t){var i=t();a&&l(i,a),O(e,i,r,a)}else if(Array.isArray(t))for(var f=0;f<t.length;f++){var u=t[f];a&&l(u,a),O(e,u,r,a)}else{var s=t.tag;if(s){delete t.tag,a&&l(t,a);var c=U(s,t,r);O(e,c,r,a)}else if(t.hasOwnProperty("for")){if(!o(t["for"]))return;var p=b(e,t,r);O(e,p,r,a),o(t.update)&&w(e,t,r)}else{var v=t.fn;if("function"==typeof v){var h=t.scope,d="root"===h?r:"parent"===h?e:h,y=v.call(d);O(e,y,r,a)}}}},j=function(e,t,r){var n=t.type;if(!n)throw new Error("No event type specified");var o,a=t.handler,i=typeof a;r=r||e;var f="root"===t.scope?r:t.scope?t.scope:e;if("function"===i?o=a:"string"===i&&(o=f[a]),"function"!=typeof o)throw new Error('Cannot find handler: "'+a+'" on element: ['+s(f)+"].");var u=t.capture,l=t.delegate,c=p(n,{el:e,callback:o,capture:u,delegate:l},f);r.evts=r.evts||new d,r.evts.push(c)},A=function(e,t,r){if(Array.isArray(t))for(var n=0;n<t.length;n++)j(e,t[n],r);else j(e,t,r)},x=function(e,t){for(var r=Object.keys(t),n=0;n<r.length;n++){var o=r[n],a=t[o];e.setAttribute(i(o),a)}},_=function(e,t){for(var r=Object.keys(t),n=0;n<r.length;n++){var o=r[n],a=t[o];e.style[o]=isNaN(a)?a:a+"px"}},C={setevents:A,setattrs:x,setstyle:_,setchildren:O,setitems:O},E=function(e,t){for(var r=Object.keys(t),n=r.length,o=0;n>o;o++){var a=r[o],i=t[a];e[a]=(e[a]+i).trim()}},N=function(e,t,r,n){for(var o=0,a=t.length;a>o;o++){var i=t[o];C["set"+i.key](e,i.val,r,n)}},P=function(e,t,r){for(var n=0,o=t.length;o>n;n++){var a=t[n],i=f({},{type:a.key},a.val);j(e,i,r)}},L=function(e){var t;return t="function"==typeof e?e():e,Boolean(t)},T=["width","height","maxWidth","maxHeight","padding","margin"],F=["color","backgroundColor","background","display","position","opacity"],S=["defaults"],W=["style","children","items","attrs","events"],$=["click","mousedown","mouseup","mouseover","mouseout","mouseenter","mouseleave","dragstart","dragend","drag","dragover","dragenter","dragout","drop","blur","focus","keydown","keypress","keyup","change","input","submit","touchstart","touchmove","touchend","wheel","scroll"],z=["created","appended"],B=["className","id"],H=["text","textContent"],R=["parent"],Z=T.concat(F,S,W,$,z,B,H,R),q=T.length,D=q+F.length,G=D+S.length,I=G+W.length,J=I+$.length,K=J+z.length,M=K+B.length,Q=M+H.length,U=function(t,o,a,i){o=o||r;var u=e.document.createElement(t);a=a||u;var l,s,c,p,v,h,d,y=Object.keys(o);if(o.hasOwnProperty("if")&&!L(o["if"]))return null;o.hasOwnProperty("hide")&&L(o.hide)&&(d=!0);for(var g=0,m=y.length;m>g;g++){var b=y[g],w=o[b],k=Z.indexOf(b);-1==k?u[b]=w:q>k?u.style[b]=isNaN(w)?w:w+"px":D>k?u.style[b]=w:G>k?f(h=h||{},w):I>k?(l=l||[]).push({key:b,val:w}):J>k?(s=s||[]).push({key:b,val:w}):K>k?(c=c||{})[b]=w:M>k?(p=p||{})[b]=w:Q>k?u.appendChild(e.document.createTextNode(w)):v=w}return p&&E(u,p),l&&N(u,l,a,h),s&&P(u,s,a),c&&"function"==typeof c.created&&c.created.call(u),v&&n(v)&&u===a&&(v.appendChild(u),c&&"function"==typeof c.appended&&c.appended.call(u,v)),d&&(u.style.display="none"),u},V=function(e,t){return U(e,t)};return V.setWindow=function(t){e=t},V}); |
| { | ||
| "name": "dominic", | ||
| "version": "0.1.8", | ||
| "version": "0.1.9", | ||
| "description": "Helper to quickly build up simple DOM in simple javascript object format.", | ||
@@ -5,0 +5,0 @@ "main": "dominic.js", |
@@ -44,3 +44,3 @@ ## Dominic | ||
| #### Basic 2 | ||
| #### Basic 2: Function as item | ||
| ```javascript | ||
@@ -119,4 +119,4 @@ var outerScopeDataSource = [ | ||
| ``` | ||
| * All children will have `display = 'inline-block', height = '100%'` | ||
| * Only last child will have `class = 'default-class'` | ||
| * All direct children of root will have `display = 'inline-block', height = '100%'` | ||
| * Only last child of root will have `class = 'default-class'` | ||
@@ -126,2 +126,46 @@ ###### Result | ||
| #### Basic 4: Condition `if`/ `hide` | ||
| ```javascript | ||
| var root = CreateElement('div', { | ||
| className: 'root', | ||
| parent: document.body, | ||
| width: '100%', | ||
| height: '100%', | ||
| defaults: { | ||
| display: 'inline-block', | ||
| height: '100%', | ||
| className: 'default-class', | ||
| style: { | ||
| verticalAlign: 'top' | ||
| } | ||
| }, | ||
| items: [ | ||
| { tag: 'div', className: 'sidebar', width: 200, ref: 'sidebar', background: 'lightgreen' }, | ||
| { tag: 'div', className: 'main', | ||
| width: 'calc(100% - 200px)', | ||
| ref: 'main', | ||
| background: 'lightblue', | ||
| defaults: { | ||
| background: 'tomato', | ||
| margin: 5, | ||
| height: 50, | ||
| width: 50, | ||
| display: 'inline-block' | ||
| }, | ||
| items: [ | ||
| { tag: 'div', text: 'First' }, | ||
| { tag: 'div', text: 'Second' }, | ||
| [3,4,5,6].map(function (v, i) { return { tag: 'div', text: 'Value is: ' + v, if: v < 4 } }), | ||
| function () { | ||
| return [5,6,7,8].map(function (v, i) { return { tag: 'div', text: v, hide: v > 6 } }) | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| }) | ||
| ``` | ||
| ###### Result | ||
|  | ||
| #### Attributes | ||
@@ -132,3 +176,3 @@ ```javascript | ||
| id: 'root', | ||
| parent: document.body, | ||
| parent: document.body, | ||
| width: 300, | ||
@@ -140,3 +184,3 @@ height: 300, | ||
| class: 'original', | ||
| dataTooltip: 'helo this is tip', | ||
| dataTooltip: 'halo this is tip', | ||
| 'data-id': 5 | ||
@@ -159,3 +203,3 @@ } | ||
| { tag: 'div', width: 50, height: 50, text: 'Intro', display: 'inline-block', background: 'yellowgreen' }, | ||
| { tag: 'div', width: 200, background: 'lightgreen', | ||
| { tag: 'div', width: 200, background: 'lightgreen', ref: 'orange', | ||
| items: [ | ||
@@ -165,3 +209,3 @@ { tag: 'div', width: 20, height: 20, background: 'red', | ||
| }, | ||
| { tag: 'div', width: 20, height: 20, background: 'orange', ref: 'orange', | ||
| { tag: 'div', width: 20, height: 20, background: 'orange', | ||
| ref: 'orange', refScope: 'parent' // access by root.refs.orange.refs.orange | ||
@@ -176,2 +220,11 @@ }, | ||
| #### Events | ||
| Reserved keyword for events: | ||
| * Mouse: `click` `mousedown` `mouseup` `mouseover` `mouseout` `mouseenter` `mouseleave` | ||
| * Drag: `dragstart` `dragend` `drag` `dragover` `dragenter` `dragout` `drop` | ||
| * Focus: `blur` `focus` | ||
| * Keyboard: `keydown` `keypress` `keyup` | ||
| * Form: `change` `input` `submit` | ||
| * Touch: `touchstart` `touchmove` `touchend` | ||
| * Scroll: `wheel` `scroll` | ||
| ```javascript | ||
@@ -212,2 +265,4 @@ var root = CreateElement('div', { | ||
| scope: 'root', | ||
| // Will look up for `onClickYellow` on root element | ||
| // Throw error if not found | ||
| handler: 'onClickYellow', | ||
@@ -234,2 +289,7 @@ capture: true | ||
| #### Template | ||
| 1. `for`: data source | ||
| 2. `TplFn`: function (item, itemIndex) | ||
| * If data source provided is an array, item is record of array and itemIndex is record index | ||
| * If data source provided is an object, item is data object and itemIndex will be undefined | ||
| ```javascript | ||
@@ -254,3 +314,3 @@ var root = CreateElement('div', { | ||
| ]} | ||
| } | ||
| } | ||
| ], | ||
@@ -263,3 +323,7 @@ tplFn: function (item, itemIdx) { | ||
| tplFn: function (sup, supIdx) { | ||
| return { tag: 'div', padding: 5, background: 'lightblue', text: sup.name + '. Time: ' + sup.time + ' days' } | ||
| return { tag: 'div', | ||
| padding: 5, | ||
| background: 'lightblue', | ||
| text: sup.name + '. Time: ' + sup.time + ' days' | ||
| } | ||
| } | ||
@@ -298,3 +362,2 @@ } | ||
| for: null, | ||
| // | ||
| update: { | ||
@@ -308,3 +371,3 @@ // update this when root.observe.data = src | ||
| for: item.suppliers, | ||
| root: 'data', // specify which property to look for data | ||
| root: 'data', // specify which property to look for data | ||
| tplFn: function (sup, supIdx) { | ||
@@ -348,2 +411,4 @@ return { | ||
| ## API | ||
| 1. Create new DOM element | ||
| ```javascript | ||
@@ -353,3 +418,11 @@ CreateElement(name, opts) | ||
| opts: Object | ||
| return: DOM element | ||
| ``` | ||
| 2. `For Node:` Change global window object | ||
| ```javascript | ||
| CreateElement.setWindow(windowObj) | ||
| ``` | ||
| * window obj must have: | ||
| 1. Node class with same behavior of a normal HTML element (`appendChild`, `removeChild`, `etc...`) | ||
| 2. document with `createElement`, `createTextNode` methods which will create Node or TextNode | ||
@@ -356,0 +429,0 @@ ## Plan |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by8.47%
37404
- Lines of code
- increased by2.35%
522
- Number of lines in readme file
- increased by21.1%
419
No dependency changes