Skip to content

Commit db72cb7

Browse files
jzaeffererjzaefferer
committed
Merge branch 'position-notification'
2 parents dfa89f9 + 252352e commit db72cb7

14 files changed

+535
-175
lines changed

‎demos/tooltip/custom-style.html

Lines changed: 46 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -13,76 +13,67 @@
1313
<script>
1414
$(function() {
1515
$( ".demo" ).tooltip({
16-
open: function(event, ui) {
17-
$("<div>").addClass("arrow").appendTo(ui.tooltip);
18-
},
1916
position: {
20-
my: "center bottom",
17+
my: "center bottom-20",
2118
at: "center top",
22-
offset: "0 -20px"
19+
using: function( position, feedback ) {
20+
$( this ).css( position );
21+
$( "<div>" )
22+
.addClass( "arrow" )
23+
.addClass( feedback.vertical )
24+
.addClass( feedback.horizontal )
25+
.appendTo( this );
26+
}
2327
}
2428
});
2529
});
2630
</script>
2731
<style>
28-
label {
29-
display: inline-block;
30-
width: 5em;
31-
}
32-
.demo {
33-
margin: 10em 0 0 10em;
34-
}
3532
.ui-tooltip, .arrow:after {
36-
background: black;
37-
border: 2px solid white;
33+
background: black;
34+
border: 2px solid white;
3835
}
3936
.ui-tooltip {
40-
display: inline-block;
41-
position: relative;
42-
padding: 10px 20px;
43-
color: white;
44-
border-radius: 20px;
45-
text-align: center;
46-
font: bold 14px "Helvetica Neue", Sans-Serif;
47-
font-stretch: condensed;
48-
text-decoration: none;
49-
text-transform: uppercase;
50-
box-shadow: 0 0 7px black;
37+
padding: 10px 20px;
38+
color: white;
39+
border-radius: 20px;
40+
font: bold 14px "Helvetica Neue", Sans-Serif;
41+
text-transform: uppercase;
42+
box-shadow: 0 0 7px black;
5143
}
5244
.arrow {
53-
width: 70px;
54-
height: 16px;
55-
overflow: hidden;
56-
position: absolute;
57-
left: 50%;
58-
margin-left: -35px;
59-
bottom: -16px;
45+
width: 70px;
46+
height: 16px;
47+
overflow: hidden;
48+
position: absolute;
49+
left: 50%;
50+
margin-left: -35px;
51+
bottom: -16px;
6052
}
61-
.arrow:after {
62-
content: "";
63-
position: absolute;
64-
left: 20px;
65-
top: -20px;
66-
width: 25px;
67-
height: 25px;
68-
-webkit-box-shadow: 6px 5px 9px -9px black,
69-
5px 6px 9px -9px black;
70-
-moz-box-shadow: 6px 5px 9px -9px black,
71-
5px 6px 9px -9px black;
72-
box-shadow: 6px 5px 9px -9px black,
73-
5px 6px 9px -9px black;
74-
-webkit-transform: rotate(45deg);
75-
-moz-transform: rotate(45deg);
76-
-ms-transform: rotate(45deg);
77-
-o-transform: rotate(45deg);
53+
.arrow.top {
54+
top: -16px;
55+
bottom: auto;
7856
}
79-
div[data-tooltip].active {
80-
opacity: 1;
81-
margin-top: 6px;
57+
.arrow.left {
58+
left: 20%;
59+
}
60+
.arrow:after {
61+
content: "";
62+
position: absolute;
63+
left: 20px;
64+
top: -20px;
65+
width: 25px;
66+
height: 25px;
67+
box-shadow: 6px 5px 9px -9px black;
68+
-webkit-transform: rotate(45deg);
69+
-moz-transform: rotate(45deg);
70+
-ms-transform: rotate(45deg);
71+
-o-transform: rotate(45deg);
72+
tranform: rotate(45deg);
8273
}
83-
div[data-tooltip].out {
84-
opacity: 0;
85-
margin-top: -20px;
74+
.arrow.top:after {
75+
bottom: -20px;
76+
top: auto;
8677
}
8778
</style>
8879
</head>

‎tests/unit/position/position.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ <h2 id="qunit-userAgent"></h2>
4343
<div id="parent" style="position: absolute; width: 6px; height: 6px; top: 4px; left: 4px; line-height: 6px;"></div>
4444
<div id="within" style="position: absolute; width: 12px; height: 12px; top: 2px; left: 0px;"></div>
4545

46-
<div style="position: absolute; top: 0px; left: 0px">
46+
<div id="scrollx" style="position: absolute; top: 0px; left: 0px">
4747
<div id="elx" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div>
4848
<div id="parentx" style="position: absolute; width: 20px; height: 20px; top: 40px; left: 40px;"></div>
4949
</div>

‎tests/unit/position/position_core.js

Lines changed: 87 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -255,11 +255,30 @@ test( "offsets", function() {
255255
});
256256

257257
test( "using", function() {
258-
expect( 6 );
258+
expect( 10 );
259259

260260
var count = 0,
261261
elems = $( "#el1, #el2" ),
262-
expectedPosition = { top: 40, left: 40 },
262+
of = $( "#parentx" ),
263+
expectedPosition = { top: 60, left: 60 },
264+
expectedFeedback = {
265+
target: {
266+
element: of,
267+
width: 20,
268+
height: 20,
269+
left: 40,
270+
top: 40
271+
},
272+
element: {
273+
width: 6,
274+
height: 6,
275+
left: 60,
276+
top: 60
277+
},
278+
horizontal: "left",
279+
vertical: "top",
280+
important: "vertical"
281+
},
263282
originalPosition = elems.position({
264283
my: "right bottom",
265284
at: "rigt bottom",
@@ -269,11 +288,14 @@ test( "using", function() {
269288

270289
elems.position({
271290
my: "left top",
272-
at: "left top",
291+
at: "center+10 bottom",
273292
of: "#parentx",
274-
using: function( position ) {
293+
using: function( position, feedback ) {
275294
deepEqual( this, elems[ count ], "correct context for call #" + count );
276295
deepEqual( position, expectedPosition, "correct position for call #" + count );
296+
deepEqual( feedback.element.element[ 0 ], elems[ count ] );
297+
delete feedback.element.element;
298+
deepEqual( feedback, expectedFeedback );
277299
count++;
278300
}
279301
});
@@ -569,6 +591,67 @@ test( "within", function() {
569591
}, "flipfit - left top" );
570592
});
571593

594+
test( "with scrollbars", function() {
595+
expect( 4 );
596+
597+
$( "#scrollx" ).css({
598+
width: 100,
599+
height: 100,
600+
left: 0,
601+
top: 0
602+
});
603+
604+
collisionTest({
605+
of: "#scrollx",
606+
collision: "fit",
607+
within: "#scrollx"
608+
}, {
609+
top: 90,
610+
left: 90
611+
}, "visible" );
612+
613+
$( "#scrollx" ).css({
614+
overflow: "scroll"
615+
});
616+
617+
var scrollbarInfo = $.position.getScrollInfo( $.position.getWithinInfo( $( "#scrollx" ) ) );
618+
619+
collisionTest({
620+
of: "#scrollx",
621+
collision: "fit",
622+
within: "#scrollx"
623+
}, {
624+
top: 90 - scrollbarInfo.height,
625+
left: 90 - scrollbarInfo.width
626+
}, "scroll" );
627+
628+
$( "#scrollx" ).css({
629+
overflow: "auto"
630+
});
631+
632+
collisionTest({
633+
of: "#scrollx",
634+
collision: "fit",
635+
within: "#scrollx"
636+
}, {
637+
top: 90,
638+
left: 90
639+
}, "auto, no scroll" );
640+
641+
$( "#scrollx" ).css({
642+
overflow: "auto"
643+
}).append( $("<div>").height(300).width(300) );
644+
645+
collisionTest({
646+
of: "#scrollx",
647+
collision: "fit",
648+
within: "#scrollx"
649+
}, {
650+
top: 90 - scrollbarInfo.height,
651+
left: 90 - scrollbarInfo.width
652+
}, "auto, with scroll" );
653+
});
654+
572655
test( "fractions", function() {
573656
expect( 1 );
574657

‎tests/visual/position/position.html

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,23 +10,31 @@
1010
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
1111
<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
1212
<script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
13-
<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
1413
<script type="text/javascript">
1514
$(function() {
1615
var inputs = $("input");
1716
$("ul").insertAfter(inputs);
1817
$(window).resize(function() {
1918
inputs.each(function() {
20-
$(this).position({
19+
var input = $(this).position({
2120
my: this.id.replace(/-/, " "),
2221
at: this.id.replace(/-/, " "),
2322
of: "#container",
2423
collision: "none"
2524
});
26-
$(this).next().menu().position({
27-
my: "left top+20",
25+
var menu = $(this).next().menu()
26+
menu.position({
27+
my: "left+30 top+20",
2828
at: "left bottom",
2929
of: this,
30+
using: function( position, feedback ) {
31+
input.val(feedback.horizontal + " " + feedback.vertical)
32+
$(this).offset( position );
33+
$(this)
34+
.removeClass("left right top bottom center middle")
35+
.addClass(feedback.horizontal)
36+
.addClass(feedback.vertical);
37+
}
3038
});
3139
});
3240
}).resize();
@@ -44,11 +52,11 @@
4452
top: -22px;
4553
left: 5px;
4654
}
47-
.ui-flipped-left:before {
55+
.right:before {
4856
left: auto;
4957
right: 5px;
5058
}
51-
.ui-flipped-top:before {
59+
.bottom:before {
5260
content: "↓";
5361
top: auto;
5462
bottom: -19px;

0 commit comments

Comments
 (0)