root / tei / js / jquery.positionBy.js @ 2
Historique | Voir | Annoter | Télécharger (8,39 ko)
1 | 2 | mingarao | /*
|
---|---|---|---|
2 | 2 | mingarao | * positionBy 1.0.7 (2008-01-29)
|
3 | 2 | mingarao | *
|
4 | 2 | mingarao | * Copyright (c) 2006,2007 Jonathan Sharp (http://jdsharp.us)
|
5 | 2 | mingarao | * Dual licensed under the MIT (MIT-LICENSE.txt)
|
6 | 2 | mingarao | * and GPL (GPL-LICENSE.txt) licenses.
|
7 | 2 | mingarao | *
|
8 | 2 | mingarao | * http://jdsharp.us/
|
9 | 2 | mingarao | *
|
10 | 2 | mingarao | * Built upon jQuery 1.2.2 (http://jquery.com)
|
11 | 2 | mingarao | * This also requires the jQuery dimensions plugin
|
12 | 2 | mingarao | */
|
13 | 2 | mingarao | (function($){ |
14 | 2 | mingarao | /**
|
15 | 2 | mingarao | * This function centers an absolutely positioned element
|
16 | 2 | mingarao | */
|
17 | 2 | mingarao | /*
|
18 | 2 | mingarao | $.fn.positionCenter = function(offsetLeft, offsetTop) {
|
19 | 2 | mingarao | var offsetLeft = offsetLeft || 1;
|
20 | 2 | mingarao | var offsetTop = offsetTop || 1;
|
21 | 2 | mingarao | |
22 | 2 | mingarao | var ww = $(window).width();
|
23 | 2 | mingarao | var wh = $(window).height();
|
24 | 2 | mingarao | var sl = $(window).scrollLeft();
|
25 | 2 | mingarao | var st = $(window).scrollTop();
|
26 | 2 | mingarao | |
27 | 2 | mingarao | return this.each(function() {
|
28 | 2 | mingarao | var $t = $(this);
|
29 | 2 | mingarao | |
30 | 2 | mingarao | // If we are not visible we have to display our element (with a negative position offscreen)
|
31 | 2 | mingarao | |
32 | 2 | mingarao | var left = Math.round( ( ww - $t.outerWidth() ) / 2 );
|
33 | 2 | mingarao | if ( left < 0 ) {
|
34 | 2 | mingarao | left = 0;
|
35 | 2 | mingarao | } else {
|
36 | 2 | mingarao | left *= offsetLeft;
|
37 | 2 | mingarao | }
|
38 | 2 | mingarao | left += sl;
|
39 | 2 | mingarao | var top = Math.round( ( wh - $t.outerHeight() ) / 2 );
|
40 | 2 | mingarao | if ( top < 0 ) {
|
41 | 2 | mingarao | top = 0;
|
42 | 2 | mingarao | } else {
|
43 | 2 | mingarao | top *= offsetTop;
|
44 | 2 | mingarao | }
|
45 | 2 | mingarao | top += st;
|
46 | 2 | mingarao | |
47 | 2 | mingarao | $(this).parents().each(function() {
|
48 | 2 | mingarao | var $this = $(this);
|
49 | 2 | mingarao | if ( $this.css('position') != 'static' ) {
|
50 | 2 | mingarao | var o = $this.offset();
|
51 | 2 | mingarao | left += -o.left;
|
52 | 2 | mingarao | top += -o.top;
|
53 | 2 | mingarao | return false;
|
54 | 2 | mingarao | }
|
55 | 2 | mingarao | });
|
56 | 2 | mingarao | |
57 | 2 | mingarao | $t.css({left: left, top: top});
|
58 | 2 | mingarao | });
|
59 | 2 | mingarao | };
|
60 | 2 | mingarao | */
|
61 | 2 | mingarao | |
62 | 2 | mingarao | // Our range object is used in calculating positions
|
63 | 2 | mingarao | var Range = function(x1, y1, x2, y2) { |
64 | 2 | mingarao | this.x1 = x1; this.x2 = x2; |
65 | 2 | mingarao | this.y1 = y1; this.y2 = y2; |
66 | 2 | mingarao | }; |
67 | 2 | mingarao | Range.prototype.contains = function(range) { |
68 | 2 | mingarao | return (this.x1 <= range.x1 && range.x2 <= this.x2) |
69 | 2 | mingarao | && |
70 | 2 | mingarao | (this.y1 <= range.y1 && range.y2 <= this.y2); |
71 | 2 | mingarao | }; |
72 | 2 | mingarao | Range.prototype.transform = function(x, y) { |
73 | 2 | mingarao | return new Range(this.x1 + x, this.y1 + y, this.x2 + x, this.y2 + y); |
74 | 2 | mingarao | }; |
75 | 2 | mingarao | |
76 | 2 | mingarao | $.fn.positionBy = function(args) { |
77 | 2 | mingarao | var date1 = new Date(); |
78 | 2 | mingarao | if ( this.length == 0 ) { |
79 | 2 | mingarao | return this; |
80 | 2 | mingarao | } |
81 | 2 | mingarao | |
82 | 2 | mingarao | var args = $.extend({ // The target element to position us relative to |
83 | 2 | mingarao | target: null, |
84 | 2 | mingarao | // The target's corner, possible values 0-3
|
85 | 2 | mingarao | targetPos: null, |
86 | 2 | mingarao | // The element's corner, possible values 0-3
|
87 | 2 | mingarao | elementPos: null, |
88 | 2 | mingarao | |
89 | 2 | mingarao | // A raw x,y coordinate
|
90 | 2 | mingarao | x: null, |
91 | 2 | mingarao | y: null, |
92 | 2 | mingarao | |
93 | 2 | mingarao | // Pass in an array of positions that are valid 0-15
|
94 | 2 | mingarao | positions: null, |
95 | 2 | mingarao | |
96 | 2 | mingarao | // Add the final position class to the element (eg. positionBy0 through positionBy3, positionBy15)
|
97 | 2 | mingarao | addClass: false, |
98 | 2 | mingarao | |
99 | 2 | mingarao | // Force our element to be at the location we specified (don't try to auto position it)
|
100 | 2 | mingarao | force: false, |
101 | 2 | mingarao | |
102 | 2 | mingarao | // The element that we will make sure our element doesn't go outside of
|
103 | 2 | mingarao | container: window,
|
104 | 2 | mingarao | |
105 | 2 | mingarao | // Should the element be hidden after positioning?
|
106 | 2 | mingarao | hideAfterPosition: false |
107 | 2 | mingarao | }, args); |
108 | 2 | mingarao | |
109 | 2 | mingarao | if ( args.x != null ) { |
110 | 2 | mingarao | var tLeft = args.x;
|
111 | 2 | mingarao | var tTop = args.y;
|
112 | 2 | mingarao | var tWidth = 0; |
113 | 2 | mingarao | var tHeight = 0; |
114 | 2 | mingarao | |
115 | 2 | mingarao | // Position in relation to an element
|
116 | 2 | mingarao | } else {
|
117 | 2 | mingarao | var $target = $( $( args.target )[0] ); |
118 | 2 | mingarao | var tWidth = $target.outerWidth(); |
119 | 2 | mingarao | var tHeight = $target.outerHeight(); |
120 | 2 | mingarao | var tOffset = $target.offset(); |
121 | 2 | mingarao | var tLeft = tOffset.left;
|
122 | 2 | mingarao | var tTop = tOffset.top;
|
123 | 2 | mingarao | } |
124 | 2 | mingarao | |
125 | 2 | mingarao | // Our target right, bottom coord
|
126 | 2 | mingarao | var tRight = tLeft + tWidth;
|
127 | 2 | mingarao | var tBottom = tTop + tHeight;
|
128 | 2 | mingarao | |
129 | 2 | mingarao | return this.each(function() { |
130 | 2 | mingarao | var $element = $( this ); |
131 | 2 | mingarao | |
132 | 2 | mingarao | // Position our element in the top left so we can grab its width without triggering scrollbars
|
133 | 2 | mingarao | if ( !$element.is(':visible') ) { |
134 | 2 | mingarao | $element.css({ left: -3000, |
135 | 2 | mingarao | top: -3000 |
136 | 2 | mingarao | }) |
137 | 2 | mingarao | .show(); |
138 | 2 | mingarao | } |
139 | 2 | mingarao | |
140 | 2 | mingarao | var eWidth = $element.outerWidth(); |
141 | 2 | mingarao | var eHeight = $element.outerHeight(); |
142 | 2 | mingarao | |
143 | 2 | mingarao | // Holds x1,y1,x2,y2 coordinates for a position in relation to our target element
|
144 | 2 | mingarao | var position = [];
|
145 | 2 | mingarao | // Holds a list of alternate positions to try if this one is not in the browser viewport
|
146 | 2 | mingarao | var next = [];
|
147 | 2 | mingarao | |
148 | 2 | mingarao | // Our Positions via ASCII ART
|
149 | 2 | mingarao | /*
|
150 | 2 | mingarao | 8 9 10 11
|
151 | 2 | mingarao | +------------+
|
152 | 2 | mingarao | 7 | 15 12 | 0
|
153 | 2 | mingarao | | |
|
154 | 2 | mingarao | 6 | 14 13 | 1
|
155 | 2 | mingarao | +------------+
|
156 | 2 | mingarao | 5 4 3 2
|
157 | 2 | mingarao | |
158 | 2 | mingarao | */
|
159 | 2 | mingarao | |
160 | 2 | mingarao | position[0] = new Range(tRight, tTop, tRight + eWidth, tTop + eHeight); |
161 | 2 | mingarao | next[0] = [1,7,4]; |
162 | 2 | mingarao | |
163 | 2 | mingarao | position[1] = new Range(tRight, tBottom - eHeight, tRight + eWidth, tBottom); |
164 | 2 | mingarao | next[1] = [0,6,4]; |
165 | 2 | mingarao | |
166 | 2 | mingarao | position[2] = new Range(tRight, tBottom, tRight + eWidth, tBottom + eHeight); |
167 | 2 | mingarao | next[2] = [1,3,10]; |
168 | 2 | mingarao | |
169 | 2 | mingarao | position[3] = new Range(tRight - eWidth, tBottom, tRight, tBottom + eHeight); |
170 | 2 | mingarao | next[3] = [1,6,10]; |
171 | 2 | mingarao | |
172 | 2 | mingarao | position[4] = new Range(tLeft, tBottom, tLeft + eWidth, tBottom + eHeight); |
173 | 2 | mingarao | next[4] = [1,6,9]; |
174 | 2 | mingarao | |
175 | 2 | mingarao | position[5] = new Range(tLeft - eWidth, tBottom, tLeft, tBottom + eHeight); |
176 | 2 | mingarao | next[5] = [6,4,9]; |
177 | 2 | mingarao | |
178 | 2 | mingarao | position[6] = new Range(tLeft - eWidth, tBottom - eHeight, tLeft, tBottom); |
179 | 2 | mingarao | next[6] = [7,1,4]; |
180 | 2 | mingarao | |
181 | 2 | mingarao | position[7] = new Range(tLeft - eWidth, tTop, tLeft, tTop + eHeight); |
182 | 2 | mingarao | next[7] = [6,0,4]; |
183 | 2 | mingarao | |
184 | 2 | mingarao | position[8] = new Range(tLeft - eWidth, tTop - eHeight, tLeft, tTop); |
185 | 2 | mingarao | next[8] = [7,9,4]; |
186 | 2 | mingarao | |
187 | 2 | mingarao | position[9] = new Range(tLeft, tTop - eHeight, tLeft + eWidth, tTop); |
188 | 2 | mingarao | next[9] = [0,7,4]; |
189 | 2 | mingarao | |
190 | 2 | mingarao | position[10]= new Range(tRight - eWidth, tTop - eHeight, tRight, tTop); |
191 | 2 | mingarao | next[10] = [0,7,3]; |
192 | 2 | mingarao | |
193 | 2 | mingarao | position[11]= new Range(tRight, tTop - eHeight, tRight + eWidth, tTop); |
194 | 2 | mingarao | next[11] = [0,10,3]; |
195 | 2 | mingarao | |
196 | 2 | mingarao | position[12]= new Range(tRight - eWidth, tTop, tRight, tTop + eHeight); |
197 | 2 | mingarao | next[12] = [13,7,10]; |
198 | 2 | mingarao | |
199 | 2 | mingarao | position[13]= new Range(tRight - eWidth, tBottom - eHeight, tRight, tBottom); |
200 | 2 | mingarao | next[13] = [12,6,3]; |
201 | 2 | mingarao | |
202 | 2 | mingarao | position[14]= new Range(tLeft, tBottom - eHeight, tLeft + eWidth, tBottom); |
203 | 2 | mingarao | next[14] = [15,1,4]; |
204 | 2 | mingarao | |
205 | 2 | mingarao | position[15]= new Range(tLeft, tTop, tLeft + eWidth, tTop + eHeight); |
206 | 2 | mingarao | next[15] = [14,0,9]; |
207 | 2 | mingarao | |
208 | 2 | mingarao | if ( args.positions !== null ) { |
209 | 2 | mingarao | var pos = args.positions[0]; |
210 | 2 | mingarao | } else if ( args.targetPos != null && args.elementPos != null ) { |
211 | 2 | mingarao | var pos = [];
|
212 | 2 | mingarao | pos[0] = [];
|
213 | 2 | mingarao | pos[0][0] = 15; |
214 | 2 | mingarao | pos[0][1] = 7; |
215 | 2 | mingarao | pos[0][2] = 8; |
216 | 2 | mingarao | pos[0][3] = 9; |
217 | 2 | mingarao | pos[1] = [];
|
218 | 2 | mingarao | pos[1][0] = 0; |
219 | 2 | mingarao | pos[1][1] = 12; |
220 | 2 | mingarao | pos[1][2] = 10; |
221 | 2 | mingarao | pos[1][3] = 11; |
222 | 2 | mingarao | pos[2] = [];
|
223 | 2 | mingarao | pos[2][0] = 2; |
224 | 2 | mingarao | pos[2][1] = 3; |
225 | 2 | mingarao | pos[2][2] = 13; |
226 | 2 | mingarao | pos[2][3] = 1; |
227 | 2 | mingarao | pos[3] = [];
|
228 | 2 | mingarao | pos[3][0] = 4; |
229 | 2 | mingarao | pos[3][1] = 5; |
230 | 2 | mingarao | pos[3][2] = 6; |
231 | 2 | mingarao | pos[3][3] = 14; |
232 | 2 | mingarao | |
233 | 2 | mingarao | var pos = pos[args.targetPos][args.elementPos];
|
234 | 2 | mingarao | } |
235 | 2 | mingarao | var ePos = position[pos];
|
236 | 2 | mingarao | var fPos = pos;
|
237 | 2 | mingarao | |
238 | 2 | mingarao | if ( !args.force ) {
|
239 | 2 | mingarao | // TODO: Do the args.container
|
240 | 2 | mingarao | // window width & scroll offset
|
241 | 2 | mingarao | $window = $( window ); |
242 | 2 | mingarao | var sx = $window.scrollLeft(); |
243 | 2 | mingarao | var sy = $window.scrollTop(); |
244 | 2 | mingarao | |
245 | 2 | mingarao | // TODO: Look at innerWidth & innerHeight
|
246 | 2 | mingarao | var container = new Range( sx, sy, sx + $window.width(), sy + $window.height() ); |
247 | 2 | mingarao | |
248 | 2 | mingarao | // If we are outside of our viewport, see if we are outside vertically or horizontally and push onto the stack
|
249 | 2 | mingarao | var stack;
|
250 | 2 | mingarao | if ( args.positions ) {
|
251 | 2 | mingarao | stack = args.positions; |
252 | 2 | mingarao | } else {
|
253 | 2 | mingarao | stack = [pos]; |
254 | 2 | mingarao | } |
255 | 2 | mingarao | var test = []; // Keeps track of our positions we already tried |
256 | 2 | mingarao | |
257 | 2 | mingarao | while ( stack.length > 0 ) { |
258 | 2 | mingarao | var p = stack.shift();
|
259 | 2 | mingarao | if ( test[p] ) {
|
260 | 2 | mingarao | continue;
|
261 | 2 | mingarao | } |
262 | 2 | mingarao | test[p] = true;
|
263 | 2 | mingarao | |
264 | 2 | mingarao | // If our current position is not within the viewport (eg. window)
|
265 | 2 | mingarao | // add the next suggested position
|
266 | 2 | mingarao | if ( !container.contains(position[p]) ) {
|
267 | 2 | mingarao | if ( args.positions === null ) { |
268 | 2 | mingarao | stack = jQuery.merge( stack, next[p] ); |
269 | 2 | mingarao | } |
270 | 2 | mingarao | } else {
|
271 | 2 | mingarao | ePos = position[p]; |
272 | 2 | mingarao | break;
|
273 | 2 | mingarao | } |
274 | 2 | mingarao | } |
275 | 2 | mingarao | } |
276 | 2 | mingarao | |
277 | 2 | mingarao | // + TODO: Determine if we are going to use absolute left, top, bottom, right
|
278 | 2 | mingarao | // positions relative to our target
|
279 | 2 | mingarao | |
280 | 2 | mingarao | // Take into account any absolute or fixed positioning
|
281 | 2 | mingarao | // to 'normalize' our coordinates
|
282 | 2 | mingarao | $element.parents().each(function() { |
283 | 2 | mingarao | var $this = $(this); |
284 | 2 | mingarao | if ( $this.css('position') != 'static' ) { |
285 | 2 | mingarao | var abs = $this.offset(); |
286 | 2 | mingarao | ePos = ePos.transform( -abs.left, -abs.top ); |
287 | 2 | mingarao | return false; |
288 | 2 | mingarao | } |
289 | 2 | mingarao | }); |
290 | 2 | mingarao | |
291 | 2 | mingarao | // Finally position our element
|
292 | 2 | mingarao | var css = { left: ePos.x1, top: ePos.y1 }; |
293 | 2 | mingarao | if ( args.hideAfterPosition ) {
|
294 | 2 | mingarao | css['display'] = 'none'; |
295 | 2 | mingarao | } |
296 | 2 | mingarao | $element.css( css );
|
297 | 2 | mingarao | |
298 | 2 | mingarao | if ( args.addClass ) {
|
299 | 2 | mingarao | $element.removeClass( 'positionBy0 positionBy1 positionBy2 positionBy3 positionBy4 positionBy5 ' |
300 | 2 | mingarao | + 'positionBy6 positionBy7 positionBy8 positionBy9 positionBy10 positionBy11 '
|
301 | 2 | mingarao | + 'positionBy12 positionBy13 positionBy14 positionBy15')
|
302 | 2 | mingarao | .addClass('positionBy' + p);
|
303 | 2 | mingarao | } |
304 | 2 | mingarao | }); |
305 | 2 | mingarao | }; |
306 | 2 | mingarao | })(jQuery); |