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 3 // found in the LICENSE file. 4 5 /** 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 138 i18nTemplate.process(document, loadTimeData); 139
