| OLD | NEW |
| 1 // Copyright (c) 2010 The Chromium Authors. All rights reserved. | 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 | 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 /** |
| 6 * NOTE: The use of this file is deprecated. Use i18n_template2.js instead. | 6 * NOTE: The use of this file is deprecated. Use i18n_template2.js instead. |
| 7 * | 7 * |
| 8 * @fileoverview This is a simple template engine inspired by JsTemplates | 8 * @fileoverview This is a simple template engine inspired by JsTemplates |
| 9 * optimized for i18n. | 9 * optimized for i18n. |
| 10 * | 10 * |
| 11 * It currently supports two handlers: | 11 * It currently supports two handlers: |
| 12 * | 12 * |
| 13 * * i18n-content which sets the textContent of the element | 13 * * i18n-content which sets the textContent of the element |
| 14 * | 14 * |
| 15 * <span i18n-content="myContent"></span> | 15 * <span i18n-content="myContent"></span> |
| 16 * i18nTemplate.process(element, {'myContent': 'Content'}); | 16 * i18nTemplate.process(element, {'myContent': 'Content'}); |
| 17 * | 17 * |
| 18 * * i18n-values is a list of attribute-value or property-value pairs. | 18 * * i18n-values is a list of attribute-value or property-value pairs. |
| 19 * Properties are prefixed with a '.' and can contain nested properties. | 19 * Properties are prefixed with a '.' and can contain nested properties. |
| 20 * | 20 * |
| 21 * <span i18n-values="title:myTitle;.style.fontSize:fontSize"></span> | 21 * <span i18n-values="title:myTitle;.style.fontSize:fontSize"></span> |
| 22 * i18nTemplate.process(element, { | 22 * i18nTemplate.process(element, { |
| 23 * 'myTitle': 'Title', | 23 * 'myTitle': 'Title', |
| 24 * 'fontSize': '13px' | 24 * 'fontSize': '13px' |
| 25 * }); | 25 * }); |
| 26 */ | 26 */ |
| 27 | 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 |
| 28 var i18nTemplate = (function() { | 35 var i18nTemplate = (function() { |
| 29 /** | 36 /** |
| 30 * This provides the handlers for the templating engine. The key is used as | 37 * 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 | 38 * the attribute name and the value is the function that gets called for every |
| 32 * single node that has this attribute. | 39 * single node that has this attribute. |
| 33 * @type {Object} | 40 * @type {Object.<Handler>} |
| 34 */ | 41 */ |
| 35 var handlers = { | 42 var handlers = { |
| 36 /** | 43 /** |
| 37 * This handler sets the textContent of the element. | 44 * This handler sets the textContent of the element. |
| 38 */ | 45 */ |
| 39 'i18n-content': function(element, attributeValue, obj) { | 46 'i18n-content': function(element, attributeValue, obj) { |
| 40 element.textContent = obj[attributeValue]; | 47 element.textContent = obj[attributeValue]; |
| 41 }, | 48 }, |
| 42 | 49 |
| 43 /** | 50 /** |
| (...skipping 28 matching lines...) Expand all Loading... |
| 72 if (propName.charAt(0) == '.') { | 79 if (propName.charAt(0) == '.') { |
| 73 var path = propName.slice(1).split('.'); | 80 var path = propName.slice(1).split('.'); |
| 74 var object = element; | 81 var object = element; |
| 75 while (object && path.length > 1) { | 82 while (object && path.length > 1) { |
| 76 object = object[path.shift()]; | 83 object = object[path.shift()]; |
| 77 } | 84 } |
| 78 if (object) { | 85 if (object) { |
| 79 object[path] = value; | 86 object[path] = value; |
| 80 // In case we set innerHTML (ignoring others) we need to | 87 // In case we set innerHTML (ignoring others) we need to |
| 81 // recursively check the content | 88 // recursively check the content |
| 82 if (path == 'innerHTML') { | 89 if (path == 'innerHTML') |
| 83 process(element, obj); | 90 process(element, obj); |
| 84 } | |
| 85 } | 91 } |
| 86 } else { | 92 } else { |
| 87 element.setAttribute(propName, value); | 93 element.setAttribute(propName, value); |
| 88 } | 94 } |
| 89 } else { | 95 } else { |
| 90 console.warn('i18n-values: Missing value for "' + propExpr + '"'); | 96 console.warn('i18n-values: Missing value for "' + propExpr + '"'); |
| 91 } | 97 } |
| 92 } | 98 } |
| 93 } | 99 } |
| 94 } | 100 } |
| 95 }; | 101 }; |
| 96 | 102 |
| 97 var attributeNames = []; | 103 var attributeNames = []; |
| 98 for (var key in handlers) { | 104 for (var key in handlers) { |
| 99 attributeNames.push(key); | 105 attributeNames.push(key); |
| 100 } | 106 } |
| 101 var selector = '[' + attributeNames.join('],[') + ']'; | 107 var selector = '[' + attributeNames.join('],[') + ']'; |
| 102 | 108 |
| 103 /** | 109 /** |
| 104 * Processes a DOM tree with the {@code obj} map. | 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. |
| 105 */ | 113 */ |
| 106 function process(node, obj) { | 114 function process(node, obj) { |
| 107 var elements = node.querySelectorAll(selector); | 115 var elements = node.querySelectorAll(selector); |
| 108 for (var element, i = 0; element = elements[i]; i++) { | 116 for (var element, i = 0; element = elements[i]; i++) { |
| 109 for (var j = 0; j < attributeNames.length; j++) { | 117 for (var j = 0; j < attributeNames.length; j++) { |
| 110 var name = attributeNames[j]; | 118 var name = attributeNames[j]; |
| 111 var att = element.getAttribute(name); | 119 var att = element.getAttribute(name); |
| 112 if (att != null) { | 120 if (att != null) |
| 113 handlers[name](element, att, obj); | 121 handlers[name](element, att, obj); |
| 114 } | |
| 115 } | 122 } |
| 116 } | 123 } |
| 117 } | 124 } |
| 118 | 125 |
| 119 return { | 126 return { |
| 120 process: process | 127 process: process |
| 121 }; | 128 }; |
| 122 })(); | 129 })(); |
| OLD | NEW |