| OLD | NEW |
| (Empty) |
| 1 // Copyright (c) 2010 The Chromium Authors. All rights reserved. | |
| 2 // Use of this source code is governed by a BSD-style license that can be | |
| 3 // found in the LICENSE file. | |
| 4 | |
| 5 /** | |
| 6 * NOTE: The use of this file is deprecated. Use i18n_template2.js instead. | |
| 7 * | |
| 8 * @fileoverview This is a simple template engine inspired by JsTemplates | |
| 9 * optimized for i18n. | |
| 10 * | |
| 11 * It currently supports two handlers: | |
| 12 * | |
| 13 * * i18n-content which sets the textContent of the element | |
| 14 * | |
| 15 * <span i18n-content="myContent"></span> | |
| 16 * i18nTemplate.process(element, {'myContent': 'Content'}); | |
| 17 * | |
| 18 * * i18n-values is a list of attribute-value or property-value pairs. | |
| 19 * Properties are prefixed with a '.' and can contain nested properties. | |
| 20 * | |
| 21 * <span i18n-values="title:myTitle;.style.fontSize:fontSize"></span> | |
| 22 * i18nTemplate.process(element, { | |
| 23 * 'myTitle': 'Title', | |
| 24 * 'fontSize': '13px' | |
| 25 * }); | |
| 26 */ | |
| 27 | |
| 28 /** | |
| 29 * @typedef {function(!Element, string, Object)} | |
| 30 * TODO(dbeam): move inside (function() {...})() after | |
| 31 * https://github.com/google/closure-compiler/issues/544 is fixed. | |
| 32 */ | |
| 33 var Handler; | |
| 34 | |
| 35 var i18nTemplate = (function() { | |
| 36 /** | |
| 37 * This provides the handlers for the templating engine. The key is used as | |
| 38 * the attribute name and the value is the function that gets called for every | |
| 39 * single node that has this attribute. | |
| 40 * @type {Object.<Handler>} | |
| 41 */ | |
| 42 var handlers = { | |
| 43 /** | |
| 44 * This handler sets the textContent of the element. | |
| 45 */ | |
| 46 'i18n-content': function(element, attributeValue, obj) { | |
| 47 element.textContent = obj[attributeValue]; | |
| 48 }, | |
| 49 | |
| 50 /** | |
| 51 * This handler adds options to a select element. | |
| 52 */ | |
| 53 'i18n-options': function(element, attributeValue, obj) { | |
| 54 var options = obj[attributeValue]; | |
| 55 options.forEach(function(values) { | |
| 56 var option = typeof values == 'string' ? new Option(values) : | |
| 57 new Option(values[1], values[0]); | |
| 58 element.appendChild(option); | |
| 59 }); | |
| 60 }, | |
| 61 | |
| 62 /** | |
| 63 * This is used to set HTML attributes and DOM properties,. The syntax is: | |
| 64 * attributename:key; | |
| 65 * .domProperty:key; | |
| 66 * .nested.dom.property:key | |
| 67 */ | |
| 68 'i18n-values': function(element, attributeValue, obj) { | |
| 69 var parts = attributeValue.replace(/\s/g, '').split(/;/); | |
| 70 for (var j = 0; j < parts.length; j++) { | |
| 71 var a = parts[j].match(/^([^:]+):(.+)$/); | |
| 72 if (a) { | |
| 73 var propName = a[1]; | |
| 74 var propExpr = a[2]; | |
| 75 | |
| 76 // Ignore missing properties | |
| 77 if (propExpr in obj) { | |
| 78 var value = obj[propExpr]; | |
| 79 if (propName.charAt(0) == '.') { | |
| 80 var path = propName.slice(1).split('.'); | |
| 81 var object = element; | |
| 82 while (object && path.length > 1) { | |
| 83 object = object[path.shift()]; | |
| 84 } | |
| 85 if (object) { | |
| 86 object[path] = value; | |
| 87 // In case we set innerHTML (ignoring others) we need to | |
| 88 // recursively check the content | |
| 89 if (path == 'innerHTML') | |
| 90 process(element, obj); | |
| 91 } | |
| 92 } else { | |
| 93 element.setAttribute(propName, value); | |
| 94 } | |
| 95 } else { | |
| 96 console.warn('i18n-values: Missing value for "' + propExpr + '"'); | |
| 97 } | |
| 98 } | |
| 99 } | |
| 100 } | |
| 101 }; | |
| 102 | |
| 103 var attributeNames = []; | |
| 104 for (var key in handlers) { | |
| 105 attributeNames.push(key); | |
| 106 } | |
| 107 var selector = '[' + attributeNames.join('],[') + ']'; | |
| 108 | |
| 109 /** | |
| 110 * Processes a DOM tree with the {@code obj} map. | |
| 111 * @param {Node} node A node to process. | |
| 112 * @param {Object} obj Values to process |node| with. | |
| 113 */ | |
| 114 function process(node, obj) { | |
| 115 var elements = node.querySelectorAll(selector); | |
| 116 for (var element, i = 0; element = elements[i]; i++) { | |
| 117 for (var j = 0; j < attributeNames.length; j++) { | |
| 118 var name = attributeNames[j]; | |
| 119 var att = element.getAttribute(name); | |
| 120 if (att != null) | |
| 121 handlers[name](element, att, obj); | |
| 122 } | |
| 123 } | |
| 124 } | |
| 125 | |
| 126 return { | |
| 127 process: process | |
| 128 }; | |
| 129 })(); | |
| OLD | NEW |