diff --git a/core/js/octemplate.js b/core/js/octemplate.js new file mode 100644 index 0000000000..a5d56852a5 --- /dev/null +++ b/core/js/octemplate.js @@ -0,0 +1,101 @@ +/** + * jQuery plugin for micro templates + * + * Strings are automatically escaped, but that can be disabled by setting escapeFunction to null. + * + * Usage examples: + * + * var htmlStr = '

Bake, uncovered, until the {greasystuff} is melted and the {pasta} is heated through, about {min} minutes.

' + * $(htmlStr).octemplate({greasystuff: 'cheese', pasta: 'macaroni', min: 10}); + * + * var htmlStr = '

Welcome back {user}

'; + * $(htmlStr).octemplate({user: 'John Q. Public'}, {escapeFunction: null}); + * + * Be aware that the target string must be wrapped in an HTML element for the plugin to work. The following won't work: + * + * var textStr = 'Welcome back {user}'; + * $(textStr).octemplate({user: 'John Q. Public'}); + * + * For anything larger than one-liners, you can use a simple $.get() ajax request to get the template, + * or you can embed them it the page using the text/template type: + * + * + * + * var $tmpl = $('#contactListItemTemplate'); + * var contacts = // fetched in some ajax call + * + * $.each(contacts, function(idx, contact) { + * $contactList.append( + * $tmpl.octemplate({ + * id: contact.getId(), + * name: contact.getDisplayName(), + * email: contact.getPreferredEmail(), + * phone: contact.getPreferredPhone(), + * }); + * ); + * }); + */ +(function( $ ) { + /** + * Object Template + * Inspired by micro templating done by e.g. underscore.js + */ + var Template = { + init: function(vars, options, elem) { + // Mix in the passed in options with the default options + this.vars = vars; + this.options = $.extend({},this.options,options); + + this.elem = elem; + var self = this; + + if(typeof this.options.escapeFunction === 'function') { + $.each(this.vars, function(key, val) { + if(typeof val === 'string') { + self.vars[key] = self.options.escapeFunction(val); + } + }); + } + + var _html = this._build(this.vars); + return $(_html); + }, + // From stackoverflow.com/questions/1408289/best-way-to-do-variable-interpolation-in-javascript + _build: function(o){ + var data = this.elem.attr('type') === 'text/template' ? this.elem.html() : this.elem.get(0).outerHTML; + try { + return data.replace(/{([^{}]*)}/g, + function (a, b) { + var r = o[b]; + return typeof r === 'string' || typeof r === 'number' ? r : a; + } + ); + } catch(e) { + console.error(e, 'data:', data) + } + }, + options: { + escapeFunction: function(str) {return $('').text(str).html();} + } + }; + + $.fn.octemplate = function(vars, options) { + var vars = vars ? vars : {}; + if(this.length) { + var _template = Object.create(Template); + return _template.init(vars, options, this); + } + }; + +})( jQuery ); +