AbstractElement.alignment.html
6.57 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
<!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-AbstractElement'>/**
</span> * @class Ext.dom.AbstractElement
*/
Ext.dom.AbstractElement.override({
<span id='Ext-dom-AbstractElement-method-getAnchorXY'> /**
</span> * Gets the x,y coordinates specified by the anchor position on the element.
* @param {String} [anchor] The specified anchor position (defaults to "c"). See {@link Ext.dom.Element#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 {Array} [x, y] An array containing the element's x and y coordinates
*/
getAnchorXY: function(anchor, local, size) {
//Passing a different size is useful for pre-calculating anchors,
//especially for anchored animations that change the el size.
anchor = (anchor || "tl").toLowerCase();
size = size || {};
var me = this,
vp = me.dom == document.body || me.dom == document,
width = size.width || vp ? window.innerWidth: me.getWidth(),
height = size.height || vp ? window.innerHeight: me.getHeight(),
xy,
rnd = Math.round,
myXY = me.getXY(),
extraX = vp ? 0: !local ? myXY[0] : 0,
extraY = vp ? 0: !local ? myXY[1] : 0,
hash = {
c: [rnd(width * 0.5), rnd(height * 0.5)],
t: [rnd(width * 0.5), 0],
l: [0, rnd(height * 0.5)],
r: [width, rnd(height * 0.5)],
b: [rnd(width * 0.5), height],
tl: [0, 0],
bl: [0, height],
br: [width, height],
tr: [width, 0]
};
xy = hash[anchor];
return [xy[0] + extraX, xy[1] + extraY];
},
alignToRe: /^([a-z]+)-([a-z]+)(\?)?$/,
<span id='Ext-dom-AbstractElement-method-getAlignToXY'> /**
</span> * Gets the x,y coordinates to align this element with another element. See {@link Ext.dom.Element#alignTo} for more info on the
* supported position values.
* @param {Ext.Element/HTMLElement/String} element The element to align to.
* @param {String} [position="tl-bl?"] The position to align to.
* @param {Array} [offsets=[0,0]] Offset the positioning by [x, y]
* @return {Array} [x, y]
*/
getAlignToXY: function(el, position, offsets, local) {
local = !!local;
el = Ext.get(el);
//<debug>
if (!el || !el.dom) {
throw new Error("Element.alignToXY with an element that doesn't exist");
}
//</debug>
offsets = offsets || [0, 0];
if (!position || position == '?') {
position = 'tl-bl?';
}
else if (! (/-/).test(position) && position !== "") {
position = 'tl-' + position;
}
position = position.toLowerCase();
var me = this,
matches = position.match(this.alignToRe),
dw = window.innerWidth,
dh = window.innerHeight,
p1 = "",
p2 = "",
a1,
a2,
x,
y,
swapX,
swapY,
p1x,
p1y,
p2x,
p2y,
width,
height,
region,
constrain;
if (!matches) {
throw "Element.alignTo with an invalid alignment " + position;
}
p1 = matches[1];
p2 = matches[2];
constrain = !!matches[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, local);
x = a2[0] - a1[0] + offsets[0];
y = a2[1] - a1[1] + offsets[1];
if (constrain) {
width = me.getWidth();
height = me.getHeight();
region = el.getPageBox();
//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 + width > dw) {
x = swapX ? region.left - width: dw - width;
}
if (x < 0) {
x = swapX ? region.right: 0;
}
if (y + height > dh) {
y = swapY ? region.top - height: dh - height;
}
if (y < 0) {
y = swapY ? region.bottom: 0;
}
}
return [x, y];
},
// private
getAnchor: function(){
var data = (this.$cache || this.getCache()).data,
anchor;
if (!this.dom) {
return;
}
anchor = data._anchor;
if(!anchor){
anchor = data._anchor = {};
}
return anchor;
},
// private ==> used outside of core
adjustForConstraints: function(xy, parent) {
var vector = this.getConstrainVector(parent, xy);
if (vector) {
xy[0] += vector[0];
xy[1] += vector[1];
}
return xy;
}
});
</pre>
</body>
</html>