OLD | NEW |
1 <!-- | 1 <!-- |
2 // Copyright 2015 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" /> | |
7 <import src="sky-element.sky" /> | 6 <import src="sky-element.sky" /> |
| 7 <import src="sky-icon.sky" /> |
8 | 8 |
9 <sky-element attributes="selected:boolean, group:string, highlight:boolean"> | 9 <sky-element attributes="selected:boolean, group:string"> |
10 <template> | 10 <template> |
11 <style> | 11 <style> |
12 :host { | 12 :host { |
13 display: inline-block; | 13 display: inline-block; |
14 -webkit-user-select: none; | 14 -webkit-user-select: none; |
15 width: 14px; | 15 margin: 8px 16px; |
16 height: 14px; | |
17 border-radius: 7px; | |
18 border: 1px solid blue; | |
19 margin: 0 5px; | |
20 } | |
21 dot { | |
22 -webkit-user-select: none; | |
23 width: 10px; | |
24 height: 10px; | |
25 border-radius: 5px; | |
26 background-color: black; | |
27 margin: 2px; | |
28 } | 16 } |
29 </style> | 17 </style> |
30 <dot /> | 18 <sky-icon size="18" /> |
31 </template> | 19 </template> |
32 <script> | 20 <script> |
33 import "dart:sky"; | 21 import "dart:sky"; |
34 | 22 |
35 final Map<Node, _RadioGroupController> _controllerMap = new Map(); | 23 final Map<Node, _RadioGroupController> _controllerMap = new Map(); |
36 | 24 |
37 class _RadioGroupController { | 25 class _RadioGroupController { |
38 static _RadioGroupController forRadio(radio) { | 26 static _RadioGroupController forRadio(radio) { |
39 Node owner = radio.owner; | 27 Node owner = radio.owner; |
40 return _controllerMap.putIfAbsent(owner, () => | 28 return _controllerMap.putIfAbsent(owner, () => |
(...skipping 25 matching lines...) Expand all Loading... |
66 _radios.forEach((SkyRadio radio) { | 54 _radios.forEach((SkyRadio radio) { |
67 if (selectedRadio == radio) | 55 if (selectedRadio == radio) |
68 return; | 56 return; |
69 if (radio.group != group) | 57 if (radio.group != group) |
70 return; | 58 return; |
71 radio.selected = false; | 59 radio.selected = false; |
72 }); | 60 }); |
73 } | 61 } |
74 } | 62 } |
75 | 63 |
| 64 const String _kOnIcon = 'toggle/radio_button_on_black'; |
| 65 const String _kOffIcon = 'toggle/radio_button_off_black'; |
| 66 |
76 @Tagname('sky-radio') | 67 @Tagname('sky-radio') |
77 class SkyRadio extends SkyButton { | 68 class SkyRadio extends SkyElement { |
78 _RadioGroupController _controller; | 69 _RadioGroupController _controller; |
79 Element _dot; | 70 SkyIcon _icon; |
80 | 71 |
81 SkyRadio() { | 72 SkyRadio() { |
82 addEventListener('click', _handleClick); | 73 addEventListener('click', _handleClick); |
83 } | 74 } |
84 | 75 |
85 void shadowRootReady() { | 76 void shadowRootReady() { |
86 _dot = shadowRoot.querySelector('dot'); | 77 _icon = shadowRoot.querySelector('sky-icon'); |
87 _dot.style['display'] = selected ? 'block' : 'none'; | 78 _icon.type = selected ? _kOnIcon : _kOffIcon; |
88 } | 79 } |
89 | 80 |
90 void attached() { | 81 void attached() { |
91 super.attached(); | 82 super.attached(); |
92 _controller = _RadioGroupController.forRadio(this); | 83 _controller = _RadioGroupController.forRadio(this); |
93 _controller.addRadio(this); | 84 _controller.addRadio(this); |
94 } | 85 } |
95 | 86 |
96 void detached() { | 87 void detached() { |
97 super.detached(); | 88 super.detached(); |
98 _controller.removeRadio(this); | 89 _controller.removeRadio(this); |
99 _controller = null; | 90 _controller = null; |
100 } | 91 } |
101 | 92 |
102 void selectedChanged(bool oldValue, bool newValue) { | 93 void selectedChanged(bool oldValue, bool newValue) { |
103 if (_dot != null) | 94 if (_icon != null) |
104 _dot.style['display'] = newValue ? 'block' : 'none'; | 95 _icon.type = newValue ? _kOnIcon : _kOffIcon; |
105 if (newValue && _controller != null) | 96 if (newValue && _controller != null) |
106 _controller.takeSelectionFromGroup(this); | 97 _controller.takeSelectionFromGroup(this); |
107 } | 98 } |
108 | 99 |
109 void groupChanged(String oldValue, String newValue) { | 100 void groupChanged(String oldValue, String newValue) { |
110 if (selected && _controller != null) | 101 if (selected && _controller != null) |
111 _controller.takeSelectionFromGroup(this); | 102 _controller.takeSelectionFromGroup(this); |
112 } | 103 } |
113 | 104 |
114 _handleClick(_) { | 105 _handleClick(_) { |
115 this.selected = true; | 106 this.selected = true; |
116 } | 107 } |
117 } | 108 } |
118 | 109 |
119 _init(script) => register(script, SkyRadio); | 110 _init(script) => register(script, SkyRadio); |
120 </script> | 111 </script> |
121 </sky-element> | 112 </sky-element> |
OLD | NEW |