OLD | NEW |
1 | 1 (function() { |
2 (function() { | |
3 'use strict'; | 2 'use strict'; |
4 | 3 |
5 Polymer({ | 4 Polymer({ |
6 is: 'iron-dropdown', | 5 is: 'iron-dropdown', |
7 | 6 |
8 behaviors: [ | 7 behaviors: [ |
9 Polymer.IronControlState, | 8 Polymer.IronControlState, |
10 Polymer.IronA11yKeysBehavior, | 9 Polymer.IronA11yKeysBehavior, |
11 Polymer.IronOverlayBehavior, | 10 Polymer.IronOverlayBehavior, |
12 Polymer.NeonAnimationRunnerBehavior | 11 Polymer.NeonAnimationRunnerBehavior |
(...skipping 14 matching lines...) Expand all Loading... |
27 * The orientation against which to align the dropdown content | 26 * The orientation against which to align the dropdown content |
28 * vertically relative to the dropdown trigger. | 27 * vertically relative to the dropdown trigger. |
29 */ | 28 */ |
30 verticalAlign: { | 29 verticalAlign: { |
31 type: String, | 30 type: String, |
32 value: 'top', | 31 value: 'top', |
33 reflectToAttribute: true | 32 reflectToAttribute: true |
34 }, | 33 }, |
35 | 34 |
36 /** | 35 /** |
| 36 * A pixel value that will be added to the position calculated for the |
| 37 * given `horizontalAlign`. Use a negative value to offset to the |
| 38 * left, or a positive value to offset to the right. |
| 39 */ |
| 40 horizontalOffset: { |
| 41 type: Number, |
| 42 value: 0, |
| 43 notify: true |
| 44 }, |
| 45 |
| 46 /** |
| 47 * A pixel value that will be added to the position calculated for the |
| 48 * given `verticalAlign`. Use a negative value to offset towards the |
| 49 * top, or a positive value to offset towards the bottom. |
| 50 */ |
| 51 verticalOffset: { |
| 52 type: Number, |
| 53 value: 0, |
| 54 notify: true |
| 55 }, |
| 56 |
| 57 /** |
37 * The element that should be used to position the dropdown when | 58 * The element that should be used to position the dropdown when |
38 * it is opened. | 59 * it is opened. |
39 */ | 60 */ |
40 positionTarget: { | 61 positionTarget: { |
41 type: Object, | 62 type: Object, |
42 observer: '_positionTargetChanged' | 63 observer: '_positionTargetChanged' |
43 }, | 64 }, |
44 | 65 |
45 /** | 66 /** |
46 * An animation config. If provided, this will be used to animate the | 67 * An animation config. If provided, this will be used to animate the |
(...skipping 28 matching lines...) Expand all Loading... |
75 _positionRectMemo: { | 96 _positionRectMemo: { |
76 type: Object | 97 type: Object |
77 } | 98 } |
78 }, | 99 }, |
79 | 100 |
80 listeners: { | 101 listeners: { |
81 'neon-animation-finish': '_onNeonAnimationFinish' | 102 'neon-animation-finish': '_onNeonAnimationFinish' |
82 }, | 103 }, |
83 | 104 |
84 observers: [ | 105 observers: [ |
85 '_updateOverlayPosition(verticalAlign, horizontalAlign)' | 106 '_updateOverlayPosition(verticalAlign, horizontalAlign, verticalOffset
, horizontalOffset)' |
86 ], | 107 ], |
87 | 108 |
88 attached: function() { | 109 attached: function() { |
89 if (this.positionTarget === undefined) { | 110 if (this.positionTarget === undefined) { |
90 this.positionTarget = this._defaultPositionTarget; | 111 this.positionTarget = this._defaultPositionTarget; |
91 } | 112 } |
92 }, | 113 }, |
93 | 114 |
94 /** | 115 /** |
95 * The element that is contained by the dropdown, if any. | 116 * The element that is contained by the dropdown, if any. |
(...skipping 22 matching lines...) Expand all Loading... |
118 | 139 |
119 get _horizontalAlignTargetValue() { | 140 get _horizontalAlignTargetValue() { |
120 var target; | 141 var target; |
121 | 142 |
122 if (this.horizontalAlign === 'right') { | 143 if (this.horizontalAlign === 'right') { |
123 target = document.documentElement.clientWidth - this._positionRect.r
ight; | 144 target = document.documentElement.clientWidth - this._positionRect.r
ight; |
124 } else { | 145 } else { |
125 target = this._positionRect.left; | 146 target = this._positionRect.left; |
126 } | 147 } |
127 | 148 |
| 149 target += this.horizontalOffset; |
| 150 |
128 return Math.max(target, 0); | 151 return Math.max(target, 0); |
129 }, | 152 }, |
130 | 153 |
131 get _verticalAlignTargetValue() { | 154 get _verticalAlignTargetValue() { |
132 var target; | 155 var target; |
133 | 156 |
134 if (this.verticalAlign === 'bottom') { | 157 if (this.verticalAlign === 'bottom') { |
135 target = document.documentElement.clientHeight - this._positionRect.
bottom; | 158 target = document.documentElement.clientHeight - this._positionRect.
bottom; |
136 } else { | 159 } else { |
137 target = this._positionRect.top; | 160 target = this._positionRect.top; |
138 } | 161 } |
139 | 162 |
| 163 target += this.verticalOffset; |
| 164 |
140 return Math.max(target, 0); | 165 return Math.max(target, 0); |
141 }, | 166 }, |
142 | 167 |
143 _openedChanged: function(opened) { | 168 _openedChanged: function(opened) { |
144 if (opened && this.disabled) { | 169 if (opened && this.disabled) { |
145 this.cancel(); | 170 this.cancel(); |
146 } else { | 171 } else { |
147 this._cancelAnimations(); | 172 this._cancelAnimations(); |
148 this._prepareDropdown(); | 173 this._prepareDropdown(); |
149 Polymer.IronOverlayBehaviorImpl._openedChanged.apply(this, arguments
); | 174 Polymer.IronOverlayBehaviorImpl._openedChanged.apply(this, arguments
); |
(...skipping 117 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
267 this.style[this.verticalAlign]; | 292 this.style[this.verticalAlign]; |
268 } | 293 } |
269 }, | 294 }, |
270 | 295 |
271 _focusContent: function() { | 296 _focusContent: function() { |
272 if (this.containedElement) { | 297 if (this.containedElement) { |
273 this.containedElement.focus(); | 298 this.containedElement.focus(); |
274 } | 299 } |
275 } | 300 } |
276 }); | 301 }); |
277 })(); | 302 })(); |
278 | |
OLD | NEW |