From e7e00ccbc750c0a376f5a222ba98de659628b4b9 Mon Sep 17 00:00:00 2001 From: Jean-Francois Remy Date: Fri, 22 Apr 2011 21:53:27 -0700 Subject: [PATCH 1/5] Check if we are too far left / down as well as right / bottom - Fix #7211 - Position: Collision: fit doesn't work at top of window when scrolled --- ui/jquery.ui.position.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index b6fcc715192..f81d6b1f28a 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -184,17 +184,15 @@ $.ui.position = { fit: { left: function( position, data ) { var win = $( window ), - over = data.collisionPosition.left + data.collisionWidth - win.width() - win.scrollLeft(); - position.left = over > 0 ? - position.left - over : - Math.max( position.left - data.collisionPosition.left, position.left ); + overLeft = win.scrollLeft() - data.collisionPosition.left, + overRight = data.collisionPosition.left + data.collisionWidth - win.width() - win.scrollLeft(); + position.left = overLeft > 0 ? position.left + overLeft : (overRight > 0 ? position.left - overRight : Math.max( position.left - data.collisionPosition.left, position.left )); }, top: function( position, data ) { var win = $( window ), - over = data.collisionPosition.top + data.collisionHeight - win.height() - win.scrollTop(); - position.top = over > 0 ? - position.top - over : - Math.max( position.top - data.collisionPosition.top, position.top ); + overTop = win.scrollTop() - data.collisionPosition.top, + overBottom = data.collisionPosition.top + data.collisionHeight - win.height() - win.scrollTop(); + position.top = overTop > 0 ? position.top + overTop : (overBottom > 0 ? position.top - overBottom : Math.max( position.top - data.collisionPosition.top, position.top )); } }, From 401962d2c980cb3e2ec465b2e4756514b324a0ff Mon Sep 17 00:00:00 2001 From: Jean-Francois Remy Date: Mon, 25 Apr 2011 09:24:36 -0700 Subject: [PATCH 2/5] Improved fix. When element does not fit, set it to top / left border of the screen --- ui/jquery.ui.position.js | 39 ++++++++++++++++++++++++++++++++++++--- 1 file changed, 36 insertions(+), 3 deletions(-) diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index f81d6b1f28a..91beb810bd0 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -181,19 +181,52 @@ $.fn.position = function( options ) { }; $.ui.position = { - fit: { left: function( position, data ) { var win = $( window ), overLeft = win.scrollLeft() - data.collisionPosition.left, overRight = data.collisionPosition.left + data.collisionWidth - win.width() - win.scrollLeft(); - position.left = overLeft > 0 ? position.left + overLeft : (overRight > 0 ? position.left - overRight : Math.max( position.left - data.collisionPosition.left, position.left )); + /* + Cases considered: + 1) element width does not fit. Left align on left border of screen + 2) element is too far left, bring back on left side of screen + 3) element is too far right, bring back on right side of the screen + 4) set element accordingly while making sure it's more than leftMargin from the left border of the document + */ + + if(data.collisionWidth > win.width()) { + position.left = win.scrollLeft() + position.left - data.collisionPosition.left; + } else if( overLeft > 0 ) { + position.left = position.left + overLeft; + } else if( overRight > 0) { + position.left = position.left - overRight; + } else { + position.left = Math.max( position.left - data.collisionPosition.left, position.left ); + } }, top: function( position, data ) { var win = $( window ), overTop = win.scrollTop() - data.collisionPosition.top, overBottom = data.collisionPosition.top + data.collisionHeight - win.height() - win.scrollTop(); - position.top = overTop > 0 ? position.top + overTop : (overBottom > 0 ? position.top - overBottom : Math.max( position.top - data.collisionPosition.top, position.top )); + + /* + Cases considered: + 1) element height does not fit. Top align on top border of screen + 2) element is too far up, bring back on top of screen + 3) element is too far down, bring back on bottom of the screen + 4) set element accordingly while making sure it's more than topMargin from the top of the document + */ + + if( data.collisionHeight > win.height()) { + position.top = win.scrollTop() + position.top - data.collisionPosition.top; + } else if(overTop > 0) { + position.top = position.top + overTop; + } else if(overBottom > 0) { + position.top = position.top - overBottom; + } else { + position.top = Math.max( position.top - data.collisionPosition.top, position.top ); + } } + }, flip: { From 1db56e42eee2fe5b3c4c11c2d0f9cb3c7372093f Mon Sep 17 00:00:00 2001 From: Jean-Francois Remy Date: Mon, 25 Apr 2011 09:27:27 -0700 Subject: [PATCH 3/5] Last commit deleted one line too many --- ui/jquery.ui.position.js | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index 91beb810bd0..5806ba3e460 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -181,6 +181,7 @@ $.fn.position = function( options ) { }; $.ui.position = { + fit: { left: function( position, data ) { var win = $( window ), overLeft = win.scrollLeft() - data.collisionPosition.left, From c71d8985c92b7784f77cdc6058924ab0de99f05d Mon Sep 17 00:00:00 2001 From: Jean-Francois Remy Date: Mon, 25 Apr 2011 09:39:43 -0700 Subject: [PATCH 4/5] Factorized first two tests --- ui/jquery.ui.position.js | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index 5806ba3e460..d75d02ae67c 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -194,9 +194,7 @@ $.ui.position = { 4) set element accordingly while making sure it's more than leftMargin from the left border of the document */ - if(data.collisionWidth > win.width()) { - position.left = win.scrollLeft() + position.left - data.collisionPosition.left; - } else if( overLeft > 0 ) { + if( data.collisionWidth > win.width() || overLeft > 0 ) { position.left = position.left + overLeft; } else if( overRight > 0) { position.left = position.left - overRight; @@ -217,9 +215,7 @@ $.ui.position = { 4) set element accordingly while making sure it's more than topMargin from the top of the document */ - if( data.collisionHeight > win.height()) { - position.top = win.scrollTop() + position.top - data.collisionPosition.top; - } else if(overTop > 0) { + if( data.collisionHeight > win.height() || overTop > 0 ) { position.top = position.top + overTop; } else if(overBottom > 0) { position.top = position.top - overBottom; @@ -229,7 +225,6 @@ $.ui.position = { } }, - flip: { left: function( position, data ) { if ( data.at[ 0 ] === center ) { From 0678362528ea010b61d199047af4eb30eef69135 Mon Sep 17 00:00:00 2001 From: Jeff Remy Date: Mon, 16 May 2011 16:07:14 -0700 Subject: [PATCH 5/5] Resizable: correct aspectRatio handling with min/max dimensions - Fixed #4951 --- ui/jquery.ui.resizable.js | 34 +++++++++++++++++++++++++++++++--- 1 file changed, 31 insertions(+), 3 deletions(-) diff --git a/ui/jquery.ui.resizable.js b/ui/jquery.ui.resizable.js index e0579ef8496..de24e94dde0 100644 --- a/ui/jquery.ui.resizable.js +++ b/ui/jquery.ui.resizable.js @@ -293,6 +293,8 @@ $.widget("ui.resizable", $.ui.mouse, { // Calculate the attrs that will be change var data = trigger.apply(this, [event, dx, dy]), ie6 = $.browser.msie && $.browser.version < 7, csdif = this.sizeDiff; + // Put this in the mouseDrag handler since the user can start pressing shift while resizing + this._updateVirtualBoundaries(event.shiftKey); if (this._aspectRatio || event.shiftKey) data = this._updateRatio(data, event); @@ -351,6 +353,32 @@ $.widget("ui.resizable", $.ui.mouse, { }, + _updateVirtualBoundaries: function(forceAspectRatio) { + var o = this.options, pMinWidth, pMaxWidth, pMinHeight, pMaxHeight, b; + + b = { + minWidth: isNumber(o.minWidth) ? o.minWidth : 0, + maxWidth: isNumber(o.maxWidth) ? o.maxWidth : Infinity, + minHeight: isNumber(o.minHeight) ? o.minHeight : 0, + maxHeight: isNumber(o.maxHeight) ? o.maxHeight : Infinity + }; + + if(this._aspectRatio || forceAspectRatio) { + // We want to create an enclosing box whose aspect ration is the requested one + // First, compute the "projected" size for each dimension based on the aspect ratio and other dimension + pMinWidth = b.minHeight * this.aspectRatio; + pMinHeight = b.minWidth / this.aspectRatio; + pMaxWidth = b.maxHeight * this.aspectRatio; + pMaxHeight = b.maxWidth / this.aspectRatio; + + if(pMinWidth > b.minWidth) b.minWidth = pMinWidth; + if(pMinHeight > b.minHeight) b.minHeight = pMinHeight; + if(pMaxWidth < b.maxWidth) b.maxWidth = pMaxWidth; + if(pMaxHeight < b.maxHeight) b.maxHeight = pMaxHeight; + } + this._vBoundaries = b; + }, + _updateCache: function(data) { var o = this.options; this.offset = this.helper.offset(); @@ -364,8 +392,8 @@ $.widget("ui.resizable", $.ui.mouse, { var o = this.options, cpos = this.position, csize = this.size, a = this.axis; - if (data.height) data.width = (csize.height * this.aspectRatio); - else if (data.width) data.height = (csize.width / this.aspectRatio); + if (isNumber(data.height)) data.width = (data.height * this.aspectRatio); + else if (isNumber(data.width)) data.height = (data.width / this.aspectRatio); if (a == 'sw') { data.left = cpos.left + (csize.width - data.width); @@ -381,7 +409,7 @@ $.widget("ui.resizable", $.ui.mouse, { _respectSize: function(data, event) { - var el = this.helper, o = this.options, pRatio = this._aspectRatio || event.shiftKey, a = this.axis, + var el = this.helper, o = this._vBoundaries, pRatio = this._aspectRatio || event.shiftKey, a = this.axis, ismaxw = isNumber(data.width) && o.maxWidth && (o.maxWidth < data.width), ismaxh = isNumber(data.height) && o.maxHeight && (o.maxHeight < data.height), isminw = isNumber(data.width) && o.minWidth && (o.minWidth > data.width), isminh = isNumber(data.height) && o.minHeight && (o.minHeight > data.height);