| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743 |
- /*!
- PURE Unobtrusive Rendering Engine for HTML
- Licensed under the MIT licenses.
- More information at: http://www.opensource.org
- Copyright (c) 2010 Michael Cvilic - BeeBole.com
- Thanks to Rog Peppe for the functional JS jump
- revision: 2.33
- */
- exports.pureInit = function(window, document) {
- var $p, pure = $p = function(){
- var sel = arguments[0],
- ctxt = false;
- if(typeof sel === 'string'){
- ctxt = arguments[1] || false;
- }
- return $p.core(sel, ctxt);
- };
- $p.core = function(sel, ctxt, plugins){
- //get an instance of the plugins
- var plugins = getPlugins(),
- templates = [];
- //search for the template node(s)
- switch(typeof sel){
- case 'string':
- templates = plugins.find(ctxt || document, sel);
- if(templates.length === 0) {
- error('The template "' + sel + '" was not found');
- }
- break;
- case 'undefined':
- error('The template root is undefined, check your selector');
- break;
- default:
- templates = [sel];
- }
-
- for(var i = 0, ii = templates.length; i < ii; i++){
- plugins[i] = templates[i];
- }
- plugins.length = ii;
- // set the signature string that will be replaced at render time
- var Sig = '_s' + Math.floor( Math.random() * 1000000 ) + '_',
- // another signature to prepend to attributes and avoid checks: style, height, on[events]...
- attPfx = '_a' + Math.floor( Math.random() * 1000000 ) + '_',
- // rx to parse selectors, e.g. "+tr.foo[class]"
- selRx = /^(\+)?([^\@\+]+)?\@?([^\+]+)?(\+)?$/,
- // set automatically attributes for some tags
- autoAttr = {
- IMG:'src',
- INPUT:'value'
- };
-
- return plugins;
- /* * * * * * * * * * * * * * * * * * * * * * * * * *
- core functions
- * * * * * * * * * * * * * * * * * * * * * * * * * */
- // error utility
- function error(e){
- window.alert(e);
- if(typeof console !== 'undefined'){
- console.log(e);
- debugger;
- }
- throw('pure error: ' + e);
- }
-
- //return a new instance of plugins
- function getPlugins(){
- var plugins = $p.plugins,
- f = function(){};
- f.prototype = plugins;
- // do not overwrite functions if external definition
- f.prototype.compile = plugins.compile || compile;
- f.prototype.render = plugins.render || render;
- f.prototype.autoRender = plugins.autoRender || autoRender;
- f.prototype.find = plugins.find || find;
-
- // give the compiler and the error handling to the plugin context
- f.prototype._compiler = compiler;
- f.prototype._error = error;
-
- return new f();
- }
-
- // returns the outer HTML of a node
- function outerHTML(node){
- // if IE take the internal method otherwise build one
- return node.outerHTML || (
- function(n){
- var div = document.createElement('div'), h;
- div.appendChild( n.cloneNode(true) );
- h = div.innerHTML;
- div = null;
- return h;
- })(node);
- }
- // check if the argument is an array
- function isArray(o){
- return Object.prototype.toString.call( o ) === "[object Array]";
- }
-
- // returns the string generator function
- function wrapquote(qfn, f){
- return function(ctxt){
- return qfn('' + f.call(ctxt.context, ctxt));
- };
- }
- // convert a JSON HTML structure to a dom node and returns the leaf
- function domify(ns, pa){
- pa = pa || document.createDocumentFragment();
- var nn, leaf;
- for(var n in ns){
- nn = document.createElement(n);
- pa.appendChild(nn);
- if(typeof ns[n] === 'object'){
- leaf = domify(ns[n], nn);
- }else{
- leaf = document.createElement(ns[n]);
- nn.appendChild(leaf);
- }
- }
- return leaf;
- };
-
- // default find using querySelector when available on the browser
- function find(n, sel){
- if(typeof n === 'string'){
- sel = n;
- n = false;
- }
- if(typeof document.querySelectorAll !== 'undefined'){
- return (n||document).querySelectorAll( sel );
- }else{
- error('You can test PURE standalone with: iPhone, FF3.5+, Safari4+ and IE8+\n\nTo run PURE on your browser, you need a JS library/framework with a CSS selector engine');
- }
- }
-
- // create a function that concatenates constant string
- // sections (given in parts) and the results of called
- // functions to fill in the gaps between parts (fns).
- // fns[n] fills in the gap between parts[n-1] and parts[n];
- // fns[0] is unused.
- // this is the inner template evaluation loop.
- function concatenator(parts, fns){
- return function(ctxt){
- var strs = [ parts[ 0 ] ],
- n = parts.length,
- fnVal, pVal, attLine, pos;
- for(var i = 1; i < n; i++){
- fnVal = fns[i]( ctxt );
- pVal = parts[i];
-
- // if the value is empty and attribute, remove it
- if(fnVal === ''){
- attLine = strs[ strs.length - 1 ];
- if( ( pos = attLine.search( /[\w]+=\"?$/ ) ) > -1){
- strs[ strs.length - 1 ] = attLine.substring( 0, pos );
- pVal = pVal.substr( 1 );
- }
- }
-
- strs[ strs.length ] = fnVal;
- strs[ strs.length ] = pVal;
- }
- return strs.join('');
- };
- }
- // parse and check the loop directive
- function parseloopspec(p){
- var m = p.match( /^(\w+)\s*<-\s*(\S+)?$/ );
- if(m === null){
- error('bad loop spec: "' + p + '"');
- }
- if(m[1] === 'item'){
- error('"item<-..." is a reserved word for the current running iteration.\n\nPlease choose another name for your loop.');
- }
- if( !m[2] || (m[2] && (/context/i).test(m[2]))){ //undefined or space(IE)
- m[2] = function(ctxt){return ctxt.context;};
- }
- return {name: m[1], sel: m[2]};
- }
- // parse a data selector and return a function that
- // can traverse the data accordingly, given a context.
- function dataselectfn(sel){
- if(typeof(sel) === 'function'){
- return sel;
- }
- //check for a valid js variable name with hyphen(for properties only) and $
- var m = sel.match(/^[a-zA-Z$_][\w$]*(\.[\w$-]*[^\.])*$/);
- if(m === null){
- var found = false, s = sel, parts = [], pfns = [], i = 0, retStr;
- // check if literal
- if(/\'|\"/.test( s.charAt(0) )){
- if(/\'|\"/.test( s.charAt(s.length-1) )){
- retStr = s.substring(1, s.length-1);
- return function(){ return retStr; };
- }
- }else{
- // check if literal + #{var}
- while((m = s.match(/#\{([^{}]+)\}/)) !== null){
- found = true;
- parts[i++] = s.slice(0, m.index);
- pfns[i] = dataselectfn(m[1]);
- s = s.slice(m.index + m[0].length, s.length);
- }
- }
- if(!found){
- error('bad data selector syntax: ' + sel);
- }
- parts[i] = s;
- return concatenator(parts, pfns);
- }
- m = sel.split('.');
- return function(ctxt){
- var data = ctxt.context;
- if(!data){
- return '';
- }
- var v = ctxt[m[0]],
- i = 0;
- if(v && v.item){
- data = v.item;
- i += 1;
- }
- var n = m.length;
- for(; i < n; i++){
- if(!data){break;}
- data = data[m[i]];
- }
- return (!data && data !== 0) ? '':data;
- };
- }
- // wrap in an object the target node/attr and their properties
- function gettarget(dom, sel, isloop){
- var osel, prepend, selector, attr, append, target = [];
- if( typeof sel === 'string' ){
- osel = sel;
- var m = sel.match(selRx);
- if( !m ){
- error( 'bad selector syntax: ' + sel );
- }
-
- prepend = m[1];
- selector = m[2];
- attr = m[3];
- append = m[4];
-
- if(selector === '.' || ( !selector && attr ) ){
- target[0] = dom;
- }else{
- target = plugins.find(dom, selector);
- }
- if(!target || target.length === 0){
- return error('The node "' + sel + '" was not found in the template');
- }
- }else{
- // autoRender node
- prepend = sel.prepend;
- attr = sel.attr;
- append = sel.append;
- target = [dom];
- }
-
- if( prepend || append ){
- if( prepend && append ){
- error('append/prepend cannot take place at the same time');
- }else if( isloop ){
- error('no append/prepend/replace modifiers allowed for loop target');
- }else if( append && isloop ){
- error('cannot append with loop (sel: ' + osel + ')');
- }
- }
- var setstr, getstr, quotefn, isStyle, isClass, attName;
- if(attr){
- isStyle = (/^style$/i).test(attr);
- isClass = (/^class$/i).test(attr);
- attName = isClass ? 'className' : attr;
- setstr = function(node, s) {
- node.setAttribute(attPfx + attr, s);
- if (attName in node && !isStyle) {
- node[attName] = '';
- }
- if (node.nodeType === 1) {
- node.removeAttribute(attr);
- isClass && node.removeAttribute(attName);
- }
- };
- if(isStyle) {
- getstr = function(node){ return node.style.cssText; };
- }else if(isClass) {
- getstr = function(node){ return node.className; };
- }else{
- getstr = function(node){ return node.getAttribute(attr); };
- }
- if (isStyle || isClass) {//IE no quotes special care
- quotefn = function(s){ return s.replace(/\"/g, '"'); };
- }else {
- quotefn = function(s){ return s.replace(/\"/g, '"').replace(/\s/g, ' '); };
- }
- }else{
- if(isloop){
- setstr = function(node, s){
- // we can have a null parent node
- // if we get overlapping targets.
- var pn = node.parentNode;
- if(pn){
- //replace node with s
- pn.insertBefore( document.createTextNode( s ), node.nextSibling );
- pn.removeChild( node );
- }
- };
- }else{
- getstr = function(node){
- return node.innerHTML;
- };
- setstr = function(node, s, ap){
- if(ap === true){
- node.innerHTML = s;
- }else{
- node.innerHTML = '';
- node.appendChild( document.createTextNode( s ));
- }
- };
- }
- quotefn = function(s){
- return s;
- };
- }
- var setfn;
- if(prepend){
- setfn = function(node, s){
- setstr( node, s + getstr( node ) , true);
- };
- }else if(append){
- setfn = function(node, s){
- setstr( node, getstr( node ) + s , true);
- };
- }else{
- setfn = function(node, s){
- setstr( node, s );
- };
- }
- return {attr: attr, nodes: target, set: setfn, sel: osel, quotefn: quotefn};
- }
- function setsig(target, n){
- var sig = Sig + n + ':';
- for(var i = 0; i < target.nodes.length; i++){
- // could check for overlapping targets here.
- target.set( target.nodes[i], sig );
- }
- }
- // read de loop data, and pass it to the inner rendering function
- function loopfn(name, dselect, inner, sorter){
- return function(ctxt){
- var a = dselect(ctxt),
- old = ctxt[name],
- temp = { items : a },
- strs = [],
- buildArg = function(idx, temp){
- ctxt.pos = temp.pos = idx;
- ctxt.item = temp.item = a[ idx ];
- ctxt.items = a;
- strs.push( inner.call(temp, ctxt ) );
- };
- ctxt[name] = temp;
- if( isArray(a) ){
- if(typeof sorter !== 'undefined'){
- a.sort(sorter);
- }
- //loop on array
- for(var i = 0, ii = a.length || 0; i < ii; i++){
- buildArg(i, temp);
- }
- }else{
- if(typeof sorter !== 'undefined'){
- error('sort is only available on arrays, not objects');
- }
- //loop on collections
- for(var prop in a){
- a.hasOwnProperty( prop ) && buildArg(prop, temp);
- }
- }
- typeof old !== 'undefined' ? ctxt[name] = old : delete ctxt[name];
- return strs.join('');
- };
- }
- // generate the template for a loop node
- function loopgen(dom, sel, loop, fns){
- var already = false, ls, sorter, prop;
- for(prop in loop){
- if(loop.hasOwnProperty(prop)){
- if(prop === 'sort'){
- sorter = loop.sort;
- continue;
- }
- if(already){
- error('cannot have more than one loop on a target');
- }
- ls = prop;
- already = true;
- }
- }
- if(!ls){
- error('no loop spec');
- }
- var dsel = loop[ls];
- // if it's a simple data selector then we default to contents, not replacement.
- if(typeof(dsel) === 'string' || typeof(dsel) === 'function'){
- loop = {};
- loop[ls] = {root: dsel};
- return loopgen(dom, sel, loop, fns);
- }
- var spec = parseloopspec(ls),
- itersel = dataselectfn(spec.sel),
- target = gettarget(dom, sel, true),
- nodes = target.nodes;
-
- for(i = 0; i < nodes.length; i++){
- var node = nodes[i],
- inner = compiler(node, dsel);
- fns[fns.length] = wrapquote(target.quotefn, loopfn(spec.name, itersel, inner, sorter));
- target.nodes = [node]; // N.B. side effect on target.
- setsig(target, fns.length - 1);
- }
- }
-
- function getAutoNodes(n, data){
- var ns = n.getElementsByTagName('*'),
- an = [],
- openLoops = {a:[],l:{}},
- cspec,
- isNodeValue,
- i, ii, j, jj, ni, cs, cj;
- //for each node found in the template
- for(i = -1, ii = ns.length; i < ii; i++){
- ni = i > -1 ?ns[i]:n;
- if(ni.nodeType === 1 && ni.className !== ''){
- //when a className is found
- cs = ni.className.split(' ');
- // for each className
- for(j = 0, jj=cs.length;j<jj;j++){
- cj = cs[j];
- // check if it is related to a context property
- cspec = checkClass(cj, ni.tagName);
- // if so, store the node, plus the type of data
- if(cspec !== false){
- isNodeValue = (/nodevalue/i).test(cspec.attr);
- if(cspec.sel.indexOf('@') > -1 || isNodeValue){
- ni.className = ni.className.replace('@'+cspec.attr, '');
- if(isNodeValue){
- cspec.attr = false;
- }
- }
- an.push({n:ni, cspec:cspec});
- }
- }
- }
- }
- return an;
-
- function checkClass(c, tagName){
- // read the class
- var ca = c.match(selRx),
- attr = ca[3] || autoAttr[tagName],
- cspec = {prepend:!!ca[1], prop:ca[2], attr:attr, append:!!ca[4], sel:c},
- i, ii, loopi, loopil, val;
- // check in existing open loops
- for(i = openLoops.a.length-1; i >= 0; i--){
- loopi = openLoops.a[i];
- loopil = loopi.l[0];
- val = loopil && loopil[cspec.prop];
- if(typeof val !== 'undefined'){
- cspec.prop = loopi.p + '.' + cspec.prop;
- if(openLoops.l[cspec.prop] === true){
- val = val[0];
- }
- break;
- }
- }
- // not found check first level of data
- if(typeof val === 'undefined'){
- val = isArray(data) ? data[0][cspec.prop] : data[cspec.prop];
- // nothing found return
- if(typeof val === 'undefined'){
- return false;
- }
- }
- // set the spec for autoNode
- if(isArray(val)){
- openLoops.a.push( {l:val, p:cspec.prop} );
- openLoops.l[cspec.prop] = true;
- cspec.t = 'loop';
- }else{
- cspec.t = 'str';
- }
- return cspec;
- }
- }
- // returns a function that, given a context argument,
- // will render the template defined by dom and directive.
- function compiler(dom, directive, data, ans){
- var fns = [];
- // autoRendering nodes parsing -> auto-nodes
- ans = ans || data && getAutoNodes(dom, data);
- if(data){
- var j, jj, cspec, n, target, nodes, itersel, node, inner;
- // for each auto-nodes
- while(ans.length > 0){
- cspec = ans[0].cspec;
- n = ans[0].n;
- ans.splice(0, 1);
- if(cspec.t === 'str'){
- // if the target is a value
- target = gettarget(n, cspec, false);
- setsig(target, fns.length);
- fns[fns.length] = wrapquote(target.quotefn, dataselectfn(cspec.prop));
- }else{
- // if the target is a loop
- itersel = dataselectfn(cspec.sel);
- target = gettarget(n, cspec, true);
- nodes = target.nodes;
- for(j = 0, jj = nodes.length; j < jj; j++){
- node = nodes[j];
- inner = compiler(node, false, data, ans);
- fns[fns.length] = wrapquote(target.quotefn, loopfn(cspec.sel, itersel, inner));
- target.nodes = [node];
- setsig(target, fns.length - 1);
- }
- }
- }
- }
- // read directives
- var target, dsel;
- for(var sel in directive){
- if(directive.hasOwnProperty(sel)){
- dsel = directive[sel];
- if(typeof(dsel) === 'function' || typeof(dsel) === 'string'){
- // set the value for the node/attr
- target = gettarget(dom, sel, false);
- setsig(target, fns.length);
- fns[fns.length] = wrapquote(target.quotefn, dataselectfn(dsel));
- }else{
- // loop on node
- loopgen(dom, sel, dsel, fns);
- }
- }
- }
- // convert node to a string
- var h = outerHTML(dom), pfns = [];
- // IE adds an unremovable "selected, value" attribute
- // hard replace while waiting for a better solution
- h = h.replace(/<([^>]+)\s(value\=""|selected)\s?([^>]*)>/ig, "<$1 $3>");
-
- // remove attribute prefix
- h = h.split(attPfx).join('');
- // slice the html string at "Sig"
- var parts = h.split( Sig ), p;
- // for each slice add the return string of
- for(var i = 1; i < parts.length; i++){
- p = parts[i];
- // part is of the form "fn-number:..." as placed there by setsig.
- pfns[i] = fns[ parseInt(p, 10) ];
- parts[i] = p.substring( p.indexOf(':') + 1 );
- }
- return concatenator(parts, pfns);
- }
- // compile the template with directive
- // if a context is passed, the autoRendering is triggered automatically
- // return a function waiting the data as argument
- function compile(directive, ctxt, template){
- var rfn = compiler( ( template || this[0] ).cloneNode(true), directive, ctxt);
- return function(context){
- return rfn({context:context});
- };
- }
- //compile with the directive as argument
- // run the template function on the context argument
- // return an HTML string
- // should replace the template and return this
- function render(ctxt, directive){
- var fn = typeof directive === 'function' ? directive : plugins.compile( directive, false, this[0] );
- for(var i = 0, ii = this.length; i < ii; i++){
- this[i] = replaceWith( this[i], fn( ctxt, false ));
- }
- context = null;
- return this;
- }
- // compile the template with autoRender
- // run the template function on the context argument
- // return an HTML string
- function autoRender(ctxt, directive){
- var fn = plugins.compile( directive, ctxt, this[0] );
- for(var i = 0, ii = this.length; i < ii; i++){
- this[i] = replaceWith( this[i], fn( ctxt, false));
- }
- context = null;
- return this;
- }
-
- function replaceWith(elm, html){
- var tagName = elm.tagName, ne, pa, ep, parent = {TABLE:{}};
- if((/TD|TR|TH/).test(tagName)){
- var parents = { TR:{TABLE:'TBODY'}, TD:{TABLE:{TBODY:'TR'}}, TH:{TABLE:{THEAD:'TR'}} };
- pa = domify( parents[ tagName ] );
- }else if( ( /TBODY|THEAD|TFOOT/ ).test( tagName )){
- pa = document.createElement('TABLE');
- }else{
- pa = document.createElement('SPAN');
- }
-
- var sys = require("sys");
- ep = elm.parentNode;
- // avoid IE mem leak
- ep.insertBefore(pa, elm);
- ep.removeChild(elm);
- // pa.style.display = 'none';
- pa.innerHTML = html;
- ne = pa.firstChild;
- ep.insertBefore(ne, pa);
- ep.removeChild(pa);
- elm = ne;
-
- pa = ne = ep = null;
- return elm;
- }
- };
- $p.plugins = {};
- $p.libs = {
- dojo:function(){
- if(typeof document.querySelector === 'undefined'){
- $p.plugins.find = function(n, sel){
- return dojo.query(sel, n);
- };
- }
- },
- domassistant:function(){
- if(typeof document.querySelector === 'undefined'){
- $p.plugins.find = function(n, sel){
- return $(n).cssSelect(sel);
- };
- }
- DOMAssistant.attach({
- publicMethods : [ 'compile', 'render', 'autoRender'],
- compile:function(directive, ctxt){ return $p(this).compile(directive, ctxt); },
- render:function(ctxt, directive){ return $( $p(this).render(ctxt, directive) )[0]; },
- autoRender:function(ctxt, directive){ return $( $p(this).autoRender(ctxt, directive) )[0]; }
- });
- },
- jquery:function(){
- if(typeof document.querySelector === 'undefined'){
- $p.plugins.find = function(n, sel){
- return $(n).find(sel);
- };
- }
- jQuery.fn.extend({
- compile:function(directive, ctxt){ return $p(this[0]).compile(directive, ctxt); },
- render:function(ctxt, directive){ return jQuery( $p( this[0] ).render( ctxt, directive ) ); },
- autoRender:function(ctxt, directive){ return jQuery( $p( this[0] ).autoRender( ctxt, directive ) ); }
- });
- },
- mootools:function(){
- if(typeof document.querySelector === 'undefined'){
- $p.plugins.find = function(n, sel){
- return $(n).getElements(sel);
- };
- }
- Element.implement({
- compile:function(directive, ctxt){ return $p(this).compile(directive, ctxt); },
- render:function(ctxt, directive){ return $p(this).render(ctxt, directive); },
- autoRender:function(ctxt, directive){ return $p(this).autoRender(ctxt, directive); }
- });
- },
- prototype:function(){
- if(typeof document.querySelector === 'undefined'){
- $p.plugins.find = function(n, sel){
- n = n === document ? n.body : n;
- return typeof n === 'string' ? $$(n) : $(n).select(sel);
- };
- }
- Element.addMethods({
- compile:function(element, directive, ctxt){ return $p(element).compile(directive, ctxt); },
- render:function(element, ctxt, directive){ return $p(element).render(ctxt, directive); },
- autoRender:function(element, ctxt, directive){ return $p(element).autoRender(ctxt, directive); }
- });
- },
- sizzle:function(){
- if(typeof document.querySelector === 'undefined'){
- $p.plugins.find = function(n, sel){
- return window.Sizzle(sel, n);
- };
- }
- },
- sly:function(){
- if(typeof document.querySelector === 'undefined'){
- $p.plugins.find = function(n, sel){
- return Sly(sel, n);
- };
- }
- }
- };
- // get lib specifics if available
- (function(){
- var libkey =
- typeof dojo !== 'undefined' && 'dojo' ||
- typeof DOMAssistant !== 'undefined' && 'domassistant' ||
- typeof jQuery !== 'undefined' && 'jquery' ||
- typeof MooTools !== 'undefined' && 'mootools' ||
- typeof Prototype !== 'undefined' && 'prototype' ||
- typeof window.Sizzle !== 'undefined' && 'sizzle' ||
- typeof Sly !== 'undefined' && 'sly';
-
- libkey && $p.libs[libkey]();
- })();
- return pure;
- };
|