| OLD | NEW |
| 1 <!-- | 1 <!-- |
| 2 // Copyright 2014 The Chromium Authors. All rights reserved. | 2 // Copyright 2014 The Chromium Authors. All rights reserved. |
| 3 // Use of this source code is governed by a BSD-style license that can be | 3 // Use of this source code is governed by a BSD-style license that can be |
| 4 // found in the LICENSE file. | 4 // found in the LICENSE file. |
| 5 --> | 5 --> |
| 6 <import src="sky-binder.sky" as="binder" /> | 6 <import src="sky-binder.sky" as="binder" /> |
| 7 <script> | 7 <script> |
| 8 var templates = new Map(); | 8 var templates = new Map(); |
| 9 | 9 |
| 10 var attributeConverters = { | 10 var attributeConverters = { |
| (...skipping 22 matching lines...) Expand all Loading... |
| 33 }, | 33 }, |
| 34 enumerable: true, | 34 enumerable: true, |
| 35 configurable: true, | 35 configurable: true, |
| 36 }); | 36 }); |
| 37 | 37 |
| 38 prototype[name + 'AttributeChanged'] = function(oldValue, newValue) { | 38 prototype[name + 'AttributeChanged'] = function(oldValue, newValue) { |
| 39 this.notifyPropertyChanged(name, converter(oldValue), converter(newValue)); | 39 this.notifyPropertyChanged(name, converter(oldValue), converter(newValue)); |
| 40 }; | 40 }; |
| 41 } | 41 } |
| 42 | 42 |
| 43 function defineReflectedAttributes(elementClass, list) { | 43 function defineReflectedAttributes(elementClass, tagName, list) { |
| 44 var attributeNames = (list || '').split(','); | 44 var attributeTokens = (list || '').split(','); |
| 45 var attributeNames = []; |
| 45 var prototype = elementClass.prototype; | 46 var prototype = elementClass.prototype; |
| 46 | 47 |
| 47 for (var i = 0; i < attributeNames.length; ++i) { | 48 for (var i = 0; i < attributeTokens.length; ++i) { |
| 48 var parts = attributeNames[i].split(':'); | 49 var parts = attributeTokens[i].split(':'); |
| 49 var name = parts[0].trim(); | 50 var name = parts[0].trim(); |
| 50 var type = (parts[1] || '').trim(); | 51 var type = (parts[1] || '').trim(); |
| 51 var converter = attributeConverters[type] || attributeConverters.string; | 52 var converter = attributeConverters[type] || attributeConverters.string; |
| 52 | 53 |
| 54 attributeNames.push(name); |
| 53 defineReflectedAttribute(prototype, converter, name); | 55 defineReflectedAttribute(prototype, converter, name); |
| 54 } | 56 } |
| 57 |
| 58 binder.registerElement(tagName, { |
| 59 attributeNames: attributeNames, |
| 60 }); |
| 55 } | 61 } |
| 56 | 62 |
| 57 class SkyElement extends HTMLElement { | 63 class SkyElement extends HTMLElement { |
| 58 | 64 |
| 59 static register() { | 65 static register() { |
| 60 var wrapper = document.currentScript.parentNode; | 66 var wrapper = document.currentScript.parentNode; |
| 61 | 67 |
| 62 if (wrapper.localName !== 'sky-element') | 68 if (wrapper.localName !== 'sky-element') |
| 63 throw new Error('No <sky-element>.'); | 69 throw new Error('No <sky-element>.'); |
| 64 | 70 |
| 65 var tagName = wrapper.getAttribute('name'); | 71 var tagName = wrapper.getAttribute('name'); |
| 66 if (!tagName) | 72 if (!tagName) |
| 67 throw new Error('<sky-element> must have a name.'); | 73 throw new Error('<sky-element> must have a name.'); |
| 68 | 74 |
| 69 var template = wrapper.querySelector('template'); | 75 var template = wrapper.querySelector('template'); |
| 70 if (template) | 76 if (template) |
| 71 templates.set(tagName, template); | 77 templates.set(tagName, template); |
| 72 | 78 |
| 73 defineReflectedAttributes(this, wrapper.getAttribute('attributes')); | 79 defineReflectedAttributes(this, tagName, |
| 80 wrapper.getAttribute('attributes')); |
| 74 | 81 |
| 75 return document.registerElement(tagName, { | 82 return document.registerElement(tagName, { |
| 76 prototype: this.prototype, | 83 prototype: this.prototype, |
| 77 }); | 84 }); |
| 78 } | 85 } |
| 79 | 86 |
| 80 created() { | 87 created() { |
| 81 // override | 88 // override |
| 82 } | 89 } |
| 83 | 90 |
| (...skipping 61 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 145 oldValue: oldValue, | 152 oldValue: oldValue, |
| 146 }); | 153 }); |
| 147 var handler = this[name + 'Changed']; | 154 var handler = this[name + 'Changed']; |
| 148 if (typeof handler == 'function') | 155 if (typeof handler == 'function') |
| 149 handler.call(this, oldValue, newValue); | 156 handler.call(this, oldValue, newValue); |
| 150 } | 157 } |
| 151 }; | 158 }; |
| 152 | 159 |
| 153 module.exports = SkyElement; | 160 module.exports = SkyElement; |
| 154 </script> | 161 </script> |
| OLD | NEW |