[Summary view] [Print] [Text view]

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