Last active
December 21, 2015 21:19
-
-
Save lovasoa/6367399 to your computer and use it in GitHub Desktop.
MiniTPL is a tiny templating library in javascript.
MiniTPL is really small: less than 300 bytes when minified and gzipped!
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| MiniTPL, by Ophir LOJKINE | |
| license : WTFPL | |
| */ | |
| // ==ClosureCompiler== | |
| // @output_file_name minitpl.min.js | |
| // @compilation_level ADVANCED_OPTIMIZATIONS | |
| // ==/ClosureCompiler== | |
| /** | |
| * Creates an instance of Minitpl. | |
| * | |
| * @constructor | |
| * @this {Minitpl} | |
| * @param {(Element|string)} elem A DOM element or CSS selector indicating the element from which the template will be created | |
| * @param {Object.<string, (string|function(): string)>} [data] Immediatly fill the template with data (calls Minitpl.add(data)) | |
| */ | |
| function Minitpl(elem, data) { | |
| //@private | |
| this.elem = (typeof(elem)==="string") ? document.querySelector(elem) : elem; | |
| this.parent = this.elem.parentNode; | |
| /*Remove the template element from the DOM. It will never appear, | |
| but it's copies will later be added back, as new children of this.parent*/ | |
| this.parent.removeChild(this.elem); | |
| if (data) this.add(data); | |
| } | |
| /** | |
| * Add a new filled copy of the template to the page | |
| * | |
| * @param {Object.<string, (string|function(Element): string)>} data An object that specifies CSS selectors, | |
| * and the text that shoud be written in the elements that match the selector | |
| * @return {Element} The created DOM node | |
| */ | |
| Minitpl.prototype.add = function(data) { | |
| //Duplicate the template | |
| var newElem = this.elem.cloneNode(true); | |
| for (var selector in data) { | |
| //The keys of the data object must be CSS selectors | |
| var val = data[selector]; | |
| var matches = newElem.querySelectorAll(selector); | |
| for (var i=0; i<matches.length; i++) { | |
| if (typeof(val)==="function") { | |
| var newtxt = val(matches[i]); | |
| if (newtxt!==undefined) matches[i].textContent = newtxt; | |
| } else { | |
| //Replaces the content of the template by data[key] | |
| matches[i].textContent = val; | |
| } | |
| } | |
| } | |
| this.parent.appendChild(newElem); | |
| return newElem; | |
| }; | |
| if(window) window["Minitpl"] = Minitpl; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function g(a,b){this.a="string"===typeof a?document.querySelector(a):a;this.parent=this.a.parentNode;this.parent.removeChild(this.a);b&&this.add(b)}g.prototype.add=function(a){var b=this.a.cloneNode(!0),e;for(e in a)for(var f=a[e],d=b.querySelectorAll(e),c=0;c<d.length;c++)if("function"===typeof f){var h=f(d[c]);void 0!==h&&(d[c].textContent=h)}else d[c].textContent=f;this.parent.appendChild(b);return b};window&&(window.Minitpl=g); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>MiniTPL exemple</title> | |
| <script type="text/javascript" src="minitpl.js"></script> | |
| </head> | |
| <body> | |
| <div id="messageList"> <!-- Container element--> | |
| <div class="message" id="messageTpl"> <!-- This is the template message, that will be duplicated for each new message --> | |
| <b class="messageTitle">Template</b> | |
| <p class="messageText">This text will not appear</p> | |
| </div> | |
| </div> | |
| <script> | |
| var messages = new Minitpl("#messageTpl"); | |
| //////////////SIMPLE TEMPLATE FILLING | |
| //The method add duplicates the template, and fills it with the given values | |
| messages.add({ | |
| ".messageTitle" : "Hello world !", | |
| ".messageText" : "The strings are considered as text, not <i>html</i>..." | |
| }); | |
| ////////////FILLING A TEMPLATE WITH A FUNCTION | |
| messages.add({ | |
| ".messageTitle" : "Second message", | |
| ".messageText" : function(txtElem) { | |
| /*When a function is given instead of content, | |
| it's executed on every matching element in the template */ | |
| txtElem.style.color = "red"; | |
| /*The return value of the function will be affected to the text content | |
| of the element*/ | |
| return "Text of the second message"; | |
| } | |
| }); | |
| ///////////USING THE RETURN VALUE OF Minitpl.add | |
| var msgElem = messages.add({ | |
| ".messageTitle" : "Hello", | |
| ".messageText" : "3rd message" | |
| }); | |
| msgElem.style.backgroundColor = "yellow"; | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment