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 |