paper-submenu.html

<!--
@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="../paper-styles/paper-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">
  <link rel="import" type="css" href="paper-menu-shared.css">

  <template>
    <div class="selectable-content" on-tap="_onTap">
      <content id="trigger" select=".menu-trigger"></content>
    </div>
    <iron-collapse id="collapse" opened="{{opened}}">
      <content select=".menu-content"></content>
    </iron-collapse>
  </template>

</dom-module>

<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
    ],

    get __parent() {
      return Polymer.dom(this).parentNode;
    },

    get __trigger() {
      return Polymer.dom(this.$.trigger).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)
        return;
      this.$.collapse.show();
      this._active = true;
      this.__trigger.classList.add('iron-selected');
    },

    /**
     * Collapse the submenu content.
     */
    close: function() {
      this.$.collapse.hide();
      this._active = false;
      this.__trigger.classList.remove('iron-selected');
    },

    /**
     * A handler that is called when the trigger is tapped.
     */
    _onTap: function() {
      if (this.disabled)
        return;
      this.$.collapse.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) {
      if (Polymer.Gestures.findOriginalTarget(event) !== this.__parent) {
        return;
      }

      // 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) {
        if (this._active)
          return;
        this.open();
      } else {
        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();

      }
    }

  });

})();

</script>