http://2010.igem.org/wiki/index.php?title=Team:TU_Delft/files/jquery.ui.resizable.js&feed=atom&action=history
Team:TU Delft/files/jquery.ui.resizable.js - Revision history
2024-03-29T13:24:41Z
Revision history for this page on the wiki
MediaWiki 1.16.5
http://2010.igem.org/wiki/index.php?title=Team:TU_Delft/files/jquery.ui.resizable.js&diff=102312&oldid=prev
Ptmvanboheemen: New page: /* * jQuery UI Resizable 1.8.4 * * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about) * Dual licensed under the MIT or GPL Version 2 licenses. * http://jquery.org/license * * h...
2010-10-15T10:22:23Z
<p>New page: /* * jQuery UI Resizable 1.8.4 * * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about) * Dual licensed under the MIT or GPL Version 2 licenses. * http://jquery.org/license * * h...</p>
<p><b>New page</b></p><div>/*<br />
* jQuery UI Resizable 1.8.4<br />
*<br />
* Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)<br />
* Dual licensed under the MIT or GPL Version 2 licenses.<br />
* http://jquery.org/license<br />
*<br />
* http://docs.jquery.com/UI/Resizables<br />
*<br />
* Depends:<br />
* jquery.ui.core.js<br />
* jquery.ui.mouse.js<br />
* jquery.ui.widget.js<br />
*/<br />
(function( $, undefined ) {<br />
<br />
$.widget("ui.resizable", $.ui.mouse, {<br />
widgetEventPrefix: "resize",<br />
options: {<br />
alsoResize: false,<br />
animate: false,<br />
animateDuration: "slow",<br />
animateEasing: "swing",<br />
aspectRatio: false,<br />
autoHide: false,<br />
containment: false,<br />
ghost: false,<br />
grid: false,<br />
handles: "e,s,se",<br />
helper: false,<br />
maxHeight: null,<br />
maxWidth: null,<br />
minHeight: 10,<br />
minWidth: 10,<br />
zIndex: 1000<br />
},<br />
_create: function() {<br />
<br />
var self = this, o = this.options;<br />
this.element.addClass("ui-resizable");<br />
<br />
$.extend(this, {<br />
_aspectRatio: !!(o.aspectRatio),<br />
aspectRatio: o.aspectRatio,<br />
originalElement: this.element,<br />
_proportionallyResizeElements: [],<br />
_helper: o.helper || o.ghost || o.animate ? o.helper || 'ui-resizable-helper' : null<br />
});<br />
<br />
//Wrap the element if it cannot hold child nodes<br />
if(this.element[0].nodeName.match(/canvas|textarea|input|select|button|img/i)) {<br />
<br />
//Opera fix for relative positioning<br />
if (/relative/.test(this.element.css('position')) && $.browser.opera)<br />
this.element.css({ position: 'relative', top: 'auto', left: 'auto' });<br />
<br />
//Create a wrapper element and set the wrapper to the new current internal element<br />
this.element.wrap(<br />
$('<div class="ui-wrapper" style="overflow: hidden;"></div>').css({<br />
position: this.element.css('position'),<br />
width: this.element.outerWidth(),<br />
height: this.element.outerHeight(),<br />
top: this.element.css('top'),<br />
left: this.element.css('left')<br />
})<br />
);<br />
<br />
//Overwrite the original this.element<br />
this.element = this.element.parent().data(<br />
"resizable", this.element.data('resizable')<br />
);<br />
<br />
this.elementIsWrapper = true;<br />
<br />
//Move margins to the wrapper<br />
this.element.css({ marginLeft: this.originalElement.css("marginLeft"), marginTop: this.originalElement.css("marginTop"), marginRight: this.originalElement.css("marginRight"), marginBottom: this.originalElement.css("marginBottom") });<br />
this.originalElement.css({ marginLeft: 0, marginTop: 0, marginRight: 0, marginBottom: 0});<br />
<br />
//Prevent Safari textarea resize<br />
this.originalResizeStyle = this.originalElement.css('resize');<br />
this.originalElement.css('resize', 'none');<br />
<br />
//Push the actual element to our proportionallyResize internal array<br />
this._proportionallyResizeElements.push(this.originalElement.css({ position: 'static', zoom: 1, display: 'block' }));<br />
<br />
// avoid IE jump (hard set the margin)<br />
this.originalElement.css({ margin: this.originalElement.css('margin') });<br />
<br />
// fix handlers offset<br />
this._proportionallyResize();<br />
<br />
}<br />
<br />
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' });<br />
if(this.handles.constructor == String) {<br />
<br />
if(this.handles == 'all') this.handles = 'n,e,s,w,se,sw,ne,nw';<br />
var n = this.handles.split(","); this.handles = {};<br />
<br />
for(var i = 0; i < n.length; i++) {<br />
<br />
var handle = $.trim(n[i]), hname = 'ui-resizable-'+handle;<br />
var axis = $('<div class="ui-resizable-handle ' + hname + '"></div>');<br />
<br />
// increase zIndex of sw, se, ne, nw axis<br />
//TODO : this modifies original option<br />
if(/sw|se|ne|nw/.test(handle)) axis.css({ zIndex: ++o.zIndex });<br />
<br />
//TODO : What's going on here?<br />
if ('se' == handle) {<br />
axis.addClass('ui-icon ui-icon-gripsmall-diagonal-se');<br />
};<br />
<br />
//Insert into internal handles object and append to element<br />
this.handles[handle] = '.ui-resizable-'+handle;<br />
this.element.append(axis);<br />
}<br />
<br />
}<br />
<br />
this._renderAxis = function(target) {<br />
<br />
target = target || this.element;<br />
<br />
for(var i in this.handles) {<br />
<br />
if(this.handles[i].constructor == String)<br />
this.handles[i] = $(this.handles[i], this.element).show();<br />
<br />
//Apply pad to wrapper element, needed to fix axis position (textarea, inputs, scrolls)<br />
if (this.elementIsWrapper && this.originalElement[0].nodeName.match(/textarea|input|select|button/i)) {<br />
<br />
var axis = $(this.handles[i], this.element), padWrapper = 0;<br />
<br />
//Checking the correct pad and border<br />
padWrapper = /sw|ne|nw|se|n|s/.test(i) ? axis.outerHeight() : axis.outerWidth();<br />
<br />
//The padding type i have to apply...<br />
var padPos = [ 'padding',<br />
/ne|nw|n/.test(i) ? 'Top' :<br />
/se|sw|s/.test(i) ? 'Bottom' :<br />
/^e$/.test(i) ? 'Right' : 'Left' ].join("");<br />
<br />
target.css(padPos, padWrapper);<br />
<br />
this._proportionallyResize();<br />
<br />
}<br />
<br />
//TODO: What's that good for? There's not anything to be executed left<br />
if(!$(this.handles[i]).length)<br />
continue;<br />
<br />
}<br />
};<br />
<br />
//TODO: make renderAxis a prototype function<br />
this._renderAxis(this.element);<br />
<br />
this._handles = $('.ui-resizable-handle', this.element)<br />
.disableSelection();<br />
<br />
//Matching axis name<br />
this._handles.mouseover(function() {<br />
if (!self.resizing) {<br />
if (this.className)<br />
var axis = this.className.match(/ui-resizable-(se|sw|ne|nw|n|e|s|w)/i);<br />
//Axis, default = se<br />
self.axis = axis && axis[1] ? axis[1] : 'se';<br />
}<br />
});<br />
<br />
//If we want to auto hide the elements<br />
if (o.autoHide) {<br />
this._handles.hide();<br />
$(this.element)<br />
.addClass("ui-resizable-autohide")<br />
.hover(function() {<br />
$(this).removeClass("ui-resizable-autohide");<br />
self._handles.show();<br />
},<br />
function(){<br />
if (!self.resizing) {<br />
$(this).addClass("ui-resizable-autohide");<br />
self._handles.hide();<br />
}<br />
});<br />
}<br />
<br />
//Initialize the mouse interaction<br />
this._mouseInit();<br />
<br />
},<br />
<br />
destroy: function() {<br />
<br />
this._mouseDestroy();<br />
<br />
var _destroy = function(exp) {<br />
$(exp).removeClass("ui-resizable ui-resizable-disabled ui-resizable-resizing")<br />
.removeData("resizable").unbind(".resizable").find('.ui-resizable-handle').remove();<br />
};<br />
<br />
//TODO: Unwrap at same DOM position<br />
if (this.elementIsWrapper) {<br />
_destroy(this.element);<br />
var wrapper = this.element;<br />
wrapper.after(<br />
this.originalElement.css({<br />
position: wrapper.css('position'),<br />
width: wrapper.outerWidth(),<br />
height: wrapper.outerHeight(),<br />
top: wrapper.css('top'),<br />
left: wrapper.css('left')<br />
})<br />
).remove();<br />
}<br />
<br />
this.originalElement.css('resize', this.originalResizeStyle);<br />
_destroy(this.originalElement);<br />
<br />
return this;<br />
},<br />
<br />
_mouseCapture: function(event) {<br />
var handle = false;<br />
for (var i in this.handles) {<br />
if ($(this.handles[i])[0] == event.target) {<br />
handle = true;<br />
}<br />
}<br />
<br />
return !this.options.disabled && handle;<br />
},<br />
<br />
_mouseStart: function(event) {<br />
<br />
var o = this.options, iniPos = this.element.position(), el = this.element;<br />
<br />
this.resizing = true;<br />
this.documentScroll = { top: $(document).scrollTop(), left: $(document).scrollLeft() };<br />
<br />
// bugfix for http://dev.jquery.com/ticket/1749<br />
if (el.is('.ui-draggable') || (/absolute/).test(el.css('position'))) {<br />
el.css({ position: 'absolute', top: iniPos.top, left: iniPos.left });<br />
}<br />
<br />
//Opera fixing relative position<br />
if ($.browser.opera && (/relative/).test(el.css('position')))<br />
el.css({ position: 'relative', top: 'auto', left: 'auto' });<br />
<br />
this._renderProxy();<br />
<br />
var curleft = num(this.helper.css('left')), curtop = num(this.helper.css('top'));<br />
<br />
if (o.containment) {<br />
curleft += $(o.containment).scrollLeft() || 0;<br />
curtop += $(o.containment).scrollTop() || 0;<br />
}<br />
<br />
//Store needed variables<br />
this.offset = this.helper.offset();<br />
this.position = { left: curleft, top: curtop };<br />
this.size = this._helper ? { width: el.outerWidth(), height: el.outerHeight() } : { width: el.width(), height: el.height() };<br />
this.originalSize = this._helper ? { width: el.outerWidth(), height: el.outerHeight() } : { width: el.width(), height: el.height() };<br />
this.originalPosition = { left: curleft, top: curtop };<br />
this.sizeDiff = { width: el.outerWidth() - el.width(), height: el.outerHeight() - el.height() };<br />
this.originalMousePosition = { left: event.pageX, top: event.pageY };<br />
<br />
//Aspect Ratio<br />
this.aspectRatio = (typeof o.aspectRatio == 'number') ? o.aspectRatio : ((this.originalSize.width / this.originalSize.height) || 1);<br />
<br />
var cursor = $('.ui-resizable-' + this.axis).css('cursor');<br />
$('body').css('cursor', cursor == 'auto' ? this.axis + '-resize' : cursor);<br />
<br />
el.addClass("ui-resizable-resizing");<br />
this._propagate("start", event);<br />
return true;<br />
},<br />
<br />
_mouseDrag: function(event) {<br />
<br />
//Increase performance, avoid regex<br />
var el = this.helper, o = this.options, props = {},<br />
self = this, smp = this.originalMousePosition, a = this.axis;<br />
<br />
var dx = (event.pageX-smp.left)||0, dy = (event.pageY-smp.top)||0;<br />
var trigger = this._change[a];<br />
if (!trigger) return false;<br />
<br />
// Calculate the attrs that will be change<br />
var data = trigger.apply(this, [event, dx, dy]), ie6 = $.browser.msie && $.browser.version < 7, csdif = this.sizeDiff;<br />
<br />
if (this._aspectRatio || event.shiftKey)<br />
data = this._updateRatio(data, event);<br />
<br />
data = this._respectSize(data, event);<br />
<br />
// plugins callbacks need to be called first<br />
this._propagate("resize", event);<br />
<br />
el.css({<br />
top: this.position.top + "px", left: this.position.left + "px",<br />
width: this.size.width + "px", height: this.size.height + "px"<br />
});<br />
<br />
if (!this._helper && this._proportionallyResizeElements.length)<br />
this._proportionallyResize();<br />
<br />
this._updateCache(data);<br />
<br />
// calling the user callback at the end<br />
this._trigger('resize', event, this.ui());<br />
<br />
return false;<br />
},<br />
<br />
_mouseStop: function(event) {<br />
<br />
this.resizing = false;<br />
var o = this.options, self = this;<br />
<br />
if(this._helper) {<br />
var pr = this._proportionallyResizeElements, ista = pr.length && (/textarea/i).test(pr[0].nodeName),<br />
soffseth = ista && $.ui.hasScroll(pr[0], 'left') /* TODO - jump height */ ? 0 : self.sizeDiff.height,<br />
soffsetw = ista ? 0 : self.sizeDiff.width;<br />
<br />
var s = { width: (self.size.width - soffsetw), height: (self.size.height - soffseth) },<br />
left = (parseInt(self.element.css('left'), 10) + (self.position.left - self.originalPosition.left)) || null,<br />
top = (parseInt(self.element.css('top'), 10) + (self.position.top - self.originalPosition.top)) || null;<br />
<br />
if (!o.animate)<br />
this.element.css($.extend(s, { top: top, left: left }));<br />
<br />
self.helper.height(self.size.height);<br />
self.helper.width(self.size.width);<br />
<br />
if (this._helper && !o.animate) this._proportionallyResize();<br />
}<br />
<br />
$('body').css('cursor', 'auto');<br />
<br />
this.element.removeClass("ui-resizable-resizing");<br />
<br />
this._propagate("stop", event);<br />
<br />
if (this._helper) this.helper.remove();<br />
return false;<br />
<br />
},<br />
<br />
_updateCache: function(data) {<br />
var o = this.options;<br />
this.offset = this.helper.offset();<br />
if (isNumber(data.left)) this.position.left = data.left;<br />
if (isNumber(data.top)) this.position.top = data.top;<br />
if (isNumber(data.height)) this.size.height = data.height;<br />
if (isNumber(data.width)) this.size.width = data.width;<br />
},<br />
<br />
_updateRatio: function(data, event) {<br />
<br />
var o = this.options, cpos = this.position, csize = this.size, a = this.axis;<br />
<br />
if (data.height) data.width = (csize.height * this.aspectRatio);<br />
else if (data.width) data.height = (csize.width / this.aspectRatio);<br />
<br />
if (a == 'sw') {<br />
data.left = cpos.left + (csize.width - data.width);<br />
data.top = null;<br />
}<br />
if (a == 'nw') {<br />
data.top = cpos.top + (csize.height - data.height);<br />
data.left = cpos.left + (csize.width - data.width);<br />
}<br />
<br />
return data;<br />
},<br />
<br />
_respectSize: function(data, event) {<br />
<br />
var el = this.helper, o = this.options, pRatio = this._aspectRatio || event.shiftKey, a = this.axis,<br />
ismaxw = isNumber(data.width) && o.maxWidth && (o.maxWidth < data.width), ismaxh = isNumber(data.height) && o.maxHeight && (o.maxHeight < data.height),<br />
isminw = isNumber(data.width) && o.minWidth && (o.minWidth > data.width), isminh = isNumber(data.height) && o.minHeight && (o.minHeight > data.height);<br />
<br />
if (isminw) data.width = o.minWidth;<br />
if (isminh) data.height = o.minHeight;<br />
if (ismaxw) data.width = o.maxWidth;<br />
if (ismaxh) data.height = o.maxHeight;<br />
<br />
var dw = this.originalPosition.left + this.originalSize.width, dh = this.position.top + this.size.height;<br />
var cw = /sw|nw|w/.test(a), ch = /nw|ne|n/.test(a);<br />
<br />
if (isminw && cw) data.left = dw - o.minWidth;<br />
if (ismaxw && cw) data.left = dw - o.maxWidth;<br />
if (isminh && ch) data.top = dh - o.minHeight;<br />
if (ismaxh && ch) data.top = dh - o.maxHeight;<br />
<br />
// fixing jump error on top/left - bug #2330<br />
var isNotwh = !data.width && !data.height;<br />
if (isNotwh && !data.left && data.top) data.top = null;<br />
else if (isNotwh && !data.top && data.left) data.left = null;<br />
<br />
return data;<br />
},<br />
<br />
_proportionallyResize: function() {<br />
<br />
var o = this.options;<br />
if (!this._proportionallyResizeElements.length) return;<br />
var element = this.helper || this.element;<br />
<br />
for (var i=0; i < this._proportionallyResizeElements.length; i++) {<br />
<br />
var prel = this._proportionallyResizeElements[i];<br />
<br />
if (!this.borderDif) {<br />
var b = [prel.css('borderTopWidth'), prel.css('borderRightWidth'), prel.css('borderBottomWidth'), prel.css('borderLeftWidth')],<br />
p = [prel.css('paddingTop'), prel.css('paddingRight'), prel.css('paddingBottom'), prel.css('paddingLeft')];<br />
<br />
this.borderDif = $.map(b, function(v, i) {<br />
var border = parseInt(v,10)||0, padding = parseInt(p[i],10)||0;<br />
return border + padding;<br />
});<br />
}<br />
<br />
if ($.browser.msie && !(!($(element).is(':hidden') || $(element).parents(':hidden').length)))<br />
continue;<br />
<br />
prel.css({<br />
height: (element.height() - this.borderDif[0] - this.borderDif[2]) || 0,<br />
width: (element.width() - this.borderDif[1] - this.borderDif[3]) || 0<br />
});<br />
<br />
};<br />
<br />
},<br />
<br />
_renderProxy: function() {<br />
<br />
var el = this.element, o = this.options;<br />
this.elementOffset = el.offset();<br />
<br />
if(this._helper) {<br />
<br />
this.helper = this.helper || $('<div style="overflow:hidden;"></div>');<br />
<br />
// fix ie6 offset TODO: This seems broken<br />
var ie6 = $.browser.msie && $.browser.version < 7, ie6offset = (ie6 ? 1 : 0),<br />
pxyoffset = ( ie6 ? 2 : -1 );<br />
<br />
this.helper.addClass(this._helper).css({<br />
width: this.element.outerWidth() + pxyoffset,<br />
height: this.element.outerHeight() + pxyoffset,<br />
position: 'absolute',<br />
left: this.elementOffset.left - ie6offset +'px',<br />
top: this.elementOffset.top - ie6offset +'px',<br />
zIndex: ++o.zIndex //TODO: Don't modify option<br />
});<br />
<br />
this.helper<br />
.appendTo("body")<br />
.disableSelection();<br />
<br />
} else {<br />
this.helper = this.element;<br />
}<br />
<br />
},<br />
<br />
_change: {<br />
e: function(event, dx, dy) {<br />
return { width: this.originalSize.width + dx };<br />
},<br />
w: function(event, dx, dy) {<br />
var o = this.options, cs = this.originalSize, sp = this.originalPosition;<br />
return { left: sp.left + dx, width: cs.width - dx };<br />
},<br />
n: function(event, dx, dy) {<br />
var o = this.options, cs = this.originalSize, sp = this.originalPosition;<br />
return { top: sp.top + dy, height: cs.height - dy };<br />
},<br />
s: function(event, dx, dy) {<br />
return { height: this.originalSize.height + dy };<br />
},<br />
se: function(event, dx, dy) {<br />
return $.extend(this._change.s.apply(this, arguments), this._change.e.apply(this, [event, dx, dy]));<br />
},<br />
sw: function(event, dx, dy) {<br />
return $.extend(this._change.s.apply(this, arguments), this._change.w.apply(this, [event, dx, dy]));<br />
},<br />
ne: function(event, dx, dy) {<br />
return $.extend(this._change.n.apply(this, arguments), this._change.e.apply(this, [event, dx, dy]));<br />
},<br />
nw: function(event, dx, dy) {<br />
return $.extend(this._change.n.apply(this, arguments), this._change.w.apply(this, [event, dx, dy]));<br />
}<br />
},<br />
<br />
_propagate: function(n, event) {<br />
$.ui.plugin.call(this, n, [event, this.ui()]);<br />
(n != "resize" && this._trigger(n, event, this.ui()));<br />
},<br />
<br />
plugins: {},<br />
<br />
ui: function() {<br />
return {<br />
originalElement: this.originalElement,<br />
element: this.element,<br />
helper: this.helper,<br />
position: this.position,<br />
size: this.size,<br />
originalSize: this.originalSize,<br />
originalPosition: this.originalPosition<br />
};<br />
}<br />
<br />
});<br />
<br />
$.extend($.ui.resizable, {<br />
version: "1.8.4"<br />
});<br />
<br />
/*<br />
* Resizable Extensions<br />
*/<br />
<br />
$.ui.plugin.add("resizable", "alsoResize", {<br />
<br />
start: function (event, ui) {<br />
var self = $(this).data("resizable"), o = self.options;<br />
<br />
var _store = function (exp) {<br />
$(exp).each(function() {<br />
var el = $(this);<br />
el.data("resizable-alsoresize", {<br />
width: parseInt(el.width(), 10), height: parseInt(el.height(), 10),<br />
left: parseInt(el.css('left'), 10), top: parseInt(el.css('top'), 10),<br />
position: el.css('position') // to reset Opera on stop()<br />
});<br />
});<br />
};<br />
<br />
if (typeof(o.alsoResize) == 'object' && !o.alsoResize.parentNode) {<br />
if (o.alsoResize.length) { o.alsoResize = o.alsoResize[0]; _store(o.alsoResize); }<br />
else { $.each(o.alsoResize, function (exp) { _store(exp); }); }<br />
}else{<br />
_store(o.alsoResize);<br />
}<br />
},<br />
<br />
resize: function (event, ui) {<br />
var self = $(this).data("resizable"), o = self.options, os = self.originalSize, op = self.originalPosition;<br />
<br />
var delta = {<br />
height: (self.size.height - os.height) || 0, width: (self.size.width - os.width) || 0,<br />
top: (self.position.top - op.top) || 0, left: (self.position.left - op.left) || 0<br />
},<br />
<br />
_alsoResize = function (exp, c) {<br />
$(exp).each(function() {<br />
var el = $(this), start = $(this).data("resizable-alsoresize"), style = {}, <br />
css = c && c.length ? c : el.parents(ui.originalElement[0]).length ? ['width', 'height'] : ['width', 'height', 'top', 'left'];<br />
<br />
$.each(css, function (i, prop) {<br />
var sum = (start[prop]||0) + (delta[prop]||0);<br />
if (sum && sum >= 0)<br />
style[prop] = sum || null;<br />
});<br />
<br />
// Opera fixing relative position<br />
if ($.browser.opera && /relative/.test(el.css('position'))) {<br />
self._revertToRelativePosition = true;<br />
el.css({ position: 'absolute', top: 'auto', left: 'auto' });<br />
}<br />
<br />
el.css(style);<br />
});<br />
};<br />
<br />
if (typeof(o.alsoResize) == 'object' && !o.alsoResize.nodeType) {<br />
$.each(o.alsoResize, function (exp, c) { _alsoResize(exp, c); });<br />
}else{<br />
_alsoResize(o.alsoResize);<br />
}<br />
},<br />
<br />
stop: function (event, ui) {<br />
var self = $(this).data("resizable"), o = self.options;<br />
<br />
var _reset = function (exp) {<br />
$(exp).each(function() {<br />
var el = $(this);<br />
// reset position for Opera - no need to verify it was changed<br />
el.css({ position: el.data("resizable-alsoresize").position });<br />
});<br />
}<br />
<br />
if (self._revertToRelativePosition) {<br />
self._revertToRelativePosition = false;<br />
if (typeof(o.alsoResize) == 'object' && !o.alsoResize.nodeType) {<br />
$.each(o.alsoResize, function (exp) { _reset(exp); });<br />
}else{<br />
_reset(o.alsoResize);<br />
}<br />
}<br />
<br />
$(this).removeData("resizable-alsoresize");<br />
}<br />
});<br />
<br />
$.ui.plugin.add("resizable", "animate", {<br />
<br />
stop: function(event, ui) {<br />
var self = $(this).data("resizable"), o = self.options;<br />
<br />
var pr = self._proportionallyResizeElements, ista = pr.length && (/textarea/i).test(pr[0].nodeName),<br />
soffseth = ista && $.ui.hasScroll(pr[0], 'left') /* TODO - jump height */ ? 0 : self.sizeDiff.height,<br />
soffsetw = ista ? 0 : self.sizeDiff.width;<br />
<br />
var style = { width: (self.size.width - soffsetw), height: (self.size.height - soffseth) },<br />
left = (parseInt(self.element.css('left'), 10) + (self.position.left - self.originalPosition.left)) || null,<br />
top = (parseInt(self.element.css('top'), 10) + (self.position.top - self.originalPosition.top)) || null;<br />
<br />
self.element.animate(<br />
$.extend(style, top && left ? { top: top, left: left } : {}), {<br />
duration: o.animateDuration,<br />
easing: o.animateEasing,<br />
step: function() {<br />
<br />
var data = {<br />
width: parseInt(self.element.css('width'), 10),<br />
height: parseInt(self.element.css('height'), 10),<br />
top: parseInt(self.element.css('top'), 10),<br />
left: parseInt(self.element.css('left'), 10)<br />
};<br />
<br />
if (pr && pr.length) $(pr[0]).css({ width: data.width, height: data.height });<br />
<br />
// propagating resize, and updating values for each animation step<br />
self._updateCache(data);<br />
self._propagate("resize", event);<br />
<br />
}<br />
}<br />
);<br />
}<br />
<br />
});<br />
<br />
$.ui.plugin.add("resizable", "containment", {<br />
<br />
start: function(event, ui) {<br />
var self = $(this).data("resizable"), o = self.options, el = self.element;<br />
var oc = o.containment, ce = (oc instanceof $) ? oc.get(0) : (/parent/.test(oc)) ? el.parent().get(0) : oc;<br />
if (!ce) return;<br />
<br />
self.containerElement = $(ce);<br />
<br />
if (/document/.test(oc) || oc == document) {<br />
self.containerOffset = { left: 0, top: 0 };<br />
self.containerPosition = { left: 0, top: 0 };<br />
<br />
self.parentData = {<br />
element: $(document), left: 0, top: 0,<br />
width: $(document).width(), height: $(document).height() || document.body.parentNode.scrollHeight<br />
};<br />
}<br />
<br />
// i'm a node, so compute top, left, right, bottom<br />
else {<br />
var element = $(ce), p = [];<br />
$([ "Top", "Right", "Left", "Bottom" ]).each(function(i, name) { p[i] = num(element.css("padding" + name)); });<br />
<br />
self.containerOffset = element.offset();<br />
self.containerPosition = element.position();<br />
self.containerSize = { height: (element.innerHeight() - p[3]), width: (element.innerWidth() - p[1]) };<br />
<br />
var co = self.containerOffset, ch = self.containerSize.height, cw = self.containerSize.width,<br />
width = ($.ui.hasScroll(ce, "left") ? ce.scrollWidth : cw ), height = ($.ui.hasScroll(ce) ? ce.scrollHeight : ch);<br />
<br />
self.parentData = {<br />
element: ce, left: co.left, top: co.top, width: width, height: height<br />
};<br />
}<br />
},<br />
<br />
resize: function(event, ui) {<br />
var self = $(this).data("resizable"), o = self.options,<br />
ps = self.containerSize, co = self.containerOffset, cs = self.size, cp = self.position,<br />
pRatio = self._aspectRatio || event.shiftKey, cop = { top:0, left:0 }, ce = self.containerElement;<br />
<br />
if (ce[0] != document && (/static/).test(ce.css('position'))) cop = co;<br />
<br />
if (cp.left < (self._helper ? co.left : 0)) {<br />
self.size.width = self.size.width + (self._helper ? (self.position.left - co.left) : (self.position.left - cop.left));<br />
if (pRatio) self.size.height = self.size.width / o.aspectRatio;<br />
self.position.left = o.helper ? co.left : 0;<br />
}<br />
<br />
if (cp.top < (self._helper ? co.top : 0)) {<br />
self.size.height = self.size.height + (self._helper ? (self.position.top - co.top) : self.position.top);<br />
if (pRatio) self.size.width = self.size.height * o.aspectRatio;<br />
self.position.top = self._helper ? co.top : 0;<br />
}<br />
<br />
self.offset.left = self.parentData.left+self.position.left;<br />
self.offset.top = self.parentData.top+self.position.top;<br />
<br />
var woset = Math.abs( (self._helper ? self.offset.left - cop.left : (self.offset.left - cop.left)) + self.sizeDiff.width ),<br />
hoset = Math.abs( (self._helper ? self.offset.top - cop.top : (self.offset.top - co.top)) + self.sizeDiff.height );<br />
<br />
var isParent = self.containerElement.get(0) == self.element.parent().get(0),<br />
isOffsetRelative = /relative|absolute/.test(self.containerElement.css('position'));<br />
<br />
if(isParent && isOffsetRelative) woset -= self.parentData.left;<br />
<br />
if (woset + self.size.width >= self.parentData.width) {<br />
self.size.width = self.parentData.width - woset;<br />
if (pRatio) self.size.height = self.size.width / self.aspectRatio;<br />
}<br />
<br />
if (hoset + self.size.height >= self.parentData.height) {<br />
self.size.height = self.parentData.height - hoset;<br />
if (pRatio) self.size.width = self.size.height * self.aspectRatio;<br />
}<br />
},<br />
<br />
stop: function(event, ui){<br />
var self = $(this).data("resizable"), o = self.options, cp = self.position,<br />
co = self.containerOffset, cop = self.containerPosition, ce = self.containerElement;<br />
<br />
var helper = $(self.helper), ho = helper.offset(), w = helper.outerWidth() - self.sizeDiff.width, h = helper.outerHeight() - self.sizeDiff.height;<br />
<br />
if (self._helper && !o.animate && (/relative/).test(ce.css('position')))<br />
$(this).css({ left: ho.left - cop.left - co.left, width: w, height: h });<br />
<br />
if (self._helper && !o.animate && (/static/).test(ce.css('position')))<br />
$(this).css({ left: ho.left - cop.left - co.left, width: w, height: h });<br />
<br />
}<br />
});<br />
<br />
$.ui.plugin.add("resizable", "ghost", {<br />
<br />
start: function(event, ui) {<br />
<br />
var self = $(this).data("resizable"), o = self.options, cs = self.size;<br />
<br />
self.ghost = self.originalElement.clone();<br />
self.ghost<br />
.css({ opacity: .25, display: 'block', position: 'relative', height: cs.height, width: cs.width, margin: 0, left: 0, top: 0 })<br />
.addClass('ui-resizable-ghost')<br />
.addClass(typeof o.ghost == 'string' ? o.ghost : '');<br />
<br />
self.ghost.appendTo(self.helper);<br />
<br />
},<br />
<br />
resize: function(event, ui){<br />
var self = $(this).data("resizable"), o = self.options;<br />
if (self.ghost) self.ghost.css({ position: 'relative', height: self.size.height, width: self.size.width });<br />
},<br />
<br />
stop: function(event, ui){<br />
var self = $(this).data("resizable"), o = self.options;<br />
if (self.ghost && self.helper) self.helper.get(0).removeChild(self.ghost.get(0));<br />
}<br />
<br />
});<br />
<br />
$.ui.plugin.add("resizable", "grid", {<br />
<br />
resize: function(event, ui) {<br />
var self = $(this).data("resizable"), o = self.options, cs = self.size, os = self.originalSize, op = self.originalPosition, a = self.axis, ratio = o._aspectRatio || event.shiftKey;<br />
o.grid = typeof o.grid == "number" ? [o.grid, o.grid] : o.grid;<br />
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);<br />
<br />
if (/^(se|s|e)$/.test(a)) {<br />
self.size.width = os.width + ox;<br />
self.size.height = os.height + oy;<br />
}<br />
else if (/^(ne)$/.test(a)) {<br />
self.size.width = os.width + ox;<br />
self.size.height = os.height + oy;<br />
self.position.top = op.top - oy;<br />
}<br />
else if (/^(sw)$/.test(a)) {<br />
self.size.width = os.width + ox;<br />
self.size.height = os.height + oy;<br />
self.position.left = op.left - ox;<br />
}<br />
else {<br />
self.size.width = os.width + ox;<br />
self.size.height = os.height + oy;<br />
self.position.top = op.top - oy;<br />
self.position.left = op.left - ox;<br />
}<br />
}<br />
<br />
});<br />
<br />
var num = function(v) {<br />
return parseInt(v, 10) || 0;<br />
};<br />
<br />
var isNumber = function(value) {<br />
return !isNaN(parseInt(value, 10));<br />
};<br />
<br />
})(jQuery);</div>
Ptmvanboheemen