| <!-- |
| @license |
| Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
| This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt |
| The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |
| Code distributed by Google as part of the polymer project is also |
| subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt |
| --> |
| |
| <link rel="import" href="../polymer/polymer.html"> |
| <link rel="import" href="../iron-menu-behavior/iron-menu-behavior.html"> |
| <link rel="import" href="../iron-behaviors/iron-control-state.html"> |
| <link rel="import" href="../iron-collapse/iron-collapse.html"> |
| <link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> |
| <link rel="import" href="../paper-styles/default-theme.html"> |
| <link rel="import" href="../paper-styles/color.html"> |
| <link rel="import" href="paper-menu-shared-styles.html"> |
| |
| <!-- |
| `<paper-submenu>` is a nested menu inside of a parent `<paper-menu>`. It |
| consists of a trigger that expands or collapses another `<paper-menu>`: |
| |
| <paper-menu> |
| <paper-submenu> |
| <paper-item class="menu-trigger">Topics</paper-item> |
| <paper-menu class="menu-content"> |
| <paper-item>Topic 1</paper-item> |
| <paper-item>Topic 2</paper-item> |
| <paper-item>Topic 3</paper-item> |
| </paper-menu> |
| </paper-submenu> |
| <paper-submenu> |
| <paper-item class="menu-trigger">Faves</paper-item> |
| <paper-menu class="menu-content"> |
| <paper-item>Fave 1</paper-item> |
| <paper-item>Fave 2</paper-item> |
| </paper-menu> |
| </paper-submenu> |
| <paper-submenu disabled> |
| <paper-item class="menu-trigger">Unavailable</paper-item> |
| <paper-menu class="menu-content"> |
| <paper-item>Disabled 1</paper-item> |
| <paper-item>Disabled 2</paper-item> |
| </paper-menu> |
| </paper-submenu> |
| </paper-menu> |
| |
| Just like in `<paper-menu>`, the focused item is highlighted, and the selected |
| item has bolded text. Please see the `<paper-menu>` docs for which attributes |
| (such as `multi` and `selected`), and styling options are available for the |
| `menu-content` menu. |
| |
| @group Paper Elements |
| @element paper-submenu |
| @hero hero.svg |
| @demo demo/index.html |
| --> |
| |
| <dom-module id="paper-submenu"> |
| <template> |
| <style include="paper-menu-shared-styles"></style> |
| |
| <div class="selectable-content" on-tap="_onTap"> |
| <content id="trigger" select=".menu-trigger"></content> |
| </div> |
| <iron-collapse id="collapse" opened="{{opened}}"> |
| <content id="content" select=".menu-content"></content> |
| </iron-collapse> |
| </template> |
| |
| <script> |
| |
| (function() { |
| |
| Polymer({ |
| |
| is: 'paper-submenu', |
| |
| properties: { |
| /** |
| * Fired when the submenu is opened. |
| * |
| * @event paper-submenu-open |
| */ |
| |
| /** |
| * Fired when the submenu is closed. |
| * |
| * @event paper-submenu-close |
| */ |
| |
| /** |
| * Set opened to true to show the collapse element and to false to hide it. |
| * |
| * @attribute opened |
| */ |
| opened: { |
| type: Boolean, |
| value: false, |
| notify: true, |
| observer: '_openedChanged' |
| } |
| }, |
| |
| behaviors: [ |
| Polymer.IronControlState |
| ], |
| |
| listeners: { |
| 'focus': '_onFocus' |
| }, |
| |
| get __parent() { |
| return Polymer.dom(this).parentNode; |
| }, |
| |
| get __trigger() { |
| return Polymer.dom(this.$.trigger).getDistributedNodes()[0]; |
| }, |
| |
| get __content() { |
| return Polymer.dom(this.$.content).getDistributedNodes()[0]; |
| }, |
| |
| attached: function() { |
| this.listen(this.__parent, 'iron-activate', '_onParentIronActivate'); |
| }, |
| |
| dettached: function() { |
| this.unlisten(this.__parent, 'iron-activate', '_onParentIronActivate'); |
| }, |
| |
| /** |
| * Expand the submenu content. |
| */ |
| open: function() { |
| if (!this.disabled && !this._active) { |
| this.$.collapse.show(); |
| this._active = true; |
| this.__trigger && this.__trigger.classList.add('iron-selected'); |
| this.__content && this.__content.focus(); |
| } |
| }, |
| |
| /** |
| * Collapse the submenu content. |
| */ |
| close: function() { |
| if (this._active) { |
| this.$.collapse.hide(); |
| this._active = false; |
| this.__trigger && this.__trigger.classList.remove('iron-selected'); |
| } |
| }, |
| |
| /** |
| * Toggle the submenu. |
| */ |
| toggle: function() { |
| if (this._active) { |
| this.close(); |
| } else { |
| this.open(); |
| } |
| }, |
| |
| /** |
| * A handler that is called when the trigger is tapped. |
| */ |
| _onTap: function(e) { |
| if (!this.disabled) { |
| this.toggle(); |
| } |
| }, |
| |
| /** |
| * Toggles the submenu content when the trigger is tapped. |
| */ |
| _openedChanged: function(opened, oldOpened) { |
| if (opened) { |
| this.fire('paper-submenu-open'); |
| } else if (oldOpened != null) { |
| this.fire('paper-submenu-close'); |
| } |
| }, |
| |
| /** |
| * A handler that is called when `iron-activate` is fired. |
| * |
| * @param {CustomEvent} event An `iron-activate` event. |
| */ |
| _onParentIronActivate: function(event) { |
| var parent = this.__parent; |
| if (Polymer.dom(event).localTarget === parent) { |
| // The activated item can either be this submenu, in which case it |
| // should be expanded, or any of the other sibling submenus, in which |
| // case this submenu should be collapsed. |
| if (event.detail.item !== this && !parent.multi) { |
| this.close(); |
| } |
| } |
| }, |
| |
| /** |
| * If the dropdown is open when disabled becomes true, close the |
| * dropdown. |
| * |
| * @param {boolean} disabled True if disabled, otherwise false. |
| */ |
| _disabledChanged: function(disabled) { |
| Polymer.IronControlState._disabledChanged.apply(this, arguments); |
| if (disabled && this._active) { |
| this.close(); |
| } |
| }, |
| |
| /** |
| * Handler that is called when the menu receives focus. |
| * |
| * @param {FocusEvent} event A focus event. |
| */ |
| _onFocus: function(event) { |
| this.__trigger && this.__trigger.focus(); |
| } |
| |
| }); |
| |
| })(); |
| </script> |
| </dom-module> |