cube-dropdown.html

<link rel="import" href="../iron-dropdown/iron-dropdown.html">
<link rel="import" href="../neon-animation/web-animations.html">
<link rel="import" href="../neon-animation/animations/fade-in-animation.html">
<link rel="import" href="../neon-animation/animations/fade-out-animation.html">
<link rel="import" href="../neon-animation/animations/slide-down-animation.html">
<link rel="import" href="../paper-styles/shadow.html">
<link rel="import" href="cube-dropdown-expand-animation.html">

<dom-module id="cube-dropdown"
            attributes="vertical-align horizontal-align disabled open-animation-config close-animation-config">
  <template>
    <style>
      :host iron-dropdown {
        @apply --shadow-elevation-2dp;
        @apply --cube-dropdown-style;
      }

      .triggerContainer {
        line-height: normal;
      }
    </style>
    <div class="triggerContainer" on-tap="toggle">
      <slot name="trigger"></slot>
    </div>
    <iron-dropdown id="dropdown"
                   no-overlap
                   vertical-align="[[verticalAlign]]"
                   horizontal-align="[[horizontalAlign]]"
                   disabled="[[disabled]]"
                   open-animation-config="[[openAnimationConfig]]"
                   close-animation-config="[[closeAnimationConfig]]">
      <slot slot="dropdown-content"></slot>
    </iron-dropdown>
  </template>
  <script>
    Polymer(
      {
        is: 'cube-dropdown',

        properties: {
          verticalAlign:       {
            type:  String,
            value: 'top'
          },
          horizontalAlign:     {
            type:  String,
            value: 'auto'
          },
          disabled:            Boolean,
          openAnimationConfig: {
            type:  Array,
            value: function ()
                   {
                     return [
                       {
                         name:   'fade-in-animation',
                         timing: {
                           delay:    150,
                           duration: 50
                         }
                       }, {
                         name:   'cube-dropdown-expand-animation',
                         timing: {
                           delay:    150,
                           duration: 200
                         }
                       }
                     ];
                   }
          },

          closeAnimationConfig: {
            type:  Array,
            value: function ()
                   {
                     return [
                       {
                         name:   'fade-out-animation',
                         timing: {
                           duration: 200
                         }
                       }
                     ];
                   }
          }
        },

        attached: function ()
                  {
                    this.addEventListener('iron-overlay-canceled', function (e)
                    {
                      if(e.detail.path.indexOf(this) > -1)
                      {
                        e.preventDefault();
                      }
                    }.bind(this));
                  },

        refit: function ()
               {
                 this.$.dropdown.refit();
               },

        open: function ()
              {
                this.$.dropdown.open();
              },

        close: function ()
               {
                 this.$.dropdown.close();
               },

        toggle: function ()
                {
                  this.$.dropdown.toggle();
                }
      }
    );
  </script>
</dom-module>