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