OLD | NEW |
1 <!-- | 1 <!-- |
2 @license | 2 @license |
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | 4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
7 Code distributed by Google as part of the polymer project is also | 7 Code distributed by Google as part of the polymer project is also |
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
9 --> | 9 --> |
10 | 10 |
11 <link rel="import" href="../polymer/polymer.html"> | 11 <link rel="import" href="../polymer/polymer.html"> |
12 <link rel="import" href="../iron-menu-behavior/iron-menu-behavior.html"> | |
13 <link rel="import" href="../iron-behaviors/iron-control-state.html"> | 12 <link rel="import" href="../iron-behaviors/iron-control-state.html"> |
14 <link rel="import" href="../iron-collapse/iron-collapse.html"> | 13 <link rel="import" href="../iron-collapse/iron-collapse.html"> |
15 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> | |
16 <link rel="import" href="../paper-styles/default-theme.html"> | |
17 <link rel="import" href="../paper-styles/color.html"> | |
18 <link rel="import" href="paper-menu-shared-styles.html"> | 14 <link rel="import" href="paper-menu-shared-styles.html"> |
19 | 15 |
20 <!-- | 16 <!-- |
21 `<paper-submenu>` is a nested menu inside of a parent `<paper-menu>`. It | 17 `<paper-submenu>` is a nested menu inside of a parent `<paper-menu>`. It |
22 consists of a trigger that expands or collapses another `<paper-menu>`: | 18 consists of a trigger that expands or collapses another `<paper-menu>`: |
23 | 19 |
24 <paper-menu> | 20 <paper-menu> |
25 <paper-submenu> | 21 <paper-submenu> |
26 <paper-item class="menu-trigger">Topics</paper-item> | 22 <paper-item class="menu-trigger">Topics</paper-item> |
27 <paper-menu class="menu-content"> | 23 <paper-menu class="menu-content"> |
(...skipping 92 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
120 }, | 116 }, |
121 | 117 |
122 get __content() { | 118 get __content() { |
123 return Polymer.dom(this.$.content).getDistributedNodes()[0]; | 119 return Polymer.dom(this.$.content).getDistributedNodes()[0]; |
124 }, | 120 }, |
125 | 121 |
126 attached: function() { | 122 attached: function() { |
127 this.listen(this.__parent, 'iron-activate', '_onParentIronActivate'); | 123 this.listen(this.__parent, 'iron-activate', '_onParentIronActivate'); |
128 }, | 124 }, |
129 | 125 |
130 dettached: function() { | 126 detached: function() { |
131 this.unlisten(this.__parent, 'iron-activate', '_onParentIronActivate'); | 127 this.unlisten(this.__parent, 'iron-activate', '_onParentIronActivate'); |
132 }, | 128 }, |
133 | 129 |
134 /** | 130 /** |
135 * Expand the submenu content. | 131 * Expand the submenu content. |
136 */ | 132 */ |
137 open: function() { | 133 open: function() { |
138 if (!this.disabled && !this._active) { | 134 if (!this.disabled) { |
139 this.$.collapse.show(); | 135 this.opened = true; |
140 this._active = true; | |
141 this.__trigger && this.__trigger.classList.add('iron-selected'); | |
142 this.__content && this.__content.focus(); | |
143 } | 136 } |
144 }, | 137 }, |
145 | 138 |
146 /** | 139 /** |
147 * Collapse the submenu content. | 140 * Collapse the submenu content. |
148 */ | 141 */ |
149 close: function() { | 142 close: function() { |
150 if (this._active) { | 143 this.opened = false; |
151 this.$.collapse.hide(); | |
152 this._active = false; | |
153 this.__trigger && this.__trigger.classList.remove('iron-selected'); | |
154 } | |
155 }, | 144 }, |
156 | 145 |
157 /** | 146 /** |
158 * Toggle the submenu. | 147 * Toggle the submenu. |
159 */ | 148 */ |
160 toggle: function() { | 149 toggle: function() { |
161 if (this._active) { | 150 if (this.opened) { |
162 this.close(); | 151 this.close(); |
163 } else { | 152 } else { |
164 this.open(); | 153 this.open(); |
165 } | 154 } |
166 }, | 155 }, |
167 | 156 |
168 /** | 157 /** |
169 * A handler that is called when the trigger is tapped. | 158 * A handler that is called when the trigger is tapped. |
170 */ | 159 */ |
171 _onTap: function(e) { | 160 _onTap: function(e) { |
172 if (!this.disabled) { | 161 if (!this.disabled) { |
173 this.toggle(); | 162 this.toggle(); |
174 } | 163 } |
175 }, | 164 }, |
176 | 165 |
177 /** | 166 /** |
178 * Toggles the submenu content when the trigger is tapped. | 167 * Toggles the submenu content when the trigger is tapped. |
179 */ | 168 */ |
180 _openedChanged: function(opened, oldOpened) { | 169 _openedChanged: function(opened, oldOpened) { |
181 if (opened) { | 170 if (opened) { |
| 171 this.__trigger && this.__trigger.classList.add('iron-selected'); |
| 172 this.__content && this.__content.focus(); |
182 this.fire('paper-submenu-open'); | 173 this.fire('paper-submenu-open'); |
183 } else if (oldOpened != null) { | 174 } else if (oldOpened != null) { |
| 175 this.__trigger && this.__trigger.classList.remove('iron-selected'); |
184 this.fire('paper-submenu-close'); | 176 this.fire('paper-submenu-close'); |
185 } | 177 } |
186 }, | 178 }, |
187 | 179 |
188 /** | 180 /** |
189 * A handler that is called when `iron-activate` is fired. | 181 * A handler that is called when `iron-activate` is fired. |
190 * | 182 * |
191 * @param {CustomEvent} event An `iron-activate` event. | 183 * @param {CustomEvent} event An `iron-activate` event. |
192 */ | 184 */ |
193 _onParentIronActivate: function(event) { | 185 _onParentIronActivate: function(event) { |
194 var parent = this.__parent; | 186 var parent = this.__parent; |
195 if (Polymer.dom(event).localTarget === parent) { | 187 if (Polymer.dom(event).localTarget === parent) { |
196 // The activated item can either be this submenu, in which case it | 188 // The activated item can either be this submenu, in which case it |
197 // should be expanded, or any of the other sibling submenus, in which | 189 // should be expanded, or any of the other sibling submenus, in which |
198 // case this submenu should be collapsed. | 190 // case this submenu should be collapsed. |
199 if (event.detail.item !== this && !parent.multi) { | 191 if (event.detail.item !== this && !parent.multi) { |
200 this.close(); | 192 this.close(); |
201 } | 193 } |
202 } | 194 } |
203 }, | 195 }, |
204 | 196 |
205 /** | 197 /** |
206 * If the dropdown is open when disabled becomes true, close the | 198 * If the dropdown is open when disabled becomes true, close the |
207 * dropdown. | 199 * dropdown. |
208 * | 200 * |
209 * @param {boolean} disabled True if disabled, otherwise false. | 201 * @param {boolean} disabled True if disabled, otherwise false. |
210 */ | 202 */ |
211 _disabledChanged: function(disabled) { | 203 _disabledChanged: function(disabled) { |
212 Polymer.IronControlState._disabledChanged.apply(this, arguments); | 204 Polymer.IronControlState._disabledChanged.apply(this, arguments); |
213 if (disabled && this._active) { | 205 if (disabled && this.opened) { |
214 this.close(); | 206 this.close(); |
215 } | 207 } |
216 }, | 208 }, |
217 | 209 |
218 /** | 210 /** |
219 * Handler that is called when the menu receives focus. | 211 * Handler that is called when the menu receives focus. |
220 * | 212 * |
221 * @param {FocusEvent} event A focus event. | 213 * @param {FocusEvent} event A focus event. |
222 */ | 214 */ |
223 _onFocus: function(event) { | 215 _onFocus: function(event) { |
224 this.__trigger && this.__trigger.focus(); | 216 this.__trigger && this.__trigger.focus(); |
225 } | 217 } |
226 | 218 |
227 }); | 219 }); |
228 | 220 |
229 })(); | 221 })(); |
230 </script> | 222 </script> |
231 </dom-module> | 223 </dom-module> |
OLD | NEW |