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

   1 (function() {
   2     'use strict';
   3
   4     Polymer({
   5       is: 'paper-dropdown-menu',
   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.IronControlState,
  21         Polymer.IronButtonState
  22       ],
  23
  24       properties: {
  25         /**
  26          * The derived "label" of the currently selected item. This value
  27          * is the `label` property on the selected item if set, or else the
  28          * trimmed text content of the selected item.
  29          */
  30         selectedItemLabel: {
  31           type: String,
  32           notify: true,
  33           computed: '_computeSelectedItemLabel(selectedItem)'
  34         },
  35
  36         /**
  37          * The last selected item. An item is selected if the dropdown menu has
  38          * a child with class `dropdown-content`, and that child triggers an
  39          * `iron-activate` event with the selected `item` in the `detail`.
  40          */
  41         selectedItem: {
  42           type: Object,
  43           notify: true,
  44           readOnly: true
  45         },
  46
  47         /**
  48          * The label for the dropdown.
  49          */
  50         label: {
  51           type: String
  52         },
  53
  54         /**
  55          * The placeholder for the dropdown.
  56          */
  57         placeholder: {
  58           type: String
  59         },
  60
  61         /**
  62          * True if the dropdown is open. Otherwise, false.
  63          */
  64         opened: {
  65           type: Boolean,
  66           notify: true,
  67           value: false
  68         },
  69
  70         /**
  71          * Set to true to disable the floating label. Bind this to the
  72          * `<paper-input-container>`'s `noLabelFloat` property.
  73          */
  74         noLabelFloat: {
  75             type: Boolean,
  76             value: false,
  77             reflectToAttribute: true
  78         },
  79
  80         /**
  81          * Set to true to always float the label. Bind this to the
  82          * `<paper-input-container>`'s `alwaysFloatLabel` property.
  83          */
  84         alwaysFloatLabel: {
  85           type: Boolean,
  86           value: false
  87         },
  88
  89         /**
  90          * Set to true to disable animations when opening and closing the
  91          * dropdown.
  92          */
  93         noAnimations: {
  94           type: Boolean,
  95           value: false
  96         }
  97       },
  98
  99       listeners: {
 100         'tap': '_onTap'
 101       },
 102
 103       keyBindings: {
 104         'up down': 'open',
 105         'esc': 'close'
 106       },
 107
 108       hostAttributes: {
 109         role: 'group',
 110         'aria-haspopup': 'true'
 111       },
 112
 113       /**
 114        * Show the dropdown content.
 115        */
 116       open: function() {
 117         this.$.menuButton.open();
 118       },
 119
 120       /**
 121        * Hide the dropdown content.
 122        */
 123       close: function() {
 124         this.$.menuButton.close();
 125       },
 126
 127       /**
 128        * A handler that is called when `iron-activate` is fired.
 129        *
 130        * @param {CustomEvent} event An `iron-activate` event.
 131        */
 132       _onIronActivate: function(event) {
 133         this._setSelectedItem(event.detail.item);
 134       },
 135
 136       /**
 137        * A handler that is called when the dropdown is tapped.
 138        *
 139        * @param {CustomEvent} event A tap event.
 140        */
 141       _onTap: function(event) {
 142         if (Polymer.Gestures.findOriginalTarget(event) === this) {
 143           this.open();
 144         }
 145       },
 146
 147       /**
 148        * Compute the label for the dropdown given a selected item.
 149        *
 150        * @param {Element} selectedItem A selected Element item, with an
 151        * optional `label` property.
 152        */
 153       _computeSelectedItemLabel: function(selectedItem) {
 154         if (!selectedItem) {
 155           return '';
 156         }
 157
 158         return selectedItem.label || selectedItem.textContent.trim();
 159       },
 160
 161       /**
 162        * Compute the vertical offset of the menu based on the value of
 163        * `noLabelFloat`.
 164        *
 165        * @param {boolean} noLabelFloat True if the label should not float
 166        * above the input, otherwise false.
 167        */
 168       _computeMenuVerticalOffset: function(noLabelFloat) {
 169         // NOTE(cdata): These numbers are somewhat magical because they are
 170         // derived from the metrics of elements internal to `paper-input`'s
 171         // template. The metrics will change depending on whether or not the
 172         // input has a floating label.
 173         return noLabelFloat ? -4 : 16;
 174       }
 175     });
 176   })();