2 * jQuery UI Resizable 1.8.2
4 * Copyright (c) 2010 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
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 //Opera fix for relative positioning
54 if (/relative/.test(this.element
.css('position')) && $.browser
.opera
)
55 this.element
.css({ position
: 'relative', top
: 'auto', left
: 'auto' });
57 //Create a wrapper element and set the wrapper to the new current internal element
59 $('<div class="ui-wrapper" style="overflow: hidden;"></div>').css({
60 position
: this.element
.css('position'),
61 width
: this.element
.outerWidth(),
62 height
: this.element
.outerHeight(),
63 top
: this.element
.css('top'),
64 left
: this.element
.css('left')
68 //Overwrite the original this.element
69 this.element
= this.element
.parent().data(
70 "resizable", this.element
.data('resizable')
73 this.elementIsWrapper
= true;
75 //Move margins to the wrapper
76 this.element
.css({ marginLeft
: this.originalElement
.css("marginLeft"), marginTop
: this.originalElement
.css("marginTop"), marginRight
: this.originalElement
.css("marginRight"), marginBottom
: this.originalElement
.css("marginBottom") });
77 this.originalElement
.css({ marginLeft
: 0, marginTop
: 0, marginRight
: 0, marginBottom
: 0});
79 //Prevent Safari textarea resize
80 this.originalResizeStyle
= this.originalElement
.css('resize');
81 this.originalElement
.css('resize', 'none');
83 //Push the actual element to our proportionallyResize internal array
84 this._proportionallyResizeElements
.push(this.originalElement
.css({ position
: 'static', zoom
: 1, display
: 'block' }));
86 // avoid IE jump (hard set the margin)
87 this.originalElement
.css({ margin
: this.originalElement
.css('margin') });
89 // fix handlers offset
90 this._proportionallyResize();
94 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' });
95 if(this.handles
.constructor == String
) {
97 if(this.handles
== 'all') this.handles
= 'n,e,s,w,se,sw,ne,nw';
98 var n
= this.handles
.split(","); this.handles
= {};
100 for(var i
= 0; i
< n
.length
; i
++) {
102 var handle
= $.trim(n
[i
]), hname
= 'ui-resizable-'+handle
;
103 var axis
= $('<div class="ui-resizable-handle ' + hname
+ '"></div>');
105 // increase zIndex of sw, se, ne, nw axis
106 //TODO : this modifies original option
107 if(/sw|se|ne|nw/.test(handle
)) axis
.css({ zIndex
: ++o
.zIndex
});
109 //TODO : What's going on here?
110 if ('se' == handle
) {
111 axis
.addClass('ui-icon ui-icon-gripsmall-diagonal-se');
114 //Insert into internal handles object and append to element
115 this.handles
[handle
] = '.ui-resizable-'+handle
;
116 this.element
.append(axis
);
121 this._renderAxis = function(target
) {
123 target
= target
|| this.element
;
125 for(var i
in this.handles
) {
127 if(this.handles
[i
].constructor == String
)
128 this.handles
[i
] = $(this.handles
[i
], this.element
).show();
130 //Apply pad to wrapper element, needed to fix axis position (textarea, inputs, scrolls)
131 if (this.elementIsWrapper
&& this.originalElement
[0].nodeName
.match(/textarea|input|select|button/i)) {
133 var axis
= $(this.handles
[i
], this.element
), padWrapper
= 0;
135 //Checking the correct pad and border
136 padWrapper
= /sw|ne|nw|se|n|s/.test(i
) ? axis
.outerHeight() : axis
.outerWidth();
138 //The padding type i have to apply...
139 var padPos
= [ 'padding',
140 /ne|nw|n/.test(i
) ? 'Top' :
141 /se|sw|s/.test(i
) ? 'Bottom' :
142 /^e$/.test(i
) ? 'Right' : 'Left' ].join("");
144 target
.css(padPos
, padWrapper
);
146 this._proportionallyResize();
150 //TODO: What's that good for? There's not anything to be executed left
151 if(!$(this.handles
[i
]).length
)
157 //TODO: make renderAxis a prototype function
158 this._renderAxis(this.element
);
160 this._handles
= $('.ui-resizable-handle', this.element
)
164 this._handles
.mouseover(function() {
165 if (!self
.resizing
) {
167 var axis
= this.className
.match(/ui-resizable-(se|sw|ne|nw|n|e|s|w)/i);
169 self
.axis
= axis
&& axis
[1] ? axis
[1] : 'se';
173 //If we want to auto hide the elements
175 this._handles
.hide();
177 .addClass("ui-resizable-autohide")
179 $(this).removeClass("ui-resizable-autohide");
180 self
._handles
.show();
183 if (!self
.resizing
) {
184 $(this).addClass("ui-resizable-autohide");
185 self
._handles
.hide();
190 //Initialize the mouse interaction
195 destroy: function() {
197 this._mouseDestroy();
199 var _destroy = function(exp
) {
200 $(exp
).removeClass("ui-resizable ui-resizable-disabled ui-resizable-resizing")
201 .removeData("resizable").unbind(".resizable").find('.ui-resizable-handle').remove();
204 //TODO: Unwrap at same DOM position
205 if (this.elementIsWrapper
) {
206 _destroy(this.element
);
207 var wrapper
= this.element
;
209 this.originalElement
.css({
210 position
: wrapper
.css('position'),
211 width
: wrapper
.outerWidth(),
212 height
: wrapper
.outerHeight(),
213 top
: wrapper
.css('top'),
214 left
: wrapper
.css('left')
219 this.originalElement
.css('resize', this.originalResizeStyle
);
220 _destroy(this.originalElement
);
225 _mouseCapture: function(event
) {
227 for (var i
in this.handles
) {
228 if ($(this.handles
[i
])[0] == event
.target
) {
233 return !this.options
.disabled
&& handle
;
236 _mouseStart: function(event
) {
238 var o
= this.options
, iniPos
= this.element
.position(), el
= this.element
;
240 this.resizing
= true;
241 this.documentScroll
= { top
: $(document
).scrollTop(), left
: $(document
).scrollLeft() };
243 // bugfix for http://dev.jquery.com/ticket/1749
244 if (el
.is('.ui-draggable') || (/absolute/).test(el
.css('position'))) {
245 el
.css({ position
: 'absolute', top
: iniPos
.top
, left
: iniPos
.left
});
248 //Opera fixing relative position
249 if ($.browser
.opera
&& (/relative/).test(el
.css('position')))
250 el
.css({ position
: 'relative', top
: 'auto', left
: 'auto' });
254 var curleft
= num(this.helper
.css('left')), curtop
= num(this.helper
.css('top'));
257 curleft
+= $(o
.containment
).scrollLeft() || 0;
258 curtop
+= $(o
.containment
).scrollTop() || 0;
261 //Store needed variables
262 this.offset
= this.helper
.offset();
263 this.position
= { left
: curleft
, top
: curtop
};
264 this.size
= this._helper
? { width
: el
.outerWidth(), height
: el
.outerHeight() } : { width
: el
.width(), height
: el
.height() };
265 this.originalSize
= this._helper
? { width
: el
.outerWidth(), height
: el
.outerHeight() } : { width
: el
.width(), height
: el
.height() };
266 this.originalPosition
= { left
: curleft
, top
: curtop
};
267 this.sizeDiff
= { width
: el
.outerWidth() - el
.width(), height
: el
.outerHeight() - el
.height() };
268 this.originalMousePosition
= { left
: event
.pageX
, top
: event
.pageY
};
271 this.aspectRatio
= (typeof o
.aspectRatio
== 'number') ? o
.aspectRatio
: ((this.originalSize
.width
/ this.originalSize
.height
) || 1);
273 var cursor
= $('.ui-resizable-' + this.axis
).css('cursor');
274 $('body').css('cursor', cursor
== 'auto' ? this.axis
+ '-resize' : cursor
);
276 el
.addClass("ui-resizable-resizing");
277 this._propagate("start", event
);
281 _mouseDrag: function(event
) {
283 //Increase performance, avoid regex
284 var el
= this.helper
, o
= this.options
, props
= {},
285 self
= this, smp
= this.originalMousePosition
, a
= this.axis
;
287 var dx
= (event
.pageX
-smp
.left
)||0, dy
= (event
.pageY
-smp
.top
)||0;
288 var trigger
= this._change
[a
];
289 if (!trigger
) return false;
291 // Calculate the attrs that will be change
292 var data
= trigger
.apply(this, [event
, dx
, dy
]), ie6
= $.browser
.msie
&& $.browser
.version
< 7, csdif
= this.sizeDiff
;
294 if (this._aspectRatio
|| event
.shiftKey
)
295 data
= this._updateRatio(data
, event
);
297 data
= this._respectSize(data
, event
);
299 // plugins callbacks need to be called first
300 this._propagate("resize", event
);
303 top
: this.position
.top
+ "px", left
: this.position
.left
+ "px",
304 width
: this.size
.width
+ "px", height
: this.size
.height
+ "px"
307 if (!this._helper
&& this._proportionallyResizeElements
.length
)
308 this._proportionallyResize();
310 this._updateCache(data
);
312 // calling the user callback at the end
313 this._trigger('resize', event
, this.ui());
318 _mouseStop: function(event
) {
320 this.resizing
= false;
321 var o
= this.options
, self
= this;
324 var pr
= this._proportionallyResizeElements
, ista
= pr
.length
&& (/textarea/i).test(pr
[0].nodeName
),
325 soffseth
= ista
&& $.ui
.hasScroll(pr
[0], 'left') /* TODO - jump height */ ? 0 : self
.sizeDiff
.height
,
326 soffsetw
= ista
? 0 : self
.sizeDiff
.width
;
328 var s
= { width
: (self
.size
.width
- soffsetw
), height
: (self
.size
.height
- soffseth
) },
329 left
= (parseInt(self
.element
.css('left'), 10) + (self
.position
.left
- self
.originalPosition
.left
)) || null,
330 top
= (parseInt(self
.element
.css('top'), 10) + (self
.position
.top
- self
.originalPosition
.top
)) || null;
333 this.element
.css($.extend(s
, { top
: top
, left
: left
}));
335 self
.helper
.height(self
.size
.height
);
336 self
.helper
.width(self
.size
.width
);
338 if (this._helper
&& !o
.animate
) this._proportionallyResize();
341 $('body').css('cursor', 'auto');
343 this.element
.removeClass("ui-resizable-resizing");
345 this._propagate("stop", event
);
347 if (this._helper
) this.helper
.remove();
352 _updateCache: function(data
) {
353 var o
= this.options
;
354 this.offset
= this.helper
.offset();
355 if (isNumber(data
.left
)) this.position
.left
= data
.left
;
356 if (isNumber(data
.top
)) this.position
.top
= data
.top
;
357 if (isNumber(data
.height
)) this.size
.height
= data
.height
;
358 if (isNumber(data
.width
)) this.size
.width
= data
.width
;
361 _updateRatio: function(data
, event
) {
363 var o
= this.options
, cpos
= this.position
, csize
= this.size
, a
= this.axis
;
365 if (data
.height
) data
.width
= (csize
.height
* this.aspectRatio
);
366 else if (data
.width
) data
.height
= (csize
.width
/ this.aspectRatio
);
369 data
.left
= cpos
.left
+ (csize
.width
- data
.width
);
373 data
.top
= cpos
.top
+ (csize
.height
- data
.height
);
374 data
.left
= cpos
.left
+ (csize
.width
- data
.width
);
380 _respectSize: function(data
, event
) {
382 var el
= this.helper
, o
= this.options
, pRatio
= this._aspectRatio
|| event
.shiftKey
, a
= this.axis
,
383 ismaxw
= isNumber(data
.width
) && o
.maxWidth
&& (o
.maxWidth
< data
.width
), ismaxh
= isNumber(data
.height
) && o
.maxHeight
&& (o
.maxHeight
< data
.height
),
384 isminw
= isNumber(data
.width
) && o
.minWidth
&& (o
.minWidth
> data
.width
), isminh
= isNumber(data
.height
) && o
.minHeight
&& (o
.minHeight
> data
.height
);
386 if (isminw
) data
.width
= o
.minWidth
;
387 if (isminh
) data
.height
= o
.minHeight
;
388 if (ismaxw
) data
.width
= o
.maxWidth
;
389 if (ismaxh
) data
.height
= o
.maxHeight
;
391 var dw
= this.originalPosition
.left
+ this.originalSize
.width
, dh
= this.position
.top
+ this.size
.height
;
392 var cw
= /sw|nw|w/.test(a
), ch
= /nw|ne|n/.test(a
);
394 if (isminw
&& cw
) data
.left
= dw
- o
.minWidth
;
395 if (ismaxw
&& cw
) data
.left
= dw
- o
.maxWidth
;
396 if (isminh
&& ch
) data
.top
= dh
- o
.minHeight
;
397 if (ismaxh
&& ch
) data
.top
= dh
- o
.maxHeight
;
399 // fixing jump error on top/left - bug #2330
400 var isNotwh
= !data
.width
&& !data
.height
;
401 if (isNotwh
&& !data
.left
&& data
.top
) data
.top
= null;
402 else if (isNotwh
&& !data
.top
&& data
.left
) data
.left
= null;
407 _proportionallyResize: function() {
409 var o
= this.options
;
410 if (!this._proportionallyResizeElements
.length
) return;
411 var element
= this.helper
|| this.element
;
413 for (var i
=0; i
< this._proportionallyResizeElements
.length
; i
++) {
415 var prel
= this._proportionallyResizeElements
[i
];
417 if (!this.borderDif
) {
418 var b
= [prel
.css('borderTopWidth'), prel
.css('borderRightWidth'), prel
.css('borderBottomWidth'), prel
.css('borderLeftWidth')],
419 p
= [prel
.css('paddingTop'), prel
.css('paddingRight'), prel
.css('paddingBottom'), prel
.css('paddingLeft')];
421 this.borderDif
= $.map(b
, function(v
, i
) {
422 var border
= parseInt(v
,10)||0, padding
= parseInt(p
[i
],10)||0;
423 return border
+ padding
;
427 if ($.browser
.msie
&& !(!($(element
).is(':hidden') || $(element
).parents(':hidden').length
)))
431 height
: (element
.height() - this.borderDif
[0] - this.borderDif
[2]) || 0,
432 width
: (element
.width() - this.borderDif
[1] - this.borderDif
[3]) || 0
439 _renderProxy: function() {
441 var el
= this.element
, o
= this.options
;
442 this.elementOffset
= el
.offset();
446 this.helper
= this.helper
|| $('<div style="overflow:hidden;"></div>');
448 // fix ie6 offset TODO: This seems broken
449 var ie6
= $.browser
.msie
&& $.browser
.version
< 7, ie6offset
= (ie6
? 1 : 0),
450 pxyoffset
= ( ie6
? 2 : -1 );
452 this.helper
.addClass(this._helper
).css({
453 width
: this.element
.outerWidth() + pxyoffset
,
454 height
: this.element
.outerHeight() + pxyoffset
,
455 position
: 'absolute',
456 left
: this.elementOffset
.left
- ie6offset
+'px',
457 top
: this.elementOffset
.top
- ie6offset
+'px',
458 zIndex
: ++o
.zIndex
//TODO: Don't modify option
466 this.helper
= this.element
;
472 e: function(event
, dx
, dy
) {
473 return { width
: this.originalSize
.width
+ dx
};
475 w: function(event
, dx
, dy
) {
476 var o
= this.options
, cs
= this.originalSize
, sp
= this.originalPosition
;
477 return { left
: sp
.left
+ dx
, width
: cs
.width
- dx
};
479 n: function(event
, dx
, dy
) {
480 var o
= this.options
, cs
= this.originalSize
, sp
= this.originalPosition
;
481 return { top
: sp
.top
+ dy
, height
: cs
.height
- dy
};
483 s: function(event
, dx
, dy
) {
484 return { height
: this.originalSize
.height
+ dy
};
486 se: function(event
, dx
, dy
) {
487 return $.extend(this._change
.s
.apply(this, arguments
), this._change
.e
.apply(this, [event
, dx
, dy
]));
489 sw: function(event
, dx
, dy
) {
490 return $.extend(this._change
.s
.apply(this, arguments
), this._change
.w
.apply(this, [event
, dx
, dy
]));
492 ne: function(event
, dx
, dy
) {
493 return $.extend(this._change
.n
.apply(this, arguments
), this._change
.e
.apply(this, [event
, dx
, dy
]));
495 nw: function(event
, dx
, dy
) {
496 return $.extend(this._change
.n
.apply(this, arguments
), this._change
.w
.apply(this, [event
, dx
, dy
]));
500 _propagate: function(n
, event
) {
501 $.ui
.plugin
.call(this, n
, [event
, this.ui()]);
502 (n
!= "resize" && this._trigger(n
, event
, this.ui()));
509 originalElement
: this.originalElement
,
510 element
: this.element
,
512 position
: this.position
,
514 originalSize
: this.originalSize
,
515 originalPosition
: this.originalPosition
521 $.extend($.ui
.resizable
, {
526 * Resizable Extensions
529 $.ui
.plugin
.add("resizable", "alsoResize", {
531 start: function(event
, ui
) {
533 var self
= $(this).data("resizable"), o
= self
.options
;
535 var _store = function(exp
) {
536 $(exp
).each(function() {
537 $(this).data("resizable-alsoresize", {
538 width
: parseInt($(this).width(), 10), height
: parseInt($(this).height(), 10),
539 left
: parseInt($(this).css('left'), 10), top
: parseInt($(this).css('top'), 10)
544 if (typeof(o
.alsoResize
) == 'object' && !o
.alsoResize
.parentNode
) {
545 if (o
.alsoResize
.length
) { o
.alsoResize
= o
.alsoResize
[0]; _store(o
.alsoResize
); }
546 else { $.each(o
.alsoResize
, function(exp
, c
) { _store(exp
); }); }
548 _store(o
.alsoResize
);
552 resize: function(event
, ui
){
553 var self
= $(this).data("resizable"), o
= self
.options
, os
= self
.originalSize
, op
= self
.originalPosition
;
556 height
: (self
.size
.height
- os
.height
) || 0, width
: (self
.size
.width
- os
.width
) || 0,
557 top
: (self
.position
.top
- op
.top
) || 0, left
: (self
.position
.left
- op
.left
) || 0
560 _alsoResize = function(exp
, c
) {
561 $(exp
).each(function() {
562 var el
= $(this), start
= $(this).data("resizable-alsoresize"), style
= {}, css
= c
&& c
.length
? c
: ['width', 'height', 'top', 'left'];
564 $.each(css
|| ['width', 'height', 'top', 'left'], function(i
, prop
) {
565 var sum
= (start
[prop
]||0) + (delta
[prop
]||0);
567 style
[prop
] = sum
|| null;
570 //Opera fixing relative position
571 if (/relative/.test(el
.css('position')) && $.browser
.opera
) {
572 self
._revertToRelativePosition
= true;
573 el
.css({ position
: 'absolute', top
: 'auto', left
: 'auto' });
580 if (typeof(o
.alsoResize
) == 'object' && !o
.alsoResize
.nodeType
) {
581 $.each(o
.alsoResize
, function(exp
, c
) { _alsoResize(exp
, c
); });
583 _alsoResize(o
.alsoResize
);
587 stop: function(event
, ui
){
588 var self
= $(this).data("resizable");
590 //Opera fixing relative position
591 if (self
._revertToRelativePosition
&& $.browser
.opera
) {
592 self
._revertToRelativePosition
= false;
593 el
.css({ position
: 'relative' });
596 $(this).removeData("resizable-alsoresize-start");
600 $.ui
.plugin
.add("resizable", "animate", {
602 stop: function(event
, ui
) {
603 var self
= $(this).data("resizable"), o
= self
.options
;
605 var pr
= self
._proportionallyResizeElements
, ista
= pr
.length
&& (/textarea/i).test(pr
[0].nodeName
),
606 soffseth
= ista
&& $.ui
.hasScroll(pr
[0], 'left') /* TODO - jump height */ ? 0 : self
.sizeDiff
.height
,
607 soffsetw
= ista
? 0 : self
.sizeDiff
.width
;
609 var style
= { width
: (self
.size
.width
- soffsetw
), height
: (self
.size
.height
- soffseth
) },
610 left
= (parseInt(self
.element
.css('left'), 10) + (self
.position
.left
- self
.originalPosition
.left
)) || null,
611 top
= (parseInt(self
.element
.css('top'), 10) + (self
.position
.top
- self
.originalPosition
.top
)) || null;
613 self
.element
.animate(
614 $.extend(style
, top
&& left
? { top
: top
, left
: left
} : {}), {
615 duration
: o
.animateDuration
,
616 easing
: o
.animateEasing
,
620 width
: parseInt(self
.element
.css('width'), 10),
621 height
: parseInt(self
.element
.css('height'), 10),
622 top
: parseInt(self
.element
.css('top'), 10),
623 left
: parseInt(self
.element
.css('left'), 10)
626 if (pr
&& pr
.length
) $(pr
[0]).css({ width
: data
.width
, height
: data
.height
});
628 // propagating resize, and updating values for each animation step
629 self
._updateCache(data
);
630 self
._propagate("resize", event
);
639 $.ui
.plugin
.add("resizable", "containment", {
641 start: function(event
, ui
) {
642 var self
= $(this).data("resizable"), o
= self
.options
, el
= self
.element
;
643 var oc
= o
.containment
, ce
= (oc
instanceof $) ? oc
.get(0) : (/parent/.test(oc
)) ? el
.parent().get(0) : oc
;
646 self
.containerElement
= $(ce
);
648 if (/document/.test(oc
) || oc
== document
) {
649 self
.containerOffset
= { left
: 0, top
: 0 };
650 self
.containerPosition
= { left
: 0, top
: 0 };
653 element
: $(document
), left
: 0, top
: 0,
654 width
: $(document
).width(), height
: $(document
).height() || document
.body
.parentNode
.scrollHeight
658 // i'm a node, so compute top, left, right, bottom
660 var element
= $(ce
), p
= [];
661 $([ "Top", "Right", "Left", "Bottom" ]).each(function(i
, name
) { p
[i
] = num(element
.css("padding" + name
)); });
663 self
.containerOffset
= element
.offset();
664 self
.containerPosition
= element
.position();
665 self
.containerSize
= { height
: (element
.innerHeight() - p
[3]), width
: (element
.innerWidth() - p
[1]) };
667 var co
= self
.containerOffset
, ch
= self
.containerSize
.height
, cw
= self
.containerSize
.width
,
668 width
= ($.ui
.hasScroll(ce
, "left") ? ce
.scrollWidth
: cw
), height
= ($.ui
.hasScroll(ce
) ? ce
.scrollHeight
: ch
);
671 element
: ce
, left
: co
.left
, top
: co
.top
, width
: width
, height
: height
676 resize: function(event
, ui
) {
677 var self
= $(this).data("resizable"), o
= self
.options
,
678 ps
= self
.containerSize
, co
= self
.containerOffset
, cs
= self
.size
, cp
= self
.position
,
679 pRatio
= self
._aspectRatio
|| event
.shiftKey
, cop
= { top
:0, left
:0 }, ce
= self
.containerElement
;
681 if (ce
[0] != document
&& (/static/).test(ce
.css('position'))) cop
= co
;
683 if (cp
.left
< (self
._helper
? co
.left
: 0)) {
684 self
.size
.width
= self
.size
.width
+ (self
._helper
? (self
.position
.left
- co
.left
) : (self
.position
.left
- cop
.left
));
685 if (pRatio
) self
.size
.height
= self
.size
.width
/ o
.aspectRatio
;
686 self
.position
.left
= o
.helper
? co
.left
: 0;
689 if (cp
.top
< (self
._helper
? co
.top
: 0)) {
690 self
.size
.height
= self
.size
.height
+ (self
._helper
? (self
.position
.top
- co
.top
) : self
.position
.top
);
691 if (pRatio
) self
.size
.width
= self
.size
.height
* o
.aspectRatio
;
692 self
.position
.top
= self
._helper
? co
.top
: 0;
695 self
.offset
.left
= self
.parentData
.left
+self
.position
.left
;
696 self
.offset
.top
= self
.parentData
.top
+self
.position
.top
;
698 var woset
= Math
.abs( (self
._helper
? self
.offset
.left
- cop
.left
: (self
.offset
.left
- cop
.left
)) + self
.sizeDiff
.width
),
699 hoset
= Math
.abs( (self
._helper
? self
.offset
.top
- cop
.top
: (self
.offset
.top
- co
.top
)) + self
.sizeDiff
.height
);
701 var isParent
= self
.containerElement
.get(0) == self
.element
.parent().get(0),
702 isOffsetRelative
= /relative|absolute/.test(self
.containerElement
.css('position'));
704 if(isParent
&& isOffsetRelative
) woset
-= self
.parentData
.left
;
706 if (woset
+ self
.size
.width
>= self
.parentData
.width
) {
707 self
.size
.width
= self
.parentData
.width
- woset
;
708 if (pRatio
) self
.size
.height
= self
.size
.width
/ self
.aspectRatio
;
711 if (hoset
+ self
.size
.height
>= self
.parentData
.height
) {
712 self
.size
.height
= self
.parentData
.height
- hoset
;
713 if (pRatio
) self
.size
.width
= self
.size
.height
* self
.aspectRatio
;
717 stop: function(event
, ui
){
718 var self
= $(this).data("resizable"), o
= self
.options
, cp
= self
.position
,
719 co
= self
.containerOffset
, cop
= self
.containerPosition
, ce
= self
.containerElement
;
721 var helper
= $(self
.helper
), ho
= helper
.offset(), w
= helper
.outerWidth() - self
.sizeDiff
.width
, h
= helper
.outerHeight() - self
.sizeDiff
.height
;
723 if (self
._helper
&& !o
.animate
&& (/relative/).test(ce
.css('position')))
724 $(this).css({ left
: ho
.left
- cop
.left
- co
.left
, width
: w
, height
: h
});
726 if (self
._helper
&& !o
.animate
&& (/static/).test(ce
.css('position')))
727 $(this).css({ left
: ho
.left
- cop
.left
- co
.left
, width
: w
, height
: h
});
732 $.ui
.plugin
.add("resizable", "ghost", {
734 start: function(event
, ui
) {
736 var self
= $(this).data("resizable"), o
= self
.options
, cs
= self
.size
;
738 self
.ghost
= self
.originalElement
.clone();
740 .css({ opacity
: .25, display
: 'block', position
: 'relative', height
: cs
.height
, width
: cs
.width
, margin
: 0, left
: 0, top
: 0 })
741 .addClass('ui-resizable-ghost')
742 .addClass(typeof o
.ghost
== 'string' ? o
.ghost
: '');
744 self
.ghost
.appendTo(self
.helper
);
748 resize: function(event
, ui
){
749 var self
= $(this).data("resizable"), o
= self
.options
;
750 if (self
.ghost
) self
.ghost
.css({ position
: 'relative', height
: self
.size
.height
, width
: self
.size
.width
});
753 stop: function(event
, ui
){
754 var self
= $(this).data("resizable"), o
= self
.options
;
755 if (self
.ghost
&& self
.helper
) self
.helper
.get(0).removeChild(self
.ghost
.get(0));
760 $.ui
.plugin
.add("resizable", "grid", {
762 resize: function(event
, ui
) {
763 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
;
764 o
.grid
= typeof o
.grid
== "number" ? [o
.grid
, o
.grid
] : o
.grid
;
765 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);
767 if (/^(se|s|e)$/.test(a
)) {
768 self
.size
.width
= os
.width
+ ox
;
769 self
.size
.height
= os
.height
+ oy
;
771 else if (/^(ne)$/.test(a
)) {
772 self
.size
.width
= os
.width
+ ox
;
773 self
.size
.height
= os
.height
+ oy
;
774 self
.position
.top
= op
.top
- oy
;
776 else if (/^(sw)$/.test(a
)) {
777 self
.size
.width
= os
.width
+ ox
;
778 self
.size
.height
= os
.height
+ oy
;
779 self
.position
.left
= op
.left
- ox
;
782 self
.size
.width
= os
.width
+ ox
;
783 self
.size
.height
= os
.height
+ oy
;
784 self
.position
.top
= op
.top
- oy
;
785 self
.position
.left
= op
.left
- ox
;
791 var num = function(v
) {
792 return parseInt(v
, 10) || 0;
795 var isNumber = function(value
) {
796 return !isNaN(parseInt(value
, 10));