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-select` 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       attached: function() {
 114         // NOTE(cdata): Due to timing, a preselected value in a `IronSelectable`
 115         // child will cause an `iron-select` event to fire while the element is
 116         // still in a `DocumentFragment`. This has the effect of causing
 117         // handlers not to fire. So, we double check this value on attached:
 118         var contentElement = this.contentElement;
 119         if (contentElement && contentElement.selectedItem) {
 120           this._setSelectedItem(contentElement.selectedItem);
 121         }
 122       },
 123
 124       /**
 125        * The content element that is contained by the dropdown menu, if any.
 126        */
 127       get contentElement() {
 128         return Polymer.dom(this.$.content).getDistributedNodes()[0];
 129       },
 130
 131       /**
 132        * Show the dropdown content.
 133        */
 134       open: function() {
 135         this.$.menuButton.open();
 136       },
 137
 138       /**
 139        * Hide the dropdown content.
 140        */
 141       close: function() {
 142         this.$.menuButton.close();
 143       },
 144
 145       /**
 146        * A handler that is called when `iron-select` is fired.
 147        *
 148        * @param {CustomEvent} event An `iron-select` event.
 149        */
 150       _onIronSelect: function(event) {
 151         this._setSelectedItem(event.detail.item);
 152       },
 153
 154       /**
 155        * A handler that is called when the dropdown is tapped.
 156        *
 157        * @param {CustomEvent} event A tap event.
 158        */
 159       _onTap: function(event) {
 160         if (Polymer.Gestures.findOriginalTarget(event) === this) {
 161           this.open();
 162         }
 163       },
 164
 165       /**
 166        * Compute the label for the dropdown given a selected item.
 167        *
 168        * @param {Element} selectedItem A selected Element item, with an
 169        * optional `label` property.
 170        */
 171       _computeSelectedItemLabel: function(selectedItem) {
 172         if (!selectedItem) {
 173           return '';
 174         }
 175
 176         return selectedItem.label || selectedItem.textContent.trim();
 177       },
 178
 179       /**
 180        * Compute the vertical offset of the menu based on the value of
 181        * `noLabelFloat`.
 182        *
 183        * @param {boolean} noLabelFloat True if the label should not float
 184        * above the input, otherwise false.
 185        */
 186       _computeMenuVerticalOffset: function(noLabelFloat) {
 187         // NOTE(cdata): These numbers are somewhat magical because they are
 188         // derived from the metrics of elements internal to `paper-input`'s
 189         // template. The metrics will change depending on whether or not the
 190         // input has a floating label.
 191         return noLabelFloat ? -4 : 16;
 192       }
 193     });
 194   })();