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