diff options
author | Jörn Zaefferer <joern.zaefferer@gmail.com> | 2012-04-24 17:29:16 +0200 |
---|---|---|
committer | Jörn Zaefferer <joern.zaefferer@gmail.com> | 2012-04-24 17:29:16 +0200 |
commit | db72cb7e944552ee54854834e3a73602f1f4818a (patch) | |
tree | e9ae86fb4321529de265db09035ff9b35ddd7237 /ui | |
parent | dfa89f999cdab4304b4bef2e940da706d9f60d85 (diff) | |
parent | 252352e12473034dc86917bc9c7c1f764e6f7eb4 (diff) | |
download | jquery-ui-db72cb7e944552ee54854834e3a73602f1f4818a.tar.gz jquery-ui-db72cb7e944552ee54854834e3a73602f1f4818a.zip |
Merge branch 'position-notification'
Diffstat (limited to 'ui')
-rw-r--r-- | ui/jquery.ui.position.js | 231 | ||||
-rw-r--r-- | ui/jquery.ui.tooltip.js | 2 |
2 files changed, 131 insertions, 102 deletions
diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index 95b8b460d..d4d09bee4 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -11,16 +11,32 @@ $.ui = $.ui || {}; -var rhorizontal = /left|center|right/, +var cachedScrollbarWidth, + max = Math.max, + abs = Math.abs, + round = Math.round, + rhorizontal = /left|center|right/, rvertical = /top|center|bottom/, roffset = /[\+\-]\d+%?/, rposition = /^\w+/, rpercent = /%$/, - center = "center", _position = $.fn.position; +function getOffsets( offsets, width, height ) { + return [ + parseInt( offsets[ 0 ], 10 ) * ( rpercent.test( offsets[ 0 ] ) ? width / 100 : 1 ), + parseInt( offsets[ 1 ], 10 ) * ( rpercent.test( offsets[ 1 ] ) ? height / 100 : 1 ) + ]; +} +function parseCss( element, property ) { + return parseInt( $.css( element, property ), 10 ) || 0; +} + $.position = { scrollbarWidth: function() { + if ( cachedScrollbarWidth !== undefined ) { + return cachedScrollbarWidth; + } var w1, w2, div = $( "<div style='display:block;width:50px;height:50px;overflow:hidden;'><div style='height:100px;width:auto;'></div></div>" ), innerDiv = div.children()[0]; @@ -37,18 +53,31 @@ $.position = { div.remove(); - return w1 - w2; + return (cachedScrollbarWidth = w1 - w2); }, - getScrollInfo: function(within) { - var notWindow = within[0] !== window, - overflowX = notWindow ? within.css( "overflow-x" ) : "", - overflowY = notWindow ? within.css( "overflow-y" ) : "", - scrollbarWidth = overflowX === "auto" || overflowX === "scroll" ? $.position.scrollbarWidth() : 0, - scrollbarHeight = overflowY === "auto" || overflowY === "scroll" ? $.position.scrollbarWidth() : 0; - + getScrollInfo: function( within ) { + var overflowX = within.isWindow ? "" : within.element.css( "overflow-x" ), + overflowY = within.isWindow ? "" : within.element.css( "overflow-y" ), + 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[0].scrollHeight ? scrollbarHeight : 0, - width: within.width() < within[0].scrollWidth ? scrollbarWidth : 0 + width: hasOverflowX ? $.position.scrollbarWidth() : 0, + height: hasOverflowY ? $.position.scrollbarWidth() : 0 + }; + }, + getWithinInfo: function( element ) { + var withinElement = $( element || window ), + isWindow = $.isWindow( withinElement[0] ); + return { + element: withinElement, + isWindow: isWindow, + offset: withinElement.offset() || { left: 0, top: 0 }, + scrollLeft: withinElement.scrollLeft(), + scrollTop: withinElement.scrollTop(), + width: isWindow ? withinElement.width() : withinElement.outerWidth(), + height: isWindow ? withinElement.height() : withinElement.outerHeight() }; } }; @@ -61,34 +90,34 @@ $.fn.position = function( options ) { // make a copy, we don't want to modify arguments options = $.extend( {}, options ); - var target = $( options.of ), - within = $( options.within || window ), + var atOffset, targetWidth, targetHeight, targetOffset, basePosition, + target = $( options.of ), + within = $.position.getWithinInfo( options.within ), + scrollInfo = $.position.getScrollInfo( within ), targetElem = target[0], collision = ( options.collision || "flip" ).split( " " ), - offsets = {}, - atOffset, - targetWidth, - targetHeight, - basePosition; + offsets = {}; if ( targetElem.nodeType === 9 ) { targetWidth = target.width(); targetHeight = target.height(); - basePosition = { top: 0, left: 0 }; + targetOffset = { top: 0, left: 0 }; } else if ( $.isWindow( targetElem ) ) { targetWidth = target.width(); targetHeight = target.height(); - basePosition = { top: target.scrollTop(), left: target.scrollLeft() }; + targetOffset = { top: target.scrollTop(), left: target.scrollLeft() }; } else if ( targetElem.preventDefault ) { // force left top to allow flipping options.at = "left top"; targetWidth = targetHeight = 0; - basePosition = { top: options.of.pageY, left: options.of.pageX }; + targetOffset = { top: targetElem.pageY, left: targetElem.pageX }; } else { targetWidth = target.outerWidth(); targetHeight = target.outerHeight(); - basePosition = target.offset(); + targetOffset = target.offset(); } + // clone to reuse original targetOffset later + basePosition = $.extend( {}, targetOffset ); // force my and at to have valid horizontal and vertical positions // if a value is missing or invalid, it will be converted to center @@ -99,13 +128,13 @@ $.fn.position = function( options ) { if ( pos.length === 1) { pos = rhorizontal.test( pos[ 0 ] ) ? - pos.concat( [ center ] ) : + pos.concat( [ "center" ] ) : rvertical.test( pos[ 0 ] ) ? - [ center ].concat( pos ) : - [ center, center ]; + [ "center" ].concat( pos ) : + [ "center", "center" ]; } - pos[ 0 ] = rhorizontal.test( pos[ 0 ] ) ? pos[ 0 ] : center; - pos[ 1 ] = rvertical.test( pos[ 1 ] ) ? pos[ 1 ] : center; + pos[ 0 ] = rhorizontal.test( pos[ 0 ] ) ? pos[ 0 ] : "center"; + pos[ 1 ] = rvertical.test( pos[ 1 ] ) ? pos[ 1 ] : "center"; // calculate offsets horizontalOffset = roffset.exec( pos[ 0 ] ); @@ -129,54 +158,41 @@ $.fn.position = function( options ) { if ( options.at[ 0 ] === "right" ) { basePosition.left += targetWidth; - } else if ( options.at[ 0 ] === center ) { + } else if ( options.at[ 0 ] === "center" ) { basePosition.left += targetWidth / 2; } if ( options.at[ 1 ] === "bottom" ) { basePosition.top += targetHeight; - } else if ( options.at[ 1 ] === center ) { + } else if ( options.at[ 1 ] === "center" ) { basePosition.top += targetHeight / 2; } - atOffset = [ - parseInt( offsets.at[ 0 ], 10 ) * - ( rpercent.test( offsets.at[ 0 ] ) ? targetWidth / 100 : 1 ), - parseInt( offsets.at[ 1 ], 10 ) * - ( rpercent.test( offsets.at[ 1 ] ) ? targetHeight / 100 : 1 ) - ]; + atOffset = getOffsets( offsets.at, targetWidth, targetHeight ); basePosition.left += atOffset[ 0 ]; basePosition.top += atOffset[ 1 ]; return this.each(function() { - var elem = $( this ), + var collisionPosition, using, + elem = $( this ), elemWidth = elem.outerWidth(), elemHeight = elem.outerHeight(), - marginLeft = parseInt( $.css( this, "marginLeft" ), 10 ) || 0, - marginTop = parseInt( $.css( this, "marginTop" ), 10 ) || 0, - scrollInfo = $.position.getScrollInfo( within ), - collisionWidth = elemWidth + marginLeft + - ( parseInt( $.css( this, "marginRight" ), 10 ) || 0 ) + scrollInfo.width, - collisionHeight = elemHeight + marginTop + - ( parseInt( $.css( this, "marginBottom" ), 10 ) || 0 ) + scrollInfo.height, + marginLeft = parseCss( this, "marginLeft" ), + marginTop = parseCss( this, "marginTop" ), + collisionWidth = elemWidth + marginLeft + parseCss( this, "marginRight" ) + scrollInfo.width, + collisionHeight = elemHeight + marginTop + parseCss( this, "marginBottom" ) + scrollInfo.height, position = $.extend( {}, basePosition ), - myOffset = [ - parseInt( offsets.my[ 0 ], 10 ) * - ( rpercent.test( offsets.my[ 0 ] ) ? elem.outerWidth() / 100 : 1 ), - parseInt( offsets.my[ 1 ], 10 ) * - ( rpercent.test( offsets.my[ 1 ] ) ? elem.outerHeight() / 100 : 1 ) - ], - collisionPosition; + myOffset = getOffsets( offsets.my, elem.outerWidth(), elem.outerHeight() ); if ( options.my[ 0 ] === "right" ) { position.left -= elemWidth; - } else if ( options.my[ 0 ] === center ) { + } else if ( options.my[ 0 ] === "center" ) { position.left -= elemWidth / 2; } if ( options.my[ 1 ] === "bottom" ) { position.top -= elemHeight; - } else if ( options.my[ 1 ] === center ) { + } else if ( options.my[ 1 ] === "center" ) { position.top -= elemHeight / 2; } @@ -185,8 +201,8 @@ $.fn.position = function( options ) { // if the browser doesn't support fractions, then round for consistent results if ( !$.support.offsetFractions ) { - position.left = Math.round( position.left ); - position.top = Math.round( position.top ); + position.left = round( position.left ); + position.top = round( position.top ); } collisionPosition = { @@ -216,7 +232,48 @@ $.fn.position = function( options ) { if ( $.fn.bgiframe ) { elem.bgiframe(); } - elem.offset( $.extend( position, { using: options.using } ) ); + + if ( options.using ) { + // adds feedback as second argument to using callback, if present + using = function( props ) { + var left = targetOffset.left - position.left, + right = left + targetWidth - elemWidth, + top = targetOffset.top - position.top, + bottom = top + targetHeight - elemHeight, + feedback = { + target: { + element: target, + left: targetOffset.left, + top: targetOffset.top, + width: targetWidth, + height: targetHeight + }, + element: { + element: elem, + left: position.left, + top: position.top, + width: elemWidth, + height: elemHeight + }, + horizontal: right < 0 ? "left" : left > 0 ? "right" : "center", + vertical: bottom < 0 ? "top" : top > 0 ? "bottom" : "middle" + }; + if ( targetWidth < elemWidth && abs( left + right ) < targetWidth ) { + feedback.horizontal = "center"; + } + if ( targetHeight < elemHeight && abs( top + bottom ) < targetHeight ) { + feedback.vertical = "middle"; + } + if ( max( abs( left ), abs( right ) ) > max( abs( top ), abs( bottom ) ) ) { + feedback.important = "horizontal"; + } else { + feedback.important = "vertical"; + } + options.using.call( this, props, feedback ); + }; + } + + elem.offset( $.extend( position, { using: using } ) ); }); }; @@ -224,10 +281,8 @@ $.ui.position = { fit: { left: function( position, data ) { var within = data.within, - win = $( window ), - isWindow = $.isWindow( data.within[0] ), - withinOffset = isWindow ? win.scrollLeft() : within.offset().left, - outerWidth = isWindow ? win.width() : within.outerWidth(), + withinOffset = within.isWindow ? within.scrollLeft : within.offset.left, + outerWidth = within.width, collisionPosLeft = position.left - data.collisionPosition.marginLeft, overLeft = withinOffset - collisionPosLeft, overRight = collisionPosLeft + data.collisionWidth - outerWidth - withinOffset, @@ -259,15 +314,13 @@ $.ui.position = { position.left -= overRight; // adjust based on position and margin } else { - position.left = Math.max( position.left - collisionPosLeft, position.left ); + position.left = max( position.left - collisionPosLeft, position.left ); } }, top: function( position, data ) { var within = data.within, - win = $( window ), - isWindow = $.isWindow( data.within[0] ), - withinOffset = isWindow ? win.scrollTop() : within.offset().top, - outerHeight = isWindow ? win.height() : within.outerHeight(), + withinOffset = within.isWindow ? within.scrollTop : within.offset.top, + outerHeight = data.within.height, collisionPosTop = position.top - data.collisionPosition.marginTop, overTop = withinOffset - collisionPosTop, overBottom = collisionPosTop + data.collisionHeight - outerHeight - withinOffset, @@ -299,25 +352,20 @@ $.ui.position = { position.top -= overBottom; // adjust based on position and margin } else { - position.top = Math.max( position.top - collisionPosTop, position.top ); + position.top = max( position.top - collisionPosTop, position.top ); } } }, flip: { left: function( position, data ) { - if ( data.at[ 0 ] === center ) { + if ( data.at[ 0 ] === "center" ) { return; } - data.elem - .removeClass( "ui-flipped-left ui-flipped-right" ); - var within = data.within, - win = $( window ), - isWindow = $.isWindow( data.within[0] ), - withinOffset = ( isWindow ? 0 : within.offset().left ) + within.scrollLeft(), - outerWidth = isWindow ? within.width() : within.outerWidth(), - offsetLeft = isWindow ? 0 : within.offset().left, + withinOffset = within.offset.left + within.scrollLeft, + outerWidth = within.width, + offsetLeft = within.isWindow ? 0 : within.offset.left, collisionPosLeft = position.left - data.collisionPosition.marginLeft, overLeft = collisionPosLeft - offsetLeft, overRight = collisionPosLeft + data.collisionWidth - outerWidth - offsetLeft, @@ -336,37 +384,26 @@ $.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" ); - + if ( newOverRight < 0 || newOverRight < abs( overLeft ) ) { 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" ); - + if ( newOverLeft > 0 || abs( newOverLeft ) < overRight ) { position.left += myOffset + atOffset + offset; } } }, top: function( position, data ) { - if ( data.at[ 1 ] === center ) { + if ( data.at[ 1 ] === "center" ) { return; } - data.elem - .removeClass( "ui-flipped-top ui-flipped-bottom" ); - var within = data.within, - win = $( window ), - isWindow = $.isWindow( data.within[0] ), - withinOffset = ( isWindow ? 0 : within.offset().top ) + within.scrollTop(), - outerHeight = isWindow ? within.height() : within.outerHeight(), - offsetTop = isWindow ? 0 : within.offset().top, + withinOffset = within.offset.top + within.scrollTop, + outerHeight = within.height, + offsetTop = within.isWindow ? 0 : within.offset.top, collisionPosTop = position.top - data.collisionPosition.marginTop, overTop = collisionPosTop - offsetTop, overBottom = collisionPosTop + data.collisionHeight - outerHeight - offsetTop, @@ -384,19 +421,13 @@ $.ui.position = { newOverBottom; 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" ); - + if ( ( position.top + myOffset + atOffset + offset) > overTop && ( newOverBottom < 0 || newOverBottom < abs( overTop ) ) ) { 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" ); - + if ( ( position.top + myOffset + atOffset + offset) > overBottom && ( newOverTop > 0 || abs( newOverTop ) < overBottom ) ) { position.top += myOffset + atOffset + offset; } } diff --git a/ui/jquery.ui.tooltip.js b/ui/jquery.ui.tooltip.js index 97895a6a8..424eca7af 100644 --- a/ui/jquery.ui.tooltip.js +++ b/ui/jquery.ui.tooltip.js @@ -5,8 +5,6 @@ * Dual licensed under the MIT or GPL Version 2 licenses. * http://jquery.org/license * - * http://docs.jquery.com/UI/Tooltip - * * Depends: * jquery.ui.core.js * jquery.ui.widget.js |