From 9eaa572de189434521cf5cb307e37c2e65fb1f9f Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Sat, 17 Nov 2012 00:08:01 -0500 Subject: Dev: Make resizable pass JSHint without any settings overrides --- ui/jquery.ui.resizable.js | 486 +++++++++++++++++++++++++++++----------------- 1 file changed, 311 insertions(+), 175 deletions(-) (limited to 'ui/jquery.ui.resizable.js') diff --git a/ui/jquery.ui.resizable.js b/ui/jquery.ui.resizable.js index a27a140b2..50cc19e47 100644 --- a/ui/jquery.ui.resizable.js +++ b/ui/jquery.ui.resizable.js @@ -15,8 +15,6 @@ */ (function( $, undefined ) { -/*jshint onevar: false, curly: false, eqeqeq: false, funcscope: true, loopfunc: true */ - function num(v) { return parseInt(v, 10) || 0; } @@ -48,7 +46,9 @@ $.widget("ui.resizable", $.ui.mouse, { }, _create: function() { - var that = this, o = this.options; + var n, i, handle, axis, hname, + that = this, + o = this.options; this.element.addClass("ui-resizable"); $.extend(this, { @@ -100,21 +100,26 @@ $.widget("ui.resizable", $.ui.mouse, { } this.handles = o.handles || (!$('.ui-resizable-handle', this.element).length ? "e,s,se" : { n: '.ui-resizable-n', e: '.ui-resizable-e', s: '.ui-resizable-s', w: '.ui-resizable-w', se: '.ui-resizable-se', sw: '.ui-resizable-sw', ne: '.ui-resizable-ne', nw: '.ui-resizable-nw' }); - if(this.handles.constructor == String) { + if(this.handles.constructor === String) { + + if ( this.handles === 'all') { + this.handles = 'n,e,s,w,se,sw,ne,nw'; + } - if(this.handles == 'all') this.handles = 'n,e,s,w,se,sw,ne,nw'; - var n = this.handles.split(","); this.handles = {}; + n = this.handles.split(","); + this.handles = {}; - for(var i = 0; i < n.length; i++) { + for(i = 0; i < n.length; i++) { - var handle = $.trim(n[i]), hname = 'ui-resizable-'+handle; - var axis = $('
'); + handle = $.trim(n[i]); + hname = 'ui-resizable-'+handle; + axis = $('
'); // Apply zIndex to all handles - see #7960 axis.css({ zIndex: o.zIndex }); //TODO : What's going on here? - if ('se' == handle) { + if ('se' === handle) { axis.addClass('ui-icon ui-icon-gripsmall-diagonal-se'); } @@ -127,23 +132,26 @@ $.widget("ui.resizable", $.ui.mouse, { this._renderAxis = function(target) { + var i, axis, padPos, padWrapper; + target = target || this.element; - for(var i in this.handles) { + for(i in this.handles) { - if(this.handles[i].constructor == String) + if(this.handles[i].constructor === String) { this.handles[i] = $(this.handles[i], this.element).show(); + } //Apply pad to wrapper element, needed to fix axis position (textarea, inputs, scrolls) if (this.elementIsWrapper && this.originalElement[0].nodeName.match(/textarea|input|select|button/i)) { - var axis = $(this.handles[i], this.element), padWrapper = 0; + axis = $(this.handles[i], this.element); //Checking the correct pad and border padWrapper = /sw|ne|nw|se|n|s/.test(i) ? axis.outerHeight() : axis.outerWidth(); //The padding type i have to apply... - var padPos = [ 'padding', + padPos = [ 'padding', /ne|nw|n/.test(i) ? 'Top' : /se|sw|s/.test(i) ? 'Bottom' : /^e$/.test(i) ? 'Right' : 'Left' ].join(""); @@ -155,9 +163,9 @@ $.widget("ui.resizable", $.ui.mouse, { } //TODO: What's that good for? There's not anything to be executed left - if(!$(this.handles[i]).length) + if(!$(this.handles[i]).length) { continue; - + } } }; @@ -170,8 +178,9 @@ $.widget("ui.resizable", $.ui.mouse, { //Matching axis name this._handles.mouseover(function() { if (!that.resizing) { - if (this.className) - var axis = this.className.match(/ui-resizable-(se|sw|ne|nw|n|e|s|w)/i); + if (this.className) { + axis = this.className.match(/ui-resizable-(se|sw|ne|nw|n|e|s|w)/i); + } //Axis, default = se that.axis = axis && axis[1] ? axis[1] : 'se'; } @@ -183,12 +192,16 @@ $.widget("ui.resizable", $.ui.mouse, { $(this.element) .addClass("ui-resizable-autohide") .mouseenter(function() { - if (o.disabled) return; + if (o.disabled) { + return; + } $(this).removeClass("ui-resizable-autohide"); that._handles.show(); }) .mouseleave(function(){ - if (o.disabled) return; + if (o.disabled) { + return; + } if (!that.resizing) { $(this).addClass("ui-resizable-autohide"); that._handles.hide(); @@ -205,15 +218,16 @@ $.widget("ui.resizable", $.ui.mouse, { this._mouseDestroy(); - var _destroy = function(exp) { - $(exp).removeClass("ui-resizable ui-resizable-disabled ui-resizable-resizing") - .removeData("resizable").removeData("ui-resizable").unbind(".resizable").find('.ui-resizable-handle').remove(); - }; + var wrapper, + _destroy = function(exp) { + $(exp).removeClass("ui-resizable ui-resizable-disabled ui-resizable-resizing") + .removeData("resizable").removeData("ui-resizable").unbind(".resizable").find('.ui-resizable-handle').remove(); + }; //TODO: Unwrap at same DOM position if (this.elementIsWrapper) { _destroy(this.element); - var wrapper = this.element; + wrapper = this.element; this.originalElement.css({ position: wrapper.css('position'), width: wrapper.outerWidth(), @@ -231,10 +245,12 @@ $.widget("ui.resizable", $.ui.mouse, { }, _mouseCapture: function(event) { - var capture = false; - for (var i in this.handles) { - var handle = $(this.handles[i])[0]; - if (handle == event.target || $.contains(handle, event.target)) { + var i, handle, + capture = false; + + for (i in this.handles) { + handle = $(this.handles[i])[0]; + if (handle === event.target || $.contains(handle, event.target)) { capture = true; } } @@ -244,7 +260,10 @@ $.widget("ui.resizable", $.ui.mouse, { _mouseStart: function(event) { - var o = this.options, iniPos = this.element.position(), el = this.element; + var curleft, curtop, cursor, + o = this.options, + iniPos = this.element.position(), + el = this.element; this.resizing = true; this.documentScroll = { top: $(document).scrollTop(), left: $(document).scrollLeft() }; @@ -256,7 +275,8 @@ $.widget("ui.resizable", $.ui.mouse, { this._renderProxy(); - var curleft = num(this.helper.css('left')), curtop = num(this.helper.css('top')); + curleft = num(this.helper.css('left')); + curtop = num(this.helper.css('top')); if (o.containment) { curleft += $(o.containment).scrollLeft() || 0; @@ -273,10 +293,10 @@ $.widget("ui.resizable", $.ui.mouse, { this.originalMousePosition = { left: event.pageX, top: event.pageY }; //Aspect Ratio - this.aspectRatio = (typeof o.aspectRatio == 'number') ? o.aspectRatio : ((this.originalSize.width / this.originalSize.height) || 1); + this.aspectRatio = (typeof o.aspectRatio === 'number') ? o.aspectRatio : ((this.originalSize.width / this.originalSize.height) || 1); - var cursor = $('.ui-resizable-' + this.axis).css('cursor'); - $('body').css('cursor', cursor == 'auto' ? this.axis + '-resize' : cursor); + cursor = $('.ui-resizable-' + this.axis).css('cursor'); + $('body').css('cursor', cursor === 'auto' ? this.axis + '-resize' : cursor); el.addClass("ui-resizable-resizing"); this._propagate("start", event); @@ -286,22 +306,30 @@ $.widget("ui.resizable", $.ui.mouse, { _mouseDrag: function(event) { //Increase performance, avoid regex - var el = this.helper, props = {}, - smp = this.originalMousePosition, a = this.axis, - prevTop = this.position.top, prevLeft = this.position.left, - prevWidth = this.size.width, prevHeight = this.size.height; - - var dx = (event.pageX-smp.left)||0, dy = (event.pageY-smp.top)||0; - var trigger = this._change[a]; - if (!trigger) return false; + var data, + el = this.helper, props = {}, + smp = this.originalMousePosition, + a = this.axis, + prevTop = this.position.top, + prevLeft = this.position.left, + prevWidth = this.size.width, + prevHeight = this.size.height, + dx = (event.pageX-smp.left)||0, + dy = (event.pageY-smp.top)||0, + trigger = this._change[a]; + + if (!trigger) { + return false; + } // Calculate the attrs that will be change - var data = trigger.apply(this, [event, dx, dy]); + data = trigger.apply(this, [event, dx, dy]); // Put this in the mouseDrag handler since the user can start pressing shift while resizing this._updateVirtualBoundaries(event.shiftKey); - if (this._aspectRatio || event.shiftKey) + if (this._aspectRatio || event.shiftKey) { data = this._updateRatio(data, event); + } data = this._respectSize(data, event); @@ -324,8 +352,9 @@ $.widget("ui.resizable", $.ui.mouse, { } el.css(props); - if (!this._helper && this._proportionallyResizeElements.length) + if (!this._helper && this._proportionallyResizeElements.length) { this._proportionallyResize(); + } // Call the user callback if the element was resized if ( ! $.isEmptyObject(props) ) { @@ -338,24 +367,30 @@ $.widget("ui.resizable", $.ui.mouse, { _mouseStop: function(event) { this.resizing = false; - var o = this.options, that = this; + var pr, ista, soffseth, soffsetw, s, left, top, + o = this.options, that = this; if(this._helper) { - var pr = this._proportionallyResizeElements, ista = pr.length && (/textarea/i).test(pr[0].nodeName), - soffseth = ista && $.ui.hasScroll(pr[0], 'left') /* TODO - jump height */ ? 0 : that.sizeDiff.height, - soffsetw = ista ? 0 : that.sizeDiff.width; - var s = { width: (that.helper.width() - soffsetw), height: (that.helper.height() - soffseth) }, - left = (parseInt(that.element.css('left'), 10) + (that.position.left - that.originalPosition.left)) || null, - top = (parseInt(that.element.css('top'), 10) + (that.position.top - that.originalPosition.top)) || null; + pr = this._proportionallyResizeElements; + ista = pr.length && (/textarea/i).test(pr[0].nodeName); + soffseth = ista && $.ui.hasScroll(pr[0], 'left') /* TODO - jump height */ ? 0 : that.sizeDiff.height; + soffsetw = ista ? 0 : that.sizeDiff.width; - if (!o.animate) + s = { width: (that.helper.width() - soffsetw), height: (that.helper.height() - soffseth) }; + left = (parseInt(that.element.css('left'), 10) + (that.position.left - that.originalPosition.left)) || null; + top = (parseInt(that.element.css('top'), 10) + (that.position.top - that.originalPosition.top)) || null; + + if (!o.animate) { this.element.css($.extend(s, { top: top, left: left })); + } that.helper.height(that.size.height); that.helper.width(that.size.width); - if (this._helper && !o.animate) this._proportionallyResize(); + if (this._helper && !o.animate) { + this._proportionallyResize(); + } } $('body').css('cursor', 'auto'); @@ -364,13 +399,17 @@ $.widget("ui.resizable", $.ui.mouse, { this._propagate("stop", event); - if (this._helper) this.helper.remove(); + if (this._helper) { + this.helper.remove(); + } + return false; }, _updateVirtualBoundaries: function(forceAspectRatio) { - var o = this.options, pMinWidth, pMaxWidth, pMinHeight, pMaxHeight, b; + var pMinWidth, pMaxWidth, pMinHeight, pMaxHeight, b, + o = this.options; b = { minWidth: isNumber(o.minWidth) ? o.minWidth : 0, @@ -387,34 +426,55 @@ $.widget("ui.resizable", $.ui.mouse, { 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; + 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) { this.offset = this.helper.offset(); - if (isNumber(data.left)) this.position.left = data.left; - if (isNumber(data.top)) this.position.top = data.top; - if (isNumber(data.height)) this.size.height = data.height; - if (isNumber(data.width)) this.size.width = data.width; + if (isNumber(data.left)) { + this.position.left = data.left; + } + if (isNumber(data.top)) { + this.position.top = data.top; + } + if (isNumber(data.height)) { + this.size.height = data.height; + } + if (isNumber(data.width)) { + this.size.width = data.width; + } }, _updateRatio: function( data ) { - var cpos = this.position, csize = this.size, a = this.axis; + var cpos = this.position, + csize = this.size, + a = this.axis; - if (isNumber(data.height)) data.width = (data.height * this.aspectRatio); - else if (isNumber(data.width)) data.height = (data.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') { + if (a === 'sw') { data.left = cpos.left + (csize.width - data.width); data.top = null; } - if (a == 'nw') { + if (a === 'nw') { data.top = cpos.top + (csize.height - data.height); data.left = cpos.left + (csize.width - data.width); } @@ -424,48 +484,70 @@ $.widget("ui.resizable", $.ui.mouse, { _respectSize: function( data ) { - var o = this._vBoundaries, a = this.axis, + var o = this._vBoundaries, + 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); - - if (isminw) data.width = o.minWidth; - if (isminh) data.height = o.minHeight; - if (ismaxw) data.width = o.maxWidth; - if (ismaxh) data.height = o.maxHeight; - - var dw = this.originalPosition.left + this.originalSize.width, dh = this.position.top + this.size.height; - var cw = /sw|nw|w/.test(a), ch = /nw|ne|n/.test(a); + isminw = isNumber(data.width) && o.minWidth && (o.minWidth > data.width), isminh = isNumber(data.height) && o.minHeight && (o.minHeight > data.height), + dw = this.originalPosition.left + this.originalSize.width, + dh = this.position.top + this.size.height, + cw = /sw|nw|w/.test(a), ch = /nw|ne|n/.test(a); + if (isminw) { + data.width = o.minWidth; + } + if (isminh) { + data.height = o.minHeight; + } + if (ismaxw) { + data.width = o.maxWidth; + } + if (ismaxh) { + data.height = o.maxHeight; + } - if (isminw && cw) data.left = dw - o.minWidth; - if (ismaxw && cw) data.left = dw - o.maxWidth; - if (isminh && ch) data.top = dh - o.minHeight; - if (ismaxh && ch) data.top = dh - o.maxHeight; + if (isminw && cw) { + data.left = dw - o.minWidth; + } + if (ismaxw && cw) { + data.left = dw - o.maxWidth; + } + if (isminh && ch) { + data.top = dh - o.minHeight; + } + if (ismaxh && ch) { + data.top = dh - o.maxHeight; + } // fixing jump error on top/left - bug #2330 - var isNotwh = !data.width && !data.height; - if (isNotwh && !data.left && data.top) data.top = null; - else if (isNotwh && !data.top && data.left) data.left = null; + if (!data.width && !data.height && !data.left && data.top) { + data.top = null; + } else if (!data.width && !data.height && !data.top && data.left) { + data.left = null; + } return data; }, _proportionallyResize: function() { - if (!this._proportionallyResizeElements.length) return; - var element = this.helper || this.element; + if (!this._proportionallyResizeElements.length) { + return; + } + + var i, j, borders, paddings, prel, + element = this.helper || this.element; - for (var i=0; i < this._proportionallyResizeElements.length; i++) { + for ( i=0; i < this._proportionallyResizeElements.length; i++) { - var prel = this._proportionallyResizeElements[i]; + prel = this._proportionallyResizeElements[i]; if (!this.borderDif) { - var b = [prel.css('borderTopWidth'), prel.css('borderRightWidth'), prel.css('borderBottomWidth'), prel.css('borderLeftWidth')], - p = [prel.css('paddingTop'), prel.css('paddingRight'), prel.css('paddingBottom'), prel.css('paddingLeft')]; + this.borderDif = []; + borders = [prel.css('borderTopWidth'), prel.css('borderRightWidth'), prel.css('borderBottomWidth'), prel.css('borderLeftWidth')]; + paddings = [prel.css('paddingTop'), prel.css('paddingRight'), prel.css('paddingBottom'), prel.css('paddingLeft')]; - this.borderDif = $.map(b, function(v, i) { - var border = parseInt(v,10)||0, padding = parseInt(p[i],10)||0; - return border + padding; - }); + for ( j = 0; j < borders.length; j++ ) { + this.borderDif[ j ] = ( parseInt( borders[ j ], 10 ) || 0 ) + ( parseInt( paddings[ j ], 10 ) || 0 ); + } } prel.css({ @@ -536,7 +618,7 @@ $.widget("ui.resizable", $.ui.mouse, { _propagate: function(n, event) { $.ui.plugin.call(this, n, [event, this.ui()]); - (n != "resize" && this._trigger(n, event, this.ui())); + (n !== "resize" && this._trigger(n, event, this.ui())); }, plugins: {}, @@ -562,19 +644,19 @@ $.widget("ui.resizable", $.ui.mouse, { $.ui.plugin.add("resizable", "alsoResize", { start: function () { - var that = $(this).data("ui-resizable"), o = that.options; - - var _store = function (exp) { - $(exp).each(function() { - var el = $(this); - el.data("ui-resizable-alsoresize", { - width: parseInt(el.width(), 10), height: parseInt(el.height(), 10), - left: parseInt(el.css('left'), 10), top: parseInt(el.css('top'), 10) + var that = $(this).data("ui-resizable"), + o = that.options, + _store = function (exp) { + $(exp).each(function() { + var el = $(this); + el.data("ui-resizable-alsoresize", { + width: parseInt(el.width(), 10), height: parseInt(el.height(), 10), + left: parseInt(el.css('left'), 10), top: parseInt(el.css('top'), 10) + }); }); - }); - }; + }; - if (typeof(o.alsoResize) == 'object' && !o.alsoResize.parentNode) { + if (typeof(o.alsoResize) === 'object' && !o.alsoResize.parentNode) { if (o.alsoResize.length) { o.alsoResize = o.alsoResize[0]; _store(o.alsoResize); } else { $.each(o.alsoResize, function (exp) { _store(exp); }); } }else{ @@ -583,29 +665,32 @@ $.ui.plugin.add("resizable", "alsoResize", { }, resize: function (event, ui) { - var that = $(this).data("ui-resizable"), o = that.options, os = that.originalSize, op = that.originalPosition; - - var delta = { - height: (that.size.height - os.height) || 0, width: (that.size.width - os.width) || 0, - top: (that.position.top - op.top) || 0, left: (that.position.left - op.left) || 0 - }, - - _alsoResize = function (exp, c) { - $(exp).each(function() { - var el = $(this), start = $(this).data("ui-resizable-alsoresize"), style = {}, - css = c && c.length ? c : el.parents(ui.originalElement[0]).length ? ['width', 'height'] : ['width', 'height', 'top', 'left']; - - $.each(css, function (i, prop) { - var sum = (start[prop]||0) + (delta[prop]||0); - if (sum && sum >= 0) - style[prop] = sum || null; + var that = $(this).data("ui-resizable"), + o = that.options, + os = that.originalSize, + op = that.originalPosition, + delta = { + height: (that.size.height - os.height) || 0, width: (that.size.width - os.width) || 0, + top: (that.position.top - op.top) || 0, left: (that.position.left - op.left) || 0 + }, + + _alsoResize = function (exp, c) { + $(exp).each(function() { + var el = $(this), start = $(this).data("ui-resizable-alsoresize"), style = {}, + css = c && c.length ? c : el.parents(ui.originalElement[0]).length ? ['width', 'height'] : ['width', 'height', 'top', 'left']; + + $.each(css, function (i, prop) { + var sum = (start[prop]||0) + (delta[prop]||0); + if (sum && sum >= 0) { + style[prop] = sum || null; + } + }); + + el.css(style); }); + }; - el.css(style); - }); - }; - - if (typeof(o.alsoResize) == 'object' && !o.alsoResize.nodeType) { + if (typeof(o.alsoResize) === 'object' && !o.alsoResize.nodeType) { $.each(o.alsoResize, function (exp, c) { _alsoResize(exp, c); }); }else{ _alsoResize(o.alsoResize); @@ -620,15 +705,15 @@ $.ui.plugin.add("resizable", "alsoResize", { $.ui.plugin.add("resizable", "animate", { stop: function( event ) { - var that = $(this).data("ui-resizable"), o = that.options; - - var pr = that._proportionallyResizeElements, ista = pr.length && (/textarea/i).test(pr[0].nodeName), - soffseth = ista && $.ui.hasScroll(pr[0], 'left') /* TODO - jump height */ ? 0 : that.sizeDiff.height, - soffsetw = ista ? 0 : that.sizeDiff.width; - - var style = { width: (that.size.width - soffsetw), height: (that.size.height - soffseth) }, - left = (parseInt(that.element.css('left'), 10) + (that.position.left - that.originalPosition.left)) || null, - top = (parseInt(that.element.css('top'), 10) + (that.position.top - that.originalPosition.top)) || null; + var that = $(this).data("ui-resizable"), + o = that.options, + pr = that._proportionallyResizeElements, + ista = pr.length && (/textarea/i).test(pr[0].nodeName), + soffseth = ista && $.ui.hasScroll(pr[0], 'left') /* TODO - jump height */ ? 0 : that.sizeDiff.height, + soffsetw = ista ? 0 : that.sizeDiff.width, + style = { width: (that.size.width - soffsetw), height: (that.size.height - soffseth) }, + left = (parseInt(that.element.css('left'), 10) + (that.position.left - that.originalPosition.left)) || null, + top = (parseInt(that.element.css('top'), 10) + (that.position.top - that.originalPosition.top)) || null; that.element.animate( $.extend(style, top && left ? { top: top, left: left } : {}), { @@ -643,7 +728,9 @@ $.ui.plugin.add("resizable", "animate", { left: parseInt(that.element.css('left'), 10) }; - if (pr && pr.length) $(pr[0]).css({ width: data.width, height: data.height }); + if (pr && pr.length) { + $(pr[0]).css({ width: data.width, height: data.height }); + } // propagating resize, and updating values for each animation step that._updateCache(data); @@ -659,13 +746,20 @@ $.ui.plugin.add("resizable", "animate", { $.ui.plugin.add("resizable", "containment", { start: function() { - var that = $(this).data("ui-resizable"), o = that.options, el = that.element; - var oc = o.containment, ce = (oc instanceof $) ? oc.get(0) : (/parent/.test(oc)) ? el.parent().get(0) : oc; - if (!ce) return; + var element, p, co, ch, cw, width, height, + that = $(this).data("ui-resizable"), + o = that.options, + el = that.element, + oc = o.containment, + ce = (oc instanceof $) ? oc.get(0) : (/parent/.test(oc)) ? el.parent().get(0) : oc; + + if (!ce) { + return; + } that.containerElement = $(ce); - if (/document/.test(oc) || oc == document) { + if (/document/.test(oc) || oc === document) { that.containerOffset = { left: 0, top: 0 }; that.containerPosition = { left: 0, top: 0 }; @@ -677,15 +771,19 @@ $.ui.plugin.add("resizable", "containment", { // i'm a node, so compute top, left, right, bottom else { - var element = $(ce), p = []; + element = $(ce); + p = []; $([ "Top", "Right", "Left", "Bottom" ]).each(function(i, name) { p[i] = num(element.css("padding" + name)); }); that.containerOffset = element.offset(); that.containerPosition = element.position(); that.containerSize = { height: (element.innerHeight() - p[3]), width: (element.innerWidth() - p[1]) }; - var co = that.containerOffset, ch = that.containerSize.height, cw = that.containerSize.width, - width = ($.ui.hasScroll(ce, "left") ? ce.scrollWidth : cw ), height = ($.ui.hasScroll(ce) ? ce.scrollHeight : ch); + co = that.containerOffset; + ch = that.containerSize.height; + cw = that.containerSize.width; + width = ($.ui.hasScroll(ce, "left") ? ce.scrollWidth : cw ); + height = ($.ui.hasScroll(ce) ? ce.scrollHeight : ch); that.parentData = { element: ce, left: co.left, top: co.top, width: width, height: height @@ -694,57 +792,79 @@ $.ui.plugin.add("resizable", "containment", { }, resize: function( event ) { - var that = $(this).data("ui-resizable"), o = that.options, + var woset, hoset, isParent, isOffsetRelative, + that = $(this).data("ui-resizable"), + o = that.options, co = that.containerOffset, cp = that.position, - pRatio = that._aspectRatio || event.shiftKey, cop = { top:0, left:0 }, ce = that.containerElement; + pRatio = that._aspectRatio || event.shiftKey, + cop = { top:0, left:0 }, ce = that.containerElement; - if (ce[0] != document && (/static/).test(ce.css('position'))) cop = co; + if (ce[0] !== document && (/static/).test(ce.css('position'))) { + cop = co; + } if (cp.left < (that._helper ? co.left : 0)) { that.size.width = that.size.width + (that._helper ? (that.position.left - co.left) : (that.position.left - cop.left)); - if (pRatio) that.size.height = that.size.width / that.aspectRatio; + if (pRatio) { + that.size.height = that.size.width / that.aspectRatio; + } that.position.left = o.helper ? co.left : 0; } if (cp.top < (that._helper ? co.top : 0)) { that.size.height = that.size.height + (that._helper ? (that.position.top - co.top) : that.position.top); - if (pRatio) that.size.width = that.size.height * that.aspectRatio; + if (pRatio) { + that.size.width = that.size.height * that.aspectRatio; + } that.position.top = that._helper ? co.top : 0; } that.offset.left = that.parentData.left+that.position.left; that.offset.top = that.parentData.top+that.position.top; - var woset = Math.abs( (that._helper ? that.offset.left - cop.left : (that.offset.left - cop.left)) + that.sizeDiff.width ), - hoset = Math.abs( (that._helper ? that.offset.top - cop.top : (that.offset.top - co.top)) + that.sizeDiff.height ); + woset = Math.abs( (that._helper ? that.offset.left - cop.left : (that.offset.left - cop.left)) + that.sizeDiff.width ); + hoset = Math.abs( (that._helper ? that.offset.top - cop.top : (that.offset.top - co.top)) + that.sizeDiff.height ); - var isParent = that.containerElement.get(0) == that.element.parent().get(0), - isOffsetRelative = /relative|absolute/.test(that.containerElement.css('position')); + isParent = that.containerElement.get(0) === that.element.parent().get(0); + isOffsetRelative = /relative|absolute/.test(that.containerElement.css('position')); - if(isParent && isOffsetRelative) woset -= that.parentData.left; + if(isParent && isOffsetRelative) { + woset -= that.parentData.left; + } if (woset + that.size.width >= that.parentData.width) { that.size.width = that.parentData.width - woset; - if (pRatio) that.size.height = that.size.width / that.aspectRatio; + if (pRatio) { + that.size.height = that.size.width / that.aspectRatio; + } } if (hoset + that.size.height >= that.parentData.height) { that.size.height = that.parentData.height - hoset; - if (pRatio) that.size.width = that.size.height * that.aspectRatio; + if (pRatio) { + that.size.width = that.size.height * that.aspectRatio; + } } }, stop: function(){ - var that = $(this).data("ui-resizable"), o = that.options, - co = that.containerOffset, cop = that.containerPosition, ce = that.containerElement; - - var helper = $(that.helper), ho = helper.offset(), w = helper.outerWidth() - that.sizeDiff.width, h = helper.outerHeight() - that.sizeDiff.height; - - if (that._helper && !o.animate && (/relative/).test(ce.css('position'))) + var that = $(this).data("ui-resizable"), + o = that.options, + co = that.containerOffset, + cop = that.containerPosition, + ce = that.containerElement, + helper = $(that.helper), + ho = helper.offset(), + w = helper.outerWidth() - that.sizeDiff.width, + h = helper.outerHeight() - that.sizeDiff.height; + + if (that._helper && !o.animate && (/relative/).test(ce.css('position'))) { $(this).css({ left: ho.left - cop.left - co.left, width: w, height: h }); + } - if (that._helper && !o.animate && (/static/).test(ce.css('position'))) + if (that._helper && !o.animate && (/static/).test(ce.css('position'))) { $(this).css({ left: ho.left - cop.left - co.left, width: w, height: h }); + } } }); @@ -759,7 +879,7 @@ $.ui.plugin.add("resizable", "ghost", { that.ghost .css({ opacity: 0.25, display: 'block', position: 'relative', height: cs.height, width: cs.width, margin: 0, left: 0, top: 0 }) .addClass('ui-resizable-ghost') - .addClass(typeof o.ghost == 'string' ? o.ghost : ''); + .addClass(typeof o.ghost === 'string' ? o.ghost : ''); that.ghost.appendTo(that.helper); @@ -767,12 +887,16 @@ $.ui.plugin.add("resizable", "ghost", { resize: function(){ var that = $(this).data("ui-resizable"); - if (that.ghost) that.ghost.css({ position: 'relative', height: that.size.height, width: that.size.width }); + if (that.ghost) { + that.ghost.css({ position: 'relative', height: that.size.height, width: that.size.width }); + } }, stop: function() { var that = $(this).data("ui-resizable"); - if (that.ghost && that.helper) that.helper.get(0).removeChild(that.ghost.get(0)); + if (that.ghost && that.helper) { + that.helper.get(0).removeChild(that.ghost.get(0)); + } } }); @@ -780,13 +904,25 @@ $.ui.plugin.add("resizable", "ghost", { $.ui.plugin.add("resizable", "grid", { resize: function() { - var that = $(this).data("ui-resizable"), o = that.options, cs = that.size, os = that.originalSize, op = that.originalPosition, a = that.axis; - o.grid = typeof o.grid == "number" ? [o.grid, o.grid] : o.grid; - var gridX = (o.grid[0]||1), gridY = (o.grid[1]||1), - ox = Math.round((cs.width - os.width) / gridX) * gridX, oy = Math.round((cs.height - os.height) / gridY) * gridY, - newWidth = os.width + ox, newHeight = os.height + oy, - isMaxWidth = o.maxWidth && (o.maxWidth < newWidth), isMaxHeight = o.maxHeight && (o.maxHeight < newHeight), - isMinWidth = o.minWidth && (o.minWidth > newWidth), isMinHeight = o.minHeight && (o.minHeight > newHeight); + var that = $(this).data("ui-resizable"), + o = that.options, + cs = that.size, + os = that.originalSize, + op = that.originalPosition, + a = that.axis, + grid = typeof o.grid === "number" ? [o.grid, o.grid] : o.grid, + gridX = (grid[0]||1), + gridY = (grid[1]||1), + ox = Math.round((cs.width - os.width) / gridX) * gridX, + oy = Math.round((cs.height - os.height) / gridY) * gridY, + newWidth = os.width + ox, + newHeight = os.height + oy, + isMaxWidth = o.maxWidth && (o.maxWidth < newWidth), + isMaxHeight = o.maxHeight && (o.maxHeight < newHeight), + isMinWidth = o.minWidth && (o.minWidth > newWidth), + isMinHeight = o.minHeight && (o.minHeight > newHeight); + + o.grid = grid; if (isMinWidth) { newWidth = newWidth + gridX; -- cgit v1.2.3 From a1b32b59d57c2171af9ba0ed6b35ccde28794e3b Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Sat, 17 Nov 2012 01:29:39 -0500 Subject: Resizable: use css() instead of position() for absolute placement. Fixes #3815 - Resizable: absolutely positioned element inside scrollable element is repositioned when resized --- tests/unit/resizable/resizable_core.js | 23 ++++++++++++++++++++++- ui/jquery.ui.resizable.js | 5 +++-- 2 files changed, 25 insertions(+), 3 deletions(-) (limited to 'ui/jquery.ui.resizable.js') diff --git a/tests/unit/resizable/resizable_core.js b/tests/unit/resizable/resizable_core.js index 447499f05..13da26ece 100644 --- a/tests/unit/resizable/resizable_core.js +++ b/tests/unit/resizable/resizable_core.js @@ -162,7 +162,7 @@ test("handle with complex markup (#8756)", function() { ); var handle = '.ui-resizable-w div', target = $('#resizable1').resizable({ handles: 'all' }); - + TestHelpers.resizable.drag(handle, -50); equal( target.width(), 150, "compare width" ); @@ -170,4 +170,25 @@ test("handle with complex markup (#8756)", function() { equal( target.width(), 100, "compare width" ); }); +test("resizable accounts for scroll position correctly (#3815)", function() { + expect( 3 ); + + var position, top, left, + container = $("
").appendTo("#qunit-fixture"), + overflowed = $("
").appendTo( container ), + el = $("
").appendTo( overflowed ).resizable({ handles: 'all' }), + handle = ".ui-resizable-e"; + + container.scrollLeft( 100 ).scrollTop( 100 ); + + position = el.position(); + left = el.css("left"); + top = el.css("top"); + + TestHelpers.resizable.drag(handle, 50, 50); + deepEqual( el.position(), position, "position stays the same when resized" ); + equal( el.css("left"), left, "css('left') stays the same when resized" ); + equal( el.css("top"), top, "css('top') stays the same when resized" ); +}); + })(jQuery); diff --git a/ui/jquery.ui.resizable.js b/ui/jquery.ui.resizable.js index 50cc19e47..41f3c03c0 100644 --- a/ui/jquery.ui.resizable.js +++ b/ui/jquery.ui.resizable.js @@ -266,10 +266,11 @@ $.widget("ui.resizable", $.ui.mouse, { el = this.element; this.resizing = true; - this.documentScroll = { top: $(document).scrollTop(), left: $(document).scrollLeft() }; // bugfix for http://dev.jquery.com/ticket/1749 - if (el.is('.ui-draggable') || (/absolute/).test(el.css('position'))) { + if ( (/absolute/).test( el.css('position') ) ) { + el.css({ position: 'absolute', top: el.css('top'), left: el.css('left') }); + } else if (el.is('.ui-draggable')) { el.css({ position: 'absolute', top: iniPos.top, left: iniPos.left }); } -- cgit v1.2.3