development/flutter
development/flutter
1
0
Fork 0
mirror of https://github.com/flutter/flutter synced 2024-08-27 03:50:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Specs: Simplify the platform by only having one shadow tree per element.

Browse source 
R=esprehn@chromium.org

Review URL: https://codereview.chromium.org/694613002
This commit is contained in:
Hixie 2014-10-31 10:16:37 -07:00
parent 4f47cb9215
commit bcb841290f
1 changed files with 63 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

118
examples/radio.sky
View file

@ -11,32 +11,36 @@ SKY MODULE - radio button and radio button group
</template>
<script>
module.exports = {};
module.exports.RadioElement = sky.registerElement('radio', class extends Element {
constructor () {
super();
this.addEventListener('click', (event) => this.checked = true);
this.addShadowRoot(new sky.ShadowRoot(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);
}
module.exports.RadioElement = sky.registerElement({
tagName: 'radio',
shadow: true,
prototype: class extends Element {
constructor () {
super();
this.addEventListener('click', (event) => this.checked = true);
this.shadowRoot.appendChild(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>
@ -47,34 +51,38 @@ SKY MODULE - radio button and radio button group
</style>
</template>
<script>
module.exports.RadioGroupElement = sky.registerElement('radiogroup', class extends Element {
constructor () {
super();
this.addShadowRoot(new sky.ShadowRoot(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;
}
module.exports.RadioGroupElement = sky.registerElement({
tagName: 'radiogroup',
shadow: true,
prototype: class extends Element {
constructor () {
super();
this.shadowRoot.appendChild(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>