Open the Sky

examples/README.md

+These are work-in-progress examples of how the language might look.
+They won't currently work.

examples/radio.sky

+SKY MODULE - radio button and radio button group
+<!-- accessibility handling not implemented yet, pending mojo service -->
+<import src="sky:core" as="sky"/>
+
+<!-- <radio> -->
+<template id="radio-shadow">
+ <style>
+  :host { width: 1em; height: 1em; border: solid; background: white; }
+  :host[checked] { background: black; }
+ </style>
+</template>
+<script>
+ module.exports = {};
+ module.exports.RadioElement = sky.registerElement('radio', class extends Element {
+   constructor () {
+     this.addEventListener('click', (event) => this.checked = true);
+     this.createShadowTree().appendChild(module.document.findId('radio-shadow').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 = sky.registerElement('radiogroup', class extends Element {
+   constructor () {
+     this.createShadowTree().appendChild(module.document.findId('radiogroup-shadow').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>