OLD | NEW |
(Empty) | |
| 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 ite
m element. |
| 27 * If you want a specific attribute value of the element to be used instea
d 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.innerHeigh
t - 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 |
OLD | NEW |