third_party/polymer/components-chromium/core-dropdown/core-dropdown-extracted.js

   1
   2
   3   Polymer('core-dropdown',{
   4
   5     publish: {
   6
   7       /**
   8        * True if the menu is open.
   9        *
  10        * @attribute opened
  11        * @type boolean
  12        * @default false
  13        */
  14       opened: false,
  15
  16       /**
  17        * A label for the control. The label is displayed if no item is selected.
  18        *
  19        * @attribute label
  20        * @type string
  21        * @default 'Select an item'
  22        */
  23       label: 'Select an item',
  24
  25       /**
  26        * The currently selected element. By default this is the index of the item element.
  27        * If you want a specific attribute value of the element to be used instead of the
  28        * index, set `valueattr` to that attribute name.
  29        *
  30        * @attribute selected
  31        * @type Object
  32        * @default null
  33        */
  34       selected: null,
  35
  36       /**
  37        * Specifies the attribute to be used for "selected" attribute.
  38        *
  39        * @attribute valueattr
  40        * @type string
  41        * @default 'name'
  42        */
  43       valueattr: 'name',
  44
  45       /**
  46        * Specifies the CSS class to be used to add to the selected element.
  47        *
  48        * @attribute selectedClass
  49        * @type string
  50        * @default 'core-selected'
  51        */
  52       selectedClass: 'core-selected',
  53
  54       /**
  55        * Specifies the property to be used to set on the selected element
  56        * to indicate its active state.
  57        *
  58        * @attribute selectedProperty
  59        * @type string
  60        * @default ''
  61        */
  62       selectedProperty: '',
  63
  64       /**
  65        * Specifies the attribute to set on the selected element to indicate
  66        * its active state.
  67        *
  68        * @attribute selectedAttribute
  69        * @type string
  70        * @default 'active'
  71        */
  72       selectedAttribute: 'selected',
  73
  74       /**
  75        * The currently selected element.
  76        *
  77        * @attribute selectedItem
  78        * @type Object
  79        * @default null
  80        */
  81       selectedItem: null,
  82
  83       /**
  84        * Horizontally align the overlay with the control.
  85        * @attribute halign
  86        * @type "left"|"right"
  87        * @default "left"
  88        */
  89       halign: {value: 'left', reflect: true},
  90
  91       /**
  92        * Vertically align the dropdown menu with the control.
  93        * @attribute valign
  94        * @type "top"|"bottom"
  95        * @default "bottom"
  96        */
  97       valign: {value: 'bottom', reflect: true}
  98
  99     },
 100
 101     toggle: function() {
 102       this.opened = !this.opened;
 103     },
 104
 105     openAction: function(e) {
 106       if (e.detail) {
 107         var rect = this.$.control.getBoundingClientRect();
 108         if (this.valign === 'top') {
 109           this.$.menu.style.top = 'auto';
 110           this.$.menu.style.bottom = rect.height + 'px';
 111           this.$.menu.style.maxHeight = (window.innerHeight - (window.innerHeight - rect.top) - 12) + 'px';
 112         } else {
 113           this.$.menu.style.top = rect.height + 'px';
 114           this.$.menu.style.bottom = 'auto';
 115           this.$.menu.style.maxHeight = (window.innerHeight - rect.height - rect.top - 12) + 'px';
 116         }
 117         this.$.menu.style.minWidth = rect.width + 'px';
 118       }
 119     },
 120
 121     selectAction: function() {
 122       this.opened = false;
 123     }
 124   });
 125