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

R=esprehn@chromium.org Review URL: https://codereview.chromium.org/694613002

Specs: Simplify the platform by only having one shadow tree per element.
R=esprehn@chromium.org Review URL: https://codereview.chromium.org/694613002
bcb84129 · Hixie · 4f47cb92 · bcb84129
Commit bcb84129 authored Oct 31, 2014 by Hixie
Hide whitespace changes
Inline Side-by-side

Showing with 63 additions and 55 deletions

radio.sky examples/radio.sky +63 -55

No files found.
--- a/examples/radio.sky
+++ b/examples/radio.sky
@@ -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 {
+ 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>
@@ -47,34 +51,38 @@ SKY MODULE - radio button and radio button group
 </style>
 </template>
 <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>