OLD | NEW |
1 SKY MODULE - radio button and radio button group | 1 SKY MODULE - radio button and radio button group |
2 <!-- accessibility handling not implemented yet, pending mojo service --> | 2 <!-- accessibility handling not implemented yet, pending mojo service --> |
3 <import src="sky:core" as="sky"/> | 3 |
| 4 <script> |
| 5 module.exports = {}; |
| 6 </script> |
4 | 7 |
5 <!-- <radio> --> | 8 <!-- <radio> --> |
6 <template id="radio-shadow"> | 9 <template id="radio-shadow"> |
7 <style> | 10 <style> |
8 :host { width: 1em; height: 1em; border: solid; background: white; } | 11 :host { width: 1em; height: 1em; border: solid; background: white; } |
9 :host[checked] { background: black; } | 12 :host[checked] { background: black; } |
10 </style> | 13 </style> |
11 </template> | 14 </template> |
12 <script> | 15 <script> |
13 module.exports = {}; | 16 module.exports.RadioElement = module.registerElement({ |
14 module.exports.RadioElement = sky.registerElement({ | |
15 tagName: 'radio', | 17 tagName: 'radio', |
16 shadow: true, | 18 shadow: true, |
17 prototype: class extends Element { | 19 prototype: class extends Element { |
18 constructor () { | 20 constructor () { |
19 super(); | 21 super(); |
20 this.addEventListener('click', (event) => this.checked = true); | 22 this.addEventListener('click', (event) => this.checked = true); |
21 this.shadowRoot.appendChild(module.document.findId('radio-shadow').conten
t.cloneNode(true)); | 23 this.shadowRoot.appendChild(module.document.findId('radio-shadow').conten
t.cloneNode(true)); |
22 } | 24 } |
23 get checked () { | 25 get checked () { |
24 return this.hasAttribute('checked'); | 26 return this.hasAttribute('checked'); |
(...skipping 19 matching lines...) Expand all Loading... |
44 }); | 46 }); |
45 </script> | 47 </script> |
46 | 48 |
47 <!-- <radiogroup> --> | 49 <!-- <radiogroup> --> |
48 <template id="radiogroup-shadow"> | 50 <template id="radiogroup-shadow"> |
49 <style> | 51 <style> |
50 :host { padding: 1em; border: thin solid; } | 52 :host { padding: 1em; border: thin solid; } |
51 </style> | 53 </style> |
52 </template> | 54 </template> |
53 <script> | 55 <script> |
54 module.exports.RadioGroupElement = sky.registerElement({ | 56 module.exports.RadioGroupElement = module.registerElement({ |
55 tagName: 'radiogroup', | 57 tagName: 'radiogroup', |
56 shadow: true, | 58 shadow: true, |
57 prototype: class extends Element { | 59 prototype: class extends Element { |
58 constructor () { | 60 constructor () { |
59 super(); | 61 super(); |
60 this.shadowRoot.appendChild(module.document.findId('radiogroup-shadow').c
ontent.cloneNode(true)); | 62 this.shadowRoot.appendChild(module.document.findId('radiogroup-shadow').c
ontent.cloneNode(true)); |
61 } | 63 } |
62 get value () { | 64 get value () { |
63 let children = this.getChildNodes(); | 65 let children = this.getChildNodes(); |
64 for (let child of children) | 66 for (let child of children) |
(...skipping 14 matching lines...) Expand all Loading... |
79 throw; | 81 throw; |
80 let children = this.getChildNodes(); | 82 let children = this.getChildNodes(); |
81 for (let child of children) | 83 for (let child of children) |
82 if (child instanceof module.exports.RadioElement) | 84 if (child instanceof module.exports.RadioElement) |
83 if (child != radio) | 85 if (child != radio) |
84 child.checked = false; | 86 child.checked = false; |
85 } | 87 } |
86 }, | 88 }, |
87 }); | 89 }); |
88 </script> | 90 </script> |
OLD | NEW |