Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1212)

Side by Side Diff: third_party/polymer/v1_0/components-chromium/iron-dropdown/iron-dropdown-extracted.js

Issue 1261403002: Add paper-menu-button and its dependencies to third_party/polymer (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: reproduce.sh Created 5 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
1
2 (function() {
3 'use strict';
4
5 Polymer({
6 is: 'iron-dropdown',
7
8 behaviors: [
9 Polymer.IronControlState,
10 Polymer.IronA11yKeysBehavior,
11 Polymer.IronOverlayBehavior,
12 Polymer.NeonAnimationRunnerBehavior
13 ],
14
15 properties: {
16 /**
17 * The orientation against which to align the dropdown content
18 * horizontally relative to the dropdown trigger.
19 */
20 horizontalAlign: {
21 type: String,
22 value: 'left',
23 reflectToAttribute: true
24 },
25
26 /**
27 * The orientation against which to align the dropdown content
28 * vertically relative to the dropdown trigger.
29 */
30 verticalAlign: {
31 type: String,
32 value: 'top',
33 reflectToAttribute: true
34 },
35
36 /**
37 * The element that should be used to position the dropdown when
38 * it is opened.
39 */
40 positionTarget: {
41 type: Object,
42 observer: '_positionTargetChanged'
43 },
44
45 /**
46 * An animation config. If provided, this will be used to animate the
47 * opening of the dropdown.
48 */
49 openAnimationConfig: {
50 type: Object
51 },
52
53 /**
54 * An animation config. If provided, this will be used to animate the
55 * closing of the dropdown.
56 */
57 closeAnimationConfig: {
58 type: Object
59 },
60
61 /**
62 * Set to true to disable animations when opening and closing the
63 * dropdown.
64 */
65 noAnimations: {
66 type: Boolean,
67 value: false
68 },
69
70 /**
71 * We memoize the positionTarget bounding rectangle so that we can
72 * limit the number of times it is queried per resize / relayout.
73 * @type {?Object}
74 */
75 _positionRectMemo: {
76 type: Object
77 }
78 },
79
80 listeners: {
81 'neon-animation-finish': '_onNeonAnimationFinish'
82 },
83
84 observers: [
85 '_updateOverlayPosition(verticalAlign, horizontalAlign)'
86 ],
87
88 attached: function() {
89 if (this.positionTarget === undefined) {
90 this.positionTarget = this._defaultPositionTarget;
91 }
92 },
93
94 /**
95 * The element that is contained by the dropdown, if any.
96 */
97 get containedElement() {
98 return Polymer.dom(this.$.content).getDistributedNodes()[0];
99 },
100
101 get _defaultPositionTarget() {
102 var parent = Polymer.dom(this).parentNode;
103
104 if (parent.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
105 parent = parent.host;
106 }
107
108 return parent;
109 },
110
111 get _positionRect() {
112 if (!this._positionRectMemo && this.positionTarget) {
113 this._positionRectMemo = this.positionTarget.getBoundingClientRect() ;
114 }
115
116 return this._positionRectMemo;
117 },
118
119 get _horizontalAlignTargetValue() {
120 var target;
121
122 if (this.horizontalAlign === 'right') {
123 target = document.documentElement.clientWidth - this._positionRect.r ight;
124 } else {
125 target = this._positionRect.left;
126 }
127
128 return Math.max(target, 0);
129 },
130
131 get _verticalAlignTargetValue() {
132 var target;
133
134 if (this.verticalAlign === 'bottom') {
135 target = document.documentElement.clientHeight - this._positionRect. bottom;
136 } else {
137 target = this._positionRect.top;
138 }
139
140 return Math.max(target, 0);
141 },
142
143 _openedChanged: function(opened) {
144 if (opened && this.disabled) {
145 this.cancel();
146 } else {
147 this._cancelAnimations();
148 this._prepareDropdown();
149 Polymer.IronOverlayBehaviorImpl._openedChanged.apply(this, arguments );
150 }
151 },
152
153 _renderOpened: function() {
154 Polymer.IronDropdownScrollManager.pushScrollLock(this);
155 if (!this.noAnimations && this.animationConfig && this.animationConfig .open) {
156 this.$.contentWrapper.classList.add('animating');
157 this.playAnimation('open');
158 } else {
159 this._focusContent();
160 Polymer.IronOverlayBehaviorImpl._renderOpened.apply(this, arguments) ;
161 }
162 },
163
164 _renderClosed: function() {
165 Polymer.IronDropdownScrollManager.removeScrollLock(this);
166 if (!this.noAnimations && this.animationConfig && this.animationConfig .close) {
167 this.$.contentWrapper.classList.add('animating');
168 this.playAnimation('close');
169 } else {
170 Polymer.IronOverlayBehaviorImpl._renderClosed.apply(this, arguments) ;
171 }
172 },
173
174 _onNeonAnimationFinish: function() {
175 this.$.contentWrapper.classList.remove('animating');
176 if (this.opened) {
177 Polymer.IronOverlayBehaviorImpl._renderOpened.apply(this);
178 } else {
179 Polymer.IronOverlayBehaviorImpl._renderClosed.apply(this);
180 }
181 },
182
183 _onIronResize: function() {
184 var containedElement = this.containedElement;
185 var scrollTop;
186 var scrollLeft;
187
188 if (containedElement) {
189 scrollTop = containedElement.scrollTop;
190 scrollLeft = containedElement.scrollLeft;
191 }
192
193 if (this.opened) {
194 this._updateOverlayPosition();
195 }
196
197 Polymer.IronOverlayBehaviorImpl._onIronResize.apply(this, arguments);
198
199 if (containedElement) {
200 containedElement.scrollTop = scrollTop;
201 containedElement.scrollLeft = scrollLeft;
202 }
203 },
204
205 _positionTargetChanged: function() {
206 this._updateOverlayPosition();
207 },
208
209 _cancelAnimations: function() {
210 this.cancelAnimation();
211 },
212
213 _updateAnimationConfig: function() {
214 var animationConfig = {};
215 var animations = [];
216
217 if (this.openAnimationConfig) {
218 // NOTE(cdata): When making `display:none` elements visible in Safar i,
219 // the element will paint once in a fully visible state, causing the
220 // dropdown to flash before it fades in. We prepend an
221 // `opaque-animation` to fix this problem:
222 animationConfig.open = [{
223 name: 'opaque-animation',
224 }].concat(this.openAnimationConfig);
225 animations = animations.concat(animationConfig.open);
226 }
227
228 if (this.closeAnimationConfig) {
229 animationConfig.close = this.closeAnimationConfig;
230 animations = animations.concat(animationConfig.close);
231 }
232
233 animations.forEach(function(animation) {
234 animation.node = this.containedElement;
235 }, this);
236
237 this.animationConfig = animationConfig;
238 },
239
240 _prepareDropdown: function() {
241 this.sizingTarget = this.containedElement || this.sizingTarget;
242 this._updateAnimationConfig();
243 this._updateOverlayPosition();
244 },
245
246 _updateOverlayPosition: function() {
247 this._positionRectMemo = null;
248
249 if (!this.positionTarget) {
250 return;
251 }
252
253 this.style[this.horizontalAlign] =
254 this._horizontalAlignTargetValue + 'px';
255
256 this.style[this.verticalAlign] =
257 this._verticalAlignTargetValue + 'px';
258
259 // NOTE(cdata): We re-memoize inline styles here, otherwise
260 // calling `refit` from `IronFitBehavior` will reset inline styles
261 // to whatever they were when the dropdown first opened.
262 if (this._fitInfo) {
263 this._fitInfo.inlineStyle[this.horizontalAlign] =
264 this.style[this.horizontalAlign];
265
266 this._fitInfo.inlineStyle[this.verticalAlign] =
267 this.style[this.verticalAlign];
268 }
269 },
270
271 _focusContent: function() {
272 if (this.containedElement) {
273 this.containedElement.focus();
274 }
275 }
276 });
277 })();
278
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698