| OLD | NEW | 
| (Empty) |  | 
 |    1 /** | 
 |    2  * @fileoverview This is a simple template engine inspired by JsTemplates | 
 |    3  * optimized for i18n. | 
 |    4  * | 
 |    5  * It currently supports two handlers: | 
 |    6  * | 
 |    7  *   * i18n-content which sets the textContent of the element | 
 |    8  * | 
 |    9  *     <span i18n-content="myContent"></span> | 
 |   10  *     i18nTemplate.process(element, {'myContent': 'Content'}); | 
 |   11  * | 
 |   12  *   * i18n-values is a list of attribute-value or property-value pairs. | 
 |   13  *     Properties are prefixed with a '.' and can contain nested properties. | 
 |   14  * | 
 |   15  *     <span i18n-values="title:myTitle;.style.fontSize:fontSize"></span> | 
 |   16  *     i18nTemplate.process(element, { | 
 |   17  *       'myTitle': 'Title', | 
 |   18  *       'fontSize': '13px' | 
 |   19  *     }); | 
 |   20  */ | 
 |   21  | 
 |   22 var i18nTemplate = (function() { | 
 |   23   /** | 
 |   24    * This provides the handlers for the templating engine. The key is used as | 
 |   25    * the attribute name and the value is the function that gets called for every | 
 |   26    * single node that has this attribute. | 
 |   27    * @type {Object} | 
 |   28    */ | 
 |   29   var handlers = { | 
 |   30     /** | 
 |   31      * This handler sets the textContent of the element. | 
 |   32      */ | 
 |   33     'i18n-content': function(element, attributeValue, obj) { | 
 |   34       element.textContent = obj[attributeValue]; | 
 |   35     }, | 
 |   36  | 
 |   37     /** | 
 |   38      * This is used to set HTML attributes and DOM properties,. The syntax is: | 
 |   39      *   attributename:key; | 
 |   40      *   .domProperty:key; | 
 |   41      *   .nested.dom.property:key | 
 |   42      */ | 
 |   43     'i18n-values': function(element, attributeValue, obj) { | 
 |   44       var parts = attributeValue.replace(/\s/g, '').split(/;/); | 
 |   45       for (var j = 0; j < parts.length; j++) { | 
 |   46         var a = parts[j].match(/^([^:]+):(.+)$/); | 
 |   47         if (a) { | 
 |   48           var propName = a[1]; | 
 |   49           var propExpr = a[2]; | 
 |   50  | 
 |   51           // Ignore missing properties | 
 |   52           if (propExpr in obj) { | 
 |   53             var value = obj[propExpr]; | 
 |   54             if (propName.charAt(0) == '.') { | 
 |   55               var path = propName.slice(1).split('.'); | 
 |   56               var object = element; | 
 |   57               while (object && path.length > 1) { | 
 |   58                 object = object[path.shift()]; | 
 |   59               } | 
 |   60               if (object) { | 
 |   61                 object[path] = value; | 
 |   62                 // In case we set innerHTML (ignoring others) we need to | 
 |   63                 // recursively check the content | 
 |   64                 if (path == 'innerHTML') { | 
 |   65                   process(element, obj); | 
 |   66                 } | 
 |   67               } | 
 |   68             } else { | 
 |   69               element.setAttribute(propName, value); | 
 |   70             } | 
 |   71           } else { | 
 |   72             console.warn('i18n-values: Missing value for "' + propExpr + '"'); | 
 |   73           } | 
 |   74         } | 
 |   75       } | 
 |   76     } | 
 |   77   }; | 
 |   78  | 
 |   79   var attributeNames = []; | 
 |   80   for (var key in handlers) { | 
 |   81     attributeNames.push(key); | 
 |   82   } | 
 |   83   var selector = '[' + attributeNames.join('],[') + ']'; | 
 |   84  | 
 |   85   /** | 
 |   86    * Processes a DOM tree with the {@code obj} map. | 
 |   87    */ | 
 |   88   function process(node, obj) { | 
 |   89     var elements = node.querySelectorAll(selector); | 
 |   90     for (var element, i = 0; element = elements[i]; i++) { | 
 |   91       for (var j = 0; j < attributeNames.length; j++) { | 
 |   92         var name = attributeNames[j]; | 
 |   93         var att = element.getAttribute(name); | 
 |   94         if (att != null) { | 
 |   95           handlers[name](element, att, obj); | 
 |   96         } | 
 |   97       } | 
 |   98     } | 
 |   99   } | 
 |  100  | 
 |  101   return { | 
 |  102     process: process | 
 |  103   }; | 
 |  104 })(); | 
| OLD | NEW |