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({ |
15 constructor () { | 15 tagName: 'radio', |
16 super(); | 16 shadow: true, |
17 this.addEventListener('click', (event) => this.checked = true); | 17 prototype: class extends Element { |
18 this.addShadowRoot(new sky.ShadowRoot(module.document.findId('radio-shadow'
).content.cloneNode(true))); | 18 constructor () { |
19 } | 19 super(); |
20 get checked () { | 20 this.addEventListener('click', (event) => this.checked = true); |
21 return this.hasAttribute('checked'); | 21 this.shadowRoot.appendChild(module.document.findId('radio-shadow').conten
t.cloneNode(true)); |
22 } | 22 } |
23 set checked (value) { | 23 get checked () { |
24 if (value) | 24 return this.hasAttribute('checked'); |
25 this.setAttribute('checked', ''); | 25 } |
26 else | 26 set checked (value) { |
27 this.removeAttribute('checked'); | 27 if (value) |
28 } | 28 this.setAttribute('checked', ''); |
29 get value () { | 29 else |
30 return this.getAttribute('name'); | 30 this.removeAttribute('checked'); |
31 } | 31 } |
32 set value (value) { | 32 get value () { |
33 this.setAttribute('value', value); | 33 return this.getAttribute('name'); |
34 } | 34 } |
35 attributeChanged(name, oldValue, newValue) { | 35 set value (value) { |
36 if ((name == 'checked') && (newValue != null)) | 36 this.setAttribute('value', value); |
37 if (this.parentNode instanceof module.exports.RadioGroupElement) | 37 } |
38 this.parentNode.setChecked(this); | 38 attributeChanged(name, oldValue, newValue) { |
39 } | 39 if ((name == 'checked') && (newValue != null)) |
| 40 if (this.parentNode instanceof module.exports.RadioGroupElement) |
| 41 this.parentNode.setChecked(this); |
| 42 } |
| 43 }, |
40 }); | 44 }); |
41 </script> | 45 </script> |
42 | 46 |
43 <!-- <radiogroup> --> | 47 <!-- <radiogroup> --> |
44 <template id="radiogroup-shadow"> | 48 <template id="radiogroup-shadow"> |
45 <style> | 49 <style> |
46 :host { padding: 1em; border: thin solid; } | 50 :host { padding: 1em; border: thin solid; } |
47 </style> | 51 </style> |
48 </template> | 52 </template> |
49 <script> | 53 <script> |
50 module.exports.RadioGroupElement = sky.registerElement('radiogroup', class exte
nds Element { | 54 module.exports.RadioGroupElement = sky.registerElement({ |
51 constructor () { | 55 tagName: 'radiogroup', |
52 super(); | 56 shadow: true, |
53 this.addShadowRoot(new sky.ShadowRoot(module.document.findId('radiogroup-sh
adow').content.cloneNode(true))); | 57 prototype: class extends Element { |
54 } | 58 constructor () { |
55 get value () { | 59 super(); |
56 let children = this.getChildNodes(); | 60 this.shadowRoot.appendChild(module.document.findId('radiogroup-shadow').c
ontent.cloneNode(true)); |
57 for (let child of children) | 61 } |
58 if (child instanceof module.exports.RadioElement) | 62 get value () { |
59 if (child.checked) | 63 let children = this.getChildNodes(); |
60 return child.name; | 64 for (let child of children) |
61 return ''; | 65 if (child instanceof module.exports.RadioElement) |
62 } | 66 if (child.checked) |
63 set value (name) { | 67 return child.name; |
64 let children = this.getChildNodes(); | 68 return ''; |
65 for (let child of children) | 69 } |
66 if (child instanceof module.exports.RadioElement) | 70 set value (name) { |
67 if (child.value == name) | 71 let children = this.getChildNodes(); |
68 child.checked = true; | 72 for (let child of children) |
69 } | 73 if (child instanceof module.exports.RadioElement) |
70 setChecked(radio) { | 74 if (child.value == name) |
71 if (!((radio instanceof module.exports.Radio) && radio.parentNode == this)) | 75 child.checked = true; |
72 throw; | 76 } |
73 let children = this.getChildNodes(); | 77 setChecked(radio) { |
74 for (let child of children) | 78 if (!((radio instanceof module.exports.Radio) && radio.parentNode == this
)) |
75 if (child instanceof module.exports.RadioElement) | 79 throw; |
76 if (child != radio) | 80 let children = this.getChildNodes(); |
77 child.checked = false; | 81 for (let child of children) |
78 } | 82 if (child instanceof module.exports.RadioElement) |
| 83 if (child != radio) |
| 84 child.checked = false; |
| 85 } |
| 86 }, |
79 }); | 87 }); |
80 </script> | 88 </script> |
OLD | NEW |