Skip to content

Commit bfbb9e3

Browse files
jzaeffererjzaefferer
committed
Merge remote branch 'bmsterling/position'
2 parents 9f5050e + d5452c0 commit bfbb9e3

File tree

4 files changed

+205
-1
lines changed

4 files changed

+205
-1
lines changed

‎demos/position/default.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,18 @@
3030
background-color: #bcd5e6;
3131
text-align: center;
3232
}
33+
div.ui-flipped-top {
34+
border-top: 3px solid #000000;
35+
}
36+
div.ui-flipped-bottom {
37+
border-bottom: 3px solid #000000;
38+
}
39+
div.ui-flipped-left {
40+
border-left: 3px solid #000000;
41+
}
42+
div.ui-flipped-right {
43+
border-right: 3px solid #000000;
44+
}
3345
select, input {
3446
margin-left: 15px;
3547
}

‎tests/unit/position/position_core.js‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -435,6 +435,87 @@ test( "collision: flip, with margin", function() {
435435
}, { top: 0, left: 0 }, "right bottom" );
436436
});
437437

438+
test( "addClass: flipped left", function() {
439+
var elem = $( "#elx" ).position( {
440+
my: "left center",
441+
of: window,
442+
collision: "flip",
443+
at: "right center"
444+
});
445+
446+
same( elem.hasClass( 'ui-flipped-left' ), true, 'Has ui-flipped-left class' );
447+
448+
elem.position( {
449+
my: "right center",
450+
of: window,
451+
collision: "flip",
452+
at: "left center"
453+
})
454+
455+
same( elem.hasClass( 'ui-flipped-left' ), false, 'Removed ui-flipped-left class' );
456+
});
457+
458+
test( "addClass: flipped top", function() {
459+
var elem = $( "#elx" ).position( {
460+
my: "left top",
461+
of: window,
462+
collision: "flip",
463+
at: "right bottom"
464+
});
465+
466+
same( elem.hasClass( 'ui-flipped-top' ), true, 'Has ui-flipped-top class' );
467+
468+
elem.position( {
469+
my: "left bottom",
470+
of: window,
471+
collision: "flip",
472+
at: "right top"
473+
});
474+
475+
same( elem.hasClass( 'ui-flipped-top' ), false, 'Removed ui-flipped-top class' );
476+
});
477+
478+
test( "addClass: flipped right", function() {
479+
var elem = $( "#elx" ).position( {
480+
my: "right center",
481+
of: window,
482+
collision: "flip",
483+
at: "left center"
484+
});
485+
486+
same( elem.hasClass( 'ui-flipped-right' ), true, 'Has ui-flipped-right class' );
487+
488+
elem.position( {
489+
my: "left center",
490+
of: window,
491+
collision: "flip",
492+
at: "right center"
493+
});
494+
495+
same( elem.hasClass( 'ui-flipped-right' ), false, 'Removed ui-flipped-right class' );
496+
497+
});
498+
499+
test( "addClass: flipped bottom", function() {
500+
var elem = $( "#elx" ).position( {
501+
my: "left bottom",
502+
of: window,
503+
collision: "flip",
504+
at: "right top"
505+
});
506+
507+
same( elem.hasClass( 'ui-flipped-bottom' ), true, 'Has ui-flipped-bottom class' );
508+
509+
elem.position( {
510+
my: "left top",
511+
of: window,
512+
collision: "flip",
513+
at: "right bottom"
514+
});
515+
516+
same( elem.hasClass( 'ui-flipped-bottom' ), false, 'Removed ui-flipped-bottom class' );
517+
});
518+
438519
//test( "bug #5280: consistent results (avoid fractional values)", function() {
439520
// var wrapper = $( "#bug-5280" ),
440521
// elem = wrapper.children(),

‎tests/unit/position/position_core_within.js‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -438,4 +438,99 @@ test( "collision: flip, with margin", function() {
438438
}, { top: addTop + 0, left: addLeft + 0 }, "right bottom" );
439439
});
440440

441+
test( "addClass: flipped left", function() {
442+
var within = $("#within-container");
443+
444+
var elem = $( "#elx" ).position( {
445+
my: "left center",
446+
of: within[0],
447+
within: within,
448+
collision: "flip",
449+
at: "right center"
450+
});
451+
452+
same( elem.hasClass( 'ui-flipped-left' ), true, 'Has ui-flipped-left class' );
453+
454+
elem.position( {
455+
my: "right center",
456+
of: within[0],
457+
within: within,
458+
collision: "flip",
459+
at: "left center"
460+
})
461+
462+
same( elem.hasClass( 'ui-flipped-left' ), false, 'Removed ui-flipped-left class' );
463+
});
464+
465+
test( "addClass: flipped top", function() {
466+
var within = $("#within-container");
467+
468+
var elem = $( "#elx" ).position( {
469+
my: "left top",
470+
of: within[0],
471+
within: within,
472+
collision: "flip",
473+
at: "right bottom"
474+
});
475+
476+
same( elem.hasClass( 'ui-flipped-top' ), true, 'Has ui-flipped-top class' );
477+
478+
elem.position( {
479+
my: "left bottom",
480+
of: within[0],
481+
within: within,
482+
collision: "flip",
483+
at: "right top"
484+
});
485+
486+
same( elem.hasClass( 'ui-flipped-top' ), false, 'Removed ui-flipped-top class' );
487+
});
488+
489+
test( "addClass: flipped right", function() {
490+
var within = $("#within-container");
491+
492+
var elem = $( "#elx" ).position( {
493+
my: "right center",
494+
of: within[0],
495+
within: within,
496+
collision: "flip",
497+
at: "left center"
498+
});
499+
500+
same( elem.hasClass( 'ui-flipped-right' ), true, 'Has ui-flipped-right class' );
501+
502+
elem.position( {
503+
my: "left center",
504+
of: within[0],
505+
within: within,
506+
collision: "flip",
507+
at: "right center"
508+
});
509+
510+
same( elem.hasClass( 'ui-flipped-right' ), false, 'Removed ui-flipped-right class' );
511+
512+
});
513+
514+
test( "addClass: flipped bottom", function() {
515+
var within = $("#within-container");
516+
517+
var elem = $( "#elx" ).position( {
518+
my: "left bottom",
519+
of: window,
520+
collision: "flip",
521+
at: "right top"
522+
});
523+
524+
same( elem.hasClass( 'ui-flipped-bottom' ), true, 'Has ui-flipped-bottom class' );
525+
526+
elem.position( {
527+
my: "left top",
528+
of: window,
529+
collision: "flip",
530+
at: "right bottom"
531+
});
532+
533+
same( elem.hasClass( 'ui-flipped-bottom' ), false, 'Removed ui-flipped-bottom class' );
534+
});
535+
441536
}( jQuery ) );

‎ui/jquery.ui.position.js‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,8 @@ $.fn.position = function( options ) {
204204
offset: [ atOffset[ 0 ] + myOffset[ 0 ], atOffset [ 1 ] + myOffset[ 1 ] ],
205205
my: options.my,
206206
at: options.at,
207-
within: within
207+
within: within,
208+
elem : elem
208209
});
209210
}
210211
});
@@ -265,6 +266,9 @@ $.ui.position = {
265266
return;
266267
}
267268

269+
data.elem
270+
.removeClass( "ui-flipped-left ui-flipped-right" );
271+
268272
var within = data.within,
269273
win = $( window ),
270274
isWindow = $.isWindow( data.within[0] ),
@@ -283,13 +287,21 @@ $.ui.position = {
283287
-data.targetWidth,
284288
offset = -2 * data.offset[ 0 ];
285289
if ( overLeft < 0 || overRight > 0 ) {
290+
291+
data.elem
292+
.addClass( "ui-flipped-" + ( overLeft < 0 ? "right" : "left" ) );
293+
286294
position.left += myOffset + atOffset + offset;
287295
}
288296
},
289297
top: function( position, data ) {
290298
if ( data.at[ 1 ] === center ) {
291299
return;
292300
}
301+
302+
data.elem
303+
.removeClass( "ui-flipped-top ui-flipped-bottom" );
304+
293305
var within = data.within,
294306
win = $( window ),
295307
isWindow = $.isWindow( data.within[0] ),
@@ -308,6 +320,10 @@ $.ui.position = {
308320
-data.targetHeight,
309321
offset = -2 * data.offset[ 1 ];
310322
if ( overTop < 0 || overBottom > 0 ) {
323+
324+
data.elem
325+
.addClass( "ui-flipped-" + ( overTop < 0 ? "bottom" : "top" ) );
326+
311327
position.top += myOffset + atOffset + offset;
312328
}
313329
}

0 commit comments

Comments
 (0)