UNPKG

ractive

Version:

Next-generation DOM manipulation

1 lines 19.7 kB
(function(t){"use strict";var e,i;e=function(t){var n,r;if(t)for(r in t)t.hasOwnProperty(r)&&(this[r]=t[r]);n={preserveWhitespace:!1,append:!1,twoway:!0,formatters:{},modifyArrays:!0};for(r in n)void 0===this[r]&&(this[r]=n[r]);if(void 0!==this.el&&(this.el=i(this.el)),this._subs={},void 0===this.viewmodel&&(this.viewmodel=new e.ViewModel),this.viewmodel.dependents.push(this),this.data&&this.viewmodel.set(this.data),this.partials)for(r in this.partials)if(this.partials.hasOwnProperty(r)&&"string"==typeof this.partials[r]){if(!e.compile)throw Error('Missing Anglebars.compile - cannot compile partial "'+r+'". Either precompile or use the version that includes the compiler');this.partials[r]=e.compile(this.partials[r],this)}if("string"==typeof this.template){if(!e.compile)throw Error("Missing Anglebars.compile - cannot compile template. Either precompile or use the version that includes the compiler");this.template=e.compile(this.template,this)}this.el&&this.render({el:this.el,callback:this.callback,append:this.append})},e.prototype={render:function(t){var n=t.el?i(t.el):this.el;if(!n)throw Error("You must specify a DOM element to render to");t.append||(n.innerHTML=""),t.callback&&(this.callback=t.callback),this.rendered=new e.DomFragment({model:this.template,anglebars:this,parentNode:n})},teardown:function(){this.rendered.teardown()},set:function(){return this.el.style.display,this.viewmodel.set.apply(this.viewmodel,arguments),this},get:function(){return this.viewmodel.get.apply(this.viewmodel,arguments)},update:function(){return this.viewmodel.update.apply(this.viewmodel,arguments),this},_format:function(t,i){var n,r,s,o,a,h;if(!i)return t;for(r=i.length,n=0;r>n;n+=1)s=i[n],o=s.name,a=s.args||[],h=this.formatters[o]||e.formatters[o],h&&(t=h.apply(this,[t].concat(a)));return t}},i=function(t){var e;if(!t)throw Error("No container element specified");if(t.tagName)return t;if("string"==typeof t&&(e=document.getElementById(t),!e&&document.querySelector&&(e=document.querySelector(t)),e.tagName))return e;if(t[0]&&t[0].tagName)return t[0];throw Error("Could not find container element")},e.isArray=function(t){return"[object Array]"===Object.prototype.toString.call(t)},e.isObject=function(t){return"[object Object]"===Object.prototype.toString.call(t)&&"function"!=typeof t},e.types={TEXT:1,INTERPOLATOR:2,TRIPLE:3,SECTION:4,INVERTED:5,CLOSING:6,ELEMENT:7,PARTIAL:8,COMMENT:9,DELIMCHANGE:10,MUSTACHE:11,TAG:12,ATTR_VALUE_TOKEN:13},function(t){t.on=function(t,e){var i=this;return this._subs[t]?this._subs[t].push(e):this._subs[t]=[e],{cancel:function(){i.off(t,e)}}},t.off=function(t,e){var i,n;e||(t?this._subs[t]=[]:this._subs={}),i=this._subs[t],i&&(n=i.indexOf(e),-1!==n&&i.splice(n,1))},t.fire=function(t){var e,i,n,r=this._subs[t];if(r)for(e=Array.prototype.slice.call(arguments,1),i=0,n=r.length;n>i;i+=1)r[i].apply(this,e)}}(e.prototype),e.formatters={equals:function(t,e){return t===e},greaterThan:function(t,e){return t>e},greaterThanEquals:function(t,e){return t>=e},lessThan:function(t,e){return e>t},lessThanEquals:function(t,e){return e>=t}},function(t){var e,i;t.ViewModel=function(t){this.data=t||{},this.pendingResolution=[],this.observers={},this.dependents=[]},t.ViewModel.prototype={set:function(t,i){var n,r,s,o,a,h,l;if("object"!=typeof t){for(this.dependents.forEach(function(e){e.setting||(e.setting=!0,e.fire("set",t,i),e.fire("set:"+t,i),e.setting=!1)}),r=e(t),o=this.data;r.length>1;)s=r.shift(),o=o[s]||{};for(s=r[0],o[s]=i,this._notifyObservers(t,i),a=this.pendingResolution.length;a--;)h=this.pendingResolution.splice(a,1)[0],l=this.getFullKeypath(h.view.model.ref,h.view.contextStack),void 0!==l?h.callback(l):this.registerUnresolvedKeypath(h)}else for(n in t)t.hasOwnProperty(n)&&this.set(n,t[n])},get:function(t){var i,n;if(!t)return void 0;for(i=e(t),n=this.data;i.length;)if(n&&(n=n[i.shift()]),void 0===n)return n;return n},update:function(t){if(t)this._notifyObservers(t,this.get(t));else for(t in this.data)this.data.hasOwnProperty(t)&&this._notifyObservers(t,this.get(t))},registerView:function(t){var e,i,n,r,s=this;return t.parentFragment&&t.model.ref in t.parentFragment.indexRefs?(r=t.parentFragment.indexRefs[t.model.ref],n=t.model.fmtrs?t.anglebars._format(r,t.model.fmtrs):r,t.update(n),void 0):(i=function(e){t.keypath=e,t.observerRefs=s.observe({keypath:e,priority:t.model.p||0,view:t}),n=s.get(e),t.model.fmtrs&&(n=t.anglebars._format(n,t.model.fmtrs)),t.update(n)},e=this.getFullKeypath(t.model.ref,t.contextStack),void 0===e?this.registerUnresolvedKeypath({view:t,callback:i}):i(e),void 0)},getFullKeypath:function(t,e){var i;if("."===t)return e[e.length-1];for(e=e.concat();e.length;)if(i=e.pop(),void 0!==this.get(i+"."+t))return i+"."+t;return void 0!==this.get(t)?t:void 0},registerUnresolvedKeypath:function(t){this.pendingResolution[this.pendingResolution.length]=t},_notifyObservers:function(t,e){var i,n,r,s,o,a=this,h=this.observers[t]||[];for(i=0;h.length>i;i+=1)if(r=h[i])for(n=0;r.length>n;n+=1)s=r[n],o=t!==s.originalAddress?a.get(s.originalAddress):e,s.view&&(s.view.model.fmtrs&&(o=s.view.anglebars._format(o,s.view.model.fmtrs)),s.view.update(o)),s.callback&&s.callback(o)},observe:function(t){var e,i,n=this,r=t.keypath,s=t.priority,o=[];if(2===arguments.length&&"string"==typeof arguments[0]&&"function"==typeof arguments[1])return this.observe({keypath:arguments[0],callback:arguments[1],priority:0});if(!t.keypath)return void 0;for(i=function(e){var i,a;i=n.observers[e]=n.observers[e]||[],i=i[s]=i[s]||[],a={originalAddress:r},t.view&&(a.view=t.view),t.callback&&(a.callback=t.callback),i[i.length]=a,o[o.length]={keypath:e,priority:s,observer:a}},e=t.keypath;-1!==e.lastIndexOf(".");)i(e),e=e.substr(0,e.lastIndexOf("."));return i(e),o},unobserve:function(t){var e,i,n;if(e=this.observers[t.keypath],e&&(i=e[t.priority])){if(i.indexOf)n=i.indexOf(t.observer);else for(var r=0,s=i.length;s>r;r+=1)if(i[r]===t.observer){n=r;break}-1!==n&&(i.splice(n,1),0===i.length&&delete e[t.priority],0===e.length&&delete this.observers[t.keypath])}},unobserveAll:function(t){for(;t.length;)this.unobserve(t.shift())}},t.ViewModel.prototype.cancelKeypathResolution=Array.prototype.filter?function(t){this.pendingResolution=this.pendingResolution.filter(function(e){return e.view!==t})}:function(t){var e,i=[];for(e=0;this.pendingResolution.length>e;e+=1)this.pendingResolution[e].view!==t&&(i[i.length]=this.pendingResolution[e]);this.pendingResolution=i},i=/\[\s*([0-9]+)\s*\]/g,e=function(t){var e;return e=t.replace(i,".$1"),e.split(".")}}(e),function(t,e){var i,n,r,s,o,a,h,l,u,d,c,f,p,g;n=t.types,s=t.isArray,o=t.isObject,a=function(t,e){return t.contains?t.contains(e):!0},r=function(t,i,n){var r,s,o,a=[];for(n=n||null,r=e.createElement("div"),r.innerHTML=t,o=r.childNodes.length,s=0;o>s;s+=1)a[s]=r.childNodes[s];for(s=0;o>s;s+=1)i.insertBefore(a[s],n);return a},c=function(t){this.model=t.model,this.anglebars=t.anglebars,this.viewmodel=t.anglebars.viewmodel,this.parentNode=t.parentNode,this.parentFragment=t.parentFragment,this.contextStack=t.contextStack||[],this.anchor=t.anchor,this.index=t.index,this.type=t.model.type,this.initialize(),this.viewmodel.registerView(this),!this.keypath&&this.model.inv&&this.update(!1)},i=function(t){if("string"==typeof t.model)return new h(t);switch(t.model.type){case n.INTERPOLATOR:return new f(t);case n.SECTION:return new g(t);case n.TRIPLE:return new p(t);case n.ELEMENT:return new l(t);case n.PARTIAL:return new u(t);default:throw"WTF? not sure what happened here..."}},t.DomFragment=function(t){var e,n,s,o,a;if("string"==typeof t.model)return this.nodes=r(t.model,t.parentNode,t.anchor),void 0;if(this.owner=t.owner,this.index=t.index,this.indexRefs={},this.owner&&this.owner.parentFragment){o=this.owner.parentFragment.indexRefs;for(a in o)o.hasOwnProperty(a)&&(this.indexRefs[a]=o[a])}for(t.indexRef&&(this.indexRefs[t.indexRef]=t.index),s={anglebars:t.anglebars,parentNode:t.parentNode,contextStack:t.contextStack,anchor:t.anchor,parentFragment:this},this.items=[],this.queue=[],e=t.model.length,n=0;e>n;n+=1)s.model=t.model[n],s.index=n,this.items[n]=i(s)},t.DomFragment.prototype={teardown:function(){var t;if(this.nodes)for(;this.nodes.length;)t=this.nodes.pop(),t.parentNode.removeChild(t);else for(;this.items.length;)this.items.pop().teardown()},firstNode:function(){return this.items[0]?this.items[0].firstNode():this.parentSection?this.parentSection.findNextNode(this):null},findNextNode:function(t){var e;return e=t.index,this.items[e+1]?this.items[e+1].firstNode():this.parentSection?this.parentSection.findNextNode(this):null}},u=function(e){this.fragment=new t.DomFragment({model:e.anglebars.partials[e.model.ref]||[],anglebars:e.anglebars,parentNode:e.parentNode,contextStack:e.contextStack,anchor:e.anchor,owner:this})},u.prototype={teardown:function(){this.fragment.teardown()}},h=function(t){this.node=e.createTextNode(t.model),this.index=t.index,this.anglebars=t.anglebars,this.parentNode=t.parentNode,this.parentNode.insertBefore(this.node,t.anchor||null)},h.prototype={teardown:function(){a(this.anglebars.el,this.node)&&this.parentNode.removeChild(this.node)},firstNode:function(){return this.node}},l=function(i){var n,r,s,o,a,h;if(r=this.model=i.model,this.anglebars=i.anglebars,this.viewmodel=i.anglebars.viewmodel,this.parentFragment=i.parentFragment,this.parentNode=i.parentNode,this.index=i.index,r.attrs&&r.attrs.xmlns){if(s=r.attrs.xmlns,"string"!=typeof s)throw"Namespace attribute cannot contain mustaches"}else s=this.parentNode.namespaceURI;this.node=e.createElementNS(s,r.tag),this.attributes=[];for(a in r.attrs)r.attrs.hasOwnProperty(a)&&(h=r.attrs[a],o=new d({owner:this,name:a,value:h,anglebars:i.anglebars,parentNode:this.node,contextStack:i.contextStack}),"value"!==a||!this.anglebars.twoway||"input"!==r.tag.toLowerCase()&&"textarea"!==r.tag.toLowerCase()||(n=o),this.attributes[this.attributes.length]=o);n&&this.bind(n,i.anglebars.lazy),r.frag&&("string"==typeof r.frag?this.node.innerHTML=r.frag:this.children=new t.DomFragment({model:r.frag,anglebars:i.anglebars,parentNode:this.node,contextStack:i.contextStack,anchor:null,owner:this})),this.parentNode.insertBefore(this.node,i.anchor||null)},l.prototype={bind:function(e,i){var n,r,s,o,a=this.viewmodel,h=this.node;if(r=!0,!e.fragment||1!==e.fragment.items.length||e.fragment.items[0].type!==t.types.INTERPOLATOR||e.fragment.items[0].model.formatters&&e.fragment.items[0].model.formatters.length)throw"Not a valid two-way data binding candidate - must be a single interpolator with no formatters";s=e.fragment.items[0],o=s.keypath||s.model.partialKeypath,n=function(){var t=h.value;"0"===t?t=0:""!==t&&(t=+t||t),a.set(o,t)},n(),h.addEventListener("change",n),i||h.addEventListener("keyup",n)},teardown:function(){for(a(this.anglebars.el,this.node)&&this.parentNode.removeChild(this.node),this.children&&this.children.teardown();this.attributes.length;)this.attributes.pop().teardown()},firstNode:function(){return this.node}},d=function(e){var i,n,r,s,o,a;if(i=e.name,n=e.value,this.owner=e.owner,r=i.indexOf(":"),-1!==r){if(s=i.substr(0,r),"xmlns"===s)o=null;else for(a=e.parentNode;a&&!o;)o=a.getAttribute("xmlns:"+s),a=a.parentNode||e.owner.parentFragment.owner.node||e.owner.parentFragment.owner.parentNode;o&&(this.namespace=o)}return"string"==typeof n?(o?e.parentNode.setAttributeNS(o,i.replace(s+":",""),n):e.parentNode.setAttribute(i,n),void 0):(this.parentNode=e.parentNode,this.name=i,this.children=[],this.parentFragment=this.owner.parentFragment,this.fragment=new t.TextFragment({model:n,anglebars:e.anglebars,owner:this,contextStack:e.contextStack}),this.ready=!0,this.update(),void 0)},d.prototype={teardown:function(){if(this.children)for(;this.children.length;)this.children.pop().teardown()},bubble:function(){this.update()},update:function(){var t=this.value;this.ready&&(this.value=""+this.fragment,this.value!==t&&(this.namespace?this.parentNode.setAttributeNS(this.namespace,this.name,this.value):this.parentNode.setAttribute(this.name,this.value)))}},f=function(t){c.call(this,t)},f.prototype={initialize:function(){this.node=e.createTextNode(""),this.parentNode.insertBefore(this.node,this.anchor||null)},teardown:function(){this.observerRefs?this.viewmodel.unobserveAll(this.observerRefs):this.viewmodel.cancelKeypathResolution(this),a(this.anglebars.el,this.node)&&this.parentNode.removeChild(this.node)},update:function(t){t!==this.text&&(this.text=t,this.node.data=t)},firstNode:function(){return this.node}},p=function(t){c.call(this,t)},p.prototype={initialize:function(){this.nodes=[]},teardown:function(){if(a(this.anglebars.el,this.parentNode))for(;this.nodes.length;)this.parentNode.removeChild(this.nodes.pop());this.observerRefs?this.viewmodel.unobserveAll(this.observerRefs):this.viewmodel.cancelKeypathResolution(this)},firstNode:function(){return this.nodes[0]?this.nodes[0]:this.parentFragment.findNextNode(this)},update:function(t){var e;if(t!==this.html){for(this.html=t;this.nodes.length;)this.parentNode.removeChild(this.nodes.pop());e=this.anchor||this.parentFragment.findNextNode(this),this.nodes=r(t,this.parentNode,e)}}},g=function(t){c.call(this,t)},g.prototype={initialize:function(){this.views=[],this.length=0},teardown:function(){this.unrender(),this.observerRefs?this.viewmodel.unobserveAll(this.observerRefs):this.viewmodel.cancelKeypathResolution(this)},firstNode:function(){return this.views[0]?this.views[0].firstNode():this.parentFragment.findNextNode(this)},findNextNode:function(t){return this.views[t.index+1]?this.views[t.index+1].firstNode():this.parentFragment.findNextNode(this)},unrender:function(){for(;this.views.length;)this.views.shift().teardown()},update:function(e){var i,n,r,a,h,l;if(h={model:this.model.frag,anglebars:this.anglebars,parentNode:this.parentNode,anchor:this.parentFragment.findNextNode(this),owner:this},l=s(e),l&&this.anglebars.modifyArrays&&t.modifyArray(e,this.keypath,this.anglebars.viewmodel),l&&0===e.length&&(i=!0),this.model.inv){if(e&&!i){if(this.length)return this.unrender(),this.length=0,void 0}else if(!this.length)return a=this.parentFragment.findNextNode(this),h.contextStack=this.contextStack,h.index=0,this.views[0]=new t.DomFragment(h),this.length=1,void 0}else if(l){if(e.length<this.length)for(r=this.views.splice(e.length,this.length-e.length);r.length;)r.pop().teardown();else if(e.length>this.length)for(n=this.length;e.length>n;n+=1)h.contextStack=this.contextStack.concat(this.keypath+"."+n),h.index=n,this.model.i&&(h.indexRef=this.model.i),this.views[n]=new t.DomFragment(h);this.length=e.length}else o(e)?this.length||(h.contextStack=this.contextStack.concat(this.keypath),h.index=0,this.views[0]=new t.DomFragment(h),this.length=1):e&&!i?this.length||(h.contextStack=this.contextStack,h.index=0,this.views[0]=new t.DomFragment(h),this.length=1):this.length&&(this.unrender(),this.length=0)}}}(e,document),function(t){var e,i,n,r,s,o,a,h,l,u;i=t.types,n=[],n[i.TEXT]="Text",n[i.INTERPOLATOR]="Interpolator",n[i.TRIPLE]="Triple",n[i.SECTION]="Section",r=t.isArray,s=t.isObject,a=function(t){this.model=t.model,this.anglebars=t.anglebars,this.viewmodel=t.anglebars.viewmodel,this.parent=t.parent,this.parentFragment=t.parentFragment,this.contextStack=t.contextStack||[],this.type=t.model.type,this.initialize&&this.initialize(),this.viewmodel.registerView(this),!this.keypath&&this.model.inv&&this.update(!1)},e=function(t){if("string"==typeof t.model)return new o(t.model);switch(t.model.type){case i.INTERPOLATOR:return new h(t);case i.TRIPLE:return new l(t);case i.SECTION:return new u(t);default:throw"Something went wrong in a rather interesting way"}},t.TextFragment=function(t){var i,n,r,s,o;if(this.owner=t.owner,this.index=t.index,this.items=[],this.indexRefs={},this.owner&&this.owner.parentFragment){s=this.owner.parentFragment.indexRefs;for(o in s)s.hasOwnProperty(o)&&(this.indexRefs[o]=s[o])}for(t.indexRef&&(this.indexRefs[t.indexRef]=t.index),r={anglebars:t.anglebars,parentFragment:this,parent:this.owner,contextStack:t.contextStack},i=t.model?t.model.length:0,n=0;i>n;n+=1)r.model=t.model[n],this.items[this.items.length]=e(r);this.value=this.items.join("")},t.TextFragment.prototype={bubble:function(){this.value=this.items.join(""),this.parent.bubble()},teardown:function(){var t,e;for(t=this.items.length,e=0;t>e;e+=1)this.items[e].teardown()},toString:function(){return void 0===this.value?"":this.value}},o=function(t){this.text=t},o.prototype={toString:function(){return this.text},teardown:function(){}},h=function(t){a.call(this,t)},h.prototype={update:function(t){this.value=t,this.parent.bubble()},bubble:function(){this.parent.bubble()},teardown:function(){this.observerRefs?this.viewmodel.unobserveAll(this.observerRefs):this.viewmodel.cancelKeypathResolution(this)},toString:function(){return void 0===this.value?"":this.value}},l=h,u=function(t){a.call(this,t)},u.prototype={initialize:function(){this.children=[],this.length=0},teardown:function(){this.unrender(),this.observerRefs?this.viewmodel.unobserveAll(this.observerRefs):this.viewmodel.cancelKeypathResolution(this)},unrender:function(){for(;this.children.length;)this.children.shift().teardown();this.length=0},bubble:function(){this.value=this.children.join(""),this.parent.bubble()},update:function(e){var i,n,s,o;if(o=r(e),o&&this.anglebars.modifyArrays&&t.modifyArray(e,this.keypath,this.anglebars.viewmodel),o&&0===e.length&&(i=!0),this.model.inv)return e&&!i?this.length&&(this.unrender(),this.length=0):this.length||(this.children[0]=new t.TextFragment(this.model.frag,this.anglebars,this,this.contextStack),this.length=1),this.value=this.children.join(""),this.parent.bubble(),void 0;if("object"==typeof e)if(o){if(e.length<this.length)for(s=this.children.splice(e.length,this.length-e.length);s.length;)s.shift().teardown();else{for(n=0;this.length>n;n+=1)this.viewmodel.update(this.keypath+"."+n);if(e.length>this.length)for(n=this.length;e.length>n;n+=1)this.children[n]=new t.TextFragment(this.model.frag,this.anglebars,this,this.contextStack.concat(this.keypath+"."+n))}this.length=e.length}else this.length||(this.children[0]=new t.TextFragment(this.model.frag,this.anglebars,this,this.contextStack.concat(this.keypath)),this.length=1);else e&&!i?this.length||(this.children[0]=new t.TextFragment(this.model.frag,this.anglebars,this,this.contextStack),this.length=1):this.length&&(this.unrender(),this.length=0);this.value=this.children.join(""),this.parent.bubble()},toString:function(){return void 0===this.value?"":this.value}}}(e),function(t){t.extend=function(e){var i,n,r;i=this,n=function(){t.apply(this,arguments),this.init&&this.init.apply(this,arguments)};for(r in i.prototype)i.prototype.hasOwnProperty(r)&&(n.prototype[r]=i.prototype[r]);for(r in e)if(e.hasOwnProperty(r)){if(t.prototype.hasOwnProperty(r))throw Error('Cannot override "'+r+'" method or property of Anglebars prototype');n.prototype[r]=e[r]}return n.extend=i.extend,n}}(e),function(t){var e;t.modifyArray=function(t,i,n){var r,s,o,a;t._anglebars?(r=t._anglebars.viewmodels,s=t._anglebars.keypathsByIndex,o=r.indexOf(n),-1===o&&(o=r.length,r[o]=n),a=s[o],-1===a.indexOf(i)&&(a[a.length]=i)):(t._anglebars={viewmodels:[n],keypathsByIndex:[[i]]},e(t))},e=function(t){var e=function(t){var e,i;e=t._anglebars.viewmodels,i=t._anglebars.keypathsByIndex,e.forEach(function(e,n){var r=i[n];r.forEach(function(i){e.set(i,t)})})};["pop","push","reverse","shift","sort","splice","unshift"].forEach(function(i){t[i]=function(){var n=Array.prototype[i].apply(this,arguments);return e(t),n}})}}(e),"undefined"!=typeof module&&module.exports?module.exports=e:"function"==typeof define&&define.amd?define(function(){return e}):t.Anglebars=e})(this);