Commit 00882d62 authored by Adam Barth's avatar Adam Barth

Open the Sky

parents
These are work-in-progress examples of how the language might look.
They won't currently work.
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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment