Total Complexity | 222 |
Complexity/F | 4.11 |
Lines of Code | 1183 |
Function Count | 54 |
Duplicated Lines | 41 |
Ratio | 3.47 % |
Changes | 0 |
Duplicate code is one of the most pungent code smells. A rule that is often used is to re-structure code once it is duplicated in three or more places.
Common duplication problems, and corresponding solutions are:
Complex classes like resources/lib/jquery-ui/ui/widgets/resizable.js often do a lot of different things. To break such a class down, we need to identify a cohesive component within that class. A common approach to find such a component is to look for fields/methods that share the same prefixes, or suffixes.
Once you have determined the fields that belong together, you can apply the Extract Class refactoring. If the component makes sense as a sub-class, Extract Subclass is also a candidate, and is often faster.
1 | /*! |
||
19 | ( function( factory ) { |
||
20 | if ( typeof define === "function" && define.amd ) { |
||
21 | |||
22 | // AMD. Register as an anonymous module. |
||
23 | define( [ |
||
24 | "jquery", |
||
25 | "./mouse", |
||
26 | "../disable-selection", |
||
27 | "../plugin", |
||
28 | "../version", |
||
29 | "../widget" |
||
30 | ], factory ); |
||
31 | } else { |
||
32 | |||
33 | // Browser globals |
||
34 | factory( jQuery ); |
||
35 | } |
||
36 | }( function( $ ) { |
||
37 | |||
38 | $.widget( "ui.resizable", $.ui.mouse, { |
||
39 | version: "1.12.1", |
||
40 | widgetEventPrefix: "resize", |
||
41 | options: { |
||
42 | alsoResize: false, |
||
43 | animate: false, |
||
44 | animateDuration: "slow", |
||
45 | animateEasing: "swing", |
||
46 | aspectRatio: false, |
||
47 | autoHide: false, |
||
48 | classes: { |
||
49 | "ui-resizable-se": "ui-icon ui-icon-gripsmall-diagonal-se" |
||
50 | }, |
||
51 | containment: false, |
||
52 | ghost: false, |
||
53 | grid: false, |
||
54 | handles: "e,s,se", |
||
55 | helper: false, |
||
56 | maxHeight: null, |
||
57 | maxWidth: null, |
||
58 | minHeight: 10, |
||
59 | minWidth: 10, |
||
60 | |||
61 | // See #7960 |
||
62 | zIndex: 90, |
||
63 | |||
64 | // Callbacks |
||
65 | resize: null, |
||
66 | start: null, |
||
67 | stop: null |
||
68 | }, |
||
69 | |||
70 | _num: function( value ) { |
||
71 | return parseFloat( value ) || 0; |
||
72 | }, |
||
73 | |||
74 | _isNumber: function( value ) { |
||
75 | return !isNaN( parseFloat( value ) ); |
||
76 | }, |
||
77 | |||
78 | _hasScroll: function( el, a ) { |
||
79 | |||
80 | if ( $( el ).css( "overflow" ) === "hidden" ) { |
||
81 | return false; |
||
82 | } |
||
83 | |||
84 | var scroll = ( a && a === "left" ) ? "scrollLeft" : "scrollTop", |
||
85 | has = false; |
||
|
|||
86 | |||
87 | if ( el[ scroll ] > 0 ) { |
||
88 | return true; |
||
89 | } |
||
90 | |||
91 | // TODO: determine which cases actually cause this to happen |
||
92 | // if the element doesn't have the scroll set, see if it's possible to |
||
93 | // set the scroll |
||
94 | el[ scroll ] = 1; |
||
95 | has = ( el[ scroll ] > 0 ); |
||
96 | el[ scroll ] = 0; |
||
97 | return has; |
||
98 | }, |
||
99 | |||
100 | _create: function() { |
||
101 | |||
102 | var margins, |
||
103 | o = this.options, |
||
104 | that = this; |
||
105 | this._addClass( "ui-resizable" ); |
||
106 | |||
107 | $.extend( this, { |
||
108 | _aspectRatio: !!( o.aspectRatio ), |
||
109 | aspectRatio: o.aspectRatio, |
||
110 | originalElement: this.element, |
||
111 | _proportionallyResizeElements: [], |
||
112 | _helper: o.helper || o.ghost || o.animate ? o.helper || "ui-resizable-helper" : null |
||
113 | } ); |
||
114 | |||
115 | // Wrap the element if it cannot hold child nodes |
||
116 | if ( this.element[ 0 ].nodeName.match( /^(canvas|textarea|input|select|button|img)$/i ) ) { |
||
117 | |||
118 | this.element.wrap( |
||
119 | $( "<div class='ui-wrapper' style='overflow: hidden;'></div>" ).css( { |
||
120 | position: this.element.css( "position" ), |
||
121 | width: this.element.outerWidth(), |
||
122 | height: this.element.outerHeight(), |
||
123 | top: this.element.css( "top" ), |
||
124 | left: this.element.css( "left" ) |
||
125 | } ) |
||
126 | ); |
||
127 | |||
128 | this.element = this.element.parent().data( |
||
129 | "ui-resizable", this.element.resizable( "instance" ) |
||
130 | ); |
||
131 | |||
132 | this.elementIsWrapper = true; |
||
133 | |||
134 | margins = { |
||
135 | marginTop: this.originalElement.css( "marginTop" ), |
||
136 | marginRight: this.originalElement.css( "marginRight" ), |
||
137 | marginBottom: this.originalElement.css( "marginBottom" ), |
||
138 | marginLeft: this.originalElement.css( "marginLeft" ) |
||
139 | }; |
||
140 | |||
141 | this.element.css( margins ); |
||
142 | this.originalElement.css( "margin", 0 ); |
||
143 | |||
144 | // support: Safari |
||
145 | // Prevent Safari textarea resize |
||
146 | this.originalResizeStyle = this.originalElement.css( "resize" ); |
||
147 | this.originalElement.css( "resize", "none" ); |
||
148 | |||
149 | this._proportionallyResizeElements.push( this.originalElement.css( { |
||
150 | position: "static", |
||
151 | zoom: 1, |
||
152 | display: "block" |
||
153 | } ) ); |
||
154 | |||
155 | // Support: IE9 |
||
156 | // avoid IE jump (hard set the margin) |
||
157 | this.originalElement.css( margins ); |
||
158 | |||
159 | this._proportionallyResize(); |
||
160 | } |
||
161 | |||
162 | this._setupHandles(); |
||
163 | |||
164 | if ( o.autoHide ) { |
||
165 | $( this.element ) |
||
166 | .on( "mouseenter", function() { |
||
167 | if ( o.disabled ) { |
||
168 | return; |
||
169 | } |
||
170 | that._removeClass( "ui-resizable-autohide" ); |
||
171 | that._handles.show(); |
||
172 | } ) |
||
173 | .on( "mouseleave", function() { |
||
174 | if ( o.disabled ) { |
||
175 | return; |
||
176 | } |
||
177 | if ( !that.resizing ) { |
||
178 | that._addClass( "ui-resizable-autohide" ); |
||
179 | that._handles.hide(); |
||
180 | } |
||
181 | } ); |
||
182 | } |
||
183 | |||
184 | this._mouseInit(); |
||
185 | }, |
||
186 | |||
187 | _destroy: function() { |
||
188 | |||
189 | this._mouseDestroy(); |
||
190 | |||
191 | var wrapper, |
||
192 | _destroy = function( exp ) { |
||
193 | $( exp ) |
||
194 | .removeData( "resizable" ) |
||
195 | .removeData( "ui-resizable" ) |
||
196 | .off( ".resizable" ) |
||
197 | .find( ".ui-resizable-handle" ) |
||
198 | .remove(); |
||
199 | }; |
||
200 | |||
201 | // TODO: Unwrap at same DOM position |
||
202 | if ( this.elementIsWrapper ) { |
||
203 | _destroy( this.element ); |
||
204 | wrapper = this.element; |
||
205 | this.originalElement.css( { |
||
206 | position: wrapper.css( "position" ), |
||
207 | width: wrapper.outerWidth(), |
||
208 | height: wrapper.outerHeight(), |
||
209 | top: wrapper.css( "top" ), |
||
210 | left: wrapper.css( "left" ) |
||
211 | } ).insertAfter( wrapper ); |
||
212 | wrapper.remove(); |
||
213 | } |
||
214 | |||
215 | this.originalElement.css( "resize", this.originalResizeStyle ); |
||
216 | _destroy( this.originalElement ); |
||
217 | |||
218 | return this; |
||
219 | }, |
||
220 | |||
221 | _setOption: function( key, value ) { |
||
222 | this._super( key, value ); |
||
223 | |||
224 | switch ( key ) { |
||
225 | case "handles": |
||
226 | this._removeHandles(); |
||
227 | this._setupHandles(); |
||
228 | break; |
||
229 | default: |
||
230 | break; |
||
231 | } |
||
232 | }, |
||
233 | |||
234 | _setupHandles: function() { |
||
235 | var o = this.options, handle, i, n, hname, axis, that = this; |
||
236 | this.handles = o.handles || |
||
237 | ( !$( ".ui-resizable-handle", this.element ).length ? |
||
238 | "e,s,se" : { |
||
239 | n: ".ui-resizable-n", |
||
240 | e: ".ui-resizable-e", |
||
241 | s: ".ui-resizable-s", |
||
242 | w: ".ui-resizable-w", |
||
243 | se: ".ui-resizable-se", |
||
244 | sw: ".ui-resizable-sw", |
||
245 | ne: ".ui-resizable-ne", |
||
246 | nw: ".ui-resizable-nw" |
||
247 | } ); |
||
248 | |||
249 | this._handles = $(); |
||
250 | if ( this.handles.constructor === String ) { |
||
251 | |||
252 | if ( this.handles === "all" ) { |
||
253 | this.handles = "n,e,s,w,se,sw,ne,nw"; |
||
254 | } |
||
255 | |||
256 | n = this.handles.split( "," ); |
||
257 | this.handles = {}; |
||
258 | |||
259 | for ( i = 0; i < n.length; i++ ) { |
||
260 | |||
261 | handle = $.trim( n[ i ] ); |
||
262 | hname = "ui-resizable-" + handle; |
||
263 | axis = $( "<div>" ); |
||
264 | this._addClass( axis, "ui-resizable-handle " + hname ); |
||
265 | |||
266 | axis.css( { zIndex: o.zIndex } ); |
||
267 | |||
268 | this.handles[ handle ] = ".ui-resizable-" + handle; |
||
269 | this.element.append( axis ); |
||
270 | } |
||
271 | |||
272 | } |
||
273 | |||
274 | this._renderAxis = function( target ) { |
||
275 | |||
276 | var i, axis, padPos, padWrapper; |
||
277 | |||
278 | target = target || this.element; |
||
279 | |||
280 | for ( i in this.handles ) { |
||
281 | |||
282 | if ( this.handles[ i ].constructor === String ) { |
||
283 | this.handles[ i ] = this.element.children( this.handles[ i ] ).first().show(); |
||
284 | } else if ( this.handles[ i ].jquery || this.handles[ i ].nodeType ) { |
||
285 | this.handles[ i ] = $( this.handles[ i ] ); |
||
286 | this._on( this.handles[ i ], { "mousedown": that._mouseDown } ); |
||
287 | } |
||
288 | |||
289 | if ( this.elementIsWrapper && |
||
290 | this.originalElement[ 0 ] |
||
291 | .nodeName |
||
292 | .match( /^(textarea|input|select|button)$/i ) ) { |
||
293 | axis = $( this.handles[ i ], this.element ); |
||
294 | |||
295 | padWrapper = /sw|ne|nw|se|n|s/.test( i ) ? |
||
296 | axis.outerHeight() : |
||
297 | axis.outerWidth(); |
||
298 | |||
299 | padPos = [ "padding", |
||
300 | /ne|nw|n/.test( i ) ? "Top" : |
||
301 | /se|sw|s/.test( i ) ? "Bottom" : |
||
302 | /^e$/.test( i ) ? "Right" : "Left" ].join( "" ); |
||
303 | |||
304 | target.css( padPos, padWrapper ); |
||
305 | |||
306 | this._proportionallyResize(); |
||
307 | } |
||
308 | |||
309 | this._handles = this._handles.add( this.handles[ i ] ); |
||
310 | } |
||
311 | }; |
||
312 | |||
313 | // TODO: make renderAxis a prototype function |
||
314 | this._renderAxis( this.element ); |
||
315 | |||
316 | this._handles = this._handles.add( this.element.find( ".ui-resizable-handle" ) ); |
||
317 | this._handles.disableSelection(); |
||
318 | |||
319 | this._handles.on( "mouseover", function() { |
||
320 | if ( !that.resizing ) { |
||
321 | if ( this.className ) { |
||
322 | axis = this.className.match( /ui-resizable-(se|sw|ne|nw|n|e|s|w)/i ); |
||
323 | } |
||
324 | that.axis = axis && axis[ 1 ] ? axis[ 1 ] : "se"; |
||
325 | } |
||
326 | } ); |
||
327 | |||
328 | if ( o.autoHide ) { |
||
329 | this._handles.hide(); |
||
330 | this._addClass( "ui-resizable-autohide" ); |
||
331 | } |
||
332 | }, |
||
333 | |||
334 | _removeHandles: function() { |
||
335 | this._handles.remove(); |
||
336 | }, |
||
337 | |||
338 | _mouseCapture: function( event ) { |
||
339 | var i, handle, |
||
340 | capture = false; |
||
341 | |||
342 | for ( i in this.handles ) { |
||
343 | handle = $( this.handles[ i ] )[ 0 ]; |
||
344 | if ( handle === event.target || $.contains( handle, event.target ) ) { |
||
345 | capture = true; |
||
346 | } |
||
347 | } |
||
348 | |||
349 | return !this.options.disabled && capture; |
||
350 | }, |
||
351 | |||
352 | _mouseStart: function( event ) { |
||
353 | |||
354 | var curleft, curtop, cursor, |
||
355 | o = this.options, |
||
356 | el = this.element; |
||
357 | |||
358 | this.resizing = true; |
||
359 | |||
360 | this._renderProxy(); |
||
361 | |||
362 | curleft = this._num( this.helper.css( "left" ) ); |
||
363 | curtop = this._num( this.helper.css( "top" ) ); |
||
364 | |||
365 | if ( o.containment ) { |
||
366 | curleft += $( o.containment ).scrollLeft() || 0; |
||
367 | curtop += $( o.containment ).scrollTop() || 0; |
||
368 | } |
||
369 | |||
370 | this.offset = this.helper.offset(); |
||
371 | this.position = { left: curleft, top: curtop }; |
||
372 | |||
373 | this.size = this._helper ? { |
||
374 | width: this.helper.width(), |
||
375 | height: this.helper.height() |
||
376 | } : { |
||
377 | width: el.width(), |
||
378 | height: el.height() |
||
379 | }; |
||
380 | |||
381 | this.originalSize = this._helper ? { |
||
382 | width: el.outerWidth(), |
||
383 | height: el.outerHeight() |
||
384 | } : { |
||
385 | width: el.width(), |
||
386 | height: el.height() |
||
387 | }; |
||
388 | |||
389 | this.sizeDiff = { |
||
390 | width: el.outerWidth() - el.width(), |
||
391 | height: el.outerHeight() - el.height() |
||
392 | }; |
||
393 | |||
394 | this.originalPosition = { left: curleft, top: curtop }; |
||
395 | this.originalMousePosition = { left: event.pageX, top: event.pageY }; |
||
396 | |||
397 | this.aspectRatio = ( typeof o.aspectRatio === "number" ) ? |
||
398 | o.aspectRatio : |
||
399 | ( ( this.originalSize.width / this.originalSize.height ) || 1 ); |
||
400 | |||
401 | cursor = $( ".ui-resizable-" + this.axis ).css( "cursor" ); |
||
402 | $( "body" ).css( "cursor", cursor === "auto" ? this.axis + "-resize" : cursor ); |
||
403 | |||
404 | this._addClass( "ui-resizable-resizing" ); |
||
405 | this._propagate( "start", event ); |
||
406 | return true; |
||
407 | }, |
||
408 | |||
409 | _mouseDrag: function( event ) { |
||
410 | |||
411 | var data, props, |
||
412 | smp = this.originalMousePosition, |
||
413 | a = this.axis, |
||
414 | dx = ( event.pageX - smp.left ) || 0, |
||
415 | dy = ( event.pageY - smp.top ) || 0, |
||
416 | trigger = this._change[ a ]; |
||
417 | |||
418 | this._updatePrevProperties(); |
||
419 | |||
420 | if ( !trigger ) { |
||
421 | return false; |
||
422 | } |
||
423 | |||
424 | data = trigger.apply( this, [ event, dx, dy ] ); |
||
425 | |||
426 | this._updateVirtualBoundaries( event.shiftKey ); |
||
427 | if ( this._aspectRatio || event.shiftKey ) { |
||
428 | data = this._updateRatio( data, event ); |
||
429 | } |
||
430 | |||
431 | data = this._respectSize( data, event ); |
||
432 | |||
433 | this._updateCache( data ); |
||
434 | |||
435 | this._propagate( "resize", event ); |
||
436 | |||
437 | props = this._applyChanges(); |
||
438 | |||
439 | if ( !this._helper && this._proportionallyResizeElements.length ) { |
||
440 | this._proportionallyResize(); |
||
441 | } |
||
442 | |||
443 | if ( !$.isEmptyObject( props ) ) { |
||
444 | this._updatePrevProperties(); |
||
445 | this._trigger( "resize", event, this.ui() ); |
||
446 | this._applyChanges(); |
||
447 | } |
||
448 | |||
449 | return false; |
||
450 | }, |
||
451 | |||
452 | _mouseStop: function( event ) { |
||
453 | |||
454 | this.resizing = false; |
||
455 | var pr, ista, soffseth, soffsetw, s, left, top, |
||
456 | o = this.options, that = this; |
||
457 | |||
458 | if ( this._helper ) { |
||
459 | |||
460 | pr = this._proportionallyResizeElements; |
||
461 | ista = pr.length && ( /textarea/i ).test( pr[ 0 ].nodeName ); |
||
462 | soffseth = ista && this._hasScroll( pr[ 0 ], "left" ) ? 0 : that.sizeDiff.height; |
||
463 | soffsetw = ista ? 0 : that.sizeDiff.width; |
||
464 | |||
465 | s = { |
||
466 | width: ( that.helper.width() - soffsetw ), |
||
467 | height: ( that.helper.height() - soffseth ) |
||
468 | }; |
||
469 | left = ( parseFloat( that.element.css( "left" ) ) + |
||
470 | ( that.position.left - that.originalPosition.left ) ) || null; |
||
471 | top = ( parseFloat( that.element.css( "top" ) ) + |
||
472 | ( that.position.top - that.originalPosition.top ) ) || null; |
||
473 | |||
474 | if ( !o.animate ) { |
||
475 | this.element.css( $.extend( s, { top: top, left: left } ) ); |
||
476 | } |
||
477 | |||
478 | that.helper.height( that.size.height ); |
||
479 | that.helper.width( that.size.width ); |
||
480 | |||
481 | if ( this._helper && !o.animate ) { |
||
482 | this._proportionallyResize(); |
||
483 | } |
||
484 | } |
||
485 | |||
486 | $( "body" ).css( "cursor", "auto" ); |
||
487 | |||
488 | this._removeClass( "ui-resizable-resizing" ); |
||
489 | |||
490 | this._propagate( "stop", event ); |
||
491 | |||
492 | if ( this._helper ) { |
||
493 | this.helper.remove(); |
||
494 | } |
||
495 | |||
496 | return false; |
||
497 | |||
498 | }, |
||
499 | |||
500 | _updatePrevProperties: function() { |
||
501 | this.prevPosition = { |
||
502 | top: this.position.top, |
||
503 | left: this.position.left |
||
504 | }; |
||
505 | this.prevSize = { |
||
506 | width: this.size.width, |
||
507 | height: this.size.height |
||
508 | }; |
||
509 | }, |
||
510 | |||
511 | _applyChanges: function() { |
||
512 | var props = {}; |
||
513 | |||
514 | if ( this.position.top !== this.prevPosition.top ) { |
||
515 | props.top = this.position.top + "px"; |
||
516 | } |
||
517 | if ( this.position.left !== this.prevPosition.left ) { |
||
518 | props.left = this.position.left + "px"; |
||
519 | } |
||
520 | if ( this.size.width !== this.prevSize.width ) { |
||
521 | props.width = this.size.width + "px"; |
||
522 | } |
||
523 | if ( this.size.height !== this.prevSize.height ) { |
||
524 | props.height = this.size.height + "px"; |
||
525 | } |
||
526 | |||
527 | this.helper.css( props ); |
||
528 | |||
529 | return props; |
||
530 | }, |
||
531 | |||
532 | _updateVirtualBoundaries: function( forceAspectRatio ) { |
||
533 | var pMinWidth, pMaxWidth, pMinHeight, pMaxHeight, b, |
||
534 | o = this.options; |
||
535 | |||
536 | b = { |
||
537 | minWidth: this._isNumber( o.minWidth ) ? o.minWidth : 0, |
||
538 | maxWidth: this._isNumber( o.maxWidth ) ? o.maxWidth : Infinity, |
||
539 | minHeight: this._isNumber( o.minHeight ) ? o.minHeight : 0, |
||
540 | maxHeight: this._isNumber( o.maxHeight ) ? o.maxHeight : Infinity |
||
541 | }; |
||
542 | |||
543 | if ( this._aspectRatio || forceAspectRatio ) { |
||
544 | pMinWidth = b.minHeight * this.aspectRatio; |
||
545 | pMinHeight = b.minWidth / this.aspectRatio; |
||
546 | pMaxWidth = b.maxHeight * this.aspectRatio; |
||
547 | pMaxHeight = b.maxWidth / this.aspectRatio; |
||
548 | |||
549 | if ( pMinWidth > b.minWidth ) { |
||
550 | b.minWidth = pMinWidth; |
||
551 | } |
||
552 | if ( pMinHeight > b.minHeight ) { |
||
553 | b.minHeight = pMinHeight; |
||
554 | } |
||
555 | if ( pMaxWidth < b.maxWidth ) { |
||
556 | b.maxWidth = pMaxWidth; |
||
557 | } |
||
558 | if ( pMaxHeight < b.maxHeight ) { |
||
559 | b.maxHeight = pMaxHeight; |
||
560 | } |
||
561 | } |
||
562 | this._vBoundaries = b; |
||
563 | }, |
||
564 | |||
565 | _updateCache: function( data ) { |
||
566 | this.offset = this.helper.offset(); |
||
567 | if ( this._isNumber( data.left ) ) { |
||
568 | this.position.left = data.left; |
||
569 | } |
||
570 | if ( this._isNumber( data.top ) ) { |
||
571 | this.position.top = data.top; |
||
572 | } |
||
573 | if ( this._isNumber( data.height ) ) { |
||
574 | this.size.height = data.height; |
||
575 | } |
||
576 | if ( this._isNumber( data.width ) ) { |
||
577 | this.size.width = data.width; |
||
578 | } |
||
579 | }, |
||
580 | |||
581 | _updateRatio: function( data ) { |
||
582 | |||
583 | var cpos = this.position, |
||
584 | csize = this.size, |
||
585 | a = this.axis; |
||
586 | |||
587 | if ( this._isNumber( data.height ) ) { |
||
588 | data.width = ( data.height * this.aspectRatio ); |
||
589 | } else if ( this._isNumber( data.width ) ) { |
||
590 | data.height = ( data.width / this.aspectRatio ); |
||
591 | } |
||
592 | |||
593 | if ( a === "sw" ) { |
||
594 | data.left = cpos.left + ( csize.width - data.width ); |
||
595 | data.top = null; |
||
596 | } |
||
597 | if ( a === "nw" ) { |
||
598 | data.top = cpos.top + ( csize.height - data.height ); |
||
599 | data.left = cpos.left + ( csize.width - data.width ); |
||
600 | } |
||
601 | |||
602 | return data; |
||
603 | }, |
||
604 | |||
605 | _respectSize: function( data ) { |
||
606 | |||
607 | var o = this._vBoundaries, |
||
608 | a = this.axis, |
||
609 | ismaxw = this._isNumber( data.width ) && o.maxWidth && ( o.maxWidth < data.width ), |
||
610 | ismaxh = this._isNumber( data.height ) && o.maxHeight && ( o.maxHeight < data.height ), |
||
611 | isminw = this._isNumber( data.width ) && o.minWidth && ( o.minWidth > data.width ), |
||
612 | isminh = this._isNumber( data.height ) && o.minHeight && ( o.minHeight > data.height ), |
||
613 | dw = this.originalPosition.left + this.originalSize.width, |
||
614 | dh = this.originalPosition.top + this.originalSize.height, |
||
615 | cw = /sw|nw|w/.test( a ), ch = /nw|ne|n/.test( a ); |
||
616 | if ( isminw ) { |
||
617 | data.width = o.minWidth; |
||
618 | } |
||
619 | if ( isminh ) { |
||
620 | data.height = o.minHeight; |
||
621 | } |
||
622 | if ( ismaxw ) { |
||
623 | data.width = o.maxWidth; |
||
624 | } |
||
625 | if ( ismaxh ) { |
||
626 | data.height = o.maxHeight; |
||
627 | } |
||
628 | |||
629 | if ( isminw && cw ) { |
||
630 | data.left = dw - o.minWidth; |
||
631 | } |
||
632 | if ( ismaxw && cw ) { |
||
633 | data.left = dw - o.maxWidth; |
||
634 | } |
||
635 | if ( isminh && ch ) { |
||
636 | data.top = dh - o.minHeight; |
||
637 | } |
||
638 | if ( ismaxh && ch ) { |
||
639 | data.top = dh - o.maxHeight; |
||
640 | } |
||
641 | |||
642 | // Fixing jump error on top/left - bug #2330 |
||
643 | if ( !data.width && !data.height && !data.left && data.top ) { |
||
644 | data.top = null; |
||
645 | } else if ( !data.width && !data.height && !data.top && data.left ) { |
||
646 | data.left = null; |
||
647 | } |
||
648 | |||
649 | return data; |
||
650 | }, |
||
651 | |||
652 | _getPaddingPlusBorderDimensions: function( element ) { |
||
653 | var i = 0, |
||
654 | widths = [], |
||
655 | borders = [ |
||
656 | element.css( "borderTopWidth" ), |
||
657 | element.css( "borderRightWidth" ), |
||
658 | element.css( "borderBottomWidth" ), |
||
659 | element.css( "borderLeftWidth" ) |
||
660 | ], |
||
661 | paddings = [ |
||
662 | element.css( "paddingTop" ), |
||
663 | element.css( "paddingRight" ), |
||
664 | element.css( "paddingBottom" ), |
||
665 | element.css( "paddingLeft" ) |
||
666 | ]; |
||
667 | |||
668 | for ( ; i < 4; i++ ) { |
||
669 | widths[ i ] = ( parseFloat( borders[ i ] ) || 0 ); |
||
670 | widths[ i ] += ( parseFloat( paddings[ i ] ) || 0 ); |
||
671 | } |
||
672 | |||
673 | return { |
||
674 | height: widths[ 0 ] + widths[ 2 ], |
||
675 | width: widths[ 1 ] + widths[ 3 ] |
||
676 | }; |
||
677 | }, |
||
678 | |||
679 | _proportionallyResize: function() { |
||
680 | |||
681 | if ( !this._proportionallyResizeElements.length ) { |
||
682 | return; |
||
683 | } |
||
684 | |||
685 | var prel, |
||
686 | i = 0, |
||
687 | element = this.helper || this.element; |
||
688 | |||
689 | for ( ; i < this._proportionallyResizeElements.length; i++ ) { |
||
690 | |||
691 | prel = this._proportionallyResizeElements[ i ]; |
||
692 | |||
693 | // TODO: Seems like a bug to cache this.outerDimensions |
||
694 | // considering that we are in a loop. |
||
695 | if ( !this.outerDimensions ) { |
||
696 | this.outerDimensions = this._getPaddingPlusBorderDimensions( prel ); |
||
697 | } |
||
698 | |||
699 | prel.css( { |
||
700 | height: ( element.height() - this.outerDimensions.height ) || 0, |
||
701 | width: ( element.width() - this.outerDimensions.width ) || 0 |
||
702 | } ); |
||
703 | |||
704 | } |
||
705 | |||
706 | }, |
||
707 | |||
708 | _renderProxy: function() { |
||
709 | |||
710 | var el = this.element, o = this.options; |
||
711 | this.elementOffset = el.offset(); |
||
712 | |||
713 | if ( this._helper ) { |
||
714 | |||
715 | this.helper = this.helper || $( "<div style='overflow:hidden;'></div>" ); |
||
716 | |||
717 | this._addClass( this.helper, this._helper ); |
||
718 | this.helper.css( { |
||
719 | width: this.element.outerWidth(), |
||
720 | height: this.element.outerHeight(), |
||
721 | position: "absolute", |
||
722 | left: this.elementOffset.left + "px", |
||
723 | top: this.elementOffset.top + "px", |
||
724 | zIndex: ++o.zIndex //TODO: Don't modify option |
||
725 | } ); |
||
726 | |||
727 | this.helper |
||
728 | .appendTo( "body" ) |
||
729 | .disableSelection(); |
||
730 | |||
731 | } else { |
||
732 | this.helper = this.element; |
||
733 | } |
||
734 | |||
735 | }, |
||
736 | |||
737 | _change: { |
||
738 | e: function( event, dx ) { |
||
739 | return { width: this.originalSize.width + dx }; |
||
740 | }, |
||
741 | w: function( event, dx ) { |
||
742 | var cs = this.originalSize, sp = this.originalPosition; |
||
743 | return { left: sp.left + dx, width: cs.width - dx }; |
||
744 | }, |
||
745 | n: function( event, dx, dy ) { |
||
746 | var cs = this.originalSize, sp = this.originalPosition; |
||
747 | return { top: sp.top + dy, height: cs.height - dy }; |
||
748 | }, |
||
749 | s: function( event, dx, dy ) { |
||
750 | return { height: this.originalSize.height + dy }; |
||
751 | }, |
||
752 | se: function( event, dx, dy ) { |
||
753 | return $.extend( this._change.s.apply( this, arguments ), |
||
754 | this._change.e.apply( this, [ event, dx, dy ] ) ); |
||
755 | }, |
||
756 | sw: function( event, dx, dy ) { |
||
757 | return $.extend( this._change.s.apply( this, arguments ), |
||
758 | this._change.w.apply( this, [ event, dx, dy ] ) ); |
||
759 | }, |
||
760 | ne: function( event, dx, dy ) { |
||
761 | return $.extend( this._change.n.apply( this, arguments ), |
||
762 | this._change.e.apply( this, [ event, dx, dy ] ) ); |
||
763 | }, |
||
764 | nw: function( event, dx, dy ) { |
||
765 | return $.extend( this._change.n.apply( this, arguments ), |
||
766 | this._change.w.apply( this, [ event, dx, dy ] ) ); |
||
767 | } |
||
768 | }, |
||
769 | |||
770 | _propagate: function( n, event ) { |
||
771 | $.ui.plugin.call( this, n, [ event, this.ui() ] ); |
||
772 | ( n !== "resize" && this._trigger( n, event, this.ui() ) ); |
||
773 | }, |
||
774 | |||
775 | plugins: {}, |
||
776 | |||
777 | ui: function() { |
||
778 | return { |
||
779 | originalElement: this.originalElement, |
||
780 | element: this.element, |
||
781 | helper: this.helper, |
||
782 | position: this.position, |
||
783 | size: this.size, |
||
784 | originalSize: this.originalSize, |
||
785 | originalPosition: this.originalPosition |
||
786 | }; |
||
787 | } |
||
788 | |||
789 | } ); |
||
790 | |||
791 | /* |
||
792 | * Resizable Extensions |
||
793 | */ |
||
794 | |||
795 | $.ui.plugin.add( "resizable", "animate", { |
||
796 | |||
797 | View Code Duplication | stop: function( event ) { |
|
798 | var that = $( this ).resizable( "instance" ), |
||
799 | o = that.options, |
||
800 | pr = that._proportionallyResizeElements, |
||
801 | ista = pr.length && ( /textarea/i ).test( pr[ 0 ].nodeName ), |
||
802 | soffseth = ista && that._hasScroll( pr[ 0 ], "left" ) ? 0 : that.sizeDiff.height, |
||
803 | soffsetw = ista ? 0 : that.sizeDiff.width, |
||
804 | style = { |
||
805 | width: ( that.size.width - soffsetw ), |
||
806 | height: ( that.size.height - soffseth ) |
||
807 | }, |
||
808 | left = ( parseFloat( that.element.css( "left" ) ) + |
||
809 | ( that.position.left - that.originalPosition.left ) ) || null, |
||
810 | top = ( parseFloat( that.element.css( "top" ) ) + |
||
811 | ( that.position.top - that.originalPosition.top ) ) || null; |
||
812 | |||
813 | that.element.animate( |
||
814 | $.extend( style, top && left ? { top: top, left: left } : {} ), { |
||
815 | duration: o.animateDuration, |
||
816 | easing: o.animateEasing, |
||
817 | step: function() { |
||
818 | |||
819 | var data = { |
||
820 | width: parseFloat( that.element.css( "width" ) ), |
||
821 | height: parseFloat( that.element.css( "height" ) ), |
||
822 | top: parseFloat( that.element.css( "top" ) ), |
||
823 | left: parseFloat( that.element.css( "left" ) ) |
||
824 | }; |
||
825 | |||
826 | if ( pr && pr.length ) { |
||
827 | $( pr[ 0 ] ).css( { width: data.width, height: data.height } ); |
||
828 | } |
||
829 | |||
830 | // Propagating resize, and updating values for each animation step |
||
831 | that._updateCache( data ); |
||
832 | that._propagate( "resize", event ); |
||
833 | |||
834 | } |
||
835 | } |
||
836 | ); |
||
837 | } |
||
838 | |||
839 | } ); |
||
840 | |||
841 | $.ui.plugin.add( "resizable", "containment", { |
||
842 | |||
843 | start: function() { |
||
844 | var element, p, co, ch, cw, width, height, |
||
845 | that = $( this ).resizable( "instance" ), |
||
846 | o = that.options, |
||
847 | el = that.element, |
||
848 | oc = o.containment, |
||
849 | ce = ( oc instanceof $ ) ? |
||
850 | oc.get( 0 ) : |
||
851 | ( /parent/.test( oc ) ) ? el.parent().get( 0 ) : oc; |
||
852 | |||
853 | if ( !ce ) { |
||
854 | return; |
||
855 | } |
||
856 | |||
857 | that.containerElement = $( ce ); |
||
858 | |||
859 | if ( /document/.test( oc ) || oc === document ) { |
||
860 | that.containerOffset = { |
||
861 | left: 0, |
||
862 | top: 0 |
||
863 | }; |
||
864 | that.containerPosition = { |
||
865 | left: 0, |
||
866 | top: 0 |
||
867 | }; |
||
868 | |||
869 | that.parentData = { |
||
870 | element: $( document ), |
||
871 | left: 0, |
||
872 | top: 0, |
||
873 | width: $( document ).width(), |
||
874 | height: $( document ).height() || document.body.parentNode.scrollHeight |
||
875 | }; |
||
876 | } else { |
||
877 | element = $( ce ); |
||
878 | p = []; |
||
879 | $( [ "Top", "Right", "Left", "Bottom" ] ).each( function( i, name ) { |
||
880 | p[ i ] = that._num( element.css( "padding" + name ) ); |
||
881 | } ); |
||
882 | |||
883 | that.containerOffset = element.offset(); |
||
884 | that.containerPosition = element.position(); |
||
885 | that.containerSize = { |
||
886 | height: ( element.innerHeight() - p[ 3 ] ), |
||
887 | width: ( element.innerWidth() - p[ 1 ] ) |
||
888 | }; |
||
889 | |||
890 | co = that.containerOffset; |
||
891 | ch = that.containerSize.height; |
||
892 | cw = that.containerSize.width; |
||
893 | width = ( that._hasScroll ( ce, "left" ) ? ce.scrollWidth : cw ); |
||
894 | height = ( that._hasScroll ( ce ) ? ce.scrollHeight : ch ) ; |
||
895 | |||
896 | that.parentData = { |
||
897 | element: ce, |
||
898 | left: co.left, |
||
899 | top: co.top, |
||
900 | width: width, |
||
901 | height: height |
||
902 | }; |
||
903 | } |
||
904 | }, |
||
905 | |||
906 | resize: function( event ) { |
||
907 | var woset, hoset, isParent, isOffsetRelative, |
||
908 | that = $( this ).resizable( "instance" ), |
||
909 | o = that.options, |
||
910 | co = that.containerOffset, |
||
911 | cp = that.position, |
||
912 | pRatio = that._aspectRatio || event.shiftKey, |
||
913 | cop = { |
||
914 | top: 0, |
||
915 | left: 0 |
||
916 | }, |
||
917 | ce = that.containerElement, |
||
918 | continueResize = true; |
||
919 | |||
920 | if ( ce[ 0 ] !== document && ( /static/ ).test( ce.css( "position" ) ) ) { |
||
921 | cop = co; |
||
922 | } |
||
923 | |||
924 | if ( cp.left < ( that._helper ? co.left : 0 ) ) { |
||
925 | that.size.width = that.size.width + |
||
926 | ( that._helper ? |
||
927 | ( that.position.left - co.left ) : |
||
928 | ( that.position.left - cop.left ) ); |
||
929 | |||
930 | if ( pRatio ) { |
||
931 | that.size.height = that.size.width / that.aspectRatio; |
||
932 | continueResize = false; |
||
933 | } |
||
934 | that.position.left = o.helper ? co.left : 0; |
||
935 | } |
||
936 | |||
937 | if ( cp.top < ( that._helper ? co.top : 0 ) ) { |
||
938 | that.size.height = that.size.height + |
||
939 | ( that._helper ? |
||
940 | ( that.position.top - co.top ) : |
||
941 | that.position.top ); |
||
942 | |||
943 | if ( pRatio ) { |
||
944 | that.size.width = that.size.height * that.aspectRatio; |
||
945 | continueResize = false; |
||
946 | } |
||
947 | that.position.top = that._helper ? co.top : 0; |
||
948 | } |
||
949 | |||
950 | isParent = that.containerElement.get( 0 ) === that.element.parent().get( 0 ); |
||
951 | isOffsetRelative = /relative|absolute/.test( that.containerElement.css( "position" ) ); |
||
952 | |||
953 | if ( isParent && isOffsetRelative ) { |
||
954 | that.offset.left = that.parentData.left + that.position.left; |
||
955 | that.offset.top = that.parentData.top + that.position.top; |
||
956 | } else { |
||
957 | that.offset.left = that.element.offset().left; |
||
958 | that.offset.top = that.element.offset().top; |
||
959 | } |
||
960 | |||
961 | woset = Math.abs( that.sizeDiff.width + |
||
962 | ( that._helper ? |
||
963 | that.offset.left - cop.left : |
||
964 | ( that.offset.left - co.left ) ) ); |
||
965 | |||
966 | hoset = Math.abs( that.sizeDiff.height + |
||
967 | ( that._helper ? |
||
968 | that.offset.top - cop.top : |
||
969 | ( that.offset.top - co.top ) ) ); |
||
970 | |||
971 | if ( woset + that.size.width >= that.parentData.width ) { |
||
972 | that.size.width = that.parentData.width - woset; |
||
973 | if ( pRatio ) { |
||
974 | that.size.height = that.size.width / that.aspectRatio; |
||
975 | continueResize = false; |
||
976 | } |
||
977 | } |
||
978 | |||
979 | if ( hoset + that.size.height >= that.parentData.height ) { |
||
980 | that.size.height = that.parentData.height - hoset; |
||
981 | if ( pRatio ) { |
||
982 | that.size.width = that.size.height * that.aspectRatio; |
||
983 | continueResize = false; |
||
984 | } |
||
985 | } |
||
986 | |||
987 | if ( !continueResize ) { |
||
988 | that.position.left = that.prevPosition.left; |
||
989 | that.position.top = that.prevPosition.top; |
||
990 | that.size.width = that.prevSize.width; |
||
991 | that.size.height = that.prevSize.height; |
||
992 | } |
||
993 | }, |
||
994 | |||
995 | stop: function() { |
||
996 | var that = $( this ).resizable( "instance" ), |
||
997 | o = that.options, |
||
998 | co = that.containerOffset, |
||
999 | cop = that.containerPosition, |
||
1000 | ce = that.containerElement, |
||
1001 | helper = $( that.helper ), |
||
1002 | ho = helper.offset(), |
||
1003 | w = helper.outerWidth() - that.sizeDiff.width, |
||
1004 | h = helper.outerHeight() - that.sizeDiff.height; |
||
1005 | |||
1006 | if ( that._helper && !o.animate && ( /relative/ ).test( ce.css( "position" ) ) ) { |
||
1007 | $( this ).css( { |
||
1008 | left: ho.left - cop.left - co.left, |
||
1009 | width: w, |
||
1010 | height: h |
||
1011 | } ); |
||
1012 | } |
||
1013 | |||
1014 | if ( that._helper && !o.animate && ( /static/ ).test( ce.css( "position" ) ) ) { |
||
1015 | $( this ).css( { |
||
1016 | left: ho.left - cop.left - co.left, |
||
1017 | width: w, |
||
1018 | height: h |
||
1019 | } ); |
||
1020 | } |
||
1021 | } |
||
1022 | } ); |
||
1023 | |||
1024 | $.ui.plugin.add( "resizable", "alsoResize", { |
||
1025 | |||
1026 | start: function() { |
||
1027 | var that = $( this ).resizable( "instance" ), |
||
1028 | o = that.options; |
||
1029 | |||
1030 | $( o.alsoResize ).each( function() { |
||
1031 | var el = $( this ); |
||
1032 | el.data( "ui-resizable-alsoresize", { |
||
1033 | width: parseFloat( el.width() ), height: parseFloat( el.height() ), |
||
1034 | left: parseFloat( el.css( "left" ) ), top: parseFloat( el.css( "top" ) ) |
||
1035 | } ); |
||
1036 | } ); |
||
1037 | }, |
||
1038 | |||
1039 | resize: function( event, ui ) { |
||
1040 | var that = $( this ).resizable( "instance" ), |
||
1041 | o = that.options, |
||
1042 | os = that.originalSize, |
||
1043 | op = that.originalPosition, |
||
1044 | delta = { |
||
1045 | height: ( that.size.height - os.height ) || 0, |
||
1046 | width: ( that.size.width - os.width ) || 0, |
||
1047 | top: ( that.position.top - op.top ) || 0, |
||
1048 | left: ( that.position.left - op.left ) || 0 |
||
1049 | }; |
||
1050 | |||
1051 | $( o.alsoResize ).each( function() { |
||
1052 | var el = $( this ), start = $( this ).data( "ui-resizable-alsoresize" ), style = {}, |
||
1053 | css = el.parents( ui.originalElement[ 0 ] ).length ? |
||
1054 | [ "width", "height" ] : |
||
1055 | [ "width", "height", "top", "left" ]; |
||
1056 | |||
1057 | $.each( css, function( i, prop ) { |
||
1058 | var sum = ( start[ prop ] || 0 ) + ( delta[ prop ] || 0 ); |
||
1059 | if ( sum && sum >= 0 ) { |
||
1060 | style[ prop ] = sum || null; |
||
1061 | } |
||
1062 | } ); |
||
1063 | |||
1064 | el.css( style ); |
||
1065 | } ); |
||
1066 | }, |
||
1067 | |||
1068 | stop: function() { |
||
1069 | $( this ).removeData( "ui-resizable-alsoresize" ); |
||
1070 | } |
||
1071 | } ); |
||
1072 | |||
1073 | $.ui.plugin.add( "resizable", "ghost", { |
||
1074 | |||
1075 | start: function() { |
||
1076 | |||
1077 | var that = $( this ).resizable( "instance" ), cs = that.size; |
||
1078 | |||
1079 | that.ghost = that.originalElement.clone(); |
||
1080 | that.ghost.css( { |
||
1081 | opacity: 0.25, |
||
1082 | display: "block", |
||
1083 | position: "relative", |
||
1084 | height: cs.height, |
||
1085 | width: cs.width, |
||
1086 | margin: 0, |
||
1087 | left: 0, |
||
1088 | top: 0 |
||
1089 | } ); |
||
1090 | |||
1091 | that._addClass( that.ghost, "ui-resizable-ghost" ); |
||
1092 | |||
1093 | // DEPRECATED |
||
1094 | // TODO: remove after 1.12 |
||
1095 | if ( $.uiBackCompat !== false && typeof that.options.ghost === "string" ) { |
||
1096 | |||
1097 | // Ghost option |
||
1098 | that.ghost.addClass( this.options.ghost ); |
||
1099 | } |
||
1100 | |||
1101 | that.ghost.appendTo( that.helper ); |
||
1102 | |||
1103 | }, |
||
1104 | |||
1105 | resize: function() { |
||
1106 | var that = $( this ).resizable( "instance" ); |
||
1107 | if ( that.ghost ) { |
||
1108 | that.ghost.css( { |
||
1109 | position: "relative", |
||
1110 | height: that.size.height, |
||
1111 | width: that.size.width |
||
1112 | } ); |
||
1113 | } |
||
1114 | }, |
||
1115 | |||
1116 | stop: function() { |
||
1117 | var that = $( this ).resizable( "instance" ); |
||
1118 | if ( that.ghost && that.helper ) { |
||
1119 | that.helper.get( 0 ).removeChild( that.ghost.get( 0 ) ); |
||
1120 | } |
||
1121 | } |
||
1122 | |||
1123 | } ); |
||
1124 | |||
1125 | $.ui.plugin.add( "resizable", "grid", { |
||
1126 | |||
1127 | resize: function() { |
||
1128 | var outerDimensions, |
||
1129 | that = $( this ).resizable( "instance" ), |
||
1130 | o = that.options, |
||
1131 | cs = that.size, |
||
1132 | os = that.originalSize, |
||
1133 | op = that.originalPosition, |
||
1134 | a = that.axis, |
||
1135 | grid = typeof o.grid === "number" ? [ o.grid, o.grid ] : o.grid, |
||
1136 | gridX = ( grid[ 0 ] || 1 ), |
||
1137 | gridY = ( grid[ 1 ] || 1 ), |
||
1138 | ox = Math.round( ( cs.width - os.width ) / gridX ) * gridX, |
||
1139 | oy = Math.round( ( cs.height - os.height ) / gridY ) * gridY, |
||
1140 | newWidth = os.width + ox, |
||
1141 | newHeight = os.height + oy, |
||
1142 | isMaxWidth = o.maxWidth && ( o.maxWidth < newWidth ), |
||
1143 | isMaxHeight = o.maxHeight && ( o.maxHeight < newHeight ), |
||
1144 | isMinWidth = o.minWidth && ( o.minWidth > newWidth ), |
||
1145 | isMinHeight = o.minHeight && ( o.minHeight > newHeight ); |
||
1146 | |||
1147 | o.grid = grid; |
||
1148 | |||
1149 | if ( isMinWidth ) { |
||
1150 | newWidth += gridX; |
||
1151 | } |
||
1152 | if ( isMinHeight ) { |
||
1153 | newHeight += gridY; |
||
1154 | } |
||
1155 | if ( isMaxWidth ) { |
||
1156 | newWidth -= gridX; |
||
1157 | } |
||
1158 | if ( isMaxHeight ) { |
||
1159 | newHeight -= gridY; |
||
1160 | } |
||
1161 | |||
1162 | if ( /^(se|s|e)$/.test( a ) ) { |
||
1163 | that.size.width = newWidth; |
||
1164 | that.size.height = newHeight; |
||
1165 | } else if ( /^(ne)$/.test( a ) ) { |
||
1166 | that.size.width = newWidth; |
||
1167 | that.size.height = newHeight; |
||
1168 | that.position.top = op.top - oy; |
||
1169 | } else if ( /^(sw)$/.test( a ) ) { |
||
1170 | that.size.width = newWidth; |
||
1171 | that.size.height = newHeight; |
||
1172 | that.position.left = op.left - ox; |
||
1173 | } else { |
||
1174 | if ( newHeight - gridY <= 0 || newWidth - gridX <= 0 ) { |
||
1175 | outerDimensions = that._getPaddingPlusBorderDimensions( this ); |
||
1176 | } |
||
1177 | |||
1178 | if ( newHeight - gridY > 0 ) { |
||
1179 | that.size.height = newHeight; |
||
1180 | that.position.top = op.top - oy; |
||
1181 | } else { |
||
1182 | newHeight = gridY - outerDimensions.height; |
||
1183 | that.size.height = newHeight; |
||
1184 | that.position.top = op.top + os.height - newHeight; |
||
1185 | } |
||
1186 | if ( newWidth - gridX > 0 ) { |
||
1187 | that.size.width = newWidth; |
||
1188 | that.position.left = op.left - ox; |
||
1189 | } else { |
||
1190 | newWidth = gridX - outerDimensions.width; |
||
1191 | that.size.width = newWidth; |
||
1192 | that.position.left = op.left + os.width - newWidth; |
||
1193 | } |
||
1194 | } |
||
1195 | } |
||
1196 | |||
1197 | } ); |
||
1198 | |||
1199 | return $.ui.resizable; |
||
1200 | |||
1201 | } ) ); |
||
1202 |