3cb2ccd878
jQuery UI 1.10 has already been released, and 1.11 is on the horizon (1.9 is marked "legacy" as of writing). 1.10 drops the compatibility layer for 1.8 API. So, users should definitely be encouraged to upgrade their code to move away from the deprecated 1.8 APIs. However, to take it one step at a time, this commit upgrades us to 1.9 first. That way we're at least not using an unsupported code base anymore, while at the same time not rolling out breaking changes. jQuery UI has redesigned many of its APIs[1], but compatibility with the jQuery UI 1.8 API is maintained throughout 1.9.x. * Base theme is now called "Smoothness". * Sorting the entries in Resources.php alphabetically to make it easier to ensure all files are listed when comparing them side-by-side. * Update dependencies to match the "Depends:" header inside the javascript files. * In jQuery UI 1.9, effect files were renamed to match the jquery.ui.*.js naming pattern. * New modules: - jquery.ui.menu - jquery.ui.spinner - jquery.ui.tooltip * Release notes: - http://blog.jqueryui.com/2012/10/jquery-ui-1-9-0/ - http://jqueryui.com/upgrade-guide/1.9/ - http://jqueryui.com/changelog/1.9.0/ - http://blog.jqueryui.com/2012/10/jquery-ui-1-9-1/ - http://jqueryui.com/changelog/1.9.1/ - http://blog.jqueryui.com/2012/11/jquery-ui-1-9-2/ [1] http://blog.jqueryui.com/2011/03/api-redesigns-the-past-present-and-future/ Bug: 47076 Change-Id: I0e10b42fb7c25b9d4704719f21c44c08f36ddfa7
801 lines
26 KiB
JavaScript
801 lines
26 KiB
JavaScript
/*!
|
|
* jQuery UI Resizable 1.9.2
|
|
* http://jqueryui.com
|
|
*
|
|
* Copyright 2012 jQuery Foundation and other contributors
|
|
* Released under the MIT license.
|
|
* http://jquery.org/license
|
|
*
|
|
* http://api.jqueryui.com/resizable/
|
|
*
|
|
* Depends:
|
|
* jquery.ui.core.js
|
|
* jquery.ui.mouse.js
|
|
* jquery.ui.widget.js
|
|
*/
|
|
(function( $, undefined ) {
|
|
|
|
$.widget("ui.resizable", $.ui.mouse, {
|
|
version: "1.9.2",
|
|
widgetEventPrefix: "resize",
|
|
options: {
|
|
alsoResize: false,
|
|
animate: false,
|
|
animateDuration: "slow",
|
|
animateEasing: "swing",
|
|
aspectRatio: false,
|
|
autoHide: false,
|
|
containment: false,
|
|
ghost: false,
|
|
grid: false,
|
|
handles: "e,s,se",
|
|
helper: false,
|
|
maxHeight: null,
|
|
maxWidth: null,
|
|
minHeight: 10,
|
|
minWidth: 10,
|
|
zIndex: 1000
|
|
},
|
|
_create: function() {
|
|
|
|
var that = this, o = this.options;
|
|
this.element.addClass("ui-resizable");
|
|
|
|
$.extend(this, {
|
|
_aspectRatio: !!(o.aspectRatio),
|
|
aspectRatio: o.aspectRatio,
|
|
originalElement: this.element,
|
|
_proportionallyResizeElements: [],
|
|
_helper: o.helper || o.ghost || o.animate ? o.helper || 'ui-resizable-helper' : null
|
|
});
|
|
|
|
//Wrap the element if it cannot hold child nodes
|
|
if(this.element[0].nodeName.match(/canvas|textarea|input|select|button|img/i)) {
|
|
|
|
//Create a wrapper element and set the wrapper to the new current internal element
|
|
this.element.wrap(
|
|
$('<div class="ui-wrapper" style="overflow: hidden;"></div>').css({
|
|
position: this.element.css('position'),
|
|
width: this.element.outerWidth(),
|
|
height: this.element.outerHeight(),
|
|
top: this.element.css('top'),
|
|
left: this.element.css('left')
|
|
})
|
|
);
|
|
|
|
//Overwrite the original this.element
|
|
this.element = this.element.parent().data(
|
|
"resizable", this.element.data('resizable')
|
|
);
|
|
|
|
this.elementIsWrapper = true;
|
|
|
|
//Move margins to the wrapper
|
|
this.element.css({ marginLeft: this.originalElement.css("marginLeft"), marginTop: this.originalElement.css("marginTop"), marginRight: this.originalElement.css("marginRight"), marginBottom: this.originalElement.css("marginBottom") });
|
|
this.originalElement.css({ marginLeft: 0, marginTop: 0, marginRight: 0, marginBottom: 0});
|
|
|
|
//Prevent Safari textarea resize
|
|
this.originalResizeStyle = this.originalElement.css('resize');
|
|
this.originalElement.css('resize', 'none');
|
|
|
|
//Push the actual element to our proportionallyResize internal array
|
|
this._proportionallyResizeElements.push(this.originalElement.css({ position: 'static', zoom: 1, display: 'block' }));
|
|
|
|
// avoid IE jump (hard set the margin)
|
|
this.originalElement.css({ margin: this.originalElement.css('margin') });
|
|
|
|
// fix handlers offset
|
|
this._proportionallyResize();
|
|
|
|
}
|
|
|
|
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 == 'all') this.handles = 'n,e,s,w,se,sw,ne,nw';
|
|
var n = this.handles.split(","); this.handles = {};
|
|
|
|
for(var i = 0; i < n.length; i++) {
|
|
|
|
var handle = $.trim(n[i]), hname = 'ui-resizable-'+handle;
|
|
var axis = $('<div class="ui-resizable-handle ' + hname + '"></div>');
|
|
|
|
// Apply zIndex to all handles - see #7960
|
|
axis.css({ zIndex: o.zIndex });
|
|
|
|
//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;
|
|
this.element.append(axis);
|
|
}
|
|
|
|
}
|
|
|
|
this._renderAxis = function(target) {
|
|
|
|
target = target || this.element;
|
|
|
|
for(var i in this.handles) {
|
|
|
|
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;
|
|
|
|
//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',
|
|
/ne|nw|n/.test(i) ? 'Top' :
|
|
/se|sw|s/.test(i) ? 'Bottom' :
|
|
/^e$/.test(i) ? 'Right' : 'Left' ].join("");
|
|
|
|
target.css(padPos, padWrapper);
|
|
|
|
this._proportionallyResize();
|
|
|
|
}
|
|
|
|
//TODO: What's that good for? There's not anything to be executed left
|
|
if(!$(this.handles[i]).length)
|
|
continue;
|
|
|
|
}
|
|
};
|
|
|
|
//TODO: make renderAxis a prototype function
|
|
this._renderAxis(this.element);
|
|
|
|
this._handles = $('.ui-resizable-handle', this.element)
|
|
.disableSelection();
|
|
|
|
//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);
|
|
//Axis, default = se
|
|
that.axis = axis && axis[1] ? axis[1] : 'se';
|
|
}
|
|
});
|
|
|
|
//If we want to auto hide the elements
|
|
if (o.autoHide) {
|
|
this._handles.hide();
|
|
$(this.element)
|
|
.addClass("ui-resizable-autohide")
|
|
.mouseenter(function() {
|
|
if (o.disabled) return;
|
|
$(this).removeClass("ui-resizable-autohide");
|
|
that._handles.show();
|
|
})
|
|
.mouseleave(function(){
|
|
if (o.disabled) return;
|
|
if (!that.resizing) {
|
|
$(this).addClass("ui-resizable-autohide");
|
|
that._handles.hide();
|
|
}
|
|
});
|
|
}
|
|
|
|
//Initialize the mouse interaction
|
|
this._mouseInit();
|
|
|
|
},
|
|
|
|
_destroy: function() {
|
|
|
|
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();
|
|
};
|
|
|
|
//TODO: Unwrap at same DOM position
|
|
if (this.elementIsWrapper) {
|
|
_destroy(this.element);
|
|
var wrapper = this.element;
|
|
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);
|
|
_destroy(this.originalElement);
|
|
|
|
return this;
|
|
},
|
|
|
|
_mouseCapture: function(event) {
|
|
var handle = false;
|
|
for (var i in this.handles) {
|
|
if ($(this.handles[i])[0] == event.target) {
|
|
handle = true;
|
|
}
|
|
}
|
|
|
|
return !this.options.disabled && handle;
|
|
},
|
|
|
|
_mouseStart: function(event) {
|
|
|
|
var o = this.options, iniPos = this.element.position(), 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'))) {
|
|
el.css({ position: 'absolute', top: iniPos.top, left: iniPos.left });
|
|
}
|
|
|
|
this._renderProxy();
|
|
|
|
var curleft = num(this.helper.css('left')), curtop = num(this.helper.css('top'));
|
|
|
|
if (o.containment) {
|
|
curleft += $(o.containment).scrollLeft() || 0;
|
|
curtop += $(o.containment).scrollTop() || 0;
|
|
}
|
|
|
|
//Store needed variables
|
|
this.offset = this.helper.offset();
|
|
this.position = { left: curleft, top: curtop };
|
|
this.size = this._helper ? { width: el.outerWidth(), height: el.outerHeight() } : { width: el.width(), height: el.height() };
|
|
this.originalSize = this._helper ? { width: el.outerWidth(), height: el.outerHeight() } : { width: el.width(), height: el.height() };
|
|
this.originalPosition = { left: curleft, top: curtop };
|
|
this.sizeDiff = { width: el.outerWidth() - el.width(), height: el.outerHeight() - el.height() };
|
|
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);
|
|
|
|
var 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);
|
|
return true;
|
|
},
|
|
|
|
_mouseDrag: function(event) {
|
|
|
|
//Increase performance, avoid regex
|
|
var el = this.helper, o = this.options, props = {},
|
|
that = this, smp = this.originalMousePosition, a = this.axis;
|
|
|
|
var dx = (event.pageX-smp.left)||0, dy = (event.pageY-smp.top)||0;
|
|
var trigger = this._change[a];
|
|
if (!trigger) return false;
|
|
|
|
// Calculate the attrs that will be change
|
|
var 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)
|
|
data = this._updateRatio(data, event);
|
|
|
|
data = this._respectSize(data, event);
|
|
|
|
// plugins callbacks need to be called first
|
|
this._propagate("resize", event);
|
|
|
|
el.css({
|
|
top: this.position.top + "px", left: this.position.left + "px",
|
|
width: this.size.width + "px", height: this.size.height + "px"
|
|
});
|
|
|
|
if (!this._helper && this._proportionallyResizeElements.length)
|
|
this._proportionallyResize();
|
|
|
|
this._updateCache(data);
|
|
|
|
// calling the user callback at the end
|
|
this._trigger('resize', event, this.ui());
|
|
|
|
return false;
|
|
},
|
|
|
|
_mouseStop: function(event) {
|
|
|
|
this.resizing = false;
|
|
var 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;
|
|
|
|
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();
|
|
}
|
|
|
|
$('body').css('cursor', 'auto');
|
|
|
|
this.element.removeClass("ui-resizable-resizing");
|
|
|
|
this._propagate("stop", event);
|
|
|
|
if (this._helper) this.helper.remove();
|
|
return false;
|
|
|
|
},
|
|
|
|
_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();
|
|
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, event) {
|
|
|
|
var o = this.options, 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 (a == 'sw') {
|
|
data.left = cpos.left + (csize.width - data.width);
|
|
data.top = null;
|
|
}
|
|
if (a == 'nw') {
|
|
data.top = cpos.top + (csize.height - data.height);
|
|
data.left = cpos.left + (csize.width - data.width);
|
|
}
|
|
|
|
return data;
|
|
},
|
|
|
|
_respectSize: function(data, event) {
|
|
|
|
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);
|
|
|
|
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);
|
|
|
|
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;
|
|
|
|
return data;
|
|
},
|
|
|
|
_proportionallyResize: function() {
|
|
|
|
var o = this.options;
|
|
if (!this._proportionallyResizeElements.length) return;
|
|
var element = this.helper || this.element;
|
|
|
|
for (var i=0; i < this._proportionallyResizeElements.length; i++) {
|
|
|
|
var 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 = $.map(b, function(v, i) {
|
|
var border = parseInt(v,10)||0, padding = parseInt(p[i],10)||0;
|
|
return border + padding;
|
|
});
|
|
}
|
|
|
|
prel.css({
|
|
height: (element.height() - this.borderDif[0] - this.borderDif[2]) || 0,
|
|
width: (element.width() - this.borderDif[1] - this.borderDif[3]) || 0
|
|
});
|
|
|
|
};
|
|
|
|
},
|
|
|
|
_renderProxy: function() {
|
|
|
|
var el = this.element, o = this.options;
|
|
this.elementOffset = el.offset();
|
|
|
|
if(this._helper) {
|
|
|
|
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,
|
|
position: 'absolute',
|
|
left: this.elementOffset.left - ie6offset +'px',
|
|
top: this.elementOffset.top - ie6offset +'px',
|
|
zIndex: ++o.zIndex //TODO: Don't modify option
|
|
});
|
|
|
|
this.helper
|
|
.appendTo("body")
|
|
.disableSelection();
|
|
|
|
} else {
|
|
this.helper = this.element;
|
|
}
|
|
|
|
},
|
|
|
|
_change: {
|
|
e: function(event, dx, dy) {
|
|
return { width: this.originalSize.width + dx };
|
|
},
|
|
w: function(event, dx, dy) {
|
|
var o = this.options, 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;
|
|
return { top: sp.top + dy, height: cs.height - dy };
|
|
},
|
|
s: function(event, dx, dy) {
|
|
return { height: this.originalSize.height + dy };
|
|
},
|
|
se: function(event, dx, dy) {
|
|
return $.extend(this._change.s.apply(this, arguments), this._change.e.apply(this, [event, dx, dy]));
|
|
},
|
|
sw: function(event, dx, dy) {
|
|
return $.extend(this._change.s.apply(this, arguments), this._change.w.apply(this, [event, dx, dy]));
|
|
},
|
|
ne: function(event, dx, dy) {
|
|
return $.extend(this._change.n.apply(this, arguments), this._change.e.apply(this, [event, dx, dy]));
|
|
},
|
|
nw: function(event, dx, dy) {
|
|
return $.extend(this._change.n.apply(this, arguments), this._change.w.apply(this, [event, dx, dy]));
|
|
}
|
|
},
|
|
|
|
_propagate: function(n, event) {
|
|
$.ui.plugin.call(this, n, [event, this.ui()]);
|
|
(n != "resize" && this._trigger(n, event, this.ui()));
|
|
},
|
|
|
|
plugins: {},
|
|
|
|
ui: function() {
|
|
return {
|
|
originalElement: this.originalElement,
|
|
element: this.element,
|
|
helper: this.helper,
|
|
position: this.position,
|
|
size: this.size,
|
|
originalSize: this.originalSize,
|
|
originalPosition: this.originalPosition
|
|
};
|
|
}
|
|
|
|
});
|
|
|
|
/*
|
|
* Resizable Extensions
|
|
*/
|
|
|
|
$.ui.plugin.add("resizable", "alsoResize", {
|
|
|
|
start: function (event, ui) {
|
|
var that = $(this).data("resizable"), o = that.options;
|
|
|
|
var _store = function (exp) {
|
|
$(exp).each(function() {
|
|
var el = $(this);
|
|
el.data("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 (o.alsoResize.length) { o.alsoResize = o.alsoResize[0]; _store(o.alsoResize); }
|
|
else { $.each(o.alsoResize, function (exp) { _store(exp); }); }
|
|
}else{
|
|
_store(o.alsoResize);
|
|
}
|
|
},
|
|
|
|
resize: function (event, ui) {
|
|
var that = $(this).data("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("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);
|
|
});
|
|
};
|
|
|
|
if (typeof(o.alsoResize) == 'object' && !o.alsoResize.nodeType) {
|
|
$.each(o.alsoResize, function (exp, c) { _alsoResize(exp, c); });
|
|
}else{
|
|
_alsoResize(o.alsoResize);
|
|
}
|
|
},
|
|
|
|
stop: function (event, ui) {
|
|
$(this).removeData("resizable-alsoresize");
|
|
}
|
|
});
|
|
|
|
$.ui.plugin.add("resizable", "animate", {
|
|
|
|
stop: function(event, ui) {
|
|
var that = $(this).data("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;
|
|
|
|
that.element.animate(
|
|
$.extend(style, top && left ? { top: top, left: left } : {}), {
|
|
duration: o.animateDuration,
|
|
easing: o.animateEasing,
|
|
step: function() {
|
|
|
|
var data = {
|
|
width: parseInt(that.element.css('width'), 10),
|
|
height: parseInt(that.element.css('height'), 10),
|
|
top: parseInt(that.element.css('top'), 10),
|
|
left: parseInt(that.element.css('left'), 10)
|
|
};
|
|
|
|
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);
|
|
that._propagate("resize", event);
|
|
|
|
}
|
|
}
|
|
);
|
|
}
|
|
|
|
});
|
|
|
|
$.ui.plugin.add("resizable", "containment", {
|
|
|
|
start: function(event, ui) {
|
|
var that = $(this).data("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;
|
|
|
|
that.containerElement = $(ce);
|
|
|
|
if (/document/.test(oc) || oc == document) {
|
|
that.containerOffset = { left: 0, top: 0 };
|
|
that.containerPosition = { left: 0, top: 0 };
|
|
|
|
that.parentData = {
|
|
element: $(document), left: 0, top: 0,
|
|
width: $(document).width(), height: $(document).height() || document.body.parentNode.scrollHeight
|
|
};
|
|
}
|
|
|
|
// i'm a node, so compute top, left, right, bottom
|
|
else {
|
|
var 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);
|
|
|
|
that.parentData = {
|
|
element: ce, left: co.left, top: co.top, width: width, height: height
|
|
};
|
|
}
|
|
},
|
|
|
|
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;
|
|
|
|
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;
|
|
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;
|
|
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 );
|
|
|
|
var 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 (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 (hoset + that.size.height >= that.parentData.height) {
|
|
that.size.height = that.parentData.height - hoset;
|
|
if (pRatio) that.size.width = that.size.height * that.aspectRatio;
|
|
}
|
|
},
|
|
|
|
stop: function(event, ui){
|
|
var that = $(this).data("resizable"), o = that.options, cp = that.position,
|
|
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')))
|
|
$(this).css({ left: ho.left - cop.left - co.left, width: w, height: h });
|
|
|
|
if (that._helper && !o.animate && (/static/).test(ce.css('position')))
|
|
$(this).css({ left: ho.left - cop.left - co.left, width: w, height: h });
|
|
|
|
}
|
|
});
|
|
|
|
$.ui.plugin.add("resizable", "ghost", {
|
|
|
|
start: function(event, ui) {
|
|
|
|
var that = $(this).data("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 })
|
|
.addClass('ui-resizable-ghost')
|
|
.addClass(typeof o.ghost == 'string' ? o.ghost : '');
|
|
|
|
that.ghost.appendTo(that.helper);
|
|
|
|
},
|
|
|
|
resize: function(event, ui){
|
|
var that = $(this).data("resizable"), o = that.options;
|
|
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;
|
|
if (that.ghost && that.helper) that.helper.get(0).removeChild(that.ghost.get(0));
|
|
}
|
|
|
|
});
|
|
|
|
$.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;
|
|
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);
|
|
|
|
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.position.top = op.top - oy;
|
|
}
|
|
else if (/^(sw)$/.test(a)) {
|
|
that.size.width = os.width + ox;
|
|
that.size.height = os.height + oy;
|
|
that.position.left = op.left - ox;
|
|
}
|
|
else {
|
|
that.size.width = os.width + ox;
|
|
that.size.height = os.height + oy;
|
|
that.position.top = op.top - oy;
|
|
that.position.left = op.left - ox;
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
var num = function(v) {
|
|
return parseInt(v, 10) || 0;
|
|
};
|
|
|
|
var isNumber = function(value) {
|
|
return !isNaN(parseInt(value, 10));
|
|
};
|
|
|
|
})(jQuery);
|