<!--
Copyright (c) 2014 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
-->
<!--
A `paper-menu-button` is a `paper-icon-button` that opens a drop down menu when tapped.

Example:

    <paper-menu-button icon="menu">
      <div>Menu Item 1</div>
      <div>Menu Item 2</div>
      <div>Menu Item 3</div>
    </paper-menu-button>

Theming
=======

To change the text color in the menu:

paper-menu-button::shadow #menu {
  color: white;
}

To change the overlay background color:

paper-menu-button::shadow .paper-menu-button-overlay-bg {
  background: green;
}

To change the color of the ripple effect:

paper-menu-button:shadow .paper-menu-button-overlay-ink {
 background: red;
}

@group Paper Elements
@element paper-menu-button
@extends paper-focusable
-->
<link href="../polymer/polymer.html" rel="import">

<link href="../core-dropdown/core-dropdown.html" rel="import">
<link href="../core-icon/core-icon.html" rel="import">
<link href="../core-menu/core-menu.html" rel="import">
<link href="../core-style/core-style.html" rel="import">

<link href="../paper-focusable/paper-focusable.html" rel="import">
<link href="../paper-shadow/paper-shadow.html" rel="import">

<link href="paper-menu-button-transition.html" rel="import">

<core-style id="paper-menu-button">

.paper-menu-button-overlay-ink {
  background: {{g.paperMenuButton.background}}
}

.paper-menu-button-overlay-bg {
  background: {{g.paperMenuButton.background}}
}

</core-style>

<script>
  (function() {

    CoreStyle.g.paperMenuButton = CoreStyle.g.paperMenuButton || {
      'background': '#fff'
    };

  })();
</script>

<polymer-element name="paper-menu-button" extends="paper-focusable" attributes="src icon opened halign valign slow" on-tap="{{tapAction}}">
  <template>

    <link rel="stylesheet" href="paper-menu-button.css">
    <core-style ref="paper-menu-button"></core-style>

    <core-icon src="{{src}}" icon="{{icon}}"></core-icon>

    <core-dropdown id="dropdown" relatedTarget="{{}}" opened="{{opened}}" halign="{{halign}}" valign="{{valign}}" transition="{{noTransition ? '' : transition}}" on-core-transitionend="{{transitionEndAction}}">

      <paper-shadow id="shadow" z="1" target="{{$.dropdown}}"></paper-shadow>

      <div class="paper-menu-button-overlay-ink"></div>
      <div id="overlayBg" class="paper-menu-button-overlay-bg"></div>

      <div class="paper-menu-button-menu-container">
        <core-menu id="menu" selected="{{selected}}" selectedItem="{{selectedItem}}" selectedClass="{{selectedClass}}" valueattr="{{valueattr}}" selectedProperty="{{selectedProperty}}" selectedAttribute="{{selectedAttribute}}" on-core-select="{{selectAction}}">
          <content></content>
        </core-menu>
      </div>

    </core-dropdown>

  </template>
  <script>
    Polymer('paper-menu-button', {

      publish: {

        /**
         * If true, this menu is currently visible.
         *
         * @attribute opened
         * @type boolean
         * @default false
         */
        opened: false,

        /**
         * The horizontal alignment of the menu relative to the button.
         *
         * @attribute halign
         * @type 'left' | 'right'
         * @default 'left'
         */
        halign: 'left',

        /**
         * The vertical alignment of the menu relative to the button.
         *
         * @attribute valign
         * @type 'bottom' | 'top'
         * @default 'top'
         */
        valign: 'top',

        /**
         * Set to true to disable the transition.
         *
         * @attribute noTransition
         * @type boolean
         * @default false
         */
        noTransition: false

      },

      computed: {
        transition: '"paper-menu-button-transition-" + valign + "-" + halign'
      },

      /**
       * The URL of an image for the icon. Should not use `icon` property
       * if you are using this property.
       *
       * @attribute src
       * @type string
       * @default ''
       */
      src: '',

      /**
       * Specifies the icon name or index in the set of icons available in
       * the icon set.  Should not use `src` property if you are using this
       * property.
       *
       * @attribute icon
       * @type string
       * @default ''
       */
      icon: '',

      tapAction: function() {
        if (this.disabled) {
          return;
        }

        this.super();
        this.toggle();
        if (this.opened && !this.noTransition) {
          this.$.shadow.z = 0;
        }
      },

      transitionEndAction: function() {
        this.$.shadow.z = 1;
      },

      /**
       * Toggle the opened state of the menu.
       *
       * @method toggle
       */
      toggle: function() {
        this.opened = !this.opened;
      }

    });
  </script>
</polymer-element>
