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
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
|
<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>
</head>
<body onload="prettyPrint();">
<pre class="prettyprint lang-js">/*!
* Ext JS Library 3.4.0
* Copyright(c) 2006-2011 Sencha Inc.
* licensing@sencha.com
* http://www.sencha.com/license
*/
/**
* @class Ext.Element
*/
Ext.Element.addMethods({
<div id="method-Ext.Element-getAnchorXY"></div>/**
* Gets the x,y coordinates specified by the anchor position on the element.
* @param {String} anchor (optional) The specified anchor position (defaults to "c"). See {@link #alignTo}
* for details on supported anchor positions.
* @param {Boolean} local (optional) True to get the local (element top/left-relative) anchor position instead
* of page coordinates
* @param {Object} size (optional) 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 {Array} [x, y] An array containing the element's x and y coordinates
*/
getAnchorXY : function(anchor, local, s){
//Passing a different size is useful for pre-calculating anchors,
//especially for anchored animations that change the el size.
anchor = (anchor || "tl").toLowerCase();
s = s || {};
var me = this,
vp = me.dom == document.body || me.dom == document,
w = s.width || vp ? Ext.lib.Dom.getViewWidth() : me.getWidth(),
h = s.height || vp ? Ext.lib.Dom.getViewHeight() : me.getHeight(),
xy,
r = Math.round,
o = me.getXY(),
scroll = me.getScroll(),
extraX = vp ? scroll.left : !local ? o[0] : 0,
extraY = vp ? scroll.top : !local ? o[1] : 0,
hash = {
c : [r(w * 0.5), r(h * 0.5)],
t : [r(w * 0.5), 0],
l : [0, r(h * 0.5)],
r : [w, r(h * 0.5)],
b : [r(w * 0.5), h],
tl : [0, 0],
bl : [0, h],
br : [w, h],
tr : [w, 0]
};
xy = hash[anchor];
return [xy[0] + extraX, xy[1] + extraY];
},
<div id="method-Ext.Element-anchorTo"></div>/**
* Anchors an element to another element and realigns it when the window is resized.
* @param {Mixed} element The element to align to.
* @param {String} position The position to align to.
* @param {Array} offsets (optional) Offset the positioning by [x, y]
* @param {Boolean/Object} animate (optional) True for the default animation or a standard Element animation config object
* @param {Boolean/Number} monitorScroll (optional) 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(window, 'scroll', action, null,
{buffer: !isNaN(monitorScroll) ? monitorScroll : 50});
}
action.call(me); // align immediately
return me;
},
<div id="method-Ext.Element-removeAnchor"></div>/**
* Remove any anchor to this element. See {@link #anchorTo}.
* @return {Ext.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(window, 'scroll', anchor.fn);
}
delete anchor.fn;
}
return me;
},
// private
getAnchor : function(){
var data = Ext.Element.data,
dom = this.dom;
if (!dom) {
return;
}
var anchor = data(dom, '_anchor');
if(!anchor){
anchor = data(dom, '_anchor', {});
}
return anchor;
},
<div id="method-Ext.Element-getAlignToXY"></div>/**
* Gets the x,y coordinates to align this element with another element. See {@link #alignTo} for more info on the
* supported position values.
* @param {Mixed} element The element to align to.
* @param {String} position (optional, defaults to "tl-bl?") The position to align to.
* @param {Array} offsets (optional) Offset the positioning by [x, y]
* @return {Array} [x, y]
*/
getAlignToXY : function(el, p, o){
el = Ext.get(el);
if(!el || !el.dom){
throw "Element.alignToXY with an element that doesn't exist";
}
o = o || [0,0];
p = (!p || p == "?" ? "tl-bl?" : (!(/-/).test(p) && p !== "" ? "tl-" + p : p || "tl-bl")).toLowerCase();
var me = this,
d = me.dom,
a1,
a2,
x,
y,
//constrain the aligned el to viewport if necessary
w,
h,
r,
dw = Ext.lib.Dom.getViewWidth() -10, // 10px of margin for ie
dh = Ext.lib.Dom.getViewHeight()-10, // 10px of margin for ie
p1y,
p1x,
p2y,
p2x,
swapY,
swapX,
doc = document,
docElement = doc.documentElement,
docBody = doc.body,
scrollX = (docElement.scrollLeft || docBody.scrollLeft || 0)+5,
scrollY = (docElement.scrollTop || docBody.scrollTop || 0)+5,
c = false, //constrain to viewport
p1 = "",
p2 = "",
m = p.match(/^([a-z]+)-([a-z]+)(\?)?$/);
if(!m){
throw "Element.alignTo with an invalid alignment " + p;
}
p1 = m[1];
p2 = m[2];
c = !!m[3];
//Subtract the aligned el's internal xy from the target's offset xy
//plus custom offset to get the aligned el's new offset xy
a1 = me.getAnchorXY(p1, true);
a2 = el.getAnchorXY(p2, false);
x = a2[0] - a1[0] + o[0];
y = a2[1] - a1[1] + o[1];
if(c){
w = me.getWidth();
h = me.getHeight();
r = el.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 = p1.charAt(0);
p1x = p1.charAt(p1.length-1);
p2y = p2.charAt(0);
p2x = p2.charAt(p2.length-1);
swapY = ((p1y=="t" && p2y=="b") || (p1y=="b" && p2y=="t"));
swapX = ((p1x=="r" && p2x=="l") || (p1x=="l" && p2x=="r"));
if (x + w > dw + scrollX) {
x = swapX ? r.left-w : dw+scrollX-w;
}
if (x < scrollX) {
x = swapX ? r.right : scrollX;
}
if (y + h > dh + scrollY) {
y = swapY ? r.top-h : dh+scrollY-h;
}
if (y < scrollY){
y = swapY ? r.bottom : scrollY;
}
}
return [x,y];
},
<div id="method-Ext.Element-alignTo"></div>/**
* 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:
* <ul>
* <li><b>Blank</b>: Defaults to aligning the element's top-left corner to the target's bottom-left corner ("tl-bl").</li>
* <li><b>One anchor (deprecated)</b>: 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. <i>This method has been
* deprecated in favor of the newer two anchor syntax below</i>.</li>
* <li><b>Two anchors</b>: 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.</li>
* </ul>
* 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:
<pre><code>
// 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]);
</code></pre>
* @param {Mixed} element The element to align to.
* @param {String} position (optional, defaults to "tl-bl?") The position to align to.
* @param {Array} offsets (optional) Offset the positioning by [x, y]
* @param {Boolean/Object} animate (optional) 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.preanim && !!animate ? me.preanim(arguments, 3) : false);
},
// private ==> used outside of core
adjustForConstraints : function(xy, parent, offsets){
return this.getConstrainToXY(parent || document, false, offsets, xy) || xy;
},
// private ==> used outside of core
getConstrainToXY : function(el, local, offsets, proposedXY){
var os = {top:0, left:0, bottom:0, right: 0};
return function(el, local, offsets, proposedXY){
el = Ext.get(el);
offsets = offsets ? Ext.applyIf(offsets, os) : os;
var vw, vh, vx = 0, vy = 0;
if(el.dom == document.body || el.dom == document){
vw =Ext.lib.Dom.getViewWidth();
vh = Ext.lib.Dom.getViewHeight();
}else{
vw = el.dom.clientWidth;
vh = el.dom.clientHeight;
if(!local){
var vxy = el.getXY();
vx = vxy[0];
vy = vxy[1];
}
}
var s = el.getScroll();
vx += offsets.left + s.left;
vy += offsets.top + s.top;
vw -= offsets.right;
vh -= offsets.bottom;
var vr = vx + vw,
vb = vy + vh,
xy = proposedXY || (!local ? this.getXY() : [this.getLeft(true), this.getTop(true)]),
x = xy[0], y = xy[1],
offset = this.getConstrainOffset(),
w = this.dom.offsetWidth + offset,
h = this.dom.offsetHeight + offset;
// only move it if it needs it
var moved = false;
// first validate right/bottom
if((x + w) > vr){
x = vr - w;
moved = true;
}
if((y + h) > vb){
y = vb - h;
moved = true;
}
// then make sure top/left isn't negative
if(x < vx){
x = vx;
moved = true;
}
if(y < vy){
y = vy;
moved = true;
}
return moved ? [x, y] : false;
};
}(),
// el = Ext.get(el);
// offsets = Ext.applyIf(offsets || {}, {top : 0, left : 0, bottom : 0, right : 0});
// var me = this,
// doc = document,
// s = el.getScroll(),
// vxy = el.getXY(),
// vx = offsets.left + s.left,
// vy = offsets.top + s.top,
// vw = -offsets.right,
// vh = -offsets.bottom,
// vr,
// vb,
// xy = proposedXY || (!local ? me.getXY() : [me.getLeft(true), me.getTop(true)]),
// x = xy[0],
// y = xy[1],
// w = me.dom.offsetWidth, h = me.dom.offsetHeight,
// moved = false; // only move it if it needs it
//
//
// if(el.dom == doc.body || el.dom == doc){
// vw += Ext.lib.Dom.getViewWidth();
// vh += Ext.lib.Dom.getViewHeight();
// }else{
// vw += el.dom.clientWidth;
// vh += el.dom.clientHeight;
// if(!local){
// vx += vxy[0];
// vy += vxy[1];
// }
// }
// // first validate right/bottom
// if(x + w > vx + vw){
// x = vx + vw - w;
// moved = true;
// }
// if(y + h > vy + vh){
// y = vy + vh - h;
// moved = true;
// }
// // then make sure top/left isn't negative
// if(x < vx){
// x = vx;
// moved = true;
// }
// if(y < vy){
// y = vy;
// moved = true;
// }
// return moved ? [x, y] : false;
// },
// private, used internally
getConstrainOffset : function(){
return 0;
},
<div id="method-Ext.Element-getCenterXY"></div>/**
* Calculates the x, y to center this element on the screen
* @return {Array} The x, y values [x, y]
*/
getCenterXY : function(){
return this.getAlignToXY(document, 'c-c');
},
<div id="method-Ext.Element-center"></div>/**
* Centers the Element in either the viewport, or another Element.
* @param {Mixed} centerIn (optional) The element in which to center the element.
*/
center : function(centerIn){
return this.alignTo(centerIn || document, 'c-c');
}
});
</pre>
</body>
</html>
|
