1<!--
2@license
3Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7Code distributed by Google as part of the polymer project is also
8subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
9-->
10
11<link rel="import" href="../polymer/polymer.html">
12<link rel="import" href="../iron-behaviors/iron-control-state.html">
13<link rel="import" href="../iron-collapse/iron-collapse.html">
14<link rel="import" href="paper-menu-shared-styles.html">
15
16<!--
17`<paper-submenu>` is a nested menu inside of a parent `<paper-menu>`. It
18consists of a trigger that expands or collapses another `<paper-menu>`:
19
20    <paper-menu>
21      <paper-submenu>
22        <paper-item class="menu-trigger">Topics</paper-item>
23        <paper-menu class="menu-content">
24          <paper-item>Topic 1</paper-item>
25          <paper-item>Topic 2</paper-item>
26          <paper-item>Topic 3</paper-item>
27        </paper-menu>
28      </paper-submenu>
29      <paper-submenu>
30        <paper-item class="menu-trigger">Faves</paper-item>
31        <paper-menu class="menu-content">
32          <paper-item>Fave 1</paper-item>
33          <paper-item>Fave 2</paper-item>
34        </paper-menu>
35      </paper-submenu>
36      <paper-submenu disabled>
37        <paper-item class="menu-trigger">Unavailable</paper-item>
38        <paper-menu class="menu-content">
39          <paper-item>Disabled 1</paper-item>
40          <paper-item>Disabled 2</paper-item>
41        </paper-menu>
42      </paper-submenu>
43    </paper-menu>
44
45Just like in `<paper-menu>`, the focused item is highlighted, and the selected
46item has bolded text. Please see the `<paper-menu>` docs for which attributes
47(such as `multi` and `selected`), and styling options are available for the
48`menu-content` menu.
49
50@group Paper Elements
51@element paper-submenu
52@hero hero.svg
53@demo demo/index.html
54-->
55
56<dom-module id="paper-submenu">
57  <template>
58    <style include="paper-menu-shared-styles"></style>
59
60    <div class="selectable-content" on-tap="_onTap">
61      <content id="trigger" select=".menu-trigger"></content>
62    </div>
63    <iron-collapse id="collapse" opened="{{opened}}">
64      <content id="content" select=".menu-content"></content>
65    </iron-collapse>
66  </template>
67
68  <script>
69
70  (function() {
71
72    Polymer({
73
74      is: 'paper-submenu',
75
76      properties: {
77        /**
78         * Fired when the submenu is opened.
79         *
80         * @event paper-submenu-open
81         */
82
83        /**
84         * Fired when the submenu is closed.
85         *
86         * @event paper-submenu-close
87         */
88
89        /**
90         * Set opened to true to show the collapse element and to false to hide it.
91         *
92         * @attribute opened
93         */
94        opened: {
95          type: Boolean,
96          value: false,
97          notify: true,
98          observer: '_openedChanged'
99        }
100      },
101
102      behaviors: [
103        Polymer.IronControlState
104      ],
105
106      listeners: {
107        'focus': '_onFocus'
108      },
109
110      get __parent() {
111        return Polymer.dom(this).parentNode;
112      },
113
114      get __trigger() {
115        return Polymer.dom(this.$.trigger).getDistributedNodes()[0];
116      },
117
118      get __content() {
119        return Polymer.dom(this.$.content).getDistributedNodes()[0];
120      },
121
122      attached: function() {
123        this.listen(this.__parent, 'iron-activate', '_onParentIronActivate');
124      },
125
126      detached: function() {
127        this.unlisten(this.__parent, 'iron-activate', '_onParentIronActivate');
128      },
129
130      /**
131       * Expand the submenu content.
132       */
133      open: function() {
134        if (!this.disabled) {
135          this.opened = true;
136        }
137      },
138
139      /**
140       * Collapse the submenu content.
141       */
142      close: function() {
143        this.opened = false;
144      },
145
146      /**
147       * Toggle the submenu.
148       */
149      toggle: function() {
150        if (this.opened) {
151          this.close();
152        } else {
153          this.open();
154        }
155      },
156
157      /**
158       * A handler that is called when the trigger is tapped.
159       */
160      _onTap: function(e) {
161        if (!this.disabled) {
162          this.toggle();
163        }
164      },
165
166      /**
167       * Toggles the submenu content when the trigger is tapped.
168       */
169      _openedChanged: function(opened, oldOpened) {
170        if (opened) {
171          this.__trigger && this.__trigger.classList.add('iron-selected');
172          this.__content && this.__content.focus();
173          this.fire('paper-submenu-open');
174        } else if (oldOpened != null) {
175          this.__trigger && this.__trigger.classList.remove('iron-selected');
176          this.fire('paper-submenu-close');
177        }
178      },
179
180      /**
181       * A handler that is called when `iron-activate` is fired.
182       *
183       * @param {CustomEvent} event An `iron-activate` event.
184       */
185      _onParentIronActivate: function(event) {
186        var parent = this.__parent;
187        if (Polymer.dom(event).localTarget === parent) {
188          // The activated item can either be this submenu, in which case it
189          // should be expanded, or any of the other sibling submenus, in which
190          // case this submenu should be collapsed.
191          if (event.detail.item !== this && !parent.multi) {
192            this.close();
193          }
194        }
195      },
196
197      /**
198       * If the dropdown is open when disabled becomes true, close the
199       * dropdown.
200       *
201       * @param {boolean} disabled True if disabled, otherwise false.
202       */
203      _disabledChanged: function(disabled) {
204        Polymer.IronControlState._disabledChanged.apply(this, arguments);
205        if (disabled && this.opened) {
206          this.close();
207        }
208      },
209
210      /**
211       * Handler that is called when the menu receives focus.
212       *
213       * @param {FocusEvent} event A focus event.
214       */
215      _onFocus: function(event) {
216        this.__trigger && this.__trigger.focus();
217      }
218
219    });
220
221  })();
222</script>
223</dom-module>
224