Statistiques
| Révision :

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);