2 * jQuery UI Resizable 1.7.1
4 * Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
5 * Dual licensed under the MIT (MIT-LICENSE.txt)
6 * and GPL (GPL-LICENSE.txt) licenses.
8 * http://docs.jquery.com/UI/Resizables
15 $.widget("ui.resizable", $.extend({}, $.ui
.mouse
, {
19 var self
= this, o
= this.options
;
20 this.element
.addClass("ui-resizable");
23 _aspectRatio
: !!(o
.aspectRatio
),
24 aspectRatio
: o
.aspectRatio
,
25 originalElement
: this.element
,
26 _proportionallyResizeElements
: [],
27 _helper
: o
.helper
|| o
.ghost
|| o
.animate
? o
.helper
|| 'ui-resizable-helper' : null
30 //Wrap the element if it cannot hold child nodes
31 if(this.element
[0].nodeName
.match(/canvas|textarea|input|select|button|img/i)) {
33 //Opera fix for relative positioning
34 if (/relative/.test(this.element
.css('position')) && $.browser
.opera
)
35 this.element
.css({ position
: 'relative', top
: 'auto', left
: 'auto' });
37 //Create a wrapper element and set the wrapper to the new current internal element
39 $('<div class="ui-wrapper" style="overflow: hidden;"></div>').css({
40 position
: this.element
.css('position'),
41 width
: this.element
.outerWidth(),
42 height
: this.element
.outerHeight(),
43 top
: this.element
.css('top'),
44 left
: this.element
.css('left')
48 //Overwrite the original this.element
49 this.element
= this.element
.parent().data(
50 "resizable", this.element
.data('resizable')
53 this.elementIsWrapper
= true;
55 //Move margins to the wrapper
56 this.element
.css({ marginLeft
: this.originalElement
.css("marginLeft"), marginTop
: this.originalElement
.css("marginTop"), marginRight
: this.originalElement
.css("marginRight"), marginBottom
: this.originalElement
.css("marginBottom") });
57 this.originalElement
.css({ marginLeft
: 0, marginTop
: 0, marginRight
: 0, marginBottom
: 0});
59 //Prevent Safari textarea resize
60 this.originalResizeStyle
= this.originalElement
.css('resize');
61 this.originalElement
.css('resize', 'none');
63 //Push the actual element to our proportionallyResize internal array
64 this._proportionallyResizeElements
.push(this.originalElement
.css({ position
: 'static', zoom
: 1, display
: 'block' }));
66 // avoid IE jump (hard set the margin)
67 this.originalElement
.css({ margin
: this.originalElement
.css('margin') });
69 // fix handlers offset
70 this._proportionallyResize();
74 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' });
75 if(this.handles
.constructor == String
) {
77 if(this.handles
== 'all') this.handles
= 'n,e,s,w,se,sw,ne,nw';
78 var n
= this.handles
.split(","); this.handles
= {};
80 for(var i
= 0; i
< n
.length
; i
++) {
82 var handle
= $.trim(n
[i
]), hname
= 'ui-resizable-'+handle
;
83 var axis
= $('<div class="ui-resizable-handle ' + hname
+ '"></div>');
85 // increase zIndex of sw, se, ne, nw axis
86 //TODO : this modifies original option
87 if(/sw|se|ne|nw/.test(handle
)) axis
.css({ zIndex
: ++o
.zIndex
});
89 //TODO : What's going on here?
91 axis
.addClass('ui-icon ui-icon-gripsmall-diagonal-se');
94 //Insert into internal handles object and append to element
95 this.handles
[handle
] = '.ui-resizable-'+handle
;
96 this.element
.append(axis
);
101 this._renderAxis = function(target
) {
103 target
= target
|| this.element
;
105 for(var i
in this.handles
) {
107 if(this.handles
[i
].constructor == String
)
108 this.handles
[i
] = $(this.handles
[i
], this.element
).show();
110 //Apply pad to wrapper element, needed to fix axis position (textarea, inputs, scrolls)
111 if (this.elementIsWrapper
&& this.originalElement
[0].nodeName
.match(/textarea|input|select|button/i)) {
113 var axis
= $(this.handles
[i
], this.element
), padWrapper
= 0;
115 //Checking the correct pad and border
116 padWrapper
= /sw|ne|nw|se|n|s/.test(i
) ? axis
.outerHeight() : axis
.outerWidth();
118 //The padding type i have to apply...
119 var padPos
= [ 'padding',
120 /ne|nw|n/.test(i
) ? 'Top' :
121 /se|sw|s/.test(i
) ? 'Bottom' :
122 /^e$/.test(i
) ? 'Right' : 'Left' ].join("");
124 target
.css(padPos
, padWrapper
);
126 this._proportionallyResize();
130 //TODO: What's that good for? There's not anything to be executed left
131 if(!$(this.handles
[i
]).length
)
137 //TODO: make renderAxis a prototype function
138 this._renderAxis(this.element
);
140 this._handles
= $('.ui-resizable-handle', this.element
)
144 this._handles
.mouseover(function() {
145 if (!self
.resizing
) {
147 var axis
= this.className
.match(/ui-resizable-(se|sw|ne|nw|n|e|s|w)/i);
149 self
.axis
= axis
&& axis
[1] ? axis
[1] : 'se';
153 //If we want to auto hide the elements
155 this._handles
.hide();
157 .addClass("ui-resizable-autohide")
159 $(this).removeClass("ui-resizable-autohide");
160 self
._handles
.show();
163 if (!self
.resizing
) {
164 $(this).addClass("ui-resizable-autohide");
165 self
._handles
.hide();
170 //Initialize the mouse interaction
175 destroy: function() {
177 this._mouseDestroy();
179 var _destroy = function(exp
) {
180 $(exp
).removeClass("ui-resizable ui-resizable-disabled ui-resizable-resizing")
181 .removeData("resizable").unbind(".resizable").find('.ui-resizable-handle').remove();
184 //TODO: Unwrap at same DOM position
185 if (this.elementIsWrapper
) {
186 _destroy(this.element
);
187 var wrapper
= this.element
;
188 wrapper
.parent().append(
189 this.originalElement
.css({
190 position
: wrapper
.css('position'),
191 width
: wrapper
.outerWidth(),
192 height
: wrapper
.outerHeight(),
193 top
: wrapper
.css('top'),
194 left
: wrapper
.css('left')
199 this.originalElement
.css('resize', this.originalResizeStyle
);
200 _destroy(this.originalElement
);
204 _mouseCapture: function(event
) {
207 for(var i
in this.handles
) {
208 if($(this.handles
[i
])[0] == event
.target
) handle
= true;
211 return this.options
.disabled
|| !!handle
;
215 _mouseStart: function(event
) {
217 var o
= this.options
, iniPos
= this.element
.position(), el
= this.element
;
219 this.resizing
= true;
220 this.documentScroll
= { top
: $(document
).scrollTop(), left
: $(document
).scrollLeft() };
222 // bugfix for http://dev.jquery.com/ticket/1749
223 if (el
.is('.ui-draggable') || (/absolute/).test(el
.css('position'))) {
224 el
.css({ position
: 'absolute', top
: iniPos
.top
, left
: iniPos
.left
});
227 //Opera fixing relative position
228 if ($.browser
.opera
&& (/relative/).test(el
.css('position')))
229 el
.css({ position
: 'relative', top
: 'auto', left
: 'auto' });
233 var curleft
= num(this.helper
.css('left')), curtop
= num(this.helper
.css('top'));
236 curleft
+= $(o
.containment
).scrollLeft() || 0;
237 curtop
+= $(o
.containment
).scrollTop() || 0;
240 //Store needed variables
241 this.offset
= this.helper
.offset();
242 this.position
= { left
: curleft
, top
: curtop
};
243 this.size
= this._helper
? { width
: el
.outerWidth(), height
: el
.outerHeight() } : { width
: el
.width(), height
: el
.height() };
244 this.originalSize
= this._helper
? { width
: el
.outerWidth(), height
: el
.outerHeight() } : { width
: el
.width(), height
: el
.height() };
245 this.originalPosition
= { left
: curleft
, top
: curtop
};
246 this.sizeDiff
= { width
: el
.outerWidth() - el
.width(), height
: el
.outerHeight() - el
.height() };
247 this.originalMousePosition
= { left
: event
.pageX
, top
: event
.pageY
};
250 this.aspectRatio
= (typeof o
.aspectRatio
== 'number') ? o
.aspectRatio
: ((this.originalSize
.width
/ this.originalSize
.height
) || 1);
252 var cursor
= $('.ui-resizable-' + this.axis
).css('cursor');
253 $('body').css('cursor', cursor
== 'auto' ? this.axis
+ '-resize' : cursor
);
255 el
.addClass("ui-resizable-resizing");
256 this._propagate("start", event
);
260 _mouseDrag: function(event
) {
262 //Increase performance, avoid regex
263 var el
= this.helper
, o
= this.options
, props
= {},
264 self
= this, smp
= this.originalMousePosition
, a
= this.axis
;
266 var dx
= (event
.pageX
-smp
.left
)||0, dy
= (event
.pageY
-smp
.top
)||0;
267 var trigger
= this._change
[a
];
268 if (!trigger
) return false;
270 // Calculate the attrs that will be change
271 var data
= trigger
.apply(this, [event
, dx
, dy
]), ie6
= $.browser
.msie
&& $.browser
.version
< 7, csdif
= this.sizeDiff
;
273 if (this._aspectRatio
|| event
.shiftKey
)
274 data
= this._updateRatio(data
, event
);
276 data
= this._respectSize(data
, event
);
278 // plugins callbacks need to be called first
279 this._propagate("resize", event
);
282 top
: this.position
.top
+ "px", left
: this.position
.left
+ "px",
283 width
: this.size
.width
+ "px", height
: this.size
.height
+ "px"
286 if (!this._helper
&& this._proportionallyResizeElements
.length
)
287 this._proportionallyResize();
289 this._updateCache(data
);
291 // calling the user callback at the end
292 this._trigger('resize', event
, this.ui());
297 _mouseStop: function(event
) {
299 this.resizing
= false;
300 var o
= this.options
, self
= this;
303 var pr
= this._proportionallyResizeElements
, ista
= pr
.length
&& (/textarea/i).test(pr
[0].nodeName
),
304 soffseth
= ista
&& $.ui
.hasScroll(pr
[0], 'left') /* TODO - jump height */ ? 0 : self
.sizeDiff
.height
,
305 soffsetw
= ista
? 0 : self
.sizeDiff
.width
;
307 var s
= { width
: (self
.size
.width
- soffsetw
), height
: (self
.size
.height
- soffseth
) },
308 left
= (parseInt(self
.element
.css('left'), 10) + (self
.position
.left
- self
.originalPosition
.left
)) || null,
309 top
= (parseInt(self
.element
.css('top'), 10) + (self
.position
.top
- self
.originalPosition
.top
)) || null;
312 this.element
.css($.extend(s
, { top
: top
, left
: left
}));
314 self
.helper
.height(self
.size
.height
);
315 self
.helper
.width(self
.size
.width
);
317 if (this._helper
&& !o
.animate
) this._proportionallyResize();
320 $('body').css('cursor', 'auto');
322 this.element
.removeClass("ui-resizable-resizing");
324 this._propagate("stop", event
);
326 if (this._helper
) this.helper
.remove();
331 _updateCache: function(data
) {
332 var o
= this.options
;
333 this.offset
= this.helper
.offset();
334 if (isNumber(data
.left
)) this.position
.left
= data
.left
;
335 if (isNumber(data
.top
)) this.position
.top
= data
.top
;
336 if (isNumber(data
.height
)) this.size
.height
= data
.height
;
337 if (isNumber(data
.width
)) this.size
.width
= data
.width
;
340 _updateRatio: function(data
, event
) {
342 var o
= this.options
, cpos
= this.position
, csize
= this.size
, a
= this.axis
;
344 if (data
.height
) data
.width
= (csize
.height
* this.aspectRatio
);
345 else if (data
.width
) data
.height
= (csize
.width
/ this.aspectRatio
);
348 data
.left
= cpos
.left
+ (csize
.width
- data
.width
);
352 data
.top
= cpos
.top
+ (csize
.height
- data
.height
);
353 data
.left
= cpos
.left
+ (csize
.width
- data
.width
);
359 _respectSize: function(data
, event
) {
361 var el
= this.helper
, o
= this.options
, pRatio
= this._aspectRatio
|| event
.shiftKey
, a
= this.axis
,
362 ismaxw
= isNumber(data
.width
) && o
.maxWidth
&& (o
.maxWidth
< data
.width
), ismaxh
= isNumber(data
.height
) && o
.maxHeight
&& (o
.maxHeight
< data
.height
),
363 isminw
= isNumber(data
.width
) && o
.minWidth
&& (o
.minWidth
> data
.width
), isminh
= isNumber(data
.height
) && o
.minHeight
&& (o
.minHeight
> data
.height
);
365 if (isminw
) data
.width
= o
.minWidth
;
366 if (isminh
) data
.height
= o
.minHeight
;
367 if (ismaxw
) data
.width
= o
.maxWidth
;
368 if (ismaxh
) data
.height
= o
.maxHeight
;
370 var dw
= this.originalPosition
.left
+ this.originalSize
.width
, dh
= this.position
.top
+ this.size
.height
;
371 var cw
= /sw|nw|w/.test(a
), ch
= /nw|ne|n/.test(a
);
373 if (isminw
&& cw
) data
.left
= dw
- o
.minWidth
;
374 if (ismaxw
&& cw
) data
.left
= dw
- o
.maxWidth
;
375 if (isminh
&& ch
) data
.top
= dh
- o
.minHeight
;
376 if (ismaxh
&& ch
) data
.top
= dh
- o
.maxHeight
;
378 // fixing jump error on top/left - bug #2330
379 var isNotwh
= !data
.width
&& !data
.height
;
380 if (isNotwh
&& !data
.left
&& data
.top
) data
.top
= null;
381 else if (isNotwh
&& !data
.top
&& data
.left
) data
.left
= null;
386 _proportionallyResize: function() {
388 var o
= this.options
;
389 if (!this._proportionallyResizeElements
.length
) return;
390 var element
= this.helper
|| this.element
;
392 for (var i
=0; i
< this._proportionallyResizeElements
.length
; i
++) {
394 var prel
= this._proportionallyResizeElements
[i
];
396 if (!this.borderDif
) {
397 var b
= [prel
.css('borderTopWidth'), prel
.css('borderRightWidth'), prel
.css('borderBottomWidth'), prel
.css('borderLeftWidth')],
398 p
= [prel
.css('paddingTop'), prel
.css('paddingRight'), prel
.css('paddingBottom'), prel
.css('paddingLeft')];
400 this.borderDif
= $.map(b
, function(v
, i
) {
401 var border
= parseInt(v
,10)||0, padding
= parseInt(p
[i
],10)||0;
402 return border
+ padding
;
406 if ($.browser
.msie
&& !(!($(element
).is(':hidden') || $(element
).parents(':hidden').length
)))
410 height
: (element
.height() - this.borderDif
[0] - this.borderDif
[2]) || 0,
411 width
: (element
.width() - this.borderDif
[1] - this.borderDif
[3]) || 0
418 _renderProxy: function() {
420 var el
= this.element
, o
= this.options
;
421 this.elementOffset
= el
.offset();
425 this.helper
= this.helper
|| $('<div style="overflow:hidden;"></div>');
427 // fix ie6 offset TODO: This seems broken
428 var ie6
= $.browser
.msie
&& $.browser
.version
< 7, ie6offset
= (ie6
? 1 : 0),
429 pxyoffset
= ( ie6
? 2 : -1 );
431 this.helper
.addClass(this._helper
).css({
432 width
: this.element
.outerWidth() + pxyoffset
,
433 height
: this.element
.outerHeight() + pxyoffset
,
434 position
: 'absolute',
435 left
: this.elementOffset
.left
- ie6offset
+'px',
436 top
: this.elementOffset
.top
- ie6offset
+'px',
437 zIndex
: ++o
.zIndex
//TODO: Don't modify option
445 this.helper
= this.element
;
451 e: function(event
, dx
, dy
) {
452 return { width
: this.originalSize
.width
+ dx
};
454 w: function(event
, dx
, dy
) {
455 var o
= this.options
, cs
= this.originalSize
, sp
= this.originalPosition
;
456 return { left
: sp
.left
+ dx
, width
: cs
.width
- dx
};
458 n: function(event
, dx
, dy
) {
459 var o
= this.options
, cs
= this.originalSize
, sp
= this.originalPosition
;
460 return { top
: sp
.top
+ dy
, height
: cs
.height
- dy
};
462 s: function(event
, dx
, dy
) {
463 return { height
: this.originalSize
.height
+ dy
};
465 se: function(event
, dx
, dy
) {
466 return $.extend(this._change
.s
.apply(this, arguments
), this._change
.e
.apply(this, [event
, dx
, dy
]));
468 sw: function(event
, dx
, dy
) {
469 return $.extend(this._change
.s
.apply(this, arguments
), this._change
.w
.apply(this, [event
, dx
, dy
]));
471 ne: function(event
, dx
, dy
) {
472 return $.extend(this._change
.n
.apply(this, arguments
), this._change
.e
.apply(this, [event
, dx
, dy
]));
474 nw: function(event
, dx
, dy
) {
475 return $.extend(this._change
.n
.apply(this, arguments
), this._change
.w
.apply(this, [event
, dx
, dy
]));
479 _propagate: function(n
, event
) {
480 $.ui
.plugin
.call(this, n
, [event
, this.ui()]);
481 (n
!= "resize" && this._trigger(n
, event
, this.ui()));
488 originalElement
: this.originalElement
,
489 element
: this.element
,
491 position
: this.position
,
493 originalSize
: this.originalSize
,
494 originalPosition
: this.originalPosition
500 $.extend($.ui
.resizable
, {
502 eventPrefix
: "resize",
506 animateDuration
: "slow",
507 animateEasing
: "swing",
510 cancel
: ":input,option",
527 * Resizable Extensions
530 $.ui
.plugin
.add("resizable", "alsoResize", {
532 start: function(event
, ui
) {
534 var self
= $(this).data("resizable"), o
= self
.options
;
536 _store = function(exp
) {
537 $(exp
).each(function() {
538 $(this).data("resizable-alsoresize", {
539 width
: parseInt($(this).width(), 10), height
: parseInt($(this).height(), 10),
540 left
: parseInt($(this).css('left'), 10), top
: parseInt($(this).css('top'), 10)
545 if (typeof(o
.alsoResize
) == 'object' && !o
.alsoResize
.parentNode
) {
546 if (o
.alsoResize
.length
) { o
.alsoResize
= o
.alsoResize
[0]; _store(o
.alsoResize
); }
547 else { $.each(o
.alsoResize
, function(exp
, c
) { _store(exp
); }); }
549 _store(o
.alsoResize
);
553 resize: function(event
, ui
){
554 var self
= $(this).data("resizable"), o
= self
.options
, os
= self
.originalSize
, op
= self
.originalPosition
;
557 height
: (self
.size
.height
- os
.height
) || 0, width
: (self
.size
.width
- os
.width
) || 0,
558 top
: (self
.position
.top
- op
.top
) || 0, left
: (self
.position
.left
- op
.left
) || 0
561 _alsoResize = function(exp
, c
) {
562 $(exp
).each(function() {
563 var el
= $(this), start
= $(this).data("resizable-alsoresize"), style
= {}, css
= c
&& c
.length
? c
: ['width', 'height', 'top', 'left'];
565 $.each(css
|| ['width', 'height', 'top', 'left'], function(i
, prop
) {
566 var sum
= (start
[prop
]||0) + (delta
[prop
]||0);
568 style
[prop
] = sum
|| null;
571 //Opera fixing relative position
572 if (/relative/.test(el
.css('position')) && $.browser
.opera
) {
573 self
._revertToRelativePosition
= true;
574 el
.css({ position
: 'absolute', top
: 'auto', left
: 'auto' });
581 if (typeof(o
.alsoResize
) == 'object' && !o
.alsoResize
.nodeType
) {
582 $.each(o
.alsoResize
, function(exp
, c
) { _alsoResize(exp
, c
); });
584 _alsoResize(o
.alsoResize
);
588 stop: function(event
, ui
){
589 var self
= $(this).data("resizable");
591 //Opera fixing relative position
592 if (self
._revertToRelativePosition
&& $.browser
.opera
) {
593 self
._revertToRelativePosition
= false;
594 el
.css({ position
: 'relative' });
597 $(this).removeData("resizable-alsoresize-start");
601 $.ui
.plugin
.add("resizable", "animate", {
603 stop: function(event
, ui
) {
604 var self
= $(this).data("resizable"), o
= self
.options
;
606 var pr
= self
._proportionallyResizeElements
, ista
= pr
.length
&& (/textarea/i).test(pr
[0].nodeName
),
607 soffseth
= ista
&& $.ui
.hasScroll(pr
[0], 'left') /* TODO - jump height */ ? 0 : self
.sizeDiff
.height
,
608 soffsetw
= ista
? 0 : self
.sizeDiff
.width
;
610 var style
= { width
: (self
.size
.width
- soffsetw
), height
: (self
.size
.height
- soffseth
) },
611 left
= (parseInt(self
.element
.css('left'), 10) + (self
.position
.left
- self
.originalPosition
.left
)) || null,
612 top
= (parseInt(self
.element
.css('top'), 10) + (self
.position
.top
- self
.originalPosition
.top
)) || null;
614 self
.element
.animate(
615 $.extend(style
, top
&& left
? { top
: top
, left
: left
} : {}), {
616 duration
: o
.animateDuration
,
617 easing
: o
.animateEasing
,
621 width
: parseInt(self
.element
.css('width'), 10),
622 height
: parseInt(self
.element
.css('height'), 10),
623 top
: parseInt(self
.element
.css('top'), 10),
624 left
: parseInt(self
.element
.css('left'), 10)
627 if (pr
&& pr
.length
) $(pr
[0]).css({ width
: data
.width
, height
: data
.height
});
629 // propagating resize, and updating values for each animation step
630 self
._updateCache(data
);
631 self
._propagate("resize", event
);
640 $.ui
.plugin
.add("resizable", "containment", {
642 start: function(event
, ui
) {
643 var self
= $(this).data("resizable"), o
= self
.options
, el
= self
.element
;
644 var oc
= o
.containment
, ce
= (oc
instanceof $) ? oc
.get(0) : (/parent/.test(oc
)) ? el
.parent().get(0) : oc
;
647 self
.containerElement
= $(ce
);
649 if (/document/.test(oc
) || oc
== document
) {
650 self
.containerOffset
= { left
: 0, top
: 0 };
651 self
.containerPosition
= { left
: 0, top
: 0 };
654 element
: $(document
), left
: 0, top
: 0,
655 width
: $(document
).width(), height
: $(document
).height() || document
.body
.parentNode
.scrollHeight
659 // i'm a node, so compute top, left, right, bottom
661 var element
= $(ce
), p
= [];
662 $([ "Top", "Right", "Left", "Bottom" ]).each(function(i
, name
) { p
[i
] = num(element
.css("padding" + name
)); });
664 self
.containerOffset
= element
.offset();
665 self
.containerPosition
= element
.position();
666 self
.containerSize
= { height
: (element
.innerHeight() - p
[3]), width
: (element
.innerWidth() - p
[1]) };
668 var co
= self
.containerOffset
, ch
= self
.containerSize
.height
, cw
= self
.containerSize
.width
,
669 width
= ($.ui
.hasScroll(ce
, "left") ? ce
.scrollWidth
: cw
), height
= ($.ui
.hasScroll(ce
) ? ce
.scrollHeight
: ch
);
672 element
: ce
, left
: co
.left
, top
: co
.top
, width
: width
, height
: height
677 resize: function(event
, ui
) {
678 var self
= $(this).data("resizable"), o
= self
.options
,
679 ps
= self
.containerSize
, co
= self
.containerOffset
, cs
= self
.size
, cp
= self
.position
,
680 pRatio
= self
._aspectRatio
|| event
.shiftKey
, cop
= { top
:0, left
:0 }, ce
= self
.containerElement
;
682 if (ce
[0] != document
&& (/static/).test(ce
.css('position'))) cop
= co
;
684 if (cp
.left
< (self
._helper
? co
.left
: 0)) {
685 self
.size
.width
= self
.size
.width
+ (self
._helper
? (self
.position
.left
- co
.left
) : (self
.position
.left
- cop
.left
));
686 if (pRatio
) self
.size
.height
= self
.size
.width
/ o
.aspectRatio
;
687 self
.position
.left
= o
.helper
? co
.left
: 0;
690 if (cp
.top
< (self
._helper
? co
.top
: 0)) {
691 self
.size
.height
= self
.size
.height
+ (self
._helper
? (self
.position
.top
- co
.top
) : self
.position
.top
);
692 if (pRatio
) self
.size
.width
= self
.size
.height
* o
.aspectRatio
;
693 self
.position
.top
= self
._helper
? co
.top
: 0;
696 self
.offset
.left
= self
.parentData
.left
+self
.position
.left
;
697 self
.offset
.top
= self
.parentData
.top
+self
.position
.top
;
699 var woset
= Math
.abs( (self
._helper
? self
.offset
.left
- cop
.left
: (self
.offset
.left
- cop
.left
)) + self
.sizeDiff
.width
),
700 hoset
= Math
.abs( (self
._helper
? self
.offset
.top
- cop
.top
: (self
.offset
.top
- co
.top
)) + self
.sizeDiff
.height
);
702 var isParent
= self
.containerElement
.get(0) == self
.element
.parent().get(0),
703 isOffsetRelative
= /relative|absolute/.test(self
.containerElement
.css('position'));
705 if(isParent
&& isOffsetRelative
) woset
-= self
.parentData
.left
;
707 if (woset
+ self
.size
.width
>= self
.parentData
.width
) {
708 self
.size
.width
= self
.parentData
.width
- woset
;
709 if (pRatio
) self
.size
.height
= self
.size
.width
/ self
.aspectRatio
;
712 if (hoset
+ self
.size
.height
>= self
.parentData
.height
) {
713 self
.size
.height
= self
.parentData
.height
- hoset
;
714 if (pRatio
) self
.size
.width
= self
.size
.height
* self
.aspectRatio
;
718 stop: function(event
, ui
){
719 var self
= $(this).data("resizable"), o
= self
.options
, cp
= self
.position
,
720 co
= self
.containerOffset
, cop
= self
.containerPosition
, ce
= self
.containerElement
;
722 var helper
= $(self
.helper
), ho
= helper
.offset(), w
= helper
.outerWidth() - self
.sizeDiff
.width
, h
= helper
.outerHeight() - self
.sizeDiff
.height
;
724 if (self
._helper
&& !o
.animate
&& (/relative/).test(ce
.css('position')))
725 $(this).css({ left
: ho
.left
- cop
.left
- co
.left
, width
: w
, height
: h
});
727 if (self
._helper
&& !o
.animate
&& (/static/).test(ce
.css('position')))
728 $(this).css({ left
: ho
.left
- cop
.left
- co
.left
, width
: w
, height
: h
});
733 $.ui
.plugin
.add("resizable", "ghost", {
735 start: function(event
, ui
) {
737 var self
= $(this).data("resizable"), o
= self
.options
, cs
= self
.size
;
739 self
.ghost
= self
.originalElement
.clone();
741 .css({ opacity
: .25, display
: 'block', position
: 'relative', height
: cs
.height
, width
: cs
.width
, margin
: 0, left
: 0, top
: 0 })
742 .addClass('ui-resizable-ghost')
743 .addClass(typeof o
.ghost
== 'string' ? o
.ghost
: '');
745 self
.ghost
.appendTo(self
.helper
);
749 resize: function(event
, ui
){
750 var self
= $(this).data("resizable"), o
= self
.options
;
751 if (self
.ghost
) self
.ghost
.css({ position
: 'relative', height
: self
.size
.height
, width
: self
.size
.width
});
754 stop: function(event
, ui
){
755 var self
= $(this).data("resizable"), o
= self
.options
;
756 if (self
.ghost
&& self
.helper
) self
.helper
.get(0).removeChild(self
.ghost
.get(0));
761 $.ui
.plugin
.add("resizable", "grid", {
763 resize: function(event
, ui
) {
764 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
;
765 o
.grid
= typeof o
.grid
== "number" ? [o
.grid
, o
.grid
] : o
.grid
;
766 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);
768 if (/^(se|s|e)$/.test(a
)) {
769 self
.size
.width
= os
.width
+ ox
;
770 self
.size
.height
= os
.height
+ oy
;
772 else if (/^(ne)$/.test(a
)) {
773 self
.size
.width
= os
.width
+ ox
;
774 self
.size
.height
= os
.height
+ oy
;
775 self
.position
.top
= op
.top
- oy
;
777 else if (/^(sw)$/.test(a
)) {
778 self
.size
.width
= os
.width
+ ox
;
779 self
.size
.height
= os
.height
+ oy
;
780 self
.position
.left
= op
.left
- ox
;
783 self
.size
.width
= os
.width
+ ox
;
784 self
.size
.height
= os
.height
+ oy
;
785 self
.position
.top
= op
.top
- oy
;
786 self
.position
.left
= op
.left
- ox
;
792 var num = function(v
) {
793 return parseInt(v
, 10) || 0;
796 var isNumber = function(value
) {
797 return !isNaN(parseInt(value
, 10));