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

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