2 * jQuery UI Resizable 1.8.18
4 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
5 * Dual licensed under the MIT or GPL Version 2 licenses.
6 * http://jquery.org/license
8 * http://docs.jquery.com/UI/Resizables
15 (function( $, undefined ) {
17 $.widget("ui.resizable", $.ui
.mouse
, {
18 widgetEventPrefix
: "resize",
22 animateDuration
: "slow",
23 animateEasing
: "swing",
39 var self
= this, o
= this.options
;
40 this.element
.addClass("ui-resizable");
43 _aspectRatio
: !!(o
.aspectRatio
),
44 aspectRatio
: o
.aspectRatio
,
45 originalElement
: this.element
,
46 _proportionallyResizeElements
: [],
47 _helper
: o
.helper
|| o
.ghost
|| o
.animate
? o
.helper
|| 'ui-resizable-helper' : null
50 //Wrap the element if it cannot hold child nodes
51 if(this.element
[0].nodeName
.match(/canvas|textarea|input|select|button|img/i)) {
53 //Create a wrapper element and set the wrapper to the new current internal element
55 $('<div class="ui-wrapper" style="overflow: hidden;"></div>').css({
56 position
: this.element
.css('position'),
57 width
: this.element
.outerWidth(),
58 height
: this.element
.outerHeight(),
59 top
: this.element
.css('top'),
60 left
: this.element
.css('left')
64 //Overwrite the original this.element
65 this.element
= this.element
.parent().data(
66 "resizable", this.element
.data('resizable')
69 this.elementIsWrapper
= true;
71 //Move margins to the wrapper
72 this.element
.css({ marginLeft
: this.originalElement
.css("marginLeft"), marginTop
: this.originalElement
.css("marginTop"), marginRight
: this.originalElement
.css("marginRight"), marginBottom
: this.originalElement
.css("marginBottom") });
73 this.originalElement
.css({ marginLeft
: 0, marginTop
: 0, marginRight
: 0, marginBottom
: 0});
75 //Prevent Safari textarea resize
76 this.originalResizeStyle
= this.originalElement
.css('resize');
77 this.originalElement
.css('resize', 'none');
79 //Push the actual element to our proportionallyResize internal array
80 this._proportionallyResizeElements
.push(this.originalElement
.css({ position
: 'static', zoom
: 1, display
: 'block' }));
82 // avoid IE jump (hard set the margin)
83 this.originalElement
.css({ margin
: this.originalElement
.css('margin') });
85 // fix handlers offset
86 this._proportionallyResize();
90 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' });
91 if(this.handles
.constructor == String
) {
93 if(this.handles
== 'all') this.handles
= 'n,e,s,w,se,sw,ne,nw';
94 var n
= this.handles
.split(","); this.handles
= {};
96 for(var i
= 0; i
< n
.length
; i
++) {
98 var handle
= $.trim(n
[i
]), hname
= 'ui-resizable-'+handle
;
99 var axis
= $('<div class="ui-resizable-handle ' + hname
+ '"></div>');
101 // increase zIndex of sw, se, ne, nw axis
102 //TODO : this modifies original option
103 if(/sw|se|ne|nw/.test(handle
)) axis
.css({ zIndex
: ++o
.zIndex
});
105 //TODO : What's going on here?
106 if ('se' == handle
) {
107 axis
.addClass('ui-icon ui-icon-gripsmall-diagonal-se');
110 //Insert into internal handles object and append to element
111 this.handles
[handle
] = '.ui-resizable-'+handle
;
112 this.element
.append(axis
);
117 this._renderAxis = function(target
) {
119 target
= target
|| this.element
;
121 for(var i
in this.handles
) {
123 if(this.handles
[i
].constructor == String
)
124 this.handles
[i
] = $(this.handles
[i
], this.element
).show();
126 //Apply pad to wrapper element, needed to fix axis position (textarea, inputs, scrolls)
127 if (this.elementIsWrapper
&& this.originalElement
[0].nodeName
.match(/textarea|input|select|button/i)) {
129 var axis
= $(this.handles
[i
], this.element
), padWrapper
= 0;
131 //Checking the correct pad and border
132 padWrapper
= /sw|ne|nw|se|n|s/.test(i
) ? axis
.outerHeight() : axis
.outerWidth();
134 //The padding type i have to apply...
135 var padPos
= [ 'padding',
136 /ne|nw|n/.test(i
) ? 'Top' :
137 /se|sw|s/.test(i
) ? 'Bottom' :
138 /^e$/.test(i
) ? 'Right' : 'Left' ].join("");
140 target
.css(padPos
, padWrapper
);
142 this._proportionallyResize();
146 //TODO: What's that good for? There's not anything to be executed left
147 if(!$(this.handles
[i
]).length
)
153 //TODO: make renderAxis a prototype function
154 this._renderAxis(this.element
);
156 this._handles
= $('.ui-resizable-handle', this.element
)
160 this._handles
.mouseover(function() {
161 if (!self
.resizing
) {
163 var axis
= this.className
.match(/ui-resizable-(se|sw|ne|nw|n|e|s|w)/i);
165 self
.axis
= axis
&& axis
[1] ? axis
[1] : 'se';
169 //If we want to auto hide the elements
171 this._handles
.hide();
173 .addClass("ui-resizable-autohide")
175 if (o
.disabled
) return;
176 $(this).removeClass("ui-resizable-autohide");
177 self
._handles
.show();
180 if (o
.disabled
) return;
181 if (!self
.resizing
) {
182 $(this).addClass("ui-resizable-autohide");
183 self
._handles
.hide();
188 //Initialize the mouse interaction
193 destroy: function() {
195 this._mouseDestroy();
197 var _destroy = function(exp
) {
198 $(exp
).removeClass("ui-resizable ui-resizable-disabled ui-resizable-resizing")
199 .removeData("resizable").unbind(".resizable").find('.ui-resizable-handle').remove();
202 //TODO: Unwrap at same DOM position
203 if (this.elementIsWrapper
) {
204 _destroy(this.element
);
205 var wrapper
= this.element
;
207 this.originalElement
.css({
208 position
: wrapper
.css('position'),
209 width
: wrapper
.outerWidth(),
210 height
: wrapper
.outerHeight(),
211 top
: wrapper
.css('top'),
212 left
: wrapper
.css('left')
217 this.originalElement
.css('resize', this.originalResizeStyle
);
218 _destroy(this.originalElement
);
223 _mouseCapture: function(event
) {
225 for (var i
in this.handles
) {
226 if ($(this.handles
[i
])[0] == event
.target
) {
231 return !this.options
.disabled
&& handle
;
234 _mouseStart: function(event
) {
236 var o
= this.options
, iniPos
= this.element
.position(), el
= this.element
;
238 this.resizing
= true;
239 this.documentScroll
= { top
: $(document
).scrollTop(), left
: $(document
).scrollLeft() };
241 // bugfix for http://dev.jquery.com/ticket/1749
242 if (el
.is('.ui-draggable') || (/absolute/).test(el
.css('position'))) {
243 el
.css({ position
: 'absolute', top
: iniPos
.top
, left
: iniPos
.left
});
248 var curleft
= num(this.helper
.css('left')), curtop
= num(this.helper
.css('top'));
251 curleft
+= $(o
.containment
).scrollLeft() || 0;
252 curtop
+= $(o
.containment
).scrollTop() || 0;
255 //Store needed variables
256 this.offset
= this.helper
.offset();
257 this.position
= { left
: curleft
, top
: curtop
};
258 this.size
= this._helper
? { width
: el
.outerWidth(), height
: el
.outerHeight() } : { width
: el
.width(), height
: el
.height() };
259 this.originalSize
= this._helper
? { width
: el
.outerWidth(), height
: el
.outerHeight() } : { width
: el
.width(), height
: el
.height() };
260 this.originalPosition
= { left
: curleft
, top
: curtop
};
261 this.sizeDiff
= { width
: el
.outerWidth() - el
.width(), height
: el
.outerHeight() - el
.height() };
262 this.originalMousePosition
= { left
: event
.pageX
, top
: event
.pageY
};
265 this.aspectRatio
= (typeof o
.aspectRatio
== 'number') ? o
.aspectRatio
: ((this.originalSize
.width
/ this.originalSize
.height
) || 1);
267 var cursor
= $('.ui-resizable-' + this.axis
).css('cursor');
268 $('body').css('cursor', cursor
== 'auto' ? this.axis
+ '-resize' : cursor
);
270 el
.addClass("ui-resizable-resizing");
271 this._propagate("start", event
);
275 _mouseDrag: function(event
) {
277 //Increase performance, avoid regex
278 var el
= this.helper
, o
= this.options
, props
= {},
279 self
= this, smp
= this.originalMousePosition
, a
= this.axis
;
281 var dx
= (event
.pageX
-smp
.left
)||0, dy
= (event
.pageY
-smp
.top
)||0;
282 var trigger
= this._change
[a
];
283 if (!trigger
) return false;
285 // Calculate the attrs that will be change
286 var data
= trigger
.apply(this, [event
, dx
, dy
]), ie6
= $.browser
.msie
&& $.browser
.version
< 7, csdif
= this.sizeDiff
;
288 // Put this in the mouseDrag handler since the user can start pressing shift while resizing
289 this._updateVirtualBoundaries(event
.shiftKey
);
290 if (this._aspectRatio
|| event
.shiftKey
)
291 data
= this._updateRatio(data
, event
);
293 data
= this._respectSize(data
, event
);
295 // plugins callbacks need to be called first
296 this._propagate("resize", event
);
299 top
: this.position
.top
+ "px", left
: this.position
.left
+ "px",
300 width
: this.size
.width
+ "px", height
: this.size
.height
+ "px"
303 if (!this._helper
&& this._proportionallyResizeElements
.length
)
304 this._proportionallyResize();
306 this._updateCache(data
);
308 // calling the user callback at the end
309 this._trigger('resize', event
, this.ui());
314 _mouseStop: function(event
) {
316 this.resizing
= false;
317 var o
= this.options
, self
= this;
320 var pr
= this._proportionallyResizeElements
, ista
= pr
.length
&& (/textarea/i).test(pr
[0].nodeName
),
321 soffseth
= ista
&& $.ui
.hasScroll(pr
[0], 'left') /* TODO - jump height */ ? 0 : self
.sizeDiff
.height
,
322 soffsetw
= ista
? 0 : self
.sizeDiff
.width
;
324 var s
= { width
: (self
.helper
.width() - soffsetw
), height
: (self
.helper
.height() - soffseth
) },
325 left
= (parseInt(self
.element
.css('left'), 10) + (self
.position
.left
- self
.originalPosition
.left
)) || null,
326 top
= (parseInt(self
.element
.css('top'), 10) + (self
.position
.top
- self
.originalPosition
.top
)) || null;
329 this.element
.css($.extend(s
, { top
: top
, left
: left
}));
331 self
.helper
.height(self
.size
.height
);
332 self
.helper
.width(self
.size
.width
);
334 if (this._helper
&& !o
.animate
) this._proportionallyResize();
337 $('body').css('cursor', 'auto');
339 this.element
.removeClass("ui-resizable-resizing");
341 this._propagate("stop", event
);
343 if (this._helper
) this.helper
.remove();
348 _updateVirtualBoundaries: function(forceAspectRatio
) {
349 var o
= this.options
, pMinWidth
, pMaxWidth
, pMinHeight
, pMaxHeight
, b
;
352 minWidth
: isNumber(o
.minWidth
) ? o
.minWidth
: 0,
353 maxWidth
: isNumber(o
.maxWidth
) ? o
.maxWidth
: Infinity
,
354 minHeight
: isNumber(o
.minHeight
) ? o
.minHeight
: 0,
355 maxHeight
: isNumber(o
.maxHeight
) ? o
.maxHeight
: Infinity
358 if(this._aspectRatio
|| forceAspectRatio
) {
359 // We want to create an enclosing box whose aspect ration is the requested one
360 // First, compute the "projected" size for each dimension based on the aspect ratio and other dimension
361 pMinWidth
= b
.minHeight
* this.aspectRatio
;
362 pMinHeight
= b
.minWidth
/ this.aspectRatio
;
363 pMaxWidth
= b
.maxHeight
* this.aspectRatio
;
364 pMaxHeight
= b
.maxWidth
/ this.aspectRatio
;
366 if(pMinWidth
> b
.minWidth
) b
.minWidth
= pMinWidth
;
367 if(pMinHeight
> b
.minHeight
) b
.minHeight
= pMinHeight
;
368 if(pMaxWidth
< b
.maxWidth
) b
.maxWidth
= pMaxWidth
;
369 if(pMaxHeight
< b
.maxHeight
) b
.maxHeight
= pMaxHeight
;
371 this._vBoundaries
= b
;
374 _updateCache: function(data
) {
375 var o
= this.options
;
376 this.offset
= this.helper
.offset();
377 if (isNumber(data
.left
)) this.position
.left
= data
.left
;
378 if (isNumber(data
.top
)) this.position
.top
= data
.top
;
379 if (isNumber(data
.height
)) this.size
.height
= data
.height
;
380 if (isNumber(data
.width
)) this.size
.width
= data
.width
;
383 _updateRatio: function(data
, event
) {
385 var o
= this.options
, cpos
= this.position
, csize
= this.size
, a
= this.axis
;
387 if (isNumber(data
.height
)) data
.width
= (data
.height
* this.aspectRatio
);
388 else if (isNumber(data
.width
)) data
.height
= (data
.width
/ this.aspectRatio
);
391 data
.left
= cpos
.left
+ (csize
.width
- data
.width
);
395 data
.top
= cpos
.top
+ (csize
.height
- data
.height
);
396 data
.left
= cpos
.left
+ (csize
.width
- data
.width
);
402 _respectSize: function(data
, event
) {
404 var el
= this.helper
, o
= this._vBoundaries
, pRatio
= this._aspectRatio
|| event
.shiftKey
, a
= this.axis
,
405 ismaxw
= isNumber(data
.width
) && o
.maxWidth
&& (o
.maxWidth
< data
.width
), ismaxh
= isNumber(data
.height
) && o
.maxHeight
&& (o
.maxHeight
< data
.height
),
406 isminw
= isNumber(data
.width
) && o
.minWidth
&& (o
.minWidth
> data
.width
), isminh
= isNumber(data
.height
) && o
.minHeight
&& (o
.minHeight
> data
.height
);
408 if (isminw
) data
.width
= o
.minWidth
;
409 if (isminh
) data
.height
= o
.minHeight
;
410 if (ismaxw
) data
.width
= o
.maxWidth
;
411 if (ismaxh
) data
.height
= o
.maxHeight
;
413 var dw
= this.originalPosition
.left
+ this.originalSize
.width
, dh
= this.position
.top
+ this.size
.height
;
414 var cw
= /sw|nw|w/.test(a
), ch
= /nw|ne|n/.test(a
);
416 if (isminw
&& cw
) data
.left
= dw
- o
.minWidth
;
417 if (ismaxw
&& cw
) data
.left
= dw
- o
.maxWidth
;
418 if (isminh
&& ch
) data
.top
= dh
- o
.minHeight
;
419 if (ismaxh
&& ch
) data
.top
= dh
- o
.maxHeight
;
421 // fixing jump error on top/left - bug #2330
422 var isNotwh
= !data
.width
&& !data
.height
;
423 if (isNotwh
&& !data
.left
&& data
.top
) data
.top
= null;
424 else if (isNotwh
&& !data
.top
&& data
.left
) data
.left
= null;
429 _proportionallyResize: function() {
431 var o
= this.options
;
432 if (!this._proportionallyResizeElements
.length
) return;
433 var element
= this.helper
|| this.element
;
435 for (var i
=0; i
< this._proportionallyResizeElements
.length
; i
++) {
437 var prel
= this._proportionallyResizeElements
[i
];
439 if (!this.borderDif
) {
440 var b
= [prel
.css('borderTopWidth'), prel
.css('borderRightWidth'), prel
.css('borderBottomWidth'), prel
.css('borderLeftWidth')],
441 p
= [prel
.css('paddingTop'), prel
.css('paddingRight'), prel
.css('paddingBottom'), prel
.css('paddingLeft')];
443 this.borderDif
= $.map(b
, function(v
, i
) {
444 var border
= parseInt(v
,10)||0, padding
= parseInt(p
[i
],10)||0;
445 return border
+ padding
;
449 if ($.browser
.msie
&& !(!($(element
).is(':hidden') || $(element
).parents(':hidden').length
)))
453 height
: (element
.height() - this.borderDif
[0] - this.borderDif
[2]) || 0,
454 width
: (element
.width() - this.borderDif
[1] - this.borderDif
[3]) || 0
461 _renderProxy: function() {
463 var el
= this.element
, o
= this.options
;
464 this.elementOffset
= el
.offset();
468 this.helper
= this.helper
|| $('<div style="overflow:hidden;"></div>');
470 // fix ie6 offset TODO: This seems broken
471 var ie6
= $.browser
.msie
&& $.browser
.version
< 7, ie6offset
= (ie6
? 1 : 0),
472 pxyoffset
= ( ie6
? 2 : -1 );
474 this.helper
.addClass(this._helper
).css({
475 width
: this.element
.outerWidth() + pxyoffset
,
476 height
: this.element
.outerHeight() + pxyoffset
,
477 position
: 'absolute',
478 left
: this.elementOffset
.left
- ie6offset
+'px',
479 top
: this.elementOffset
.top
- ie6offset
+'px',
480 zIndex
: ++o
.zIndex
//TODO: Don't modify option
488 this.helper
= this.element
;
494 e: function(event
, dx
, dy
) {
495 return { width
: this.originalSize
.width
+ dx
};
497 w: function(event
, dx
, dy
) {
498 var o
= this.options
, cs
= this.originalSize
, sp
= this.originalPosition
;
499 return { left
: sp
.left
+ dx
, width
: cs
.width
- dx
};
501 n: function(event
, dx
, dy
) {
502 var o
= this.options
, cs
= this.originalSize
, sp
= this.originalPosition
;
503 return { top
: sp
.top
+ dy
, height
: cs
.height
- dy
};
505 s: function(event
, dx
, dy
) {
506 return { height
: this.originalSize
.height
+ dy
};
508 se: function(event
, dx
, dy
) {
509 return $.extend(this._change
.s
.apply(this, arguments
), this._change
.e
.apply(this, [event
, dx
, dy
]));
511 sw: function(event
, dx
, dy
) {
512 return $.extend(this._change
.s
.apply(this, arguments
), this._change
.w
.apply(this, [event
, dx
, dy
]));
514 ne: function(event
, dx
, dy
) {
515 return $.extend(this._change
.n
.apply(this, arguments
), this._change
.e
.apply(this, [event
, dx
, dy
]));
517 nw: function(event
, dx
, dy
) {
518 return $.extend(this._change
.n
.apply(this, arguments
), this._change
.w
.apply(this, [event
, dx
, dy
]));
522 _propagate: function(n
, event
) {
523 $.ui
.plugin
.call(this, n
, [event
, this.ui()]);
524 (n
!= "resize" && this._trigger(n
, event
, this.ui()));
531 originalElement
: this.originalElement
,
532 element
: this.element
,
534 position
: this.position
,
536 originalSize
: this.originalSize
,
537 originalPosition
: this.originalPosition
543 $.extend($.ui
.resizable
, {
548 * Resizable Extensions
551 $.ui
.plugin
.add("resizable", "alsoResize", {
553 start: function (event
, ui
) {
554 var self
= $(this).data("resizable"), o
= self
.options
;
556 var _store = function (exp
) {
557 $(exp
).each(function() {
559 el
.data("resizable-alsoresize", {
560 width
: parseInt(el
.width(), 10), height
: parseInt(el
.height(), 10),
561 left
: parseInt(el
.css('left'), 10), top
: parseInt(el
.css('top'), 10)
566 if (typeof(o
.alsoResize
) == 'object' && !o
.alsoResize
.parentNode
) {
567 if (o
.alsoResize
.length
) { o
.alsoResize
= o
.alsoResize
[0]; _store(o
.alsoResize
); }
568 else { $.each(o
.alsoResize
, function (exp
) { _store(exp
); }); }
570 _store(o
.alsoResize
);
574 resize: function (event
, ui
) {
575 var self
= $(this).data("resizable"), o
= self
.options
, os
= self
.originalSize
, op
= self
.originalPosition
;
578 height
: (self
.size
.height
- os
.height
) || 0, width
: (self
.size
.width
- os
.width
) || 0,
579 top
: (self
.position
.top
- op
.top
) || 0, left
: (self
.position
.left
- op
.left
) || 0
582 _alsoResize = function (exp
, c
) {
583 $(exp
).each(function() {
584 var el
= $(this), start
= $(this).data("resizable-alsoresize"), style
= {},
585 css
= c
&& c
.length
? c
: el
.parents(ui
.originalElement
[0]).length
? ['width', 'height'] : ['width', 'height', 'top', 'left'];
587 $.each(css
, function (i
, prop
) {
588 var sum
= (start
[prop
]||0) + (delta
[prop
]||0);
590 style
[prop
] = sum
|| null;
597 if (typeof(o
.alsoResize
) == 'object' && !o
.alsoResize
.nodeType
) {
598 $.each(o
.alsoResize
, function (exp
, c
) { _alsoResize(exp
, c
); });
600 _alsoResize(o
.alsoResize
);
604 stop: function (event
, ui
) {
605 $(this).removeData("resizable-alsoresize");
609 $.ui
.plugin
.add("resizable", "animate", {
611 stop: function(event
, ui
) {
612 var self
= $(this).data("resizable"), o
= self
.options
;
614 var pr
= self
._proportionallyResizeElements
, ista
= pr
.length
&& (/textarea/i).test(pr
[0].nodeName
),
615 soffseth
= ista
&& $.ui
.hasScroll(pr
[0], 'left') /* TODO - jump height */ ? 0 : self
.sizeDiff
.height
,
616 soffsetw
= ista
? 0 : self
.sizeDiff
.width
;
618 var style
= { width
: (self
.size
.width
- soffsetw
), height
: (self
.size
.height
- soffseth
) },
619 left
= (parseInt(self
.element
.css('left'), 10) + (self
.position
.left
- self
.originalPosition
.left
)) || null,
620 top
= (parseInt(self
.element
.css('top'), 10) + (self
.position
.top
- self
.originalPosition
.top
)) || null;
622 self
.element
.animate(
623 $.extend(style
, top
&& left
? { top
: top
, left
: left
} : {}), {
624 duration
: o
.animateDuration
,
625 easing
: o
.animateEasing
,
629 width
: parseInt(self
.element
.css('width'), 10),
630 height
: parseInt(self
.element
.css('height'), 10),
631 top
: parseInt(self
.element
.css('top'), 10),
632 left
: parseInt(self
.element
.css('left'), 10)
635 if (pr
&& pr
.length
) $(pr
[0]).css({ width
: data
.width
, height
: data
.height
});
637 // propagating resize, and updating values for each animation step
638 self
._updateCache(data
);
639 self
._propagate("resize", event
);
648 $.ui
.plugin
.add("resizable", "containment", {
650 start: function(event
, ui
) {
651 var self
= $(this).data("resizable"), o
= self
.options
, el
= self
.element
;
652 var oc
= o
.containment
, ce
= (oc
instanceof $) ? oc
.get(0) : (/parent/.test(oc
)) ? el
.parent().get(0) : oc
;
655 self
.containerElement
= $(ce
);
657 if (/document/.test(oc
) || oc
== document
) {
658 self
.containerOffset
= { left
: 0, top
: 0 };
659 self
.containerPosition
= { left
: 0, top
: 0 };
662 element
: $(document
), left
: 0, top
: 0,
663 width
: $(document
).width(), height
: $(document
).height() || document
.body
.parentNode
.scrollHeight
667 // i'm a node, so compute top, left, right, bottom
669 var element
= $(ce
), p
= [];
670 $([ "Top", "Right", "Left", "Bottom" ]).each(function(i
, name
) { p
[i
] = num(element
.css("padding" + name
)); });
672 self
.containerOffset
= element
.offset();
673 self
.containerPosition
= element
.position();
674 self
.containerSize
= { height
: (element
.innerHeight() - p
[3]), width
: (element
.innerWidth() - p
[1]) };
676 var co
= self
.containerOffset
, ch
= self
.containerSize
.height
, cw
= self
.containerSize
.width
,
677 width
= ($.ui
.hasScroll(ce
, "left") ? ce
.scrollWidth
: cw
), height
= ($.ui
.hasScroll(ce
) ? ce
.scrollHeight
: ch
);
680 element
: ce
, left
: co
.left
, top
: co
.top
, width
: width
, height
: height
685 resize: function(event
, ui
) {
686 var self
= $(this).data("resizable"), o
= self
.options
,
687 ps
= self
.containerSize
, co
= self
.containerOffset
, cs
= self
.size
, cp
= self
.position
,
688 pRatio
= self
._aspectRatio
|| event
.shiftKey
, cop
= { top
:0, left
:0 }, ce
= self
.containerElement
;
690 if (ce
[0] != document
&& (/static/).test(ce
.css('position'))) cop
= co
;
692 if (cp
.left
< (self
._helper
? co
.left
: 0)) {
693 self
.size
.width
= self
.size
.width
+ (self
._helper
? (self
.position
.left
- co
.left
) : (self
.position
.left
- cop
.left
));
694 if (pRatio
) self
.size
.height
= self
.size
.width
/ o
.aspectRatio
;
695 self
.position
.left
= o
.helper
? co
.left
: 0;
698 if (cp
.top
< (self
._helper
? co
.top
: 0)) {
699 self
.size
.height
= self
.size
.height
+ (self
._helper
? (self
.position
.top
- co
.top
) : self
.position
.top
);
700 if (pRatio
) self
.size
.width
= self
.size
.height
* o
.aspectRatio
;
701 self
.position
.top
= self
._helper
? co
.top
: 0;
704 self
.offset
.left
= self
.parentData
.left
+self
.position
.left
;
705 self
.offset
.top
= self
.parentData
.top
+self
.position
.top
;
707 var woset
= Math
.abs( (self
._helper
? self
.offset
.left
- cop
.left
: (self
.offset
.left
- cop
.left
)) + self
.sizeDiff
.width
),
708 hoset
= Math
.abs( (self
._helper
? self
.offset
.top
- cop
.top
: (self
.offset
.top
- co
.top
)) + self
.sizeDiff
.height
);
710 var isParent
= self
.containerElement
.get(0) == self
.element
.parent().get(0),
711 isOffsetRelative
= /relative|absolute/.test(self
.containerElement
.css('position'));
713 if(isParent
&& isOffsetRelative
) woset
-= self
.parentData
.left
;
715 if (woset
+ self
.size
.width
>= self
.parentData
.width
) {
716 self
.size
.width
= self
.parentData
.width
- woset
;
717 if (pRatio
) self
.size
.height
= self
.size
.width
/ self
.aspectRatio
;
720 if (hoset
+ self
.size
.height
>= self
.parentData
.height
) {
721 self
.size
.height
= self
.parentData
.height
- hoset
;
722 if (pRatio
) self
.size
.width
= self
.size
.height
* self
.aspectRatio
;
726 stop: function(event
, ui
){
727 var self
= $(this).data("resizable"), o
= self
.options
, cp
= self
.position
,
728 co
= self
.containerOffset
, cop
= self
.containerPosition
, ce
= self
.containerElement
;
730 var helper
= $(self
.helper
), ho
= helper
.offset(), w
= helper
.outerWidth() - self
.sizeDiff
.width
, h
= helper
.outerHeight() - self
.sizeDiff
.height
;
732 if (self
._helper
&& !o
.animate
&& (/relative/).test(ce
.css('position')))
733 $(this).css({ left
: ho
.left
- cop
.left
- co
.left
, width
: w
, height
: h
});
735 if (self
._helper
&& !o
.animate
&& (/static/).test(ce
.css('position')))
736 $(this).css({ left
: ho
.left
- cop
.left
- co
.left
, width
: w
, height
: h
});
741 $.ui
.plugin
.add("resizable", "ghost", {
743 start: function(event
, ui
) {
745 var self
= $(this).data("resizable"), o
= self
.options
, cs
= self
.size
;
747 self
.ghost
= self
.originalElement
.clone();
749 .css({ opacity
: .25, display
: 'block', position
: 'relative', height
: cs
.height
, width
: cs
.width
, margin
: 0, left
: 0, top
: 0 })
750 .addClass('ui-resizable-ghost')
751 .addClass(typeof o
.ghost
== 'string' ? o
.ghost
: '');
753 self
.ghost
.appendTo(self
.helper
);
757 resize: function(event
, ui
){
758 var self
= $(this).data("resizable"), o
= self
.options
;
759 if (self
.ghost
) self
.ghost
.css({ position
: 'relative', height
: self
.size
.height
, width
: self
.size
.width
});
762 stop: function(event
, ui
){
763 var self
= $(this).data("resizable"), o
= self
.options
;
764 if (self
.ghost
&& self
.helper
) self
.helper
.get(0).removeChild(self
.ghost
.get(0));
769 $.ui
.plugin
.add("resizable", "grid", {
771 resize: function(event
, ui
) {
772 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
;
773 o
.grid
= typeof o
.grid
== "number" ? [o
.grid
, o
.grid
] : o
.grid
;
774 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);
776 if (/^(se|s|e)$/.test(a
)) {
777 self
.size
.width
= os
.width
+ ox
;
778 self
.size
.height
= os
.height
+ oy
;
780 else if (/^(ne)$/.test(a
)) {
781 self
.size
.width
= os
.width
+ ox
;
782 self
.size
.height
= os
.height
+ oy
;
783 self
.position
.top
= op
.top
- oy
;
785 else if (/^(sw)$/.test(a
)) {
786 self
.size
.width
= os
.width
+ ox
;
787 self
.size
.height
= os
.height
+ oy
;
788 self
.position
.left
= op
.left
- ox
;
791 self
.size
.width
= os
.width
+ ox
;
792 self
.size
.height
= os
.height
+ oy
;
793 self
.position
.top
= op
.top
- oy
;
794 self
.position
.left
= op
.left
- ox
;
800 var num = function(v
) {
801 return parseInt(v
, 10) || 0;
804 var isNumber = function(value
) {
805 return !isNaN(parseInt(value
, 10));