diff options
Diffstat (limited to 'ui/jquery.ui.resizable.js')
| -rw-r--r-- | ui/jquery.ui.resizable.js | 182 |
1 files changed, 96 insertions, 86 deletions
diff --git a/ui/jquery.ui.resizable.js b/ui/jquery.ui.resizable.js index cc82b8b92..fba9216e1 100644 --- a/ui/jquery.ui.resizable.js +++ b/ui/jquery.ui.resizable.js @@ -15,6 +15,16 @@ */ (function( $, undefined ) { +/*jshint onevar: false, curly: false, eqeqeq: false, funcscope: true, loopfunc: true */ + +function num(v) { + return parseInt(v, 10) || 0; +} + +function isNumber(value) { + return !isNaN(parseInt(value, 10)); +} + $.widget("ui.resizable", $.ui.mouse, { version: "@VERSION", widgetEventPrefix: "resize", @@ -65,7 +75,7 @@ $.widget("ui.resizable", $.ui.mouse, { //Overwrite the original this.element this.element = this.element.parent().data( - "resizable", this.element.data('resizable') + "ui-resizable", this.element.data('ui-resizable') ); this.elementIsWrapper = true; @@ -106,7 +116,7 @@ $.widget("ui.resizable", $.ui.mouse, { //TODO : What's going on here? if ('se' == handle) { axis.addClass('ui-icon ui-icon-gripsmall-diagonal-se'); - }; + } //Insert into internal handles object and append to element this.handles[handle] = '.ui-resizable-'+handle; @@ -204,15 +214,14 @@ $.widget("ui.resizable", $.ui.mouse, { if (this.elementIsWrapper) { _destroy(this.element); var wrapper = this.element; - wrapper.after( - this.originalElement.css({ - position: wrapper.css('position'), - width: wrapper.outerWidth(), - height: wrapper.outerHeight(), - top: wrapper.css('top'), - left: wrapper.css('left') - }) - ).remove(); + this.originalElement.css({ + position: wrapper.css('position'), + width: wrapper.outerWidth(), + height: wrapper.outerHeight(), + top: wrapper.css('top'), + left: wrapper.css('left') + }).insertAfter( wrapper ); + wrapper.remove(); } this.originalElement.css('resize', this.originalResizeStyle); @@ -222,14 +231,15 @@ $.widget("ui.resizable", $.ui.mouse, { }, _mouseCapture: function(event) { - var handle = false; + var capture = false; for (var i in this.handles) { - if ($(this.handles[i])[0] == event.target) { - handle = true; + var handle = $(this.handles[i])[0]; + if (handle == event.target || $.contains(handle, event.target)) { + capture = true; } } - return !this.options.disabled && handle; + return !this.options.disabled && capture; }, _mouseStart: function(event) { @@ -276,8 +286,8 @@ $.widget("ui.resizable", $.ui.mouse, { _mouseDrag: function(event) { //Increase performance, avoid regex - var el = this.helper, o = this.options, props = {}, - that = this, smp = this.originalMousePosition, a = this.axis; + var el = this.helper, + smp = this.originalMousePosition, a = this.axis; var dx = (event.pageX-smp.left)||0, dy = (event.pageY-smp.top)||0; var trigger = this._change[a]; @@ -373,7 +383,6 @@ $.widget("ui.resizable", $.ui.mouse, { }, _updateCache: function(data) { - var o = this.options; this.offset = this.helper.offset(); if (isNumber(data.left)) this.position.left = data.left; if (isNumber(data.top)) this.position.top = data.top; @@ -381,9 +390,9 @@ $.widget("ui.resizable", $.ui.mouse, { if (isNumber(data.width)) this.size.width = data.width; }, - _updateRatio: function(data, event) { + _updateRatio: function( data ) { - var o = this.options, 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); @@ -400,11 +409,11 @@ $.widget("ui.resizable", $.ui.mouse, { return data; }, - _respectSize: function(data, event) { + _respectSize: function( data ) { - 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); + 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; @@ -429,7 +438,6 @@ $.widget("ui.resizable", $.ui.mouse, { _proportionallyResize: function() { - var o = this.options; if (!this._proportionallyResizeElements.length) return; var element = this.helper || this.element; @@ -452,7 +460,7 @@ $.widget("ui.resizable", $.ui.mouse, { width: (element.width() - this.borderDif[1] - this.borderDif[3]) || 0 }); - }; + } }, @@ -465,16 +473,12 @@ $.widget("ui.resizable", $.ui.mouse, { this.helper = this.helper || $('<div style="overflow:hidden;"></div>'); - // fix ie6 offset TODO: This seems broken - var ie6offset = ($.ui.ie6 ? 1 : 0), - pxyoffset = ( $.ui.ie6 ? 2 : -1 ); - this.helper.addClass(this._helper).css({ - width: this.element.outerWidth() + pxyoffset, - height: this.element.outerHeight() + pxyoffset, + width: this.element.outerWidth() - 1, + height: this.element.outerHeight() - 1, position: 'absolute', - left: this.elementOffset.left - ie6offset +'px', - top: this.elementOffset.top - ie6offset +'px', + left: this.elementOffset.left +'px', + top: this.elementOffset.top +'px', zIndex: ++o.zIndex //TODO: Don't modify option }); @@ -489,15 +493,15 @@ $.widget("ui.resizable", $.ui.mouse, { }, _change: { - e: function(event, dx, dy) { + e: function(event, dx) { return { width: this.originalSize.width + dx }; }, - w: function(event, dx, dy) { - var o = this.options, cs = this.originalSize, sp = this.originalPosition; + w: function(event, dx) { + var cs = this.originalSize, sp = this.originalPosition; return { left: sp.left + dx, width: cs.width - dx }; }, n: function(event, dx, dy) { - var o = this.options, cs = this.originalSize, sp = this.originalPosition; + var cs = this.originalSize, sp = this.originalPosition; return { top: sp.top + dy, height: cs.height - dy }; }, s: function(event, dx, dy) { @@ -544,13 +548,13 @@ $.widget("ui.resizable", $.ui.mouse, { $.ui.plugin.add("resizable", "alsoResize", { - start: function (event, ui) { - var that = $(this).data("resizable"), o = that.options; + start: function () { + var that = $(this).data("ui-resizable"), o = that.options; var _store = function (exp) { $(exp).each(function() { var el = $(this); - el.data("resizable-alsoresize", { + 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) }); @@ -566,7 +570,7 @@ $.ui.plugin.add("resizable", "alsoResize", { }, resize: function (event, ui) { - var that = $(this).data("resizable"), o = that.options, os = that.originalSize, op = that.originalPosition; + 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, @@ -575,7 +579,7 @@ $.ui.plugin.add("resizable", "alsoResize", { _alsoResize = function (exp, c) { $(exp).each(function() { - var el = $(this), start = $(this).data("resizable-alsoresize"), style = {}, + 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) { @@ -595,15 +599,15 @@ $.ui.plugin.add("resizable", "alsoResize", { } }, - stop: function (event, ui) { + stop: function () { $(this).removeData("resizable-alsoresize"); } }); $.ui.plugin.add("resizable", "animate", { - stop: function(event, ui) { - var that = $(this).data("resizable"), o = that.options; + 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, @@ -641,8 +645,8 @@ $.ui.plugin.add("resizable", "animate", { $.ui.plugin.add("resizable", "containment", { - start: function(event, ui) { - var that = $(this).data("resizable"), o = that.options, el = that.element; + 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; @@ -676,10 +680,10 @@ $.ui.plugin.add("resizable", "containment", { } }, - resize: function(event, ui) { - var that = $(this).data("resizable"), o = that.options, - ps = that.containerSize, co = that.containerOffset, cs = that.size, cp = that.position, - pRatio = that._aspectRatio || event.shiftKey, cop = { top:0, left:0 }, ce = that.containerElement; + resize: function( event ) { + var 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; if (ce[0] != document && (/static/).test(ce.css('position'))) cop = co; @@ -717,8 +721,8 @@ $.ui.plugin.add("resizable", "containment", { } }, - stop: function(event, ui){ - var that = $(this).data("resizable"), o = that.options, cp = that.position, + 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; @@ -734,13 +738,13 @@ $.ui.plugin.add("resizable", "containment", { $.ui.plugin.add("resizable", "ghost", { - start: function(event, ui) { + start: function() { - var that = $(this).data("resizable"), o = that.options, cs = that.size; + var that = $(this).data("ui-resizable"), o = that.options, cs = that.size; that.ghost = that.originalElement.clone(); that.ghost - .css({ opacity: .25, display: 'block', position: 'relative', height: cs.height, width: cs.width, margin: 0, left: 0, top: 0 }) + .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 : ''); @@ -748,13 +752,13 @@ $.ui.plugin.add("resizable", "ghost", { }, - resize: function(event, ui){ - var that = $(this).data("resizable"), o = that.options; + resize: function(){ + var that = $(this).data("ui-resizable"); if (that.ghost) that.ghost.css({ position: 'relative', height: that.size.height, width: that.size.width }); }, - stop: function(event, ui){ - var that = $(this).data("resizable"), o = that.options; + stop: function() { + var that = $(this).data("ui-resizable"); if (that.ghost && that.helper) that.helper.get(0).removeChild(that.ghost.get(0)); } @@ -762,28 +766,42 @@ $.ui.plugin.add("resizable", "ghost", { $.ui.plugin.add("resizable", "grid", { - resize: function(event, ui) { - var that = $(this).data("resizable"), o = that.options, cs = that.size, os = that.originalSize, op = that.originalPosition, a = that.axis, ratio = o._aspectRatio || event.shiftKey; + 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 ox = Math.round((cs.width - os.width) / (o.grid[0]||1)) * (o.grid[0]||1), oy = Math.round((cs.height - os.height) / (o.grid[1]||1)) * (o.grid[1]||1); + 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); + + if (isMinWidth) { + newWidth = newWidth + gridX; + } + if (isMinHeight) { + newHeight = newHeight + gridY; + } + if (isMaxWidth) { + newWidth = newWidth - gridX; + } + if (isMaxHeight) { + newHeight = newHeight - gridY; + } if (/^(se|s|e)$/.test(a)) { - that.size.width = os.width + ox; - that.size.height = os.height + oy; - } - else if (/^(ne)$/.test(a)) { - that.size.width = os.width + ox; - that.size.height = os.height + oy; + that.size.width = newWidth; + that.size.height = newHeight; + } else if (/^(ne)$/.test(a)) { + that.size.width = newWidth; + that.size.height = newHeight; that.position.top = op.top - oy; - } - else if (/^(sw)$/.test(a)) { - that.size.width = os.width + ox; - that.size.height = os.height + oy; + } else if (/^(sw)$/.test(a)) { + that.size.width = newWidth; + that.size.height = newHeight; that.position.left = op.left - ox; - } - else { - that.size.width = os.width + ox; - that.size.height = os.height + oy; + } else { + that.size.width = newWidth; + that.size.height = newHeight; that.position.top = op.top - oy; that.position.left = op.left - ox; } @@ -791,12 +809,4 @@ $.ui.plugin.add("resizable", "grid", { }); -var num = function(v) { - return parseInt(v, 10) || 0; -}; - -var isNumber = function(value) { - return !isNaN(parseInt(value, 10)); -}; - })(jQuery); |