15821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)// Copyright (c) 2010 The Chromium Authors. All rights reserved. 25821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)// Use of this source code is governed by a BSD-style license that can be 35821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)// found in the LICENSE file. 45821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 55821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 65821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * NOTE: The use of this file is deprecated. Use i18n_template2.js instead. 75821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 85821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @fileoverview This is a simple template engine inspired by JsTemplates 95821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * optimized for i18n. 105821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 115821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * It currently supports two handlers: 125821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 135821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * * i18n-content which sets the textContent of the element 145821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * <span i18n-content="myContent"></span> 165821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * i18nTemplate.process(element, {'myContent': 'Content'}); 175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 185821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * * i18n-values is a list of attribute-value or property-value pairs. 195821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Properties are prefixed with a '.' and can contain nested properties. 205821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 215821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * <span i18n-values="title:myTitle;.style.fontSize:fontSize"></span> 225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * i18nTemplate.process(element, { 235821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 'myTitle': 'Title', 245821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 'fontSize': '13px' 255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * }); 265821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 275821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 285821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)var i18nTemplate = (function() { 295821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 305821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * This provides the handlers for the templating engine. The key is used as 315821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * the attribute name and the value is the function that gets called for every 325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * single node that has this attribute. 335821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @type {Object} 345821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 355821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var handlers = { 365821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 375821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * This handler sets the textContent of the element. 385821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 395821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 'i18n-content': function(element, attributeValue, obj) { 405821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) element.textContent = obj[attributeValue]; 415821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }, 425821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 435821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 445821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * This handler adds options to a select element. 455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 465821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 'i18n-options': function(element, attributeValue, obj) { 475821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var options = obj[attributeValue]; 485821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) options.forEach(function(values) { 495821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var option = typeof values == 'string' ? new Option(values) : 505821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) new Option(values[1], values[0]); 515821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) element.appendChild(option); 525821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }); 535821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }, 545821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 555821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 565821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * This is used to set HTML attributes and DOM properties,. The syntax is: 575821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * attributename:key; 585821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * .domProperty:key; 595821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * .nested.dom.property:key 605821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 615821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 'i18n-values': function(element, attributeValue, obj) { 625821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var parts = attributeValue.replace(/\s/g, '').split(/;/); 635821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) for (var j = 0; j < parts.length; j++) { 645821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var a = parts[j].match(/^([^:]+):(.+)$/); 655821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (a) { 665821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var propName = a[1]; 675821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var propExpr = a[2]; 685821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 695821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // Ignore missing properties 705821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (propExpr in obj) { 715821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var value = obj[propExpr]; 725821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (propName.charAt(0) == '.') { 735821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var path = propName.slice(1).split('.'); 745821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var object = element; 755821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) while (object && path.length > 1) { 765821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) object = object[path.shift()]; 775821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 785821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (object) { 795821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) object[path] = value; 805821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // In case we set innerHTML (ignoring others) we need to 815821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // recursively check the content 825821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (path == 'innerHTML') { 835821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) process(element, obj); 845821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 855821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 865821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } else { 875821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) element.setAttribute(propName, value); 885821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 895821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } else { 905821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) console.warn('i18n-values: Missing value for "' + propExpr + '"'); 915821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 925821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 935821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 945821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 955821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }; 965821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 975821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var attributeNames = []; 985821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) for (var key in handlers) { 995821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) attributeNames.push(key); 1005821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 1015821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var selector = '[' + attributeNames.join('],[') + ']'; 1025821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1035821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 1045821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Processes a DOM tree with the {@code obj} map. 1055821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 1065821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) function process(node, obj) { 1075821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var elements = node.querySelectorAll(selector); 1085821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) for (var element, i = 0; element = elements[i]; i++) { 1095821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) for (var j = 0; j < attributeNames.length; j++) { 1105821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var name = attributeNames[j]; 1115821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var att = element.getAttribute(name); 1125821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (att != null) { 1135821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) handlers[name](element, att, obj); 1145821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 1155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 1165821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 1175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 1185821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1195821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return { 1205821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) process: process 1215821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }; 1225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)})(); 123