major update: support sub sections, this should conclude the whole th…

…ing now

VERSION

@@ -1 +1 @@
-1.1.0
+1.1.2

dist/simple.dev.js

@@ -119,7 +119,7 @@ function _c(obj) {
 var app;
 app = function (name, cnf) {
   // current version from build
-  this.version = '1.1.0';
+  this.version = '1.1.2';
   this.aName = name;
   // defaults
   name = _s(name).hashCode();
@@ -230,7 +230,7 @@ app = function (name, cnf) {
       if (nodeName == 'SELECT') {
         type = 'select';
       }
-      name = el.dataset.name;
+      name = el.dataset.name ? el.dataset.name : el.name;
       value = el.value;
       switch (type) {
         case 'select':
@@ -253,6 +253,10 @@ app = function (name, cnf) {
             }
           }
           break;
+        case 'button':
+        case 'form':
+          // do not set state for button/form - just notify state is updated.
+          break;
         default:
           this.state[name] = value;
           break;
@@ -265,6 +269,8 @@ app = function (name, cnf) {
       name: name,
       value: value,
       element: el,
+      // double check as el may not exist - we can just call updateState(k,v) from anywhere, really
+      dataset: (el && typeof el.dataset === 'object') ? el.dataset : {},
       state: this.state
     });
   };
@@ -375,6 +381,18 @@ app = function (name, cnf) {
   this.eId = function (elName) {
     return prefix + '_el_' + elName;
   };
+  /**
+   * get current type of event
+   * @param type
+   * @returns {*}
+   */
+  this.getEvent = function (type) {
+    if (!type || type === '') return;
+    if (type === 'select') return 'onchange';
+    if (type === 'form') return 'onsubmit';
+    if (type === 'input') return 'onkeyup';
+    return 'onclick';
+  };
   /**
    * callback: custom data parser
    * new logic:
@@ -459,33 +477,17 @@ app = function (name, cnf) {
     // only one single id, ever
     parsedData.id = data.id;
     // generate on[change] by type
-    var event = null;
-    if (type !== '') {
-      switch (type) {
-        case 'select':
-          event = 'onchange';
-          break;
-        case 'form':
-          event = 'onsubmit';
-          break;
-        case 'input':
-          event = 'onkeyup';
-          if (!data.value) {
-            data.value = state;
-          }
-          break;
-        default:
-          event = 'onclick';
-          break;
-      }
+    var event = this.getEvent(type);
+    if (type == 'input' && !data.value) {
+      data.value = state;
     }
     // override
     if (data._e_) {
       event = 'on' + data._e_;
     }
     var act = prefix + '.updateState(this)';
-    parsedData.act = act;
     if (event) {
+      parsedData.act = act;
       attrs.push(event + '="' + act + '"');
     }
     // now, all other data should be outside for replacing if _, and those without, is in attrs
@@ -498,26 +500,58 @@ app = function (name, cnf) {
         }
         // just directly put in the data attrs
         parsedData[i] = v;
-      } else {
-        // a new miniparser again...
+      }
+    }
+    // we'll find the template definition and create attributes for sections, if any.
+    var template = this.template.sub[elName];
+    if (typeof template._sects === 'object') {
+      // create mini attrs
+      for (var sectName in template._sects) {
         var tmp = [];
-        for (var vi in v) {
-          if (v._e_) {
-            tmp.push('on' + v._e_ + '="' + act + '"');
-          } else {
-            if (vi.indexOf('_') < 0) {
-              tmp.push(vi + '="' + v[vi] + '"');
-            } else {
-              // underscore _foo goes to parent
-              parsedData[vi] = v[vi];
+        // let's get the sects out from data
+        var secKey = 'attr-' + sectName;
+        var secData = (typeof data[sectName] === 'object') ? data[sectName] : {};
+        // merge with template data
+        var setting = template._sects[sectName];
+        if (typeof setting === 'object') {
+          for (var si in setting) {
+            secData[si] = setting[si];
+          }
+          // type select
+          if (setting._type) {
+            var eS = this.getEvent(setting._type);
+            if (eS) {
+              tmp.push(eS + '="' + act + '"');
             }
           }
+          // data action
+          if (setting._action) {
+            tmp.push('data-action="' + setting._action + '"');
+          }
+        }
+        // setting has _e_?
+        if (secData._e_) {
+          tmp.push('on' + secData._e_ + '="' + act + '"');
+        }
+        for (var vi in secData) {
+          if (vi.indexOf('_') < 0) {
+            tmp.push(vi + '="' + secData[vi] + '"');
+          } else {
+            // underscore _foo goes to parent
+            parsedData[vi] = secData[vi];
+          }
+        }
+        // add index
+        tmp.push('data-name="' + elName + '"');
+        if (subNodeCnt > 0) {
+          tmp.push('data-index="' + (subNodeCnt - 1) + '"');
         }
         // compose
-        parsedData['attr-' + i] = tmp.join(' ');
+        parsedData[secKey] = tmp.join(' ');
       }
     }
 
+
     // select attribute for items
     if (subNodeCnt > 0 && _s(state).indexOf(_s(data.value)) >= 0) {
       if (type == 'select') {
@@ -527,6 +561,7 @@ app = function (name, cnf) {
         attrs.push('checked="checked"');
       }
     }
+    console.log('=> Parsed Data:', parsedData);
     parsedData.attr = attrs.join(' ');
     return parsedData;
   };
@@ -655,13 +690,15 @@ app = function (name, cnf) {
       var wAttr = this.parseElementData(elName, state, data.wrapper, t._type), elData = data.element || [], m = 0;
       // check prevData to ensure rendering take advantage of vNode or innerHTML
       var tmpData = this.pData[elName];
-      var prevElementData = [];
+      var prevElementData = [], isInitialRun = false;
       if (!tmpData) {
         // render all
         forceRender = true;
       } else {
         prevElementData = _c(tmpData.element);
+        isInitialRun = (prevElementData.length === 0);
       }
+
       // loop and remove
       var nodeParent = false;
       elData.map(function (item) {
@@ -681,12 +718,12 @@ app = function (name, cnf) {
 
         // retreive node
         // 1st. if not partial, or force render, keep adding to it
-        if (self.cnf.partialRender && !forceRender) {
+        if (self.cnf.partialRender && !forceRender && !isInitialRun) {
           // logic - data less or more?
           var n = m - 1, before = self.pData[elName].element[n], after = self.data[elName].element[n], src = null;
           // fix parent before comparing...
           var node = self.node(elName + '_' + m);
-          if (!nodeParent) nodeParent = node.parentNode;
+          if (!nodeParent && node) nodeParent = node.parentNode;
           if (_s(before) == _s(after)) {
             // nothing is changed, do not render
             return;
@@ -728,8 +765,8 @@ app = function (name, cnf) {
           }
         );
       }
-
-      if (typeof output == 'string' && output.length > 1) {
+      // if m === 0 means there's no item, so just render the shell
+      if ((typeof output == 'string' && output.length > 1) || m === 0) {
         output = self.htpl(t._wrapper[0], wAttr) + output + t._wrapper[1];
       } else {
         // stop here as it's replaced
@@ -758,6 +795,7 @@ app = function (name, cnf) {
     }
     // 2nd - it must be partial and if node doesn't exists, return itself, otherwise, update by replacing node
     if (!forceRender && this.cnf.partialRender === true && output) {
+      // so initial run will fall here too
       var node = this.node(elName), nn = null;
       // replace
       if (node) {

dist/simple.min.js

@@ -1,86 +1,85 @@
 !function(t){"use strict"
-function e(){return Date.now()}function a(t){return 0===Object.keys(t).length}function i(t){return document.getElementById(t)}function n(t){return JSON.stringify(t)}function r(t){return JSON.parse(n(t))}var s=t,h=function(t,e){this.src=t,e=e||document.createElement("div"),this.parent=e
+function e(){return Date.now()}function a(t){return 0===Object.keys(t).length}function i(t){return document.getElementById(t)}function n(t){return JSON.stringify(t)}function s(t){return JSON.parse(n(t))}var r=t,h=function(t,e){this.src=t,e=e||document.createElement("div"),this.parent=e
 try{var a=this.parent.cloneNode(!1)
 a.innerHTML=this.src,this.node=a.firstChild}catch(i){return}this.right=function(t){try{t&&(this.parent=t),this.parent.appendChild(this.node)}catch(e){}},this.replace=function(t){var e=t
 t instanceof h&&(e=t.node)
 try{this.parent=t.parentNode,this.parent.replaceChild(this.node,e)}catch(a){}}}
-s.SimpleAppStart="sta",s.SimpleAppFinish="fin",s.SimpleAppWillRender="wrd",s.SimpleAppDidRender="drd",s.SimpleAppRenderElement="rde",s.SimpleAppParseElementData="ped",s.SimpleAppStateIsUpdated="siu",String.prototype.hashCode=function(){var t,e,a,i=0
+r.SimpleAppStart="sta",r.SimpleAppFinish="fin",r.SimpleAppWillRender="wrd",r.SimpleAppDidRender="drd",r.SimpleAppRenderElement="rde",r.SimpleAppParseElementData="ped",r.SimpleAppStateIsUpdated="siu",String.prototype.hashCode=function(){var t,e,a,i=0
 if(0===this.length)return i
 for(t=0,a=this.length;a>t;t++)e=this.charCodeAt(t),i=(i<<5)-i+e,i|=0
 return Math.abs(i)}
-var l
-l=function(t,l){this.version="1.1.0",this.aName=t,t=n(t).hashCode()
-var o="_sj_"+t
-if(this.name=t,s[o]=this,this.localStorageKey=o+"_data",this.container=null,this.state={},this.pState={},this.cnf={localStorageWrite:!0,localStorageRead:!0,partialRender:!0},"object"==typeof l)for(var p in l)this.cnf[p]=l[p]
+var o
+o=function(t,o){this.version="1.1.2",this.aName=t,t=n(t).hashCode()
+var l="_sj_"+t
+if(this.name=t,r[l]=this,this.localStorageKey=l+"_data",this.container=null,this.state={},this.pState={},this.cnf={localStorageWrite:!0,localStorageRead:!0,partialRender:!0},"object"==typeof o)for(var p in o)this.cnf[p]=o[p]
 this.callbacks={sta:{},fin:{},wrd:{},drd:{},rde:{},ped:{},siu:{}},this.getCallback=function(t,e){return e?"function"==typeof this.callbacks[t][e]?this.callbacks[t][e]:void 0:this.callbacks[t]},this.on=function(t,e,a){"object"==typeof this.callbacks[t]&&"function"==typeof a&&(this.callbacks[t][e]=a)},this._f=function(t){var e=this.getCallback(t)
 if("object"==typeof e)for(var a in e){var i=e[a]
 "function"==typeof i&&i()}},this.updateState=function(t,e){var a,i,n
 if("string"==typeof t)a=t,i=e,this.state[t]=e
 else if("object"==typeof t&&"string"==typeof t.nodeName){n=t
-var r=n.nodeName,s=n.type
-switch("SELECT"==r&&(s="select"),a=n.dataset.name,i=n.value,s){case"select":case"text":case"radio":this.state[a]=i
+var s=n.nodeName,r=n.type
+switch("SELECT"==s&&(r="select"),a=n.dataset.name?n.dataset.name:n.name,i=n.value,r){case"select":case"text":case"radio":this.state[a]=i
 break
 case"checkbox":if(this.state[a]||(this.state[a]=[]),n.checked&&i.length>0)this.state[a].indexOf(i)<0&&this.state[a].push(i)
 else{var h=this.state[a].indexOf(i)
 h>=0&&this.state[a].splice(h,1)}break
-default:this.state[a]=i}}this.store(),this.stateIsUpdated({name:a,value:i,element:n,state:this.state})},this.stateIsUpdated=function(t){var e=this.getCallback("siu",t.name)
+case"button":case"form":break
+default:this.state[a]=i}}this.store(),this.stateIsUpdated({name:a,value:i,element:n,dataset:n&&"object"==typeof n.dataset?n.dataset:{},state:this.state})},this.stateIsUpdated=function(t){var e=this.getCallback("siu",t.name)
 return"function"==typeof e?e(t):t},this.htpl=function(t,e,a){a=a===!0
 try{var i=t
-for(var n in e)if(n.length>0){var r=new RegExp("{"+n+"}","g"),s=e[n]
-i=i.replace(r,s)}return a!==!0&&(i=i.replace(/{[^<>}]+}/gi,"").replace(/{>([^}]+)}/gi,"{$1}")),i}catch(h){return""}},this.store=function(){this.cnf.localStorageWrite&&"object"==typeof s.localStorage&&s.localStorage.setItem(this.localStorageKey,n(this.state))},this.load=function(){if(this.cnf.localStorageRead&&"object"==typeof s.localStorage){var t=s.localStorage.getItem(this.localStorageKey)
+for(var n in e)if(n.length>0){var s=new RegExp("{"+n+"}","g"),r=e[n]
+i=i.replace(s,r)}return a!==!0&&(i=i.replace(/{[^<>}]+}/gi,"").replace(/{>([^}]+)}/gi,"{$1}")),i}catch(h){return""}},this.store=function(){this.cnf.localStorageWrite&&"object"==typeof r.localStorage&&r.localStorage.setItem(this.localStorageKey,n(this.state))},this.load=function(){if(this.cnf.localStorageRead&&"object"==typeof r.localStorage){var t=r.localStorage.getItem(this.localStorageKey)
 if(!t)return
 try{this.state=JSON.parse(t)}catch(e){}}},this.template={main:{},sub:{}},this.data={},this.pData={},this.els=function(t,e,a){if(a._style)return a._style
-if(e){var i=n(e),r=n(a.value)
-return i.indexOf(r)>=0?"selected":"default"}return"default"},this.eId=function(t){return o+"_el_"+t},this.parseElementData=function(t,e,a,i,r){var s=[],h={}
+if(e){var i=n(e),s=n(a.value)
+return i.indexOf(s)>=0?"selected":"default"}return"default"},this.eId=function(t){return l+"_el_"+t},this.getEvent=function(t){return t&&""!==t?"select"===t?"onchange":"form"===t?"onsubmit":"input"===t?"onkeyup":"onclick":void 0},this.parseElementData=function(t,e,a,i,s){var r=[],h={}
 a||(a={})
-var l=this.getCallback("ped",t)
-if("function"==typeof l)return l(e,a)
-s.push('data-name="'+t+'"'),s.push('data-state="'+e+'"'),r>0?(s.push('data-index="'+(r-1)+'"'),"select"!=i&&(a.id||(a.id=this.eId(t+"_"+r)))):a.id||(a.id=this.eId(t)),h.id=a.id
-var p=null
-if(""!==i)switch(i){case"select":p="onchange"
-break
-case"form":p="onsubmit"
-break
-case"input":p="onkeyup",a.value||(a.value=e)
-break
-default:p="onclick"}a._e_&&(p="on"+a._e_)
-var c=o+".updateState(this)"
-h.act=c,p&&s.push(p+'="'+c+'"')
+var o=this.getCallback("ped",t)
+if("function"==typeof o)return o(e,a)
+r.push('data-name="'+t+'"'),r.push('data-state="'+e+'"'),s>0?(r.push('data-index="'+(s-1)+'"'),"select"!=i&&(a.id||(a.id=this.eId(t+"_"+s)))):a.id||(a.id=this.eId(t)),h.id=a.id
+var p=this.getEvent(i)
+"input"!=i||a.value||(a.value=e),a._e_&&(p="on"+a._e_)
+var c=l+".updateState(this)"
+p&&(h.act=c,r.push(p+'="'+c+'"'))
 for(var f in a){var d=a[f]
-if("object"!=typeof d)f.indexOf("_")<0&&s.push(f+'="'+d+'"'),h[f]=d
-else{var u=[]
-for(var v in d)d._e_?u.push("on"+d._e_+'="'+c+'"'):v.indexOf("_")<0?u.push(v+'="'+d[v]+'"'):h[v]=d[v]
-h["attr-"+f]=u.join(" ")}}return r>0&&n(e).indexOf(n(a.value))>=0&&("select"==i&&s.push('selected="selected"'),("checkbox"==i||"radio"==i)&&s.push('checked="checked"')),h.attr=s.join(" "),h},this.node=function(t){return i(this.eId(t))},this.style="default",this.render=function(t){if(e(),this._f("wrd"),!this.container)throw new Error("Invalid container specified")
-var i=this.template.main[this.style],s={}
+"object"!=typeof d&&(f.indexOf("_")<0&&r.push(f+'="'+d+'"'),h[f]=d)}var u=this.template.sub[t]
+if("object"==typeof u._sects)for(var v in u._sects){var m=[],y="attr-"+v,b="object"==typeof a[v]?a[v]:{},g=u._sects[v]
+if("object"==typeof g){for(var _ in g)b[_]=g[_]
+if(g._type){var S=this.getEvent(g._type)
+S&&m.push(S+'="'+c+'"')}g._action&&m.push('data-action="'+g._action+'"')}b._e_&&m.push("on"+b._e_+'="'+c+'"')
+for(var k in b)k.indexOf("_")<0?m.push(k+'="'+b[k]+'"'):h[k]=b[k]
+m.push('data-name="'+t+'"'),s>0&&m.push('data-index="'+(s-1)+'"'),h[y]=m.join(" ")}return s>0&&n(e).indexOf(n(a.value))>=0&&("select"==i&&r.push('selected="selected"'),("checkbox"==i||"radio"==i)&&r.push('checked="checked"')),h.attr=r.join(" "),h},this.node=function(t){return i(this.eId(t))},this.style="default",this.render=function(t){if(e(),this._f("wrd"),!this.container)throw new Error("Invalid container specified")
+var i=this.template.main[this.style],r={}
 if(!i)throw new Error("Invalid master template for style: "+this.style)
 if(t===!0&&(this.pData={}),!a(this.data)&&n(this.pData)!=n(this.data)){var h=a(this.pData)
-for(var l in this.template.sub){var o=this.renderElement(l,h)
-o&&(s[l]=o)}(h||!a(s))&&(this.container.innerHTML=this.htpl(i,s)),this.pState=r(this.state),this.pData=r(this.data),this._f("drd")}},this.renderElement=function(t,e){e=e===!0
-var i=this.data[t]||{},s=this.state[t]||"",l=""
-if("object"!=typeof this.template.sub[t]||a(i)){if(this.cnf.partialRender&&!e){var o=this.node(t)
-if(o)return o.parentNode.removeChild(o),!1}return""}var p=this.getCallback("rde",t)
-if("function"==typeof p)return p(s,i)
+for(var o in this.template.sub){var l=this.renderElement(o,h)
+l&&(r[o]=l)}(h||!a(r))&&(this.container.innerHTML=this.htpl(i,r)),this.pState=s(this.state),this.pData=s(this.data),this._f("drd")}},this.renderElement=function(t,e){e=e===!0
+var i=this.data[t]||{},r=this.state[t]||"",o=""
+if("object"!=typeof this.template.sub[t]||a(i)){if(this.cnf.partialRender&&!e){var l=this.node(t)
+if(l)return l.parentNode.removeChild(l),!1}return""}var p=this.getCallback("rde",t)
+if("function"==typeof p)return p(r,i)
 if(n(this.data[t])==n(this.pData[t]))return!1
 var c=this.template.sub[t],f=(c._type,this)
 if(c._wrapper){i.wrapper||(i.wrapper={})
-var d=this.parseElementData(t,s,i.wrapper,c._type),u=i.element||[],v=0,m=this.pData[t],y=[]
-m?y=r(m.element):e=!0
-var b=!1
+var d=this.parseElementData(t,r,i.wrapper,c._type),u=i.element||[],v=0,m=this.pData[t],y=[],b=!1
+m?(y=s(m.element),b=0===y.length):e=!0
+var g=!1
 if(u.map(function(a){v++
-var i=r(a),o=f.els(t,s,i),p=f.template.sub[t][o],d=f.parseElementData(t,s,i,c._type,v)
-if(p||(p=f.template.sub[t]["default"]),"select"==c._type)return void(l+=f.htpl(p,d))
-if(f.cnf.partialRender&&!e){var u=v-1,m=f.pData[t].element[u],y=f.data[t].element[u],g=null,_=f.node(t+"_"+v)
-if(b||(b=_.parentNode),n(m)==n(y))return
-g=f.htpl(p,d)
-var S
-b&&(_?g&&(S=new h(g,b),S.replace(_)):b&&(S=new h(g,b),S.right()))}else l+=f.htpl(p,d)}),b&&y.length>u.length&&y.map(function(e,a){if(a>=v){var i=f.node(t+"_"+a)
-i&&b.removeChild(i)}}),!("string"==typeof l&&l.length>1))return!1
-l=f.htpl(c._wrapper[0],d)+l+c._wrapper[1]}else{var g=this.els(t,s,i),_=this.template.sub[t][g],S=this.parseElementData(t,s,i,c._type)
-_||(_=this.template.sub[t]["default"]),l=this.htpl(_,S)}if(this.template.sub[t]._sibling){var k=this.node(this.template.sub[t]._sibling)
-if(k){var w=new h(l,k.parentNode)
-return w.right(),!1}}if(!e&&this.cnf.partialRender===!0&&l){var D=this.node(t),E=null
-if(D)return E=new h(l),E.replace(D),!1}return l},this.init=function(t,e){t&&(this.container=t),this.load(),e!==!1&&(this._f("sta"),this.render(),this._f("fin"))},this.toQuerystring=function(){var t=[]
+var i=s(a),l=f.els(t,r,i),p=f.template.sub[t][l],d=f.parseElementData(t,r,i,c._type,v)
+if(p||(p=f.template.sub[t]["default"]),"select"==c._type)return void(o+=f.htpl(p,d))
+if(!f.cnf.partialRender||e||b)o+=f.htpl(p,d)
+else{var u=v-1,m=f.pData[t].element[u],y=f.data[t].element[u],_=null,S=f.node(t+"_"+v)
+if(!g&&S&&(g=S.parentNode),n(m)==n(y))return
+_=f.htpl(p,d)
+var k
+g&&(S?_&&(k=new h(_,g),k.replace(S)):g&&(k=new h(_,g),k.right()))}}),g&&y.length>u.length&&y.map(function(e,a){if(a>=v){var i=f.node(t+"_"+a)
+i&&g.removeChild(i)}}),!("string"==typeof o&&o.length>1||0===v))return!1
+o=f.htpl(c._wrapper[0],d)+o+c._wrapper[1]}else{var _=this.els(t,r,i),S=this.template.sub[t][_],k=this.parseElementData(t,r,i,c._type)
+S||(S=this.template.sub[t]["default"]),o=this.htpl(S,k)}if(this.template.sub[t]._sibling){var w=this.node(this.template.sub[t]._sibling)
+if(w){var j=new h(o,w.parentNode)
+return j.right(),!1}}if(!e&&this.cnf.partialRender===!0&&o){var E=this.node(t),D=null
+if(E)return D=new h(o),D.replace(E),!1}return o},this.init=function(t,e){t&&(this.container=t),this.load(),e!==!1&&(this._f("sta"),this.render(),this._f("fin"))},this.toQuerystring=function(){var t=[]
 for(var e in this.state){var a=this.state[e]
 a&&t.push(e+"="+a)}return t.join("&")},this.d=function(t,e){return e?"object"==typeof this.data[t].element&&this.data[t].element[e]?this.data[t].element[e]:void 0:this.data[t]}}
-var o={},p=function(t,e){return o[t]||(o[t]=new l(t,e)),o[t]}
-s.SimpleApp=p,"undefined"!=typeof exports&&(exports.SimpleApp=p)}(this)
+var l={},p=function(t,e){return l[t]||(l[t]=new o(t,e)),l[t]}
+r.SimpleApp=p,"undefined"!=typeof exports&&(exports.SimpleApp=p)}(this)