From: Jörn Zaefferer Date: Tue, 10 Apr 2012 16:11:28 +0000 (+0200) Subject: Position: First draft for a new notification API, via using callback, telling you... X-Git-Tag: 1.9.0m8~87^2~33 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=479530bb61f3c40ef9360613a0a84baf1a14b87b;p=jquery-ui.git 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 --- 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
+ +
+ + + diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index 95b8b460d..003e43c3f 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -216,6 +216,26 @@ $.fn.position = function( options ) { if ( $.fn.bgiframe ) { elem.bgiframe(); } + var using = options.using; + if ( using ) { + // we have to proxy, as jQuery.offset.setOffset throws away other props then left/top + options.using = function( props ) { + // can't use basePosition, as that gets modified + var targetOffset = target.offset(), + left = targetOffset.left - props.left, + 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"; + if (Math.max(Math.abs(left), Math.abs(right)) > Math.max(Math.abs(top), Math.abs(bottom))) { + props.important = "horizontal"; + } else { + props.important = "vertical"; + } + using.apply( this, arguments ); + }; + } elem.offset( $.extend( position, { using: options.using } ) ); }); }; @@ -309,9 +329,6 @@ $.ui.position = { return; } - data.elem - .removeClass( "ui-flipped-left ui-flipped-right" ); - var within = data.within, win = $( window ), isWindow = $.isWindow( data.within[0] ), @@ -337,18 +354,12 @@ $.ui.position = { if ( overLeft < 0 ) { newOverRight = position.left + myOffset + atOffset + offset + data.collisionWidth - outerWidth - withinOffset; if ( newOverRight < 0 || newOverRight < Math.abs( overLeft ) ) { - data.elem - .addClass( "ui-flipped-right" ); - position.left += myOffset + atOffset + offset; } } else if ( overRight > 0 ) { newOverLeft = position.left - data.collisionPosition.marginLeft + myOffset + atOffset + offset - offsetLeft; if ( newOverLeft > 0 || Math.abs( newOverLeft ) < overRight ) { - data.elem - .addClass( "ui-flipped-left" ); - position.left += myOffset + atOffset + offset; } } @@ -358,9 +369,6 @@ $.ui.position = { return; } - data.elem - .removeClass( "ui-flipped-top ui-flipped-bottom" ); - var within = data.within, win = $( window ), isWindow = $.isWindow( data.within[0] ), @@ -385,18 +393,12 @@ $.ui.position = { if ( overTop < 0 ) { newOverBottom = position.top + myOffset + atOffset + offset + data.collisionHeight - outerHeight - withinOffset; if ( ( position.top + myOffset + atOffset + offset) > overTop && ( newOverBottom < 0 || newOverBottom < Math.abs( overTop ) ) ) { - data.elem - .addClass( "ui-flipped-bottom" ); - position.top += myOffset + atOffset + offset; } } else if ( overBottom > 0 ) { newOverTop = position.top - data.collisionPosition.marginTop + myOffset + atOffset + offset - offsetTop; if ( ( position.top + myOffset + atOffset + offset) > overBottom && ( newOverTop > 0 || Math.abs( newOverTop ) < overBottom ) ) { - data.elem - .addClass( "ui-flipped-top" ); - position.top += myOffset + atOffset + offset; } }