OLD | NEW |
1 <!-- | 1 <!-- |
2 // Copyright 2014 The Chromium Authors. All rights reserved. | 2 // Copyright 2015 The Chromium Authors. All rights reserved. |
3 // Use of this source code is governed by a BSD-style license that can be | 3 // Use of this source code is governed by a BSD-style license that can be |
4 // found in the LICENSE file. | 4 // found in the LICENSE file. |
5 --> | 5 --> |
6 <import src="sky-button.sky" as="SkyButton" /> | 6 <import src="sky-button.sky" /> |
| 7 <import src="sky-element.sky" /> |
7 | 8 |
8 <sky-element | 9 <sky-element attributes="selected:boolean, group:string, highlight:boolean"> |
9 name="sky-radio" | |
10 attributes="selected:boolean, group:string" | |
11 on-click="handleClick"> | |
12 <template> | 10 <template> |
13 <style> | 11 <style> |
14 :host { | 12 :host { |
15 display: inline-block; | 13 display: inline-block; |
16 -webkit-user-select: none; | 14 -webkit-user-select: none; |
17 width: 14px; | 15 width: 14px; |
18 height: 14px; | 16 height: 14px; |
19 border-radius: 7px; | 17 border-radius: 7px; |
20 border: 1px solid blue; | 18 border: 1px solid blue; |
21 margin: 0 5px; | 19 margin: 0 5px; |
22 } | 20 } |
23 :host([highlight=true]) box { | |
24 background-color: orange; | |
25 } | |
26 dot { | 21 dot { |
27 -webkit-user-select: none; | 22 -webkit-user-select: none; |
28 width: 10px; | 23 width: 10px; |
29 height: 10px; | 24 height: 10px; |
30 border-radius: 5px; | 25 border-radius: 5px; |
31 background-color: black; | 26 background-color: black; |
32 margin: 2px; | 27 margin: 2px; |
33 } | 28 } |
34 </style> | 29 </style> |
35 <template if="{{ selected }}"> | 30 <dot /> |
36 <dot /> | |
37 </template> | |
38 </template> | 31 </template> |
39 <script> | 32 <script> |
40 const kControllerMap = new WeakMap(); | 33 import "dart:sky"; |
41 | 34 |
42 class RadioGroupController { | 35 final Map<Node, _RadioGroupController> _controllerMap = new Map(); |
43 static forRadio(radio) { | 36 |
44 var scope = radio.ownerScope; | 37 class _RadioGroupController { |
45 var controller = kControllerMap.get(scope); | 38 static _RadioGroupController forRadio(radio) { |
46 if (!controller) | 39 Node owner = radio.owner; |
47 kControllerMap.set(scope, new RadioGroupController()); | 40 return _controllerMap.putIfAbsent(owner, () => |
48 return kControllerMap.get(scope); | 41 new _RadioGroupController(owner)); |
49 } | 42 } |
50 constructor() { | 43 |
51 this.radios = new Set(); | 44 final Node _scope; |
52 } | 45 final Set<SkyRadio> _radios = new Set<SkyRadio>(); |
53 addRadio(radio) { | 46 |
54 this.radios.add(radio); | 47 _RadioGroupController(this._scope); |
| 48 |
| 49 void addRadio(SkyRadio radio) { |
| 50 _radios.add(radio); |
55 // If this new radio is default-selected, take selection from the group. | 51 // If this new radio is default-selected, take selection from the group. |
56 if (radio.selected) | 52 if (radio.selected) |
57 this.takeSelectionFromGroup(radio); | 53 takeSelectionFromGroup(radio); |
58 } | 54 } |
59 removeRadio(radio) { | 55 |
60 this.radios.remove(radio); | 56 void removeRadio(SkyRadio radio) { |
| 57 _radios.remove(radio); |
| 58 if (_radios.isEmpty) |
| 59 _controllerMap.remove(_scope); |
61 } | 60 } |
62 takeSelectionFromGroup(selectedRadio) { | 61 |
63 // Emtpy/null/undefined group means an isolated radio. | 62 void takeSelectionFromGroup(SkyRadio selectedRadio) { |
64 if (!selectedRadio.group) | 63 String group = selectedRadio.group; |
| 64 if (group == null) |
65 return; | 65 return; |
66 this.radios.forEach(function(radio) { | 66 _radios.forEach((SkyRadio radio) { |
67 if (selectedRadio === radio) | 67 if (selectedRadio == radio) |
68 return; | 68 return; |
69 if (radio.group != selectedRadio.group) | 69 if (radio.group != group) |
70 return; | 70 return; |
71 radio.selected = false; | 71 radio.selected = false; |
72 }); | 72 }); |
73 } | 73 } |
74 }; | 74 } |
75 | 75 |
76 module.exports = class extends SkyButton { | 76 @Tagname('sky-radio') |
77 created() { | 77 class SkyRadio extends SkyButton { |
78 super.created(); | 78 _RadioGroupController _controller; |
| 79 Element _dot; |
79 | 80 |
80 this.controller = null; | 81 SkyRadio() { |
| 82 addEventListener('click', _handleClick); |
81 } | 83 } |
82 attached() { | 84 |
| 85 void shadowRootReady() { |
| 86 _dot = shadowRoot.querySelector('dot'); |
| 87 _dot.style['display'] = selected ? 'block' : 'none'; |
| 88 } |
| 89 |
| 90 void attached() { |
83 super.attached(); | 91 super.attached(); |
84 this.controller = RadioGroupController.forRadio(this); | 92 _controller = _RadioGroupController.forRadio(this); |
85 this.controller.addRadio(this); | 93 _controller.addRadio(this); |
86 } | 94 } |
87 detached() { | 95 |
| 96 void detached() { |
88 super.detached(); | 97 super.detached(); |
89 this.controller.removeRadio(this); | 98 _controller.removeRadio(this); |
90 this.controller = null; | 99 _controller = null; |
91 } | 100 } |
92 selectedChanged(oldValue, newValue) { | 101 |
93 if (newValue && this.controller) | 102 void selectedChanged(bool oldValue, bool newValue) { |
94 this.controller.takeSelectionFromGroup(this); | 103 if (_dot != null) |
| 104 _dot.style['display'] = newValue ? 'block' : 'none'; |
| 105 if (newValue && _controller != null) |
| 106 _controller.takeSelectionFromGroup(this); |
95 } | 107 } |
96 groupChanged(oldValue, newValue) { | 108 |
97 if (this.selected && this.controller) | 109 void groupChanged(String oldValue, String newValue) { |
98 this.controller.takeSelectionFromGroup(this); | 110 if (selected && _controller != null) |
| 111 _controller.takeSelectionFromGroup(this); |
99 } | 112 } |
100 handleClick() { | 113 |
| 114 _handleClick(_) { |
101 this.selected = true; | 115 this.selected = true; |
102 } | 116 } |
103 }.register(); | 117 } |
| 118 |
| 119 _init(script) => register(script, SkyRadio); |
104 </script> | 120 </script> |
105 </sky-element> | 121 </sky-element> |
OLD | NEW |