2014-10-23 18:15:41 +00:00
|
|
|
SKY MODULE - radio button and radio button group
|
|
|
|
<!-- accessibility handling not implemented yet, pending mojo service -->
|
2014-10-31 23:18:46 +00:00
|
|
|
|
2014-10-23 18:15:41 +00:00
|
|
|
<!-- <radio> -->
|
|
|
|
<template id="radio-shadow">
|
|
|
|
<style>
|
|
|
|
:host { width: 1em; height: 1em; border: solid; background: white; }
|
|
|
|
:host[checked] { background: black; }
|
|
|
|
</style>
|
|
|
|
</template>
|
|
|
|
<script>
|
2014-10-31 23:18:46 +00:00
|
|
|
module.exports.RadioElement = module.registerElement({
|
2014-10-31 17:16:37 +00:00
|
|
|
tagName: 'radio',
|
|
|
|
shadow: true,
|
2014-11-04 20:16:49 +00:00
|
|
|
constructor: class extends Element {
|
2014-11-04 19:57:02 +00:00
|
|
|
constructor (module) {
|
|
|
|
super(module);
|
2014-10-31 17:16:37 +00:00
|
|
|
this.addEventListener('click', (event) => this.checked = true);
|
2014-11-04 22:15:40 +00:00
|
|
|
this.shadowRoot.append(module.document.findId('radio-shadow').content.cloneNode(true));
|
2014-10-31 17:16:37 +00:00
|
|
|
}
|
|
|
|
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);
|
|
|
|
}
|
2014-11-04 20:16:49 +00:00
|
|
|
},
|
2014-10-23 18:15:41 +00:00
|
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<!-- <radiogroup> -->
|
|
|
|
<template id="radiogroup-shadow">
|
|
|
|
<style>
|
|
|
|
:host { padding: 1em; border: thin solid; }
|
|
|
|
</style>
|
|
|
|
</template>
|
|
|
|
<script>
|
2014-11-04 20:16:49 +00:00
|
|
|
module.exports.RadioGroupElement = module.registerElement{
|
2014-10-31 17:16:37 +00:00
|
|
|
tagName: 'radiogroup',
|
|
|
|
shadow: true,
|
2014-11-04 20:16:49 +00:00
|
|
|
constructor: (class extends Element {
|
2014-11-04 19:57:02 +00:00
|
|
|
constructor (module) {
|
|
|
|
super(module);
|
2014-11-04 22:15:40 +00:00
|
|
|
this.shadowRoot.append(module.document.findId('radiogroup-shadow').content.cloneNode(true));
|
2014-10-31 17:16:37 +00:00
|
|
|
}
|
|
|
|
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;
|
|
|
|
}
|
2014-11-04 20:16:49 +00:00
|
|
|
},
|
2014-10-23 18:15:41 +00:00
|
|
|
});
|
|
|
|
</script>
|