| OLD | NEW |
| 1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 | 4 |
| 5 /** | 5 <include src="./i18n_template_no_process.js"></include> |
| 6 * @fileoverview This is a simple template engine inspired by JsTemplates | |
| 7 * optimized for i18n. | |
| 8 * | |
| 9 * It currently supports three handlers: | |
| 10 * | |
| 11 * * i18n-content which sets the textContent of the element. | |
| 12 * | |
| 13 * <span i18n-content="myContent"></span> | |
| 14 * | |
| 15 * * i18n-options which generates <option> elements for a <select>. | |
| 16 * | |
| 17 * <select i18n-options="myOptionList"></select> | |
| 18 * | |
| 19 * * i18n-values is a list of attribute-value or property-value pairs. | |
| 20 * Properties are prefixed with a '.' and can contain nested properties. | |
| 21 * | |
| 22 * <span i18n-values="title:myTitle;.style.fontSize:fontSize"></span> | |
| 23 * | |
| 24 * This file is a copy of i18n_template.js, with minor tweaks to support using | |
| 25 * load_time_data.js. It should replace i18n_template.js eventually. | |
| 26 */ | |
| 27 | |
| 28 var i18nTemplate = (function() { | |
| 29 /** | |
| 30 * This provides the handlers for the templating engine. The key is used as | |
| 31 * the attribute name and the value is the function that gets called for every | |
| 32 * single node that has this attribute. | |
| 33 * @type {Object} | |
| 34 */ | |
| 35 var handlers = { | |
| 36 /** | |
| 37 * This handler sets the textContent of the element. | |
| 38 * @param {HTMLElement} element The node to modify. | |
| 39 * @param {string} key The name of the value in the dictionary. | |
| 40 * @param {LoadTimeData} dictionary The dictionary of strings to draw from. | |
| 41 */ | |
| 42 'i18n-content': function(element, key, dictionary) { | |
| 43 element.textContent = dictionary.getString(key); | |
| 44 }, | |
| 45 | |
| 46 /** | |
| 47 * This handler adds options to a <select> element. | |
| 48 * @param {HTMLElement} select The node to modify. | |
| 49 * @param {string} key The name of the value in the dictionary. It should | |
| 50 * identify an array of values to initialize an <option>. Each value, | |
| 51 * if a pair, represents [content, value]. Otherwise, it should be a | |
| 52 * content string with no value. | |
| 53 * @param {LoadTimeData} dictionary The dictionary of strings to draw from. | |
| 54 */ | |
| 55 'i18n-options': function(select, key, dictionary) { | |
| 56 var options = dictionary.getString(key); | |
| 57 options.forEach(function(optionData) { | |
| 58 var option = typeof optionData == 'string' ? | |
| 59 new Option(optionData) : | |
| 60 new Option(optionData[1], optionData[0]); | |
| 61 select.appendChild(option); | |
| 62 }); | |
| 63 }, | |
| 64 | |
| 65 /** | |
| 66 * This is used to set HTML attributes and DOM properties. The syntax is: | |
| 67 * attributename:key; | |
| 68 * .domProperty:key; | |
| 69 * .nested.dom.property:key | |
| 70 * @param {HTMLElement} element The node to modify. | |
| 71 * @param {string} attributeAndKeys The path of the attribute to modify | |
| 72 * followed by a colon, and the name of the value in the dictionary. | |
| 73 * Multiple attribute/key pairs may be separated by semicolons. | |
| 74 * @param {LoadTimeData} dictionary The dictionary of strings to draw from. | |
| 75 */ | |
| 76 'i18n-values': function(element, attributeAndKeys, dictionary) { | |
| 77 var parts = attributeAndKeys.replace(/\s/g, '').split(/;/); | |
| 78 parts.forEach(function(part) { | |
| 79 if (!part) | |
| 80 return; | |
| 81 | |
| 82 var attributeAndKeyPair = part.match(/^([^:]+):(.+)$/); | |
| 83 if (!attributeAndKeyPair) | |
| 84 throw new Error('malformed i18n-values: ' + attributeAndKeys); | |
| 85 | |
| 86 var propName = attributeAndKeyPair[1]; | |
| 87 var propExpr = attributeAndKeyPair[2]; | |
| 88 | |
| 89 var value = dictionary.getValue(propExpr); | |
| 90 | |
| 91 // Allow a property of the form '.foo.bar' to assign a value into | |
| 92 // element.foo.bar. | |
| 93 if (propName[0] == '.') { | |
| 94 var path = propName.slice(1).split('.'); | |
| 95 var targetObject = element; | |
| 96 while (targetObject && path.length > 1) { | |
| 97 targetObject = targetObject[path.shift()]; | |
| 98 } | |
| 99 if (targetObject) { | |
| 100 targetObject[path] = value; | |
| 101 // In case we set innerHTML (ignoring others) we need to | |
| 102 // recursively check the content. | |
| 103 if (path == 'innerHTML') | |
| 104 process(element, dictionary); | |
| 105 } | |
| 106 } else { | |
| 107 element.setAttribute(propName, value); | |
| 108 } | |
| 109 }); | |
| 110 } | |
| 111 }; | |
| 112 | |
| 113 var attributeNames = Object.keys(handlers); | |
| 114 var selector = '[' + attributeNames.join('],[') + ']'; | |
| 115 | |
| 116 /** | |
| 117 * Processes a DOM tree with the {@code dictionary} map. | |
| 118 * @param {HTMLElement} node The root of the DOM tree to process. | |
| 119 * @param {LoadTimeData} dictionary The dictionary to draw from. | |
| 120 */ | |
| 121 function process(node, dictionary) { | |
| 122 var elements = node.querySelectorAll(selector); | |
| 123 for (var element, i = 0; element = elements[i]; i++) { | |
| 124 for (var j = 0; j < attributeNames.length; j++) { | |
| 125 var name = attributeNames[j]; | |
| 126 var attribute = element.getAttribute(name); | |
| 127 if (attribute != null) | |
| 128 handlers[name](element, attribute, dictionary); | |
| 129 } | |
| 130 } | |
| 131 } | |
| 132 | |
| 133 return { | |
| 134 process: process | |
| 135 }; | |
| 136 }()); | |
| 137 | 6 |
| 138 i18nTemplate.process(document, loadTimeData); | 7 i18nTemplate.process(document, loadTimeData); |
| OLD | NEW |