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 |