sky/examples/radio.sky

SKY MODULE - radio button and radio button group
<!-- accessibility handling not implemented yet, pending mojo service -->

<!-- <radio> -->
<template id="radio-shadow">
 <style>
  :host { width: 1em; height: 1em; border: solid; background: white; }
  :host[checked] { background: black; }
 </style>
</template>
<script>
 module.exports.RadioElement = module.registerElement({
   tagName: 'radio',
   shadow: true,
   constructor: class extends Element {
     constructor (module) {
       super(module);
       this.addEventListener('click', (event) => this.checked = true);
       this.shadowRoot.append(module.document.findId('radio-shadow').content.cloneNode(true));
     }
     get checked () {
       return this.hasAttribute('checked');
     }
     set checked (value) {
       if (value)
         this.setAttribute('checked', '');
       else
         this.removeAttribute('checked');
     }
     get value () {
       return this.getAttribute('name');
     }
     set value (value) {
       this.setAttribute('value', value);
     }
     attributeChanged(name, oldValue, newValue) {
       if ((name == 'checked') && (newValue != null))
         if (this.parentNode instanceof module.exports.RadioGroupElement)
           this.parentNode.setChecked(this);
     }
   },
 });
</script>

<!-- <radiogroup> -->
<template id="radiogroup-shadow">
 <style>
  :host { padding: 1em; border: thin solid; }
 </style>
</template>
<script>
 module.exports.RadioGroupElement = module.registerElement{
   tagName: 'radiogroup',
   shadow: true,
   constructor: (class extends Element {
     constructor (module) {
       super(module);
       this.shadowRoot.append(module.document.findId('radiogroup-shadow').content.cloneNode(true));
     }
     get value () {
       let children = this.getChildNodes();
       for (let child of children)
         if (child instanceof module.exports.RadioElement)
           if (child.checked)
             return child.name;
       return '';
     }
     set value (name) { 
       let children = this.getChildNodes();
       for (let child of children)
         if (child instanceof module.exports.RadioElement)
           if (child.value == name)
             child.checked = true;
     }
     setChecked(radio) {
       if (!((radio instanceof module.exports.Radio) && radio.parentNode == this))
         throw;
       let children = this.getChildNodes();
       for (let child of children)
         if (child instanceof module.exports.RadioElement)
           if (child != radio)
             child.checked = false;
     }
   },
 });
</script>