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 <import src="sky:core" as="sky"/> |
4 | 4 |
5 <!-- <radio> --> | 5 <!-- <radio> --> |
6 <template id="radio-shadow"> | 6 <template id="radio-shadow"> |
7 <style> | 7 <style> |
8 :host { width: 1em; height: 1em; border: solid; background: white; } | 8 :host { width: 1em; height: 1em; border: solid; background: white; } |
9 :host[checked] { background: black; } | 9 :host[checked] { background: black; } |
10 </style> | 10 </style> |
11 </template> | 11 </template> |
12 <script> | 12 <script> |
13 module.exports = {}; | 13 module.exports = {}; |
14 module.exports.RadioElement = sky.registerElement('radio', class extends Elemen
t { | 14 module.exports.RadioElement = sky.registerElement('radio', class extends Elemen
t { |
15 constructor () { | 15 constructor () { |
| 16 super(); |
16 this.addEventListener('click', (event) => this.checked = true); | 17 this.addEventListener('click', (event) => this.checked = true); |
17 this.addShadowRoot(new sky.ShadowRoot(module.document.findId('radio-shadow'
).content.cloneNode(true))); | 18 this.addShadowRoot(new sky.ShadowRoot(module.document.findId('radio-shadow'
).content.cloneNode(true))); |
18 } | 19 } |
19 get checked () { | 20 get checked () { |
20 return this.hasAttribute('checked'); | 21 return this.hasAttribute('checked'); |
21 } | 22 } |
22 set checked (value) { | 23 set checked (value) { |
23 if (value) | 24 if (value) |
24 this.setAttribute('checked', ''); | 25 this.setAttribute('checked', ''); |
25 else | 26 else |
(...skipping 15 matching lines...) Expand all Loading... |
41 | 42 |
42 <!-- <radiogroup> --> | 43 <!-- <radiogroup> --> |
43 <template id="radiogroup-shadow"> | 44 <template id="radiogroup-shadow"> |
44 <style> | 45 <style> |
45 :host { padding: 1em; border: thin solid; } | 46 :host { padding: 1em; border: thin solid; } |
46 </style> | 47 </style> |
47 </template> | 48 </template> |
48 <script> | 49 <script> |
49 module.exports.RadioGroupElement = sky.registerElement('radiogroup', class exte
nds Element { | 50 module.exports.RadioGroupElement = sky.registerElement('radiogroup', class exte
nds Element { |
50 constructor () { | 51 constructor () { |
| 52 super(); |
51 this.addShadowRoot(new sky.ShadowRoot(module.document.findId('radiogroup-sh
adow').content.cloneNode(true))); | 53 this.addShadowRoot(new sky.ShadowRoot(module.document.findId('radiogroup-sh
adow').content.cloneNode(true))); |
52 } | 54 } |
53 get value () { | 55 get value () { |
54 let children = this.getChildNodes(); | 56 let children = this.getChildNodes(); |
55 for (let child of children) | 57 for (let child of children) |
56 if (child instanceof module.exports.RadioElement) | 58 if (child instanceof module.exports.RadioElement) |
57 if (child.checked) | 59 if (child.checked) |
58 return child.name; | 60 return child.name; |
59 return ''; | 61 return ''; |
60 } | 62 } |
61 set value (name) { | 63 set value (name) { |
62 let children = this.getChildNodes(); | 64 let children = this.getChildNodes(); |
63 for (let child of children) | 65 for (let child of children) |
64 if (child instanceof module.exports.RadioElement) | 66 if (child instanceof module.exports.RadioElement) |
65 if (child.value == name) | 67 if (child.value == name) |
66 child.checked = true; | 68 child.checked = true; |
67 } | 69 } |
68 setChecked(radio) { | 70 setChecked(radio) { |
69 if (!((radio instanceof module.exports.Radio) && radio.parentNode == this)) | 71 if (!((radio instanceof module.exports.Radio) && radio.parentNode == this)) |
70 throw; | 72 throw; |
71 let children = this.getChildNodes(); | 73 let children = this.getChildNodes(); |
72 for (let child of children) | 74 for (let child of children) |
73 if (child instanceof module.exports.RadioElement) | 75 if (child instanceof module.exports.RadioElement) |
74 if (child != radio) | 76 if (child != radio) |
75 child.checked = false; | 77 child.checked = false; |
76 } | 78 } |
77 }); | 79 }); |
78 </script> | 80 </script> |
OLD | NEW |