Element.alignment.html
18.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
<style type="text/css">
.highlight { display: block; background-color: #ddd; }
</style>
<script type="text/javascript">
function highlight() {
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
}
</script>
</head>
<body onload="prettyPrint(); highlight();">
<pre class="prettyprint lang-js"><span id='Ext-dom-Element'>/**
</span> * @class Ext.dom.Element
*/
Ext.dom.Element.override((function() {
var doc = document,
win = window,
alignRe = /^([a-z]+)-([a-z]+)(\?)?$/,
round = Math.round;
return {
<span id='Ext-dom-Element-method-getAnchorXY'> /**
</span> * Gets the x,y coordinates specified by the anchor position on the element.
* @param {String} [anchor='c'] The specified anchor position. See {@link #alignTo}
* for details on supported anchor positions.
* @param {Boolean} [local] True to get the local (element top/left-relative) anchor position instead
* of page coordinates
* @param {Object} [size] An object containing the size to use for calculating anchor position
* {width: (target width), height: (target height)} (defaults to the element's current size)
* @return {Number[]} [x, y] An array containing the element's x and y coordinates
*/
getAnchorXY: function(anchor, local, mySize) {
//Passing a different size is useful for pre-calculating anchors,
//especially for anchored animations that change the el size.
anchor = (anchor || "tl").toLowerCase();
mySize = mySize || {};
var me = this,
isViewport = me.dom == doc.body || me.dom == doc,
myWidth = mySize.width || isViewport ? Ext.dom.Element.getViewWidth() : me.getWidth(),
myHeight = mySize.height || isViewport ? Ext.dom.Element.getViewHeight() : me.getHeight(),
xy,
myPos = me.getXY(),
scroll = me.getScroll(),
extraX = isViewport ? scroll.left : !local ? myPos[0] : 0,
extraY = isViewport ? scroll.top : !local ? myPos[1] : 0;
// Calculate anchor position.
// Test most common cases for picker alignment first.
switch (anchor) {
case 'tl' : xy = [ 0, 0];
break;
case 'bl' : xy = [ 0, myHeight];
break;
case 'tr' : xy = [ myWidth, 0];
break;
case 'c' : xy = [ round(myWidth * 0.5), round(myHeight * 0.5)];
break;
case 't' : xy = [ round(myWidth * 0.5), 0];
break;
case 'l' : xy = [ 0, round(myHeight * 0.5)];
break;
case 'r' : xy = [ myWidth, round(myHeight * 0.5)];
break;
case 'b' : xy = [ round(myWidth * 0.5), myHeight];
break;
case 'br' : xy = [ myWidth, myHeight];
}
return [xy[0] + extraX, xy[1] + extraY];
},
<span id='Ext-dom-Element-method-getAlignToXY'> /**
</span> * Gets the x,y coordinates to align this element with another element. See {@link #alignTo} for more info on the
* supported position values.
* @param {String/HTMLElement/Ext.Element} element The element to align to.
* @param {String} [position="tl-bl?"] The position to align to (defaults to )
* @param {Number[]} [offsets] Offset the positioning by [x, y]
* @return {Number[]} [x, y]
*/
getAlignToXY : function(alignToEl, posSpec, offset) {
alignToEl = Ext.get(alignToEl);
if (!alignToEl || !alignToEl.dom) {
//<debug>
Ext.Error.raise({
sourceClass: 'Ext.dom.Element',
sourceMethod: 'getAlignToXY',
msg: 'Attempted to align an element that doesn\'t exist'
});
//</debug>
}
offset = offset || [0,0];
posSpec = (!posSpec || posSpec == "?" ? "tl-bl?" : (!(/-/).test(posSpec) && posSpec !== "" ? "tl-" + posSpec : posSpec || "tl-bl")).toLowerCase();
var me = this,
myPosition,
alignToElPosition,
x,
y,
myWidth,
myHeight,
alignToElRegion,
viewportWidth = Ext.dom.Element.getViewWidth() - 10, // 10px of margin for ie
viewportHeight = Ext.dom.Element.getViewHeight() - 10, // 10px of margin for ie
p1y,
p1x,
p2y,
p2x,
swapY,
swapX,
docElement = doc.documentElement,
docBody = doc.body,
scrollX = (docElement.scrollLeft || docBody.scrollLeft || 0),// + 5, WHY was 5 ever added?
scrollY = (docElement.scrollTop || docBody.scrollTop || 0),// + 5, It means align will fail if the alignTo el was at less than 5,5
constrain, //constrain to viewport
align1,
align2,
alignMatch = posSpec.match(alignRe);
//<debug>
if (!alignMatch) {
Ext.Error.raise({
sourceClass: 'Ext.dom.Element',
sourceMethod: 'getAlignToXY',
el: alignToEl,
position: posSpec,
offset: offset,
msg: 'Attemmpted to align an element with an invalid position: "' + posSpec + '"'
});
}
//</debug>
align1 = alignMatch[1];
align2 = alignMatch[2];
constrain = !!alignMatch[3];
//Subtract the aligned el's internal xy from the target's offset xy
//plus custom offset to get this Element's new offset xy
myPosition = me.getAnchorXY(align1, true);
alignToElPosition = alignToEl.getAnchorXY(align2, false);
x = alignToElPosition[0] - myPosition[0] + offset[0];
y = alignToElPosition[1] - myPosition[1] + offset[1];
// If position spec ended with a "?", then constrain to viewport is necessary
if (constrain) {
myWidth = me.getWidth();
myHeight = me.getHeight();
alignToElRegion = alignToEl.getRegion();
//If we are at a viewport boundary and the aligned el is anchored on a target border that is
//perpendicular to the vp border, allow the aligned el to slide on that border,
//otherwise swap the aligned el to the opposite border of the target.
p1y = align1.charAt(0);
p1x = align1.charAt(align1.length - 1);
p2y = align2.charAt(0);
p2x = align2.charAt(align2.length - 1);
swapY = ((p1y == "t" && p2y == "b") || (p1y == "b" && p2y == "t"));
swapX = ((p1x == "r" && p2x == "l") || (p1x == "l" && p2x == "r"));
if (x + myWidth > viewportWidth + scrollX) {
x = swapX ? alignToElRegion.left - myWidth : viewportWidth + scrollX - myWidth;
}
if (x < scrollX) {
x = swapX ? alignToElRegion.right : scrollX;
}
if (y + myHeight > viewportHeight + scrollY) {
y = swapY ? alignToElRegion.top - myHeight : viewportHeight + scrollY - myHeight;
}
if (y < scrollY) {
y = swapY ? alignToElRegion.bottom : scrollY;
}
}
return [x,y];
},
<span id='Ext-dom-Element-method-anchorTo'> /**
</span> * Anchors an element to another element and realigns it when the window is resized.
* @param {String/HTMLElement/Ext.Element} element The element to align to.
* @param {String} position The position to align to.
* @param {Number[]} [offsets] Offset the positioning by [x, y]
* @param {Boolean/Object} [animate] True for the default animation or a standard Element animation config object
* @param {Boolean/Number} [monitorScroll] True to monitor body scroll and reposition. If this parameter
* is a number, it is used as the buffer delay (defaults to 50ms).
* @param {Function} [callback] The function to call after the animation finishes
* @return {Ext.Element} this
*/
anchorTo : function(el, alignment, offsets, animate, monitorScroll, callback) {
var me = this,
dom = me.dom,
scroll = !Ext.isEmpty(monitorScroll),
action = function() {
Ext.fly(dom).alignTo(el, alignment, offsets, animate);
Ext.callback(callback, Ext.fly(dom));
},
anchor = this.getAnchor();
// previous listener anchor, remove it
this.removeAnchor();
Ext.apply(anchor, {
fn: action,
scroll: scroll
});
Ext.EventManager.onWindowResize(action, null);
if (scroll) {
Ext.EventManager.on(win, 'scroll', action, null,
{buffer: !isNaN(monitorScroll) ? monitorScroll : 50});
}
action.call(me); // align immediately
return me;
},
<span id='Ext-dom-Element-method-removeAnchor'> /**
</span> * Remove any anchor to this element. See {@link #anchorTo}.
* @return {Ext.dom.Element} this
*/
removeAnchor : function() {
var me = this,
anchor = this.getAnchor();
if (anchor && anchor.fn) {
Ext.EventManager.removeResizeListener(anchor.fn);
if (anchor.scroll) {
Ext.EventManager.un(win, 'scroll', anchor.fn);
}
delete anchor.fn;
}
return me;
},
getAlignVector: function(el, spec, offset) {
var me = this,
myPos = me.getXY(),
alignedPos = me.getAlignToXY(el, spec, offset);
el = Ext.get(el);
//<debug>
if (!el || !el.dom) {
Ext.Error.raise({
sourceClass: 'Ext.dom.Element',
sourceMethod: 'getAlignVector',
msg: 'Attempted to align an element that doesn\'t exist'
});
}
//</debug>
alignedPos[0] -= myPos[0];
alignedPos[1] -= myPos[1];
return alignedPos;
},
<span id='Ext-dom-Element-method-alignTo'> /**
</span> * Aligns this element with another element relative to the specified anchor points. If the other element is the
* document it aligns it to the viewport. The position parameter is optional, and can be specified in any one of
* the following formats:
*
* - **Blank**: Defaults to aligning the element's top-left corner to the target's bottom-left corner ("tl-bl").
* - **One anchor (deprecated)**: The passed anchor position is used as the target element's anchor point.
* The element being aligned will position its top-left corner (tl) to that point. *This method has been
* deprecated in favor of the newer two anchor syntax below*.
* - **Two anchors**: If two values from the table below are passed separated by a dash, the first value is used as the
* element's anchor point, and the second value is used as the target's anchor point.
*
* In addition to the anchor points, the position parameter also supports the "?" character. If "?" is passed at the end of
* the position string, the element will attempt to align as specified, but the position will be adjusted to constrain to
* the viewport if necessary. Note that the element being aligned might be swapped to align to a different position than
* that specified in order to enforce the viewport constraints.
* Following are all of the supported anchor positions:
*
* <pre>
* Value Description
* ----- -----------------------------
* tl The top left corner (default)
* t The center of the top edge
* tr The top right corner
* l The center of the left edge
* c In the center of the element
* r The center of the right edge
* bl The bottom left corner
* b The center of the bottom edge
* br The bottom right corner
* </pre>
*
* Example Usage:
*
* // align el to other-el using the default positioning ("tl-bl", non-constrained)
* el.alignTo("other-el");
*
* // align the top left corner of el with the top right corner of other-el (constrained to viewport)
* el.alignTo("other-el", "tr?");
*
* // align the bottom right corner of el with the center left edge of other-el
* el.alignTo("other-el", "br-l?");
*
* // align the center of el with the bottom left corner of other-el and
* // adjust the x position by -6 pixels (and the y position by 0)
* el.alignTo("other-el", "c-bl", [-6, 0]);
*
* @param {String/HTMLElement/Ext.Element} element The element to align to.
* @param {String} [position="tl-bl?"] The position to align to
* @param {Number[]} [offsets] Offset the positioning by [x, y]
* @param {Boolean/Object} [animate] true for the default animation or a standard Element animation config object
* @return {Ext.Element} this
*/
alignTo: function(element, position, offsets, animate) {
var me = this;
return me.setXY(me.getAlignToXY(element, position, offsets),
me.anim && !!animate ? me.anim(animate) : false);
},
<span id='Ext-dom-Element-method-getConstrainVector'> /**
</span> * Returns the `[X, Y]` vector by which this element must be translated to make a best attempt
* to constrain within the passed constraint. Returns `false` is this element does not need to be moved.
*
* Priority is given to constraining the top and left within the constraint.
*
* The constraint may either be an existing element into which this element is to be constrained, or
* an {@link Ext.util.Region Region} into which this element is to be constrained.
*
* @param {Ext.Element/Ext.util.Region} constrainTo The Element or Region into which this element is to be constrained.
* @param {Number[]} proposedPosition A proposed `[X, Y]` position to test for validity and to produce a vector for instead
* of using this Element's current position;
* @returns {Number[]/Boolean} **If** this element *needs* to be translated, an `[X, Y]`
* vector by which this element must be translated. Otherwise, `false`.
*/
getConstrainVector: function(constrainTo, proposedPosition) {
if (!(constrainTo instanceof Ext.util.Region)) {
constrainTo = Ext.get(constrainTo).getViewRegion();
}
var thisRegion = this.getRegion(),
vector = [0, 0],
shadowSize = (this.shadow && !this.shadowDisabled) ? this.shadow.getShadowSize() : undefined,
overflowed = false;
// Shift this region to occupy the proposed position
if (proposedPosition) {
thisRegion.translateBy(proposedPosition[0] - thisRegion.x, proposedPosition[1] - thisRegion.y);
}
// Reduce the constrain region to allow for shadow
if (shadowSize) {
constrainTo.adjust(shadowSize[0], -shadowSize[1], -shadowSize[2], shadowSize[3]);
}
// Constrain the X coordinate by however much this Element overflows
if (thisRegion.right > constrainTo.right) {
overflowed = true;
vector[0] = (constrainTo.right - thisRegion.right); // overflowed the right
}
if (thisRegion.left + vector[0] < constrainTo.left) {
overflowed = true;
vector[0] = (constrainTo.left - thisRegion.left); // overflowed the left
}
// Constrain the Y coordinate by however much this Element overflows
if (thisRegion.bottom > constrainTo.bottom) {
overflowed = true;
vector[1] = (constrainTo.bottom - thisRegion.bottom); // overflowed the bottom
}
if (thisRegion.top + vector[1] < constrainTo.top) {
overflowed = true;
vector[1] = (constrainTo.top - thisRegion.top); // overflowed the top
}
return overflowed ? vector : false;
},
<span id='Ext-dom-Element-method-getCenterXY'> /**
</span> * Calculates the x, y to center this element on the screen
* @return {Number[]} The x, y values [x, y]
*/
getCenterXY : function(){
return this.getAlignToXY(doc, 'c-c');
},
<span id='Ext-dom-Element-method-center'> /**
</span> * Centers the Element in either the viewport, or another Element.
* @param {String/HTMLElement/Ext.Element} [centerIn] The element in which to center the element.
*/
center : function(centerIn){
return this.alignTo(centerIn || doc, 'c-c');
}
};
}()));</pre>
</body>
</html>