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

Side by Side Diff: third_party/polymer/components/paper-menu/paper-submenu.html

Issue 3010683002: Update Polymer components. (Closed)
Patch Set: Rebase Created 3 years, 3 months 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 <!-- 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
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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698