OLD | NEW |
(Empty) | |
| 1 /** |
| 2 * @fileoverview This is a simple template engine inspired by JsTemplates |
| 3 * optimized for i18n. |
| 4 * |
| 5 * It currently supports two handlers: |
| 6 * |
| 7 * * i18n-content which sets the textContent of the element |
| 8 * |
| 9 * <span i18n-content="myContent"></span> |
| 10 * i18nTemplate.process(element, {'myContent': 'Content'}); |
| 11 * |
| 12 * * i18n-values is a list of attribute-value or property-value pairs. |
| 13 * Properties are prefixed with a '.' and can contain nested properties. |
| 14 * |
| 15 * <span i18n-values="title:myTitle;.style.fontSize:fontSize"></span> |
| 16 * i18nTemplate.process(element, { |
| 17 * 'myTitle': 'Title', |
| 18 * 'fontSize': '13px' |
| 19 * }); |
| 20 */ |
| 21 |
| 22 var i18nTemplate = (function() { |
| 23 /** |
| 24 * This provides the handlers for the templating engine. The key is used as |
| 25 * the attribute name and the value is the function that gets called for every |
| 26 * single node that has this attribute. |
| 27 * @type {Object} |
| 28 */ |
| 29 var handlers = { |
| 30 /** |
| 31 * This handler sets the textContent of the element. |
| 32 */ |
| 33 'i18n-content': function(element, attributeValue, obj) { |
| 34 element.textContent = obj[attributeValue]; |
| 35 }, |
| 36 |
| 37 /** |
| 38 * This is used to set HTML attributes and DOM properties,. The syntax is: |
| 39 * attributename:key; |
| 40 * .domProperty:key; |
| 41 * .nested.dom.property:key |
| 42 */ |
| 43 'i18n-values': function(element, attributeValue, obj) { |
| 44 var parts = attributeValue.replace(/\s/g, '').split(/;/); |
| 45 for (var j = 0; j < parts.length; j++) { |
| 46 var a = parts[j].match(/^([^:]+):(.+)$/); |
| 47 if (a) { |
| 48 var propName = a[1]; |
| 49 var propExpr = a[2]; |
| 50 |
| 51 // Ignore missing properties |
| 52 if (propExpr in obj) { |
| 53 var value = obj[propExpr]; |
| 54 if (propName.charAt(0) == '.') { |
| 55 var path = propName.slice(1).split('.'); |
| 56 var object = element; |
| 57 while (object && path.length > 1) { |
| 58 object = object[path.shift()]; |
| 59 } |
| 60 if (object) { |
| 61 object[path] = value; |
| 62 // In case we set innerHTML (ignoring others) we need to |
| 63 // recursively check the content |
| 64 if (path == 'innerHTML') { |
| 65 process(element, obj); |
| 66 } |
| 67 } |
| 68 } else { |
| 69 element.setAttribute(propName, value); |
| 70 } |
| 71 } else { |
| 72 console.warn('i18n-values: Missing value for "' + propExpr + '"'); |
| 73 } |
| 74 } |
| 75 } |
| 76 } |
| 77 }; |
| 78 |
| 79 var attributeNames = []; |
| 80 for (var key in handlers) { |
| 81 attributeNames.push(key); |
| 82 } |
| 83 var selector = '[' + attributeNames.join('],[') + ']'; |
| 84 |
| 85 /** |
| 86 * Processes a DOM tree with the {@code obj} map. |
| 87 */ |
| 88 function process(node, obj) { |
| 89 var elements = node.querySelectorAll(selector); |
| 90 for (var element, i = 0; element = elements[i]; i++) { |
| 91 for (var j = 0; j < attributeNames.length; j++) { |
| 92 var name = attributeNames[j]; |
| 93 var att = element.getAttribute(name); |
| 94 if (att != null) { |
| 95 handlers[name](element, att, obj); |
| 96 } |
| 97 } |
| 98 } |
| 99 } |
| 100 |
| 101 return { |
| 102 process: process |
| 103 }; |
| 104 })(); |
OLD | NEW |