diff --git a/chrome/browser/resources/i18n_template.js b/chrome/browser/resources/i18n_template.js new file mode 100644 index 0000000..7a367f7 --- /dev/null +++ b/chrome/browser/resources/i18n_template.js @@ -0,0 +1,91 @@ +/** + * @fileoverview This is a simple template engine inspired by JsTemplates + * optimized for i18n. + * + * It currently supports two handlers: + * + * * i18n-content which sets the textContent of the element + * + * + * i18nTemplate.process(element, {'myContent': 'Content'}); + * + * * i18n-values is a list of attribute-value or property-value pairs. + * Properties are prefixed with a '.' and can contain nested properties. + * + * + * i18nTemplate.process(element, { + * 'myTitle': 'Title', + * 'fontSize': '13px' + * }); + */ + +var i18nTemplate = (function() { + /** + * This provides the handlers for the templating engine. The key is used as + * the attribute name and the value is the function that gets called for every + * single node that has this attribute. + * @type {Object} + */ + var handlers = { + /** + * This handler sets the textContent of the element. + */ + 'i18n-content': function(element, attributeValue, obj) { + element.textContent = obj[attributeValue]; + }, + + /** + * This is used to set HTML attributes and DOM properties,. The syntax is: + * attributename:key; + * .domProperty:key; + * .nested.dom.property:key + */ + 'i18n-values': function(element, attributeValue, obj) { + var parts = attributeValue.replace(/\s/g, '').split(/;/); + for (var j = 0; j < parts.length; j++) { + var a = parts[j].match(/^([^:]+):(.+)$/); + if (a) { + var propName = a[1]; + var propExpr = a[2]; + var value = obj[propExpr]; + if (propName.charAt(0) == '.') { + var path = propName.slice(1).split('.'); + var object = element; + while (object && path.length > 1) { + object = object[path.shift()]; + } + if (object) { + object[path] = value; + } + } else { + element.setAttribute(propName, value); + } + } + } + } + }; + + var attributeNames = []; + for (var key in handlers) { + attributeNames.push(key); + } + var selector = '[' + attributeNames.join('],[') + ']'; + + return { + /** + * Processes a DOM tree with the {@code obj} map. + */ + process: function(node, obj) { + var elements = node.querySelectorAll(selector); + for (var element, i = 0; element = elements[i]; i++) { + for (var j = 0; j < attributeNames.length; j++) { + var name = attributeNames[j]; + var att = element.getAttribute(name); + if (att != null) { + handlers[name](element, att, obj); + } + } + } + } + }; +})(); diff --git a/chrome/browser/resources/incognito_tab.html b/chrome/browser/resources/incognito_tab.html index 9abb85f..064aa32 100644 --- a/chrome/browser/resources/incognito_tab.html +++ b/chrome/browser/resources/incognito_tab.html @@ -1,6 +1,7 @@ - + + - + -

diff --git a/chrome/browser/resources/new_new_tab.html b/chrome/browser/resources/new_new_tab.html index 13a06b2..086553f 100644 --- a/chrome/browser/resources/new_new_tab.html +++ b/chrome/browser/resources/new_new_tab.html @@ -1,8 +1,8 @@ - + - + - + - -

- +

diff --git a/chrome/renderer/resources/neterror.html b/chrome/renderer/resources/neterror.html index 4625561..1a2406a 100644 --- a/chrome/renderer/resources/neterror.html +++ b/chrome/renderer/resources/neterror.html @@ -1,9 +1,9 @@ - - + + - +<title i18n-content="title"> - - + -

@@ -93,11 +92,11 @@ function toggleDiv(id) {

- +

diff --git a/net/base/dir_header.html b/net/base/dir_header.html index ec4eb3a..afdfcf2 100644 --- a/net/base/dir_header.html +++ b/net/base/dir_header.html @@ -1,4 +1,5 @@ - + +