From 479530bb61f3c40ef9360613a0a84baf1a14b87b Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Tue, 10 Apr 2012 18:11:28 +0200 Subject: Position: First draft for a new notification API, via using callback, telling you were the of-element is, not just when something flipped. New test page demonstrates usage --- tests/visual/position/position.html | 16 ++- tests/visual/position/position_notification.html | 120 +++++++++++++++++++++++ 2 files changed, 132 insertions(+), 4 deletions(-) create mode 100644 tests/visual/position/position_notification.html (limited to 'tests') diff --git a/tests/visual/position/position.html b/tests/visual/position/position.html index b9b769d9b..89d991231 100644 --- a/tests/visual/position/position.html +++ b/tests/visual/position/position.html @@ -17,16 +17,24 @@ $("ul").insertAfter(inputs); $(window).resize(function() { inputs.each(function() { - $(this).position({ + var input = $(this).position({ my: this.id.replace(/-/, " "), at: this.id.replace(/-/, " "), of: "#container", collision: "none" }); - $(this).next().menu().position({ + var menu = $(this).next().menu() + menu.position({ my: "left top+20", at: "left bottom", of: this, + using: function( position ) { + input.val(position.horizontal + " " + position.vertical) + $(this).offset( position ) + .removeClass("left right top bottom") + .addClass(position.horizontal) + .addClass(position.vertical); + } }); }); }).resize(); @@ -44,11 +52,11 @@ top: -22px; left: 5px; } - .ui-flipped-left:before { + .right:before { left: auto; right: 5px; } - .ui-flipped-top:before { + .bottom:before { content: "↓"; top: auto; bottom: -19px; diff --git a/tests/visual/position/position_notification.html b/tests/visual/position/position_notification.html new file mode 100644 index 000000000..d87c506ca --- /dev/null +++ b/tests/visual/position/position_notification.html @@ -0,0 +1,120 @@ + + + + + Position Visual Test: Default + + + + + + + + + + + + + +
all around me
+ +
+ + + -- cgit v1.2.3 From e5ba731019ba32749e3c95d0fde30b64b8bcf147 Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Tue, 10 Apr 2012 22:16:38 +0200 Subject: Position: Use a separate object and argument for the feedback information, keeping position props as they were --- tests/visual/position/position.html | 8 ++++---- tests/visual/position/position_notification.html | 10 +++++----- ui/jquery.ui.position.js | 11 ++++++----- 3 files changed, 15 insertions(+), 14 deletions(-) (limited to 'tests') diff --git a/tests/visual/position/position.html b/tests/visual/position/position.html index 89d991231..532774526 100644 --- a/tests/visual/position/position.html +++ b/tests/visual/position/position.html @@ -28,12 +28,12 @@ my: "left top+20", at: "left bottom", of: this, - using: function( position ) { - input.val(position.horizontal + " " + position.vertical) + using: function( position, feedback ) { + input.val(feedback.horizontal + " " + feedback.vertical) $(this).offset( position ) .removeClass("left right top bottom") - .addClass(position.horizontal) - .addClass(position.vertical); + .addClass(feedback.horizontal) + .addClass(feedback.vertical); } }); }); diff --git a/tests/visual/position/position_notification.html b/tests/visual/position/position_notification.html index d87c506ca..810663c5e 100644 --- a/tests/visual/position/position_notification.html +++ b/tests/visual/position/position_notification.html @@ -37,14 +37,14 @@ my: "center", at: direction, of: target, - using: function( position ) { + using: function( position, feedback ) { $(this).offset( position ); - $(this).text(position.horizontal + " " + position.vertical + " " + position.important) + $(this).text(feedback.horizontal + " " + feedback.vertical + " " + feedback.important) $(this) .removeClass("left right top bottom") - .addClass(position.horizontal) - .addClass(position.vertical) - .addClass(position.important); + .addClass(feedback.horizontal) + .addClass(feedback.vertical) + .addClass(feedback.important); } }) }); diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index 003e43c3f..cc0676370 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -226,14 +226,15 @@ $.fn.position = function( options ) { right = (targetOffset.left + targetWidth) - (props.left + elemWidth), top = targetOffset.top - props.top, bottom = (targetOffset.top + targetHeight) - (props.top + elemHeight); - props.horizontal = right < 0 ? "left" : left > 0 ? "right" : "center"; - props.vertical = bottom < 0 ? "top" : top > 0 ? "bottom" : "middle"; + var feedback = {}; + feedback.horizontal = right < 0 ? "left" : left > 0 ? "right" : "center"; + feedback.vertical = bottom < 0 ? "top" : top > 0 ? "bottom" : "middle"; if (Math.max(Math.abs(left), Math.abs(right)) > Math.max(Math.abs(top), Math.abs(bottom))) { - props.important = "horizontal"; + feedback.important = "horizontal"; } else { - props.important = "vertical"; + feedback.important = "vertical"; } - using.apply( this, arguments ); + using.call( this, props, feedback ); }; } elem.offset( $.extend( position, { using: options.using } ) ); -- cgit v1.2.3 From 260261255baa3c891d265cf2266e66cbc2ac88b6 Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Wed, 11 Apr 2012 15:20:30 +0200 Subject: Position: Extend feedback test page to include two mouse-positioned elements, highlights the 0px center/middle limitation Also rename the demo file to match the variables names, 'feedback', instead of 'notification' --- tests/visual/position/position_feedback.html | 140 +++++++++++++++++++++++ tests/visual/position/position_notification.html | 120 ------------------- 2 files changed, 140 insertions(+), 120 deletions(-) create mode 100644 tests/visual/position/position_feedback.html delete mode 100644 tests/visual/position/position_notification.html (limited to 'tests') diff --git a/tests/visual/position/position_feedback.html b/tests/visual/position/position_feedback.html new file mode 100644 index 000000000..0bb483e4b --- /dev/null +++ b/tests/visual/position/position_feedback.html @@ -0,0 +1,140 @@ + + + + + Position Visual Test: Default + + + + + + + + + + + + + +
all around me
+ +
+ + + diff --git a/tests/visual/position/position_notification.html b/tests/visual/position/position_notification.html deleted file mode 100644 index 810663c5e..000000000 --- a/tests/visual/position/position_notification.html +++ /dev/null @@ -1,120 +0,0 @@ - - - - - Position Visual Test: Default - - - - - - - - - - - - - -
all around me
- -
- - - -- cgit v1.2.3 From d077f9b360ebee63df48b7195780016671f2613e Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Thu, 12 Apr 2012 01:32:30 +0200 Subject: Position: Improve feedback API by giving the center/middle position more weight. Also removed themeswitcher from test pages, now load faster --- tests/visual/position/position.html | 8 ++++---- tests/visual/position/position_feedback.html | 23 +++++++++++++++++++++-- tests/visual/position/position_fit.html | 1 - tests/visual/position/position_flip.html | 1 - tests/visual/position/position_flipfit.html | 1 - tests/visual/position/position_margin.html | 1 - ui/jquery.ui.position.js | 6 ++++++ 7 files changed, 31 insertions(+), 10 deletions(-) (limited to 'tests') diff --git a/tests/visual/position/position.html b/tests/visual/position/position.html index 532774526..64c5d2300 100644 --- a/tests/visual/position/position.html +++ b/tests/visual/position/position.html @@ -10,7 +10,6 @@ - - + + + +
all around me
+ +
+ + + diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index 31da2237b..17d43b2a4 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -241,9 +241,22 @@ $.fn.position = function( options ) { top = targetOffset.top - props.top, bottom = (targetOffset.top + targetHeight) - (props.top + elemHeight), feedback = { + target: { + element: target, + left: targetOffset.left, + top: targetOffset.top, + width: targetWidth, + height: targetHeight + }, + element: { + element: elem, + left: props.left, + top: props.top, + width: elemWidth, + height: elemHeight + }, horizontal: right < 0 ? "left" : left > 0 ? "right" : "center", - vertical: bottom < 0 ? "top" : top > 0 ? "bottom" : "middle", - target: target + vertical: bottom < 0 ? "top" : top > 0 ? "bottom" : "middle" }, max = Math.max, abs = Math.abs; -- cgit v1.2.3 From 2cf9948cadf45a24c591d6f7232f2470b4d9743e Mon Sep 17 00:00:00 2001 From: Scott González Date: Fri, 20 Apr 2012 11:02:50 -0400 Subject: Position: Use offsets for all calculations in feedback API. --- tests/visual/position/position_feedback.html | 2 +- ui/jquery.ui.position.js | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) (limited to 'tests') diff --git a/tests/visual/position/position_feedback.html b/tests/visual/position/position_feedback.html index f23d8a299..11bb19f3e 100644 --- a/tests/visual/position/position_feedback.html +++ b/tests/visual/position/position_feedback.html @@ -14,7 +14,7 @@ $(function() { function using( position, feedback ) { $(this) - .offset( position ) + .css( position ) .text( feedback.horizontal + " " + feedback.vertical + " " + feedback.important ) .removeClass( "left right top bottom center middle vertical horizontal" ) .addClass( feedback.horizontal ) diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index bba4dd4e6..b8764f2bb 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -235,9 +235,9 @@ $.fn.position = function( options ) { if ( options.using ) { // adds feedback as second argument to using callback, if present using = function( props ) { - var left = targetOffset.left - props.left, + var left = targetOffset.left - position.left, right = left + targetWidth - elemWidth, - top = targetOffset.top - props.top, + top = targetOffset.top - position.top, bottom = top + targetHeight - elemHeight, feedback = { target: { @@ -249,8 +249,8 @@ $.fn.position = function( options ) { }, element: { element: elem, - left: props.left, - top: props.top, + left: position.left, + top: position.top, width: elemWidth, height: elemHeight }, -- cgit v1.2.3 From af1576280a807dcc166ddf619abab1fc24cac664 Mon Sep 17 00:00:00 2001 From: Scott González Date: Fri, 20 Apr 2012 11:18:58 -0400 Subject: Position visual tests: Cleanup. --- tests/visual/position/position_feedback.html | 181 +++++++++++---------- .../visual/position/position_feedback_rotate.html | 100 ++++++------ 2 files changed, 143 insertions(+), 138 deletions(-) (limited to 'tests') diff --git a/tests/visual/position/position_feedback.html b/tests/visual/position/position_feedback.html index 11bb19f3e..006a1be02 100644 --- a/tests/visual/position/position_feedback.html +++ b/tests/visual/position/position_feedback.html @@ -1,19 +1,19 @@ - + - + Position Visual Test: Default - - - - - - - - + + + + + -
all around me
- -
+
all around me
+
diff --git a/tests/visual/position/position_feedback_rotate.html b/tests/visual/position/position_feedback_rotate.html index a93287e7d..11138b112 100644 --- a/tests/visual/position/position_feedback_rotate.html +++ b/tests/visual/position/position_feedback_rotate.html @@ -1,22 +1,25 @@ - + - + Position Visual Test: Default - - - - - - - - + + + + + -
all around me
- -
+
all around me
+
-- cgit v1.2.3 From 1a0f2e46593ec9e3fbca51175d342210a9996fba Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Tue, 24 Apr 2012 16:17:02 +0200 Subject: Position: Extend unit test for using to check feedback properties --- tests/unit/position/position_core.js | 30 ++++++++++++++++++++++++++---- 1 file changed, 26 insertions(+), 4 deletions(-) (limited to 'tests') diff --git a/tests/unit/position/position_core.js b/tests/unit/position/position_core.js index 0ebcabef3..b567b7299 100644 --- a/tests/unit/position/position_core.js +++ b/tests/unit/position/position_core.js @@ -255,11 +255,30 @@ test( "offsets", function() { }); test( "using", function() { - expect( 6 ); + expect( 10 ); var count = 0, elems = $( "#el1, #el2" ), - expectedPosition = { top: 40, left: 40 }, + of = $( "#parentx" ), + expectedPosition = { top: 60, left: 60 }, + expectedFeedback = { + target: { + element: of, + width: 20, + height: 20, + left: 40, + top: 40 + }, + element: { + width: 6, + height: 6, + left: 60, + top: 60 + }, + horizontal: "left", + vertical: "top", + important: "vertical" + }, originalPosition = elems.position({ my: "right bottom", at: "rigt bottom", @@ -269,11 +288,14 @@ test( "using", function() { elems.position({ my: "left top", - at: "left top", + at: "center+10 bottom", of: "#parentx", - using: function( position ) { + using: function( position, feedback ) { deepEqual( this, elems[ count ], "correct context for call #" + count ); deepEqual( position, expectedPosition, "correct position for call #" + count ); + deepEqual( feedback.element.element[ 0 ], elems[ count ] ); + delete feedback.element.element; + deepEqual( feedback, expectedFeedback ); count++; } }); -- cgit v1.2.3 From 252352e12473034dc86917bc9c7c1f764e6f7eb4 Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Tue, 24 Apr 2012 17:23:25 +0200 Subject: Position: Fix scrollbar calculcation to correctly take overflow:scroll into account, along with unit tests --- tests/unit/position/position.html | 2 +- tests/unit/position/position_core.js | 61 ++++++++++++++++++++++++++++++ tests/visual/position/position_within.html | 2 +- ui/jquery.ui.position.js | 11 +++--- 4 files changed, 69 insertions(+), 7 deletions(-) (limited to 'tests') diff --git a/tests/unit/position/position.html b/tests/unit/position/position.html index 518e1f960..2a6e43d36 100644 --- a/tests/unit/position/position.html +++ b/tests/unit/position/position.html @@ -43,7 +43,7 @@ elements smaller than 10px have a line-height set on them to avoid a bug in IE6
-
+
diff --git a/tests/unit/position/position_core.js b/tests/unit/position/position_core.js index b567b7299..f15ea48cc 100644 --- a/tests/unit/position/position_core.js +++ b/tests/unit/position/position_core.js @@ -591,6 +591,67 @@ test( "within", function() { }, "flipfit - left top" ); }); +test( "with scrollbars", function() { + expect( 4 ); + + $( "#scrollx" ).css({ + width: 100, + height: 100, + left: 0, + top: 0 + }); + + collisionTest({ + of: "#scrollx", + collision: "fit", + within: "#scrollx" + }, { + top: 90, + left: 90 + }, "visible" ); + + $( "#scrollx" ).css({ + overflow: "scroll" + }); + + var scrollbarInfo = $.position.getScrollInfo( $.position.getWithinInfo( $( "#scrollx" ) ) ); + + collisionTest({ + of: "#scrollx", + collision: "fit", + within: "#scrollx" + }, { + top: 90 - scrollbarInfo.height, + left: 90 - scrollbarInfo.width + }, "scroll" ); + + $( "#scrollx" ).css({ + overflow: "auto" + }); + + collisionTest({ + of: "#scrollx", + collision: "fit", + within: "#scrollx" + }, { + top: 90, + left: 90 + }, "auto, no scroll" ); + + $( "#scrollx" ).css({ + overflow: "auto" + }).append( $("
").height(300).width(300) ); + + collisionTest({ + of: "#scrollx", + collision: "fit", + within: "#scrollx" + }, { + top: 90 - scrollbarInfo.height, + left: 90 - scrollbarInfo.width + }, "auto, with scroll" ); +}); + test( "fractions", function() { expect( 1 ); diff --git a/tests/visual/position/position_within.html b/tests/visual/position/position_within.html index 7d8813582..692cb1067 100644 --- a/tests/visual/position/position_within.html +++ b/tests/visual/position/position_within.html @@ -97,7 +97,7 @@ collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val() }); } - $( ".demo" ).append("
").css("overflow","auto"); + $( ".demo" ).css("overflow","scroll"); $( ".positionable" ).css( "opacity", 0.5 ); diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index b8764f2bb..d4d09bee4 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -58,12 +58,13 @@ $.position = { getScrollInfo: function( within ) { var overflowX = within.isWindow ? "" : within.element.css( "overflow-x" ), overflowY = within.isWindow ? "" : within.element.css( "overflow-y" ), - scrollbarWidth = overflowX === "auto" || overflowX === "scroll" ? $.position.scrollbarWidth() : 0, - scrollbarHeight = overflowY === "auto" || overflowY === "scroll" ? $.position.scrollbarWidth() : 0; - + hasOverflowX = overflowX === "scroll" || + ( overflowX === "auto" && within.width < within.element[0].scrollWidth ), + hasOverflowY = overflowY === "scroll" || + ( overflowY === "auto" && within.height < within.element[0].scrollHeight ); return { - height: within.height < within.element[0].scrollHeight ? scrollbarHeight : 0, - width: within.width < within.element[0].scrollWidth ? scrollbarWidth : 0 + width: hasOverflowX ? $.position.scrollbarWidth() : 0, + height: hasOverflowY ? $.position.scrollbarWidth() : 0 }; }, getWithinInfo: function( element ) { -- cgit v1.2.3