OLD | NEW |
1 SKY MODULE - defines an <element> element | 1 SKY MODULE - defines an <element> element |
2 <import src="sky:core" as="sky"/> | 2 <import src="sky:core" as="sky"/> |
3 | 3 |
4 <!-- usage: | 4 <!-- usage: |
5 | 5 |
6 <element name="tagname"> | 6 <element name="tagname"> |
7 <style> style here (optional) </style> | 7 <style> style here (optional) </style> |
8 <template> shadow tree here (optional) </template> | 8 <template> shadow tree here (optional) </template> |
9 <script> // optional | 9 <script> // optional |
10 module.currentScript.parentNode.setPrototype({ | 10 module.currentScript.parentNode.setPrototype({ |
11 init: function () { | 11 init: function () { |
12 // constructor here | 12 // constructor here |
13 }, | 13 }, |
14 // rest of api here | 14 // rest of api here |
15 }); | 15 }); |
16 </script> | 16 </script> |
17 </element> | 17 </element> |
18 | 18 |
19 --> | 19 --> |
20 | 20 |
21 <script> | 21 <script> |
22 module.exports.Element = sky.registerElement( | 22 module.exports.Element = sky.registerElement( |
23 class extends Element { | 23 class extends Element { |
24 static get tagName() { return 'element'; } | 24 static get tagName() { return 'element'; } |
25 constructor (module) { | 25 constructor (hostModule) { |
26 super(); | 26 super(hostModule); |
27 this.state = 'loading'; | 27 this.state = 'loading'; |
28 this.module = module; | 28 this.module = hostModule; |
29 this.definedPrototype = sky.Element; | 29 this.definedPrototype = sky.Element; |
30 } | 30 } |
31 setPrototype(prototype) { | 31 setPrototype(prototype) { |
32 this.definedPrototype = prototype; | 32 this.definedPrototype = prototype; |
33 } | 33 } |
34 endTagParsedCallback() { | 34 endTagParsedCallback() { |
35 let style = null; | 35 let style = null; |
36 let template = null; | 36 let template = null; |
37 let child = this.firstChild; | 37 let child = this.firstChild; |
38 while (child && !(style && template)) { | 38 while (child && !(style && template)) { |
39 if ((!style) && (child instanceof sky.StyleElement)) | 39 if ((!style) && (child instanceof sky.StyleElement)) |
40 style = child; | 40 style = child; |
41 if ((!template) && (template instanceof sky.TemplateElement)) | 41 if ((!template) && (template instanceof sky.TemplateElement)) |
42 template = child; | 42 template = child; |
43 child = child.nextSibling; | 43 child = child.nextSibling; |
44 } | 44 } |
45 let tagName = this.getAttribute('name'); | 45 let tagName = this.getAttribute('name'); |
46 let constructorName = tagName.charAt(0).toUpperCase() + tagName.slice(1)
+ 'Element'; | 46 let constructorName = tagName.charAt(0).toUpperCase() + tagName.slice(1)
+ 'Element'; |
47 let constructor = function (module) { | 47 let constructor = function (hostModule) { |
48 super(module); | 48 super(hostModule); |
49 if (this.init) | 49 if (this.init) |
50 this.init(); | 50 this.init(); |
51 if (style) | 51 if (style) |
52 this.shadowRoot.append(style.cloneNode(true)); | 52 this.shadowRoot.append(style.cloneNode(true)); |
53 if (template) | 53 if (template) |
54 this.shadowRoot.append(template.cloneNode(true)); | 54 this.shadowRoot.append(template.cloneNode(true)); |
55 } | 55 } |
56 }; | 56 }; |
57 if (this.definedPrototype) | 57 if (this.definedPrototype) |
58 constructor.prototype = this.definedPrototype; | 58 constructor.prototype = this.definedPrototype; |
59 else | 59 else |
60 constructor.prototype = sky.Element; | 60 constructor.prototype = sky.Element; |
61 constructor.tagName = this.getAttribute('name'); | 61 constructor.tagName = this.getAttribute('name'); |
62 constructor.shadow = style || template; | 62 constructor.shadow = style || template; |
63 this.module.exports[constructorName] = this.registerElement(constructor); | 63 this.module.exports[constructorName] = this.registerElement(constructor); |
64 delete this.definedPrototype; | 64 delete this.definedPrototype; |
65 delete this.module; | 65 delete this.module; |
66 this.state = 'loaded'; | 66 this.state = 'loaded'; |
67 } | 67 } |
68 } | 68 } |
69 ); | 69 ); |
70 </script> | 70 </script> |
OLD | NEW |