Browse files

Added ability to show a loading template and an example of it's usage

  • Loading branch information...
1 parent cdb97ce commit 7e07199e6fe58fee398e23e6ed57a77580790869 @ifandelse committed Oct 31, 2011
View
BIN examples/loading/images/ajax-loader.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
39 examples/loading/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+ "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+ <title>Loading Template Use Example</title>
+ <script type="text/javascript" src="../../ext/jquery-1.5.2.js"></script>
+ <script type="text/javascript" src="../../lib/infuser.js"></script>
+ <script type="text/javascript" src="jquery.tmpl.js"></script>
+ <script type="text/javascript" src="main.js"></script>
+ <style type="text/css">
+ body {
+ font-family: Arial, sans-serif;
+ }
+
+ .menu {
+ margin-top: 20px;
+ border: 1pt solid #696969;
+ width: 300px;
+ border-radius: 10px;
+ padding: 10px;
+ }
+
+ .infuser-loading {
+ padding: 10px;
+ }
+ .infuser-loading img {
+ margin-right: 5px;
+ }
+ </style>
+</head>
+<body>
+ <p>Try this in Chrome, while watching requests on the "Network" tab of the developer tools.</p>
+ <div>
+ <input id="btnTemplate" type="button" value="Show Me A jQuery template!">
+ <span id="msg">The next click of the button will request the template asynchronously</span>
+ </div>
+ <div id="target"></div>
+</body>
+</html>
View
486 examples/loading/jquery.tmpl.js
@@ -0,0 +1,486 @@
+/*
+ * jQuery Templating Plugin
+ * Copyright 2010, John Resig
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ */
+(function( jQuery, undefined ){
+ var oldManip = jQuery.fn.domManip, tmplItmAtt = "_tmplitem", htmlExpr = /^[^<]*(<[\w\W]+>)[^>]*$|\{\{\! /,
+ newTmplItems = {}, wrappedItems = {}, appendToTmplItems, topTmplItem = { key: 0, data: {} }, itemKey = 0, cloneIndex = 0, stack = [];
+
+ function newTmplItem( options, parentItem, fn, data ) {
+ // Returns a template item data structure for a new rendered instance of a template (a 'template item').
+ // The content field is a hierarchical array of strings and nested items (to be
+ // removed and replaced by nodes field of dom elements, once inserted in DOM).
+ var newItem = {
+ data: data || (parentItem ? parentItem.data : {}),
+ _wrap: parentItem ? parentItem._wrap : null,
+ tmpl: null,
+ parent: parentItem || null,
+ nodes: [],
+ calls: tiCalls,
+ nest: tiNest,
+ wrap: tiWrap,
+ html: tiHtml,
+ update: tiUpdate
+ };
+ if ( options ) {
+ jQuery.extend( newItem, options, { nodes: [], parent: parentItem } );
+ }
+ if ( fn ) {
+ // Build the hierarchical content to be used during insertion into DOM
+ newItem.tmpl = fn;
+ newItem._ctnt = newItem._ctnt || newItem.tmpl( jQuery, newItem );
+ newItem.key = ++itemKey;
+ // Keep track of new template item, until it is stored as jQuery Data on DOM element
+ (stack.length ? wrappedItems : newTmplItems)[itemKey] = newItem;
+ }
+ return newItem;
+ }
+
+ // Override appendTo etc., in order to provide support for targeting multiple elements. (This code would disappear if integrated in jquery core).
+ jQuery.each({
+ appendTo: "append",
+ prependTo: "prepend",
+ insertBefore: "before",
+ insertAfter: "after",
+ replaceAll: "replaceWith"
+ }, function( name, original ) {
+ jQuery.fn[ name ] = function( selector ) {
+ var ret = [], insert = jQuery( selector ), elems, i, l, tmplItems,
+ parent = this.length === 1 && this[0].parentNode;
+
+ appendToTmplItems = newTmplItems || {};
+ if ( parent && parent.nodeType === 11 && parent.childNodes.length === 1 && insert.length === 1 ) {
+ insert[ original ]( this[0] );
+ ret = this;
+ } else {
+ for ( i = 0, l = insert.length; i < l; i++ ) {
+ cloneIndex = i;
+ elems = (i > 0 ? this.clone(true) : this).get();
+ jQuery.fn[ original ].apply( jQuery(insert[i]), elems );
+ ret = ret.concat( elems );
+ }
+ cloneIndex = 0;
+ ret = this.pushStack( ret, name, insert.selector );
+ }
+ tmplItems = appendToTmplItems;
+ appendToTmplItems = null;
+ jQuery.tmpl.complete( tmplItems );
+ return ret;
+ };
+ });
+
+ jQuery.fn.extend({
+ // Use first wrapped element as template markup.
+ // Return wrapped set of template items, obtained by rendering template against data.
+ tmpl: function( data, options, parentItem ) {
+ return jQuery.tmpl( this[0], data, options, parentItem );
+ },
+
+ // Find which rendered template item the first wrapped DOM element belongs to
+ tmplItem: function() {
+ return jQuery.tmplItem( this[0] );
+ },
+
+ // Consider the first wrapped element as a template declaration, and get the compiled template or store it as a named template.
+ template: function( name ) {
+ return jQuery.template( name, this[0] );
+ },
+
+ domManip: function( args, table, callback, options ) {
+ // This appears to be a bug in the appendTo, etc. implementation
+ // it should be doing .call() instead of .apply(). See #6227
+ if ( args[0] && args[0].nodeType ) {
+ var dmArgs = jQuery.makeArray( arguments ), argsLength = args.length, i = 0, tmplItem;
+ while ( i < argsLength && !(tmplItem = jQuery.data( args[i++], "tmplItem" ))) {}
+ if ( argsLength > 1 ) {
+ dmArgs[0] = [jQuery.makeArray( args )];
+ }
+ if ( tmplItem && cloneIndex ) {
+ dmArgs[2] = function( fragClone ) {
+ // Handler called by oldManip when rendered template has been inserted into DOM.
+ jQuery.tmpl.afterManip( this, fragClone, callback );
+ };
+ }
+ oldManip.apply( this, dmArgs );
+ } else {
+ oldManip.apply( this, arguments );
+ }
+ cloneIndex = 0;
+ if ( !appendToTmplItems ) {
+ jQuery.tmpl.complete( newTmplItems );
+ }
+ return this;
+ }
+ });
+
+ jQuery.extend({
+ // Return wrapped set of template items, obtained by rendering template against data.
+ tmpl: function( tmpl, data, options, parentItem ) {
+ var ret, topLevel = !parentItem;
+ if ( topLevel ) {
+ // This is a top-level tmpl call (not from a nested template using {{tmpl}})
+ parentItem = topTmplItem;
+ tmpl = jQuery.template[tmpl] || jQuery.template( null, tmpl );
+ wrappedItems = {}; // Any wrapped items will be rebuilt, since this is top level
+ } else if ( !tmpl ) {
+ // The template item is already associated with DOM - this is a refresh.
+ // Re-evaluate rendered template for the parentItem
+ tmpl = parentItem.tmpl;
+ newTmplItems[parentItem.key] = parentItem;
+ parentItem.nodes = [];
+ if ( parentItem.wrapped ) {
+ updateWrapped( parentItem, parentItem.wrapped );
+ }
+ // Rebuild, without creating a new template item
+ return jQuery( build( parentItem, null, parentItem.tmpl( jQuery, parentItem ) ));
+ }
+ if ( !tmpl ) {
+ return []; // Could throw...
+ }
+ if ( typeof data === "function" ) {
+ data = data.call( parentItem || {} );
+ }
+ if ( options && options.wrapped ) {
+ updateWrapped( options, options.wrapped );
+ }
+ ret = jQuery.isArray( data ) ?
+ jQuery.map( data, function( dataItem ) {
+ return dataItem ? newTmplItem( options, parentItem, tmpl, dataItem ) : null;
+ }) :
+ [ newTmplItem( options, parentItem, tmpl, data ) ];
+ return topLevel ? jQuery( build( parentItem, null, ret ) ) : ret;
+ },
+
+ // Return rendered template item for an element.
+ tmplItem: function( elem ) {
+ var tmplItem;
+ if ( elem instanceof jQuery ) {
+ elem = elem[0];
+ }
+ while ( elem && elem.nodeType === 1 && !(tmplItem = jQuery.data( elem, "tmplItem" )) && (elem = elem.parentNode) ) {}
+ return tmplItem || topTmplItem;
+ },
+
+ // Set:
+ // Use $.template( name, tmpl ) to cache a named template,
+ // where tmpl is a template string, a script element or a jQuery instance wrapping a script element, etc.
+ // Use $( "selector" ).template( name ) to provide access by name to a script block template declaration.
+
+ // Get:
+ // Use $.template( name ) to access a cached template.
+ // Also $( selectorToScriptBlock ).template(), or $.template( null, templateString )
+ // will return the compiled template, without adding a name reference.
+ // If templateString includes at least one HTML tag, $.template( templateString ) is equivalent
+ // to $.template( null, templateString )
+ template: function( name, tmpl ) {
+ if (tmpl) {
+ // Compile template and associate with name
+ if ( typeof tmpl === "string" ) {
+ // This is an HTML string being passed directly in.
+ tmpl = buildTmplFn( tmpl )
+ } else if ( tmpl instanceof jQuery ) {
+ tmpl = tmpl[0] || {};
+ }
+ if ( tmpl.nodeType ) {
+ // If this is a template block, use cached copy, or generate tmpl function and cache.
+ tmpl = jQuery.data( tmpl, "tmpl" ) || jQuery.data( tmpl, "tmpl", buildTmplFn( tmpl.innerHTML ));
+ }
+ return typeof name === "string" ? (jQuery.template[name] = tmpl) : tmpl;
+ }
+ // Return named compiled template
+ return name ? (typeof name !== "string" ? jQuery.template( null, name ):
+ (jQuery.template[name] ||
+ // If not in map, treat as a selector. (If integrated with core, use quickExpr.exec)
+ jQuery.template( null, htmlExpr.test( name ) ? name : jQuery( name )))) : null;
+ },
+
+ encode: function( text ) {
+ // Do HTML encoding replacing < > & and ' and " by corresponding entities.
+ return ("" + text).split("<").join("&lt;").split(">").join("&gt;").split('"').join("&#34;").split("'").join("&#39;");
+ }
+ });
+
+ jQuery.extend( jQuery.tmpl, {
+ tag: {
+ "tmpl": {
+ _default: { $2: "null" },
+ open: "if($notnull_1){_=_.concat($item.nest($1,$2));}"
+ // tmpl target parameter can be of type function, so use $1, not $1a (so not auto detection of functions)
+ // This means that {{tmpl foo}} treats foo as a template (which IS a function).
+ // Explicit parens can be used if foo is a function that returns a template: {{tmpl foo()}}.
+ },
+ "wrap": {
+ _default: { $2: "null" },
+ open: "$item.calls(_,$1,$2);_=[];",
+ close: "call=$item.calls();_=call._.concat($item.wrap(call,_));"
+ },
+ "each": {
+ _default: { $2: "$index, $value" },
+ open: "if($notnull_1){$.each($1a,function($2){with(this){",
+ close: "}});}"
+ },
+ "if": {
+ open: "if(($notnull_1) && $1a){",
+ close: "}"
+ },
+ "else": {
+ _default: { $1: "true" },
+ open: "}else if(($notnull_1) && $1a){"
+ },
+ "html": {
+ // Unecoded expression evaluation.
+ open: "if($notnull_1){_.push($1a);}"
+ },
+ "=": {
+ // Encoded expression evaluation. Abbreviated form is ${}.
+ _default: { $1: "$data" },
+ open: "if($notnull_1){_.push($.encode($1a));}"
+ },
+ "!": {
+ // Comment tag. Skipped by parser
+ open: ""
+ }
+ },
+
+ // This stub can be overridden, e.g. in jquery.tmplPlus for providing rendered events
+ complete: function( items ) {
+ newTmplItems = {};
+ },
+
+ // Call this from code which overrides domManip, or equivalent
+ // Manage cloning/storing template items etc.
+ afterManip: function afterManip( elem, fragClone, callback ) {
+ // Provides cloned fragment ready for fixup prior to and after insertion into DOM
+ var content = fragClone.nodeType === 11 ?
+ jQuery.makeArray(fragClone.childNodes) :
+ fragClone.nodeType === 1 ? [fragClone] : [];
+
+ // Return fragment to original caller (e.g. append) for DOM insertion
+ callback.call( elem, fragClone );
+
+ // Fragment has been inserted:- Add inserted nodes to tmplItem data structure. Replace inserted element annotations by jQuery.data.
+ storeTmplItems( content );
+ cloneIndex++;
+ }
+ });
+
+ //========================== Private helper functions, used by code above ==========================
+
+ function build( tmplItem, nested, content ) {
+ // Convert hierarchical content into flat string array
+ // and finally return array of fragments ready for DOM insertion
+ var frag, ret = content ? jQuery.map( content, function( item ) {
+ return (typeof item === "string") ?
+ // Insert template item annotations, to be converted to jQuery.data( "tmplItem" ) when elems are inserted into DOM.
+ (tmplItem.key ? item.replace( /(<\w+)(?=[\s>])(?![^>]*_tmplitem)([^>]*)/g, "$1 " + tmplItmAtt + "=\"" + tmplItem.key + "\" $2" ) : item) :
+ // This is a child template item. Build nested template.
+ build( item, tmplItem, item._ctnt );
+ }) :
+ // If content is not defined, insert tmplItem directly. Not a template item. May be a string, or a string array, e.g. from {{html $item.html()}}.
+ tmplItem;
+ if ( nested ) {
+ return ret;
+ }
+
+ // top-level template
+ ret = ret.join("");
+
+ // Support templates which have initial or final text nodes, or consist only of text
+ // Also support HTML entities within the HTML markup.
+ ret.replace( /^\s*([^<\s][^<]*)?(<[\w\W]+>)([^>]*[^>\s])?\s*$/, function( all, before, middle, after) {
+ frag = jQuery( middle ).get();
+
+ storeTmplItems( frag );
+ if ( before ) {
+ frag = unencode( before ).concat(frag);
+ }
+ if ( after ) {
+ frag = frag.concat(unencode( after ));
+ }
+ });
+ return frag ? frag : unencode( ret );
+ }
+
+ function unencode( text ) {
+ // Use createElement, since createTextNode will not render HTML entities correctly
+ var el = document.createElement( "div" );
+ el.innerHTML = text;
+ return jQuery.makeArray(el.childNodes);
+ }
+
+ // Generate a reusable function that will serve to render a template against data
+ function buildTmplFn( markup ) {
+ var body =
+ "var $=jQuery,call,_=[],$data=$item.data;" +
+
+ // Introduce the data as local variables using with(){}
+ "with($data){_.push('" +
+
+ // Convert the template into pure JavaScript
+ jQuery.trim(markup)
+ .replace( /([\\'])/g, "\\$1" )
+ .replace( /[\r\t\n]/g, " " )
+ .replace( /\$\{([^\}]*)\}/g, "{{= $1}}" )
+ .replace( /\{\{(\/?)(\w+|.)(?:\(((?:[^\}]|\}(?!\}))*?)?\))?(?:\s+(.*?)?)?(\(((?:[^\}]|\}(?!\}))*?)\))?\s*\}\}/g,
+ function( all, slash, type, fnargs, target, parens, args ) {
+ var tag = jQuery.tmpl.tag[ type ], def, expr, exprAutoFnDetect;
+ if ( !tag ) {
+ throw "Template command not found: " + type;
+ }
+ def = tag._default || [];
+ if ( parens && !/\w$/.test(target)) {
+ target += parens;
+ parens = "";
+ }
+ if ( target ) {
+ target = unescape( target );
+ args = args ? ("," + unescape( args ) + ")") : (parens ? ")" : "");
+ // Support for target being things like a.toLowerCase();
+ // In that case don't call with template item as 'this' pointer. Just evaluate...
+ expr = parens ? (target.indexOf(".") > -1 ? target + parens : ("(" + target + ").call($item" + args)) : target;
+ exprAutoFnDetect = parens ? expr : "(typeof(" + target + ")==='function'?(" + target + ").call($item):(" + target + "))";
+ } else {
+ exprAutoFnDetect = expr = def.$1 || "null";
+ }
+ fnargs = unescape( fnargs );
+ return "');" +
+ tag[ slash ? "close" : "open" ]
+ .split( "$notnull_1" ).join( target ? "typeof(" + target + ")!=='undefined' && (" + target + ")!=null" : "true" )
+ .split( "$1a" ).join( exprAutoFnDetect )
+ .split( "$1" ).join( expr )
+ .split( "$2" ).join( fnargs ?
+ fnargs.replace( /\s*([^\(]+)\s*(\((.*?)\))?/g, function( all, name, parens, params ) {
+ params = params ? ("," + params + ")") : (parens ? ")" : "");
+ return params ? ("(" + name + ").call($item" + params) : all;
+ })
+ : (def.$2||"")
+ ) +
+ "_.push('";
+ }) +
+ "');}return _;";
+ return new Function("jQuery","$item", body);
+ }
+ function updateWrapped( options, wrapped ) {
+ // Build the wrapped content.
+ options._wrap = build( options, true,
+ // Suport imperative scenario in which options.wrapped can be set to a selector or an HTML string.
+ jQuery.isArray( wrapped ) ? wrapped : [htmlExpr.test( wrapped ) ? wrapped : jQuery( wrapped ).html()]
+ ).join("");
+ }
+
+ function unescape( args ) {
+ return args ? args.replace( /\\'/g, "'").replace(/\\\\/g, "\\" ) : null;
+ }
+ function outerHtml( elem ) {
+ var div = document.createElement("div");
+ div.appendChild( elem.cloneNode(true) );
+ return div.innerHTML;
+ }
+
+ // Store template items in jQuery.data(), ensuring a unique tmplItem data data structure for each rendered template instance.
+ function storeTmplItems( content ) {
+ var keySuffix = "_" + cloneIndex, elem, elems, newClonedItems = {}, i, l, m;
+ for ( i = 0, l = content.length; i < l; i++ ) {
+ if ( (elem = content[i]).nodeType !== 1 ) {
+ continue;
+ }
+ elems = elem.getElementsByTagName("*");
+ for ( m = elems.length - 1; m >= 0; m-- ) {
+ processItemKey( elems[m] );
+ }
+ processItemKey( elem );
+ }
+ function processItemKey( el ) {
+ var pntKey, pntNode = el, pntItem, tmplItem, key;
+ // Ensure that each rendered template inserted into the DOM has its own template item,
+ if ( (key = el.getAttribute( tmplItmAtt ))) {
+ while ( pntNode.parentNode && (pntNode = pntNode.parentNode).nodeType === 1 && !(pntKey = pntNode.getAttribute( tmplItmAtt ))) { }
+ if ( pntKey !== key ) {
+ // The next ancestor with a _tmplitem expando is on a different key than this one.
+ // So this is a top-level element within this template item
+ // Set pntNode to the key of the parentNode, or to 0 if pntNode.parentNode is null, or pntNode is a fragment.
+ pntNode = pntNode.parentNode ? (pntNode.nodeType === 11 ? 0 : (pntNode.getAttribute( tmplItmAtt ) || 0)) : 0;
+ if ( !(tmplItem = newTmplItems[key]) ) {
+ // The item is for wrapped content, and was copied from the temporary parent wrappedItem.
+ tmplItem = wrappedItems[key];
+ tmplItem = newTmplItem( tmplItem, newTmplItems[pntNode]||wrappedItems[pntNode], null, true );
+ tmplItem.key = ++itemKey;
+ newTmplItems[itemKey] = tmplItem;
+ }
+ if ( cloneIndex ) {
+ cloneTmplItem( key );
+ }
+ }
+ el.removeAttribute( tmplItmAtt );
+ } else if ( cloneIndex && (tmplItem = jQuery.data( el, "tmplItem" )) ) {
+ // This was a rendered element, cloned during append or appendTo etc.
+ // TmplItem stored in jQuery data has already been cloned in cloneCopyEvent. We must replace it with a fresh cloned tmplItem.
+ cloneTmplItem( tmplItem.key );
+ newTmplItems[tmplItem.key] = tmplItem;
+ pntNode = jQuery.data( el.parentNode, "tmplItem" );
+ pntNode = pntNode ? pntNode.key : 0;
+ }
+ if ( tmplItem ) {
+ pntItem = tmplItem;
+ // Find the template item of the parent element.
+ // (Using !=, not !==, since pntItem.key is number, and pntNode may be a string)
+ while ( pntItem && pntItem.key != pntNode ) {
+ // Add this element as a top-level node for this rendered template item, as well as for any
+ // ancestor items between this item and the item of its parent element
+ pntItem.nodes.push( el );
+ pntItem = pntItem.parent;
+ }
+ // Delete content built during rendering - reduce API surface area and memory use, and avoid exposing of stale data after rendering...
+ delete tmplItem._ctnt;
+ delete tmplItem._wrap;
+ // Store template item as jQuery data on the element
+ jQuery.data( el, "tmplItem", tmplItem );
+ }
+ function cloneTmplItem( key ) {
+ key = key + keySuffix;
+ tmplItem = newClonedItems[key] =
+ (newClonedItems[key] || newTmplItem( tmplItem, newTmplItems[tmplItem.parent.key + keySuffix] || tmplItem.parent, null, true ));
+ }
+ }
+ }
+
+ //---- Helper functions for template item ----
+
+ function tiCalls( content, tmpl, data, options ) {
+ if ( !content ) {
+ return stack.pop();
+ }
+ stack.push({ _: content, tmpl: tmpl, item:this, data: data, options: options });
+ }
+
+ function tiNest( tmpl, data, options ) {
+ // nested template, using {{tmpl}} tag
+ return jQuery.tmpl( jQuery.template( tmpl ), data, options, this );
+ }
+
+ function tiWrap( call, wrapped ) {
+ // nested template, using {{wrap}} tag
+ var options = call.options || {};
+ options.wrapped = wrapped;
+ // Apply the template, which may incorporate wrapped content,
+ return jQuery.tmpl( jQuery.template( call.tmpl ), call.data, options, call.item );
+ }
+
+ function tiHtml( filter, textOnly ) {
+ var wrapped = this._wrap;
+ return jQuery.map(
+ jQuery( jQuery.isArray( wrapped ) ? wrapped.join("") : wrapped ).filter( filter || "*" ),
+ function(e) {
+ return textOnly ?
+ e.innerText || e.textContent :
+ e.outerHTML || outerHtml(e);
+ });
+ }
+
+ function tiUpdate() {
+ var coll = this.nodes;
+ jQuery.tmpl( null, null, null, this).insertBefore( coll[0] );
+ jQuery( coll ).remove();
+ }
+})( jQuery );
View
40 examples/loading/main.js
@@ -0,0 +1,40 @@
+var toggled = false,
+ model = {
+ title: "Dessert Options",
+ desserts: [
+ "Cheesecake",
+ "Cannoli",
+ "Milkshake",
+ "Brownie",
+ "Apple Pie"
+ ]
+ };
+
+
+$(function(){
+ // pre-loading image for our custom "loading template"
+ var loadingImg = $('<img />').attr('src', './images/ajax-loader.gif'),
+ origRender = infuser.defaults.render;
+
+ $('#btnTemplate').click(function(){
+ infuser.config.templateUrl= "./templates";
+ infuser.defaults.loadingTemplate.content = "<div class='infuser-loading'><img src='./images/ajax-loader.gif'>Loading...</div>"
+ infuser.defaults.loadingTemplate.transitionOut = function() {};
+ infuser.defaults.renderInstruction = function(template, model) {
+ return $.tmpl(template, model);
+ };
+ infuser.infuse("Example", {
+ targetSelector: "#target",
+ render: function(target, template) {
+ // really ugly way to simulate long running template retrieval
+ setTimeout(function() { origRender(target, template); }, 4000);
+ },
+ postRender: function(target) {
+ if(!toggled) {
+ $("#msg").text("The next click will use the locally cached template");
+ }
+ },
+ model: model
+ });
+ });
+});
View
8 examples/loading/templates/Example.html
@@ -0,0 +1,8 @@
+<div class="menu">
+ <div>${title}</div>
+ <ul>
+ {{each desserts}}
+ <li>${$value}</li>
+ {{/each}}
+ </ul>
+</div>
View
3 examples/trafficcop/main.js
@@ -13,7 +13,8 @@ var toggled = false,
};
$(function(){
- infuser.config.templateUrl= "./templates",
+ infuser.config.templateUrl= "./templates";
+ infuser.defaults.useLoadingTemplate = false;
infuser.defaults.renderInstruction = function(template, model) {
return $.tmpl(template, model);
};
View
23 lib/infuser.js
@@ -5,8 +5,6 @@
License: Dual licensed MIT (http://www.opensource.org/licenses/mit-license) & GPL (http://www.opensource.org/licenses/gpl-license)
Version 0.1.0
*/
-var NO_OP = function() { };
-
var hashStorage = {
templates: {},
@@ -123,6 +121,18 @@ var infuser = {
defaults: {
domTargetResolver: function(templateId) { return "#" + templateId }, // DEFAULT MAPPING
+ loadingTemplate: {
+ content: '<div class="infuser-loading">Loading...</div>',
+ transitionIn: function(target) {
+ var self = this;
+ $(target).hide();
+ $(target).html(self.content);
+ $(target).fadeIn();
+ },
+ transitionOut: function(target) {
+ $(target).html("");
+ }
+ },
postRender: function(targetElement) { }, // NO_OP effectively by default
preRender: function(targetElement, template) { }, // NO_OP effectively by default
render: function(target, template) {
@@ -133,7 +143,8 @@ var infuser = {
$(target).children().replaceWith($(template));
}
},
- renderInstruction: function(template, model) { return template; } // NO_OP effectively by default
+ renderInstruction: function(template, model) { return template; }, // NO_OP effectively by default
+ useLoadingTemplate: true // true/false
},
get: function(templateId, callback) {
@@ -194,10 +205,16 @@ var infuser = {
var self = this,
options = $.extend({}, self.defaults, renderOptions),
targetElement = options.targetSelector || options.domTargetResolver(templateId);
+ if(options.useLoadingTemplate) {
+ options.loadingTemplate.transitionIn(targetElement);
+ }
self.get(templateId, function(template) {
var _template = template;
options.preRender(targetElement, _template);
_template = options.renderInstruction(_template, options.model);
+ if(options.useLoadingTemplate) {
+ options.loadingTemplate.transitionOut(targetElement);
+ }
options.render(targetElement, _template);
options.postRender(targetElement);
});
View
BIN lib/infuser.min.gz.js
Binary file not shown.
View
2 lib/infuser.min.js
@@ -1 +1 @@
-(function(a,b){var c=function(){},d={templates:{},storeTemplate:function(a,b){this.templates[a]=b},getTemplate:function(a){return this.templates[a]},purge:function(){this.templates={}}},e={templateIds:[],storeTemplate:function(a,b){var c=document.getElementById(a);c===null&&(this.templateIds.push(a),c=document.createElement("script"),c.type="text/html",c.id=a,document.body.appendChild(c)),c.text=b},getTemplate:function(a){return document.getElementById(a)},purge:function(){for(var a=0;a<this.templateIds.length;a++)document.body.removeChild(document.getElementById(this.templateIds[a]));this.templateIds=[]}},f="<div class='infuser-error'>The template <a href='{TEMPLATEURL}'>{TEMPLATEID}</a> could not be loaded. {STATUS}</div>",g=function(a,b,c){return f.replace("{STATUS}",a).replace("{TEMPLATEID}",b).replace("{TEMPLATEURL}",c)},h=[],i={getTemplatePath:function(a){var c=k.config.templatePrefix+a+k.config.templateSuffix;return k.config.templateUrl===b||k.config.templateUrl===""?c:k.config.templateUrl+"/"+c},templateGetSuccess:function(a,b){return function(c){k.store.storeTemplate(a,c),b(k.store.getTemplate(a))}},templateGetError:function(a,b,c){return function(d){$.inArray(a,h)===-1&&h.push(a);var e=g("HTTP Status code: "+d.status,a,b);k.store.storeTemplate(a,e),c(k.store.getTemplate(a))}}},j={inProgress:{},direct:function(a){var b=a.type+"_"+a.dataType+"_"+a.url,c=this;if(!c.inProgress[b]){var d=function(){delete c.inProgress[b]},e={successCallbacks:[a.success],errorCallbacks:[a.error],success:function(a){$.each($(c.inProgress[b].successCallbacks),function(b,c){c(a)}),d()},error:function(a){$.each($(c.inProgress[b].errorCallbacks),function(b,c){c(a)}),d()}};c.inProgress[b]=$.extend({},a,e),$.ajax(c.inProgress[b])}else c.inProgress[b].successCallbacks.push(a.success),c.inProgress[b].errorCallbacks.push(a.error)}},k={storageOptions:{hash:d,script:e},store:d,config:{templateUrl:"",templateSuffix:".html",templatePrefix:""},defaults:{domTargetResolver:function(a){return"#"+a},postRender:function(a){},preRender:function(a,b){},render:function(a,b){$(a).children().length===0?$(a).append($(b)):$(a).children().replaceWith($(b))},renderInstruction:function(a,b){return a}},get:function(a,b){var c=this.store.getTemplate(a),d,e;!c||$.inArray(a,h)!==-1?(d=i.getTemplatePath(a),e={async:!0,url:d,dataType:"html",type:"GET",success:i.templateGetSuccess(a,b),error:i.templateGetError(a,d,b)},j.direct(e)):b(c)},getSync:function(a){var b=this.store.getTemplate(a),c,d,e;if(!b||$.inArray(a,h)!==-1)c=i.getTemplatePath(a),d=null,e={async:!1,url:c,dataType:"html",type:"GET",success:function(a){d=a},error:function(b){$.inArray(a)===-1&&h.push(a),d=g("HTTP Status code: exception.status",a,c)}},$.ajax(e),d===null?d=g("An unknown error occurred.",a,c):(this.store.storeTemplate(a,d),b=this.store.getTemplate(a));return b},infuse:function(a,b){var c=this,d=$.extend({},c.defaults,b),e=d.targetSelector||d.domTargetResolver(a);c.get(a,function(a){var b=a;d.preRender(e,b),b=d.renderInstruction(b,d.model),d.render(e,b),d.postRender(e)})}};a.infuser=k})(window)
+(function(a,b){var c={templates:{},storeTemplate:function(a,b){this.templates[a]=b},getTemplate:function(a){return this.templates[a]},purge:function(){this.templates={}}},d={templateIds:[],storeTemplate:function(a,b){var c=document.getElementById(a);c===null&&(this.templateIds.push(a),c=document.createElement("script"),c.type="text/html",c.id=a,document.body.appendChild(c)),c.text=b},getTemplate:function(a){return document.getElementById(a)},purge:function(){for(var a=0;a<this.templateIds.length;a++)document.body.removeChild(document.getElementById(this.templateIds[a]));this.templateIds=[]}},e="<div class='infuser-error'>The template <a href='{TEMPLATEURL}'>{TEMPLATEID}</a> could not be loaded. {STATUS}</div>",f=function(a,b,c){return e.replace("{STATUS}",a).replace("{TEMPLATEID}",b).replace("{TEMPLATEURL}",c)},g=[],h={getTemplatePath:function(a){var c=j.config.templatePrefix+a+j.config.templateSuffix;return j.config.templateUrl===b||j.config.templateUrl===""?c:j.config.templateUrl+"/"+c},templateGetSuccess:function(a,b){return function(c){j.store.storeTemplate(a,c),b(j.store.getTemplate(a))}},templateGetError:function(a,b,c){return function(d){$.inArray(a,g)===-1&&g.push(a);var e=f("HTTP Status code: "+d.status,a,b);j.store.storeTemplate(a,e),c(j.store.getTemplate(a))}}},i={inProgress:{},direct:function(a){var b=a.type+"_"+a.dataType+"_"+a.url,c=this;if(!c.inProgress[b]){var d=function(){delete c.inProgress[b]},e={successCallbacks:[a.success],errorCallbacks:[a.error],success:function(a){$.each($(c.inProgress[b].successCallbacks),function(b,c){c(a)}),d()},error:function(a){$.each($(c.inProgress[b].errorCallbacks),function(b,c){c(a)}),d()}};c.inProgress[b]=$.extend({},a,e),$.ajax(c.inProgress[b])}else c.inProgress[b].successCallbacks.push(a.success),c.inProgress[b].errorCallbacks.push(a.error)}},j={storageOptions:{hash:c,script:d},store:c,config:{templateUrl:"",templateSuffix:".html",templatePrefix:""},defaults:{domTargetResolver:function(a){return"#"+a},loadingTemplate:{content:'<div class="infuser-loading">Loading...</div>',transitionIn:function(a){var b=this;$(a).hide(),$(a).html(b.content),$(a).fadeIn()},transitionOut:function(a){$(a).html("")}},postRender:function(a){},preRender:function(a,b){},render:function(a,b){$(a).children().length===0?$(a).append($(b)):$(a).children().replaceWith($(b))},renderInstruction:function(a,b){return a},useLoadingTemplate:!0},get:function(a,b){var c=this.store.getTemplate(a),d,e;!c||$.inArray(a,g)!==-1?(d=h.getTemplatePath(a),e={async:!0,url:d,dataType:"html",type:"GET",success:h.templateGetSuccess(a,b),error:h.templateGetError(a,d,b)},i.direct(e)):b(c)},getSync:function(a){var b=this.store.getTemplate(a),c,d,e;if(!b||$.inArray(a,g)!==-1)c=h.getTemplatePath(a),d=null,e={async:!1,url:c,dataType:"html",type:"GET",success:function(a){d=a},error:function(b){$.inArray(a)===-1&&g.push(a),d=f("HTTP Status code: exception.status",a,c)}},$.ajax(e),d===null?d=f("An unknown error occurred.",a,c):(this.store.storeTemplate(a,d),b=this.store.getTemplate(a));return b},infuse:function(a,b){var c=this,d=$.extend({},c.defaults,b),e=d.targetSelector||d.domTargetResolver(a);d.useLoadingTemplate&&d.loadingTemplate.transitionIn(e),c.get(a,function(a){var b=a;d.preRender(e,b),b=d.renderInstruction(b,d.model),d.useLoadingTemplate&&d.loadingTemplate.transitionOut(e),d.render(e,b),d.postRender(e)})}};a.infuser=j})(window)
View
21 src/Api.js
@@ -14,6 +14,18 @@ var infuser = {
defaults: {
domTargetResolver: function(templateId) { return "#" + templateId }, // DEFAULT MAPPING
+ loadingTemplate: {
+ content: '<div class="infuser-loading">Loading...</div>',
+ transitionIn: function(target) {
+ var self = this;
+ $(target).hide();
+ $(target).html(self.content);
+ $(target).fadeIn();
+ },
+ transitionOut: function(target) {
+ $(target).html("");
+ }
+ },
postRender: function(targetElement) { }, // NO_OP effectively by default
preRender: function(targetElement, template) { }, // NO_OP effectively by default
render: function(target, template) {
@@ -24,7 +36,8 @@ var infuser = {
$(target).children().replaceWith($(template));
}
},
- renderInstruction: function(template, model) { return template; } // NO_OP effectively by default
+ renderInstruction: function(template, model) { return template; }, // NO_OP effectively by default
+ useLoadingTemplate: true // true/false
},
get: function(templateId, callback) {
@@ -85,10 +98,16 @@ var infuser = {
var self = this,
options = $.extend({}, self.defaults, renderOptions),
targetElement = options.targetSelector || options.domTargetResolver(templateId);
+ if(options.useLoadingTemplate) {
+ options.loadingTemplate.transitionIn(targetElement);
+ }
self.get(templateId, function(template) {
var _template = template;
options.preRender(targetElement, _template);
_template = options.renderInstruction(_template, options.model);
+ if(options.useLoadingTemplate) {
+ options.loadingTemplate.transitionOut(targetElement);
+ }
options.render(targetElement, _template);
options.postRender(targetElement);
});
View
1 src/constants.js
@@ -1 +0,0 @@
-var NO_OP = function() { };
View
1 src/infuser.js
@@ -1,5 +1,4 @@
//import("VersionHeader.js");
-//import("constants.js");
//import("hashStorage.js");
//import("scriptStorage.js");
//import("error.js");

0 comments on commit 7e07199

Please sign in to comment.