Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(74)

Side by Side Diff: sky/examples/radio.sky

Issue 695043002: Specs: make element registrations be per-module, define how they are (Closed) Base URL: https://github.com/domokit/mojo.git@master
Patch Set: Created 6 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 SKY MODULE - radio button and radio button group 1 SKY MODULE - radio button and radio button group
2 <!-- accessibility handling not implemented yet, pending mojo service --> 2 <!-- accessibility handling not implemented yet, pending mojo service -->
3 <import src="sky:core" as="sky"/> 3
4 <script>
5 module.exports = {};
6 </script>
4 7
5 <!-- <radio> --> 8 <!-- <radio> -->
6 <template id="radio-shadow"> 9 <template id="radio-shadow">
7 <style> 10 <style>
8 :host { width: 1em; height: 1em; border: solid; background: white; } 11 :host { width: 1em; height: 1em; border: solid; background: white; }
9 :host[checked] { background: black; } 12 :host[checked] { background: black; }
10 </style> 13 </style>
11 </template> 14 </template>
12 <script> 15 <script>
13 module.exports = {}; 16 module.exports.RadioElement = module.registerElement({
14 module.exports.RadioElement = sky.registerElement({
15 tagName: 'radio', 17 tagName: 'radio',
16 shadow: true, 18 shadow: true,
17 prototype: class extends Element { 19 prototype: class extends Element {
18 constructor () { 20 constructor () {
19 super(); 21 super();
20 this.addEventListener('click', (event) => this.checked = true); 22 this.addEventListener('click', (event) => this.checked = true);
21 this.shadowRoot.appendChild(module.document.findId('radio-shadow').conten t.cloneNode(true)); 23 this.shadowRoot.appendChild(module.document.findId('radio-shadow').conten t.cloneNode(true));
22 } 24 }
23 get checked () { 25 get checked () {
24 return this.hasAttribute('checked'); 26 return this.hasAttribute('checked');
(...skipping 19 matching lines...) Expand all
44 }); 46 });
45 </script> 47 </script>
46 48
47 <!-- <radiogroup> --> 49 <!-- <radiogroup> -->
48 <template id="radiogroup-shadow"> 50 <template id="radiogroup-shadow">
49 <style> 51 <style>
50 :host { padding: 1em; border: thin solid; } 52 :host { padding: 1em; border: thin solid; }
51 </style> 53 </style>
52 </template> 54 </template>
53 <script> 55 <script>
54 module.exports.RadioGroupElement = sky.registerElement({ 56 module.exports.RadioGroupElement = module.registerElement({
55 tagName: 'radiogroup', 57 tagName: 'radiogroup',
56 shadow: true, 58 shadow: true,
57 prototype: class extends Element { 59 prototype: class extends Element {
58 constructor () { 60 constructor () {
59 super(); 61 super();
60 this.shadowRoot.appendChild(module.document.findId('radiogroup-shadow').c ontent.cloneNode(true)); 62 this.shadowRoot.appendChild(module.document.findId('radiogroup-shadow').c ontent.cloneNode(true));
61 } 63 }
62 get value () { 64 get value () {
63 let children = this.getChildNodes(); 65 let children = this.getChildNodes();
64 for (let child of children) 66 for (let child of children)
(...skipping 14 matching lines...) Expand all
79 throw; 81 throw;
80 let children = this.getChildNodes(); 82 let children = this.getChildNodes();
81 for (let child of children) 83 for (let child of children)
82 if (child instanceof module.exports.RadioElement) 84 if (child instanceof module.exports.RadioElement)
83 if (child != radio) 85 if (child != radio)
84 child.checked = false; 86 child.checked = false;
85 } 87 }
86 }, 88 },
87 }); 89 });
88 </script> 90 </script>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698