3 //Make nodes selectable by expression
4 $.extend($.expr[':'], { resizable: "(' '+a.className+' ').indexOf(' ui-resizable ')" });
7 $.fn.resizable = function(o) {
8 return this.each(function() {
9 if(!$(this).is(".ui-resizable")) new $.ui.resizable(this,o);
13 //Macros for external methods that support chaining
14 var methods = "destroy,enable,disable".split(",");
15 for(var i=0;i<methods.length;i++) {
16 var cur = methods[i], f;
17 eval('f = function() { var a = arguments; return this.each(function() { if(jQuery(this).is(".ui-resizable")) jQuery.data(this, "ui-resizable")["'+cur+'"](a); if(jQuery(this.parentNode).is(".ui-resizable")) jQuery.data(this, "ui-resizable")["'+cur+'"](a); }); }');
18 $.fn["resizable"+cur.substr(0,1).toUpperCase()+cur.substr(1)] = f;
22 $.fn.resizableInstance = function() {
23 if($(this[0]).is(".ui-resizable") || $(this[0].parentNode).is(".ui-resizable")) return $.data(this[0], "ui-resizable");
28 $.ui.resizable = function(el,o) {
30 var options = {}; o = o || {}; $.extend(options, o); //Extend and copy options
31 this.element = el; var self = this; //Do bindings
32 $.data(this.element, "ui-resizable", this);
35 var helper = function(e,that) {
36 var helper = $('<div></div>').css({
37 width: $(this).width(),
38 height: $(this).height(),
40 left: that.options.co.left,
41 top: that.options.co.top
42 }).addClass(that.options.proxy);
46 var helper = "original";
49 //Destructive mode wraps the original element
50 if(el.nodeName.match(/textarea|input|select|button|img/i)) options.destructive = true;
51 if(options.destructive) {
53 $(el).wrap('<div class="ui-wrapper" style="position: relative; width: '+$(el).outerWidth()+'px; height: '+$(el).outerHeight()+';"></div>');
55 el = el.parentNode; this.element = el;
57 //Move margins to the wrapper
58 $(el).css({ marginLeft: $(oel).css("marginLeft"), marginTop: $(oel).css("marginTop"), marginRight: $(oel).css("marginRight"), marginBottom: $(oel).css("marginBottom")});
59 $(oel).css({ marginLeft: 0, marginTop: 0, marginRight: 0, marginBottom: 0});
61 o.proportionallyResize = o.proportionallyResize || [];
62 o.proportionallyResize.push(oel);
64 var b = [parseInt($(oel).css('borderTopWidth')),parseInt($(oel).css('borderRightWidth')),parseInt($(oel).css('borderBottomWidth')),parseInt($(oel).css('borderLeftWidth'))];
69 if(options.destructive || !$(".ui-resizable-handle",el).length) {
70 //Adding handles (disabled not so common ones)
71 var t = function(a,b) { $(el).append("<div class='ui-resizable-"+a+" ui-resizable-handle' style='"+b+"'></div>"); };
72 //t('n','top: '+b[0]+'px;');
73 t('e','right: '+b[1]+'px;'+(options.zIndex ? 'z-index: '+options.zIndex+';' : ''));
74 t('s','bottom: '+b[1]+'px;'+(options.zIndex ? 'z-index: '+options.zIndex+';' : ''));
75 //t('w','left: '+b[3]+'px;');
76 t('se','bottom: '+b[2]+'px; right: '+b[1]+'px;'+(options.zIndex ? 'z-index: '+options.zIndex+';' : ''));
77 //t('sw','bottom: '+b[2]+'px; left: '+b[3]+'px;');
78 //t('ne','top: '+b[0]+'px; right: '+b[1]+'px;');
79 //t('nw','top: '+b[0]+'px; left: '+b[3]+'px;');
84 //If other elements should be modified, we have to copy that array
85 options.modifyThese = [];
86 if(o.proportionallyResize) {
87 options.proportionallyResize = o.proportionallyResize.slice(0);
88 var propRes = options.proportionallyResize;
90 for(var i in propRes) {
92 if(propRes[i].constructor == String)
93 propRes[i] = $(propRes[i], el);
95 if(!$(propRes[i]).length) continue;
98 var x = $(propRes[i]).width() - $(el).width();
99 var y = $(propRes[i]).height() - $(el).height();
100 options.modifyThese.push([$(propRes[i]),x,y]);
105 options.handles = {};
106 if(!o.handles) o.handles = { 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' };
108 for(var i in o.handles) { options.handles[i] = o.handles[i]; } //Copying the object
110 for(var i in options.handles) {
112 if(options.handles[i].constructor == String)
113 options.handles[i] = $(options.handles[i], el);
115 if(!$(options.handles[i]).length) continue;
117 $(options.handles[i]).bind('mousedown', function(e) {
118 self.interaction.options.axis = this.resizeAxis;
119 })[0].resizeAxis = i;
123 //If we want to auto hide the elements
125 $(this.element).addClass("ui-resizable-autohide").hover(function() { $(this).removeClass("ui-resizable-autohide"); }, function() { if(self.interaction.options.autohide && !self.interaction.init) $(this).addClass("ui-resizable-autohide"); });
130 nonDestructive: true,
131 dragPrevention: 'input,button,select',
132 minHeight: options.minHeight || 50,
133 minWidth: options.minWidth || 100,
134 startCondition: function(e) {
135 if(self.disabled) return false;
136 for(var i in options.handles) {
137 if($(options.handles[i])[0] == e.target) return true;
141 _start: function(h,p,c,t,e) {
142 self.start.apply(t, [self, e]); // Trigger the start callback
144 _beforeStop: function(h,p,c,t,e) {
145 self.stop.apply(t, [self, e]); // Trigger the stop callback
147 _drag: function(h,p,c,t,e) {
148 self.drag.apply(t, [self, e]); // Trigger the start callback
152 //Initialize mouse interaction
153 this.interaction = new $.ui.mouseInteraction(el,options);
155 //Add the class for themeing
156 $(this.element).addClass("ui-resizable");
160 $.extend($.ui.resizable.prototype, {
162 prepareCallbackObj: function(self) {
166 axis: self.options.axis,
167 options: self.options
170 destroy: function() {
171 $(this.element).removeClass("ui-resizable").removeClass("ui-resizable-disabled");
172 this.interaction.destroy();
175 $(this.element).removeClass("ui-resizable-disabled");
176 this.disabled = false;
178 disable: function() {
179 $(this.element).addClass("ui-resizable-disabled");
180 this.disabled = true;
182 start: function(that, e) {
183 this.options.originalSize = [$(this.element).width(),$(this.element).height()];
184 this.options.originalPosition = $(this.element).css("position");
185 this.options.originalPositionValues = $(this.element).position();
187 this.options.modifyThese.push([$(this.helper),0,0]);
189 $(that.element).triggerHandler("resizestart", [e, that.prepareCallbackObj(this)], this.options.start);
192 stop: function(that, e) {
194 var o = this.options;
196 $(that.element).triggerHandler("resizestop", [e, that.prepareCallbackObj(this)], this.options.stop);
199 $(this.element).css({
200 width: $(this.helper).width(),
201 height: $(this.helper).height()
204 if(o.originalPosition == "absolute" || o.originalPosition == "fixed") {
205 $(this.element).css({
206 top: $(this.helper).css("top"),
207 left: $(this.helper).css("left")
214 drag: function(that, e) {
216 var o = this.options;
217 var rel = (o.originalPosition != "absolute" && o.originalPosition != "fixed");
218 var co = rel ? o.co : this.options.originalPositionValues;
219 var p = o.originalSize;
221 this.pos = rel ? [this.rpos[0]-o.cursorAt.left, this.rpos[1]-o.cursorAt.top] : [this.pos[0]-o.cursorAt.left, this.pos[1]-o.cursorAt.top];
223 var nw = p[0] + (this.pos[0] - co.left);
224 var nh = p[1] + (this.pos[1] - co.top);
238 if(!o.proxy && (o.originalPosition != "absolute" && o.originalPosition != "fixed"))
241 if(o.axis == 'n') nw = p[0];
242 var mod = (this.pos[1] - co.top); nh = nh - (mod*2);
243 mod = nh <= o.minHeight ? p[1] - o.minHeight : (nh >= o.maxHeight ? 0-(o.maxHeight-p[1]) : mod);
244 $(this.helper).css('top', co.top + mod);
250 if(!o.proxy && (o.originalPosition != "absolute" && o.originalPosition != "fixed"))
253 if(o.axis == 'w') nh = p[1];
254 var mod = (this.pos[0] - co.left); nw = nw - (mod*2);
255 mod = nw <= o.minWidth ? p[0] - o.minWidth : (nw >= o.maxWidth ? 0-(o.maxWidth-p[0]) : mod);
256 $(this.helper).css('left', co.left + mod);
261 if(!o.proxy && (o.originalPosition != "absolute" && o.originalPosition != "fixed"))
264 var modx = (this.pos[0] - co.left); nw = nw - (modx*2);
265 modx = nw <= o.minWidth ? p[0] - o.minWidth : (nw >= o.maxWidth ? 0-(o.maxWidth-p[0]) : modx);
267 var mody = (this.pos[1] - co.top); nh = nh - (mody*2);
268 mody = nh <= o.minHeight ? p[1] - o.minHeight : (nh >= o.maxHeight ? 0-(o.maxHeight-p[1]) : mody);
271 left: co.left + modx,
279 if(e.shiftKey) nh = nw * (p[1]/p[0]);
281 if(o.minWidth) nw = nw <= o.minWidth ? o.minWidth : nw;
282 if(o.minHeight) nh = nh <= o.minHeight ? o.minHeight : nh;
284 if(o.maxWidth) nw = nw >= o.maxWidth ? o.maxWidth : nw;
285 if(o.maxHeight) nh = nh >= o.maxHeight ? o.maxHeight : nh;
287 if(e.shiftKey) nh = nw * (p[1]/p[0]);
289 var modifier = $(that.element).triggerHandler("resize", [e, that.prepareCallbackObj(this)], o.resize);
290 if(!modifier) modifier = {};
292 for(var i in this.options.modifyThese) {
293 var c = this.options.modifyThese[i];
295 width: modifier.width ? modifier.width+c[1] : nw+c[1],
296 height: modifier.height ? modifier.height+c[2] : nh+c[2]