firka/flutter
firka/flutter
5
Fork 0
Code Issues Pull Requests 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> </template>
<script> <script>
module.exports = {}; module.exports = {};
module.exports.RadioElement = sky.registerElement('radio', class extends Element { module.exports.RadioElement = sky.registerElement({
constructor () { tagName: 'radio',
super(); shadow: true,
this.addEventListener('click', (event) => this.checked = true); prototype: class extends Element {
this.addShadowRoot(new sky.ShadowRoot(module.document.findId('radio-shadow').content.cloneNode(true))); constructor () {
} super();
get checked () { this.addEventListener('click', (event) => this.checked = true);
return this.hasAttribute('checked'); this.shadowRoot.appendChild(module.document.findId('radio-shadow').content.cloneNode(true));
} }
set checked (value) { get checked () {
if (value) return this.hasAttribute('checked');
this.setAttribute('checked', ''); }
else set checked (value) {
this.removeAttribute('checked'); if (value)
} this.setAttribute('checked', '');
get value () { else
return this.getAttribute('name'); this.removeAttribute('checked');
} }
set value (value) { get value () {
this.setAttribute('value', value); return this.getAttribute('name');
} }
attributeChanged(name, oldValue, newValue) { set value (value) {
if ((name == 'checked') && (newValue != null)) this.setAttribute('value', value);
if (this.parentNode instanceof module.exports.RadioGroupElement) }
this.parentNode.setChecked(this); attributeChanged(name, oldValue, newValue) {
} if ((name == 'checked') && (newValue != null))
if (this.parentNode instanceof module.exports.RadioGroupElement)
this.parentNode.setChecked(this);
}
},
}); });
</script> </script>
@ -47,34 +51,38 @@ SKY MODULE - radio button and radio button group
</style> </style>
</template> </template>
<script> <script>
module.exports.RadioGroupElement = sky.registerElement('radiogroup', class extends Element { module.exports.RadioGroupElement = sky.registerElement({
constructor () { tagName: 'radiogroup',
super(); shadow: true,
this.addShadowRoot(new sky.ShadowRoot(module.document.findId('radiogroup-shadow').content.cloneNode(true))); prototype: class extends Element {
} constructor () {
get value () { super();
let children = this.getChildNodes(); this.shadowRoot.appendChild(module.document.findId('radiogroup-shadow').content.cloneNode(true));
for (let child of children) }
if (child instanceof module.exports.RadioElement) get value () {
if (child.checked) let children = this.getChildNodes();
return child.name; for (let child of children)
return ''; if (child instanceof module.exports.RadioElement)
} if (child.checked)
set value (name) { return child.name;
let children = this.getChildNodes(); return '';
for (let child of children) }
if (child instanceof module.exports.RadioElement) set value (name) {
if (child.value == name) let children = this.getChildNodes();
child.checked = true; for (let child of children)
} if (child instanceof module.exports.RadioElement)
setChecked(radio) { if (child.value == name)
if (!((radio instanceof module.exports.Radio) && radio.parentNode == this)) child.checked = true;
throw; }
let children = this.getChildNodes(); setChecked(radio) {
for (let child of children) if (!((radio instanceof module.exports.Radio) && radio.parentNode == this))
if (child instanceof module.exports.RadioElement) throw;
if (child != radio) let children = this.getChildNodes();
child.checked = false; for (let child of children)
} if (child instanceof module.exports.RadioElement)
if (child != radio)
child.checked = false;
}
},
}); });
</script> </script>