third_party/polymer/v1_0/components-chromium/paper-menu-button/paper-menu-button-extracted.js

   1 (function() {
   2     'use strict';
   3
   4     var PaperMenuButton = Polymer({
   5       is: 'paper-menu-button',
   6
   7       /**
   8        * Fired when the dropdown opens.
   9        *
  10        * @event paper-dropdown-open
  11        */
  12
  13       /**
  14        * Fired when the dropdown closes.
  15        *
  16        * @event paper-dropdown-close
  17        */
  18
  19       behaviors: [
  20         Polymer.IronA11yKeysBehavior,
  21         Polymer.IronControlState
  22       ],
  23
  24       properties: {
  25
  26         /**
  27          * True if the content is currently displayed.
  28          */
  29         opened: {
  30           type: Boolean,
  31           value: false,
  32           notify: true
  33         },
  34
  35         /**
  36          * The orientation against which to align the menu dropdown
  37          * horizontally relative to the dropdown trigger.
  38          */
  39         horizontalAlign: {
  40           type: String,
  41           value: 'left',
  42           reflectToAttribute: true
  43         },
  44
  45         /**
  46          * The orientation against which to align the menu dropdown
  47          * vertically relative to the dropdown trigger.
  48          */
  49         verticalAlign: {
  50           type: String,
  51           value: 'top',
  52           reflectToAttribute: true
  53         },
  54
  55         /**
  56          * A pixel value that will be added to the position calculated for the
  57          * given `horizontalAlign`. Use a negative value to offset to the
  58          * left, or a positive value to offset to the right.
  59          */
  60         horizontalOffset: {
  61           type: Number,
  62           value: 0,
  63           notify: true
  64         },
  65
  66         /**
  67          * A pixel value that will be added to the position calculated for the
  68          * given `verticalAlign`. Use a negative value to offset towards the
  69          * top, or a positive value to offset towards the bottom.
  70          */
  71         verticalOffset: {
  72           type: Number,
  73           value: 0,
  74           notify: true
  75         },
  76
  77         /**
  78          * Set to true to disable animations when opening and closing the
  79          * dropdown.
  80          */
  81         noAnimations: {
  82           type: Boolean,
  83           value: false
  84         },
  85
  86         /**
  87          * Set to true to disable automatically closing the dropdown after
  88          * a selection has been made.
  89          */
  90         ignoreActivate: {
  91           type: Boolean,
  92           value: false
  93         },
  94
  95         /**
  96          * An animation config. If provided, this will be used to animate the
  97          * opening of the dropdown.
  98          */
  99         openAnimationConfig: {
 100           type: Object,
 101           value: function() {
 102             return [{
 103               name: 'fade-in-animation',
 104               timing: {
 105                 delay: 100,
 106                 duration: 200
 107               }
 108             }, {
 109               name: 'paper-menu-grow-width-animation',
 110               timing: {
 111                 delay: 100,
 112                 duration: 150,
 113                 easing: PaperMenuButton.ANIMATION_CUBIC_BEZIER
 114               }
 115             }, {
 116               name: 'paper-menu-grow-height-animation',
 117               timing: {
 118                 delay: 100,
 119                 duration: 275,
 120                 easing: PaperMenuButton.ANIMATION_CUBIC_BEZIER
 121               }
 122             }];
 123           }
 124         },
 125
 126         /**
 127          * An animation config. If provided, this will be used to animate the
 128          * closing of the dropdown.
 129          */
 130         closeAnimationConfig: {
 131           type: Object,
 132           value: function() {
 133             return [{
 134               name: 'fade-out-animation',
 135               timing: {
 136                 duration: 150
 137               }
 138             }, {
 139               name: 'paper-menu-shrink-width-animation',
 140               timing: {
 141                 delay: 100,
 142                 duration: 50,
 143                 easing: PaperMenuButton.ANIMATION_CUBIC_BEZIER
 144               }
 145             }, {
 146               name: 'paper-menu-shrink-height-animation',
 147               timing: {
 148                 duration: 200,
 149                 easing: 'ease-in'
 150               }
 151             }];
 152           }
 153         }
 154       },
 155
 156       hostAttributes: {
 157         role: 'group',
 158         'aria-haspopup': 'true'
 159       },
 160
 161       listeners: {
 162         'iron-activate': '_onIronActivate'
 163       },
 164
 165       /**
 166        * Make the dropdown content appear as an overlay positioned relative
 167        * to the dropdown trigger.
 168        */
 169       open: function() {
 170         if (this.disabled) {
 171           return;
 172         }
 173
 174         this.$.dropdown.open();
 175       },
 176
 177       /**
 178        * Hide the dropdown content.
 179        */
 180       close: function() {
 181         this.$.dropdown.close();
 182       },
 183
 184       /**
 185        * When an `iron-activate` event is received, the dropdown should
 186        * automatically close on the assumption that a value has been chosen.
 187        *
 188        * @param {CustomEvent} event A CustomEvent instance with type
 189        * set to `"iron-activate"`.
 190        */
 191       _onIronActivate: function(event) {
 192         if (!this.ignoreActivate) {
 193           this.close();
 194         }
 195       },
 196
 197       /**
 198        * When the dropdown opens, the `paper-menu-button` fires `paper-open`.
 199        * When the dropdown closes, the `paper-menu-button` fires `paper-close`.
 200        *
 201        * @param {boolean} opened True if the dropdown is opened, otherwise false.
 202        * @param {boolean} oldOpened The previous value of `opened`.
 203        */
 204       _openedChanged: function(opened, oldOpened) {
 205         if (opened) {
 206           this.fire('paper-dropdown-open');
 207         } else if (oldOpened != null) {
 208           this.fire('paper-dropdown-close');
 209         }
 210       },
 211
 212       /**
 213        * If the dropdown is open when disabled becomes true, close the
 214        * dropdown.
 215        *
 216        * @param {boolean} disabled True if disabled, otherwise false.
 217        */
 218       _disabledChanged: function(disabled) {
 219         Polymer.IronControlState._disabledChanged.apply(this, arguments);
 220         if (disabled && this.opened) {
 221           this.close();
 222         }
 223       }
 224     });
 225
 226     PaperMenuButton.ANIMATION_CUBIC_BEZIER = 'cubic-bezier(.3,.95,.5,1)';
 227     PaperMenuButton.MAX_ANIMATION_TIME_MS = 400;
 228
 229     Polymer.PaperMenuButton = PaperMenuButton;
 230   })();