mirror of
https://github.com/flutter/flutter
synced 2024-10-13 11:42:54 +00:00
cfd21dfd13
We could do something much more sophisticated for deploy in the future. Also add #!mojo:sky_viewer to .sky file demos R=abarth@chromium.org Review URL: https://codereview.chromium.org/885653006
87 lines
2.6 KiB
Plaintext
87 lines
2.6 KiB
Plaintext
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(
|
|
class extends Element {
|
|
static get tagName() { return 'radio'; }
|
|
static get shadow() { return true; }
|
|
constructor (hostModule) {
|
|
super(hostModule);
|
|
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(
|
|
class extends Element {
|
|
static get tagName() { return 'radiogroup'; }
|
|
static get shadow() { return true; }
|
|
constructor (hostModule) {
|
|
super(hostModule);
|
|
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>
|