[Summary view] [Print] [Text view]

   1  /*

   2   * jQuery UI Resizable 1.7.2

   3   *

   4   * Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)

   5   * Dual licensed under the MIT (MIT-LICENSE.txt)

   6   * and GPL (GPL-LICENSE.txt) licenses.

   7   *

   8   * http://docs.jquery.com/UI/Resizables

   9   *

  10   * Depends:

  11   *    ui.core.js

  12   */
  13  (function($) {
  14  
  15  $.widget("ui.resizable", $.extend({}, $.ui.mouse, {
  16  
  17      _init: function() {
  18  
  19          var self = this, o = this.options;
  20          this.element.addClass("ui-resizable");
  21  
  22          $.extend(this, {
  23              _aspectRatio: !!(o.aspectRatio),
  24              aspectRatio: o.aspectRatio,
  25              originalElement: this.element,
  26              _proportionallyResizeElements: [],
  27              _helper: o.helper || o.ghost || o.animate ? o.helper || 'ui-resizable-helper' : null
  28          });
  29  
  30          //Wrap the element if it cannot hold child nodes

  31          if(this.element[0].nodeName.match(/canvas|textarea|input|select|button|img/i)) {
  32  
  33              //Opera fix for relative positioning

  34              if (/relative/.test(this.element.css('position')) && $.browser.opera)
  35                  this.element.css({ position: 'relative', top: 'auto', left: 'auto' });
  36  
  37              //Create a wrapper element and set the wrapper to the new current internal element

  38              this.element.wrap(
  39                  $('<div class="ui-wrapper" style="overflow: hidden;"></div>').css({
  40                      position: this.element.css('position'),
  41                      width: this.element.outerWidth(),
  42                      height: this.element.outerHeight(),
  43                      top: this.element.css('top'),
  44                      left: this.element.css('left')
  45                  })
  46              );
  47  
  48              //Overwrite the original this.element

  49              this.element = this.element.parent().data(
  50                  "resizable", this.element.data('resizable')
  51              );
  52  
  53              this.elementIsWrapper = true;
  54  
  55              //Move margins to the wrapper

  56              this.element.css({ marginLeft: this.originalElement.css("marginLeft"), marginTop: this.originalElement.css("marginTop"), marginRight: this.originalElement.css("marginRight"), marginBottom: this.originalElement.css("marginBottom") });
  57              this.originalElement.css({ marginLeft: 0, marginTop: 0, marginRight: 0, marginBottom: 0});
  58  
  59              //Prevent Safari textarea resize

  60              this.originalResizeStyle = this.originalElement.css('resize');
  61              this.originalElement.css('resize', 'none');
  62  
  63              //Push the actual element to our proportionallyResize internal array

  64              this._proportionallyResizeElements.push(this.originalElement.css({ position: 'static', zoom: 1, display: 'block' }));
  65  
  66              // avoid IE jump (hard set the margin)

  67              this.originalElement.css({ margin: this.originalElement.css('margin') });
  68  
  69              // fix handlers offset

  70              this._proportionallyResize();
  71  
  72          }
  73  
  74          this.handles = o.handles || (!$('.ui-resizable-handle', this.element).length ? "e,s,se" : { n: '.ui-resizable-n', e: '.ui-resizable-e', s: '.ui-resizable-s', w: '.ui-resizable-w', se: '.ui-resizable-se', sw: '.ui-resizable-sw', ne: '.ui-resizable-ne', nw: '.ui-resizable-nw' });
  75          if(this.handles.constructor == String) {
  76  
  77              if(this.handles == 'all') this.handles = 'n,e,s,w,se,sw,ne,nw';
  78              var n = this.handles.split(","); this.handles = {};
  79  
  80              for(var i = 0; i < n.length; i++) {
  81  
  82                  var handle = $.trim(n[i]), hname = 'ui-resizable-'+handle;
  83                  var axis = $('<div class="ui-resizable-handle ' + hname + '"></div>');
  84  
  85                  // increase zIndex of sw, se, ne, nw axis

  86                  //TODO : this modifies original option

  87                  if(/sw|se|ne|nw/.test(handle)) axis.css({ zIndex: ++o.zIndex });
  88  
  89                  //TODO : What's going on here?

  90                  if ('se' == handle) {
  91                      axis.addClass('ui-icon ui-icon-gripsmall-diagonal-se');
  92                  };
  93  
  94                  //Insert into internal handles object and append to element

  95                  this.handles[handle] = '.ui-resizable-'+handle;
  96                  this.element.append(axis);
  97              }
  98  
  99          }
 100  
 101          this._renderAxis = function(target) {
 102  
 103              target = target || this.element;
 104  
 105              for(var i in this.handles) {
 106  
 107                  if(this.handles[i].constructor == String)
 108                      this.handles[i] = $(this.handles[i], this.element).show();
 109  
 110                  //Apply pad to wrapper element, needed to fix axis position (textarea, inputs, scrolls)

 111                  if (this.elementIsWrapper && this.originalElement[0].nodeName.match(/textarea|input|select|button/i)) {
 112  
 113                      var axis = $(this.handles[i], this.element), padWrapper = 0;
 114  
 115                      //Checking the correct pad and border

 116                      padWrapper = /sw|ne|nw|se|n|s/.test(i) ? axis.outerHeight() : axis.outerWidth();
 117  
 118                      //The padding type i have to apply...

 119                      var padPos = [ 'padding',
 120                          /ne|nw|n/.test(i) ? 'Top' :
 121                          /se|sw|s/.test(i) ? 'Bottom' :
 122                          /^e$/.test(i) ? 'Right' : 'Left' ].join("");
 123  
 124                      target.css(padPos, padWrapper);
 125  
 126                      this._proportionallyResize();
 127  
 128                  }
 129  
 130                  //TODO: What's that good for? There's not anything to be executed left

 131                  if(!$(this.handles[i]).length)
 132                      continue;
 133  
 134              }
 135          };
 136  
 137          //TODO: make renderAxis a prototype function

 138          this._renderAxis(this.element);
 139  
 140          this._handles = $('.ui-resizable-handle', this.element)
 141              .disableSelection();
 142  
 143          //Matching axis name

 144          this._handles.mouseover(function() {
 145              if (!self.resizing) {
 146                  if (this.className)
 147                      var axis = this.className.match(/ui-resizable-(se|sw|ne|nw|n|e|s|w)/i);
 148                  //Axis, default = se

 149                  self.axis = axis && axis[1] ? axis[1] : 'se';
 150              }
 151          });
 152  
 153          //If we want to auto hide the elements

 154          if (o.autoHide) {
 155              this._handles.hide();
 156              $(this.element)
 157                  .addClass("ui-resizable-autohide")
 158                  .hover(function() {
 159                      $(this).removeClass("ui-resizable-autohide");
 160                      self._handles.show();
 161                  },
 162                  function(){
 163                      if (!self.resizing) {
 164                          $(this).addClass("ui-resizable-autohide");
 165                          self._handles.hide();
 166                      }
 167                  });
 168          }
 169  
 170          //Initialize the mouse interaction

 171          this._mouseInit();
 172  
 173      },
 174  
 175      destroy: function() {
 176  
 177          this._mouseDestroy();
 178  
 179          var _destroy = function(exp) {
 180              $(exp).removeClass("ui-resizable ui-resizable-disabled ui-resizable-resizing")
 181                  .removeData("resizable").unbind(".resizable").find('.ui-resizable-handle').remove();
 182          };
 183  
 184          //TODO: Unwrap at same DOM position

 185          if (this.elementIsWrapper) {
 186              _destroy(this.element);
 187              var wrapper = this.element;
 188              wrapper.parent().append(
 189                  this.originalElement.css({
 190                      position: wrapper.css('position'),
 191                      width: wrapper.outerWidth(),
 192                      height: wrapper.outerHeight(),
 193                      top: wrapper.css('top'),
 194                      left: wrapper.css('left')
 195                  })
 196              ).end().remove();
 197          }
 198  
 199          this.originalElement.css('resize', this.originalResizeStyle);
 200          _destroy(this.originalElement);
 201  
 202      },
 203  
 204      _mouseCapture: function(event) {
 205  
 206          var handle = false;
 207          for(var i in this.handles) {
 208              if($(this.handles[i])[0] == event.target) handle = true;
 209          }
 210  
 211          return this.options.disabled || !!handle;
 212  
 213      },
 214  
 215      _mouseStart: function(event) {
 216  
 217          var o = this.options, iniPos = this.element.position(), el = this.element;
 218  
 219          this.resizing = true;
 220          this.documentScroll = { top: $(document).scrollTop(), left: $(document).scrollLeft() };
 221  
 222          // bugfix for http://dev.jquery.com/ticket/1749

 223          if (el.is('.ui-draggable') || (/absolute/).test(el.css('position'))) {
 224              el.css({ position: 'absolute', top: iniPos.top, left: iniPos.left });
 225          }
 226  
 227          //Opera fixing relative position

 228          if ($.browser.opera && (/relative/).test(el.css('position')))
 229              el.css({ position: 'relative', top: 'auto', left: 'auto' });
 230  
 231          this._renderProxy();
 232  
 233          var curleft = num(this.helper.css('left')), curtop = num(this.helper.css('top'));
 234  
 235          if (o.containment) {
 236              curleft += $(o.containment).scrollLeft() || 0;
 237              curtop += $(o.containment).scrollTop() || 0;
 238          }
 239  
 240          //Store needed variables

 241          this.offset = this.helper.offset();
 242          this.position = { left: curleft, top: curtop };
 243          this.size = this._helper ? { width: el.outerWidth(), height: el.outerHeight() } : { width: el.width(), height: el.height() };
 244          this.originalSize = this._helper ? { width: el.outerWidth(), height: el.outerHeight() } : { width: el.width(), height: el.height() };
 245          this.originalPosition = { left: curleft, top: curtop };
 246          this.sizeDiff = { width: el.outerWidth() - el.width(), height: el.outerHeight() - el.height() };
 247          this.originalMousePosition = { left: event.pageX, top: event.pageY };
 248  
 249          //Aspect Ratio

 250          this.aspectRatio = (typeof o.aspectRatio == 'number') ? o.aspectRatio : ((this.originalSize.width / this.originalSize.height) || 1);
 251  
 252          var cursor = $('.ui-resizable-' + this.axis).css('cursor');
 253          $('body').css('cursor', cursor == 'auto' ? this.axis + '-resize' : cursor);
 254  
 255          el.addClass("ui-resizable-resizing");
 256          this._propagate("start", event);
 257          return true;
 258      },
 259  
 260      _mouseDrag: function(event) {
 261  
 262          //Increase performance, avoid regex

 263          var el = this.helper, o = this.options, props = {},
 264              self = this, smp = this.originalMousePosition, a = this.axis;
 265  
 266          var dx = (event.pageX-smp.left)||0, dy = (event.pageY-smp.top)||0;
 267          var trigger = this._change[a];
 268          if (!trigger) return false;
 269  
 270          // Calculate the attrs that will be change

 271          var data = trigger.apply(this, [event, dx, dy]), ie6 = $.browser.msie && $.browser.version < 7, csdif = this.sizeDiff;
 272  
 273          if (this._aspectRatio || event.shiftKey)
 274              data = this._updateRatio(data, event);
 275  
 276          data = this._respectSize(data, event);
 277  
 278          // plugins callbacks need to be called first

 279          this._propagate("resize", event);
 280  
 281          el.css({
 282              top: this.position.top + "px", left: this.position.left + "px",
 283              width: this.size.width + "px", height: this.size.height + "px"
 284          });
 285  
 286          if (!this._helper && this._proportionallyResizeElements.length)
 287              this._proportionallyResize();
 288  
 289          this._updateCache(data);
 290  
 291          // calling the user callback at the end

 292          this._trigger('resize', event, this.ui());
 293  
 294          return false;
 295      },
 296  
 297      _mouseStop: function(event) {
 298  
 299          this.resizing = false;
 300          var o = this.options, self = this;
 301  
 302          if(this._helper) {
 303              var pr = this._proportionallyResizeElements, ista = pr.length && (/textarea/i).test(pr[0].nodeName),
 304                          soffseth = ista && $.ui.hasScroll(pr[0], 'left') /* TODO - jump height */ ? 0 : self.sizeDiff.height,
 305                              soffsetw = ista ? 0 : self.sizeDiff.width;
 306  
 307              var s = { width: (self.size.width - soffsetw), height: (self.size.height - soffseth) },
 308                  left = (parseInt(self.element.css('left'), 10) + (self.position.left - self.originalPosition.left)) || null,
 309                  top = (parseInt(self.element.css('top'), 10) + (self.position.top - self.originalPosition.top)) || null;
 310  
 311              if (!o.animate)
 312                  this.element.css($.extend(s, { top: top, left: left }));
 313  
 314              self.helper.height(self.size.height);
 315              self.helper.width(self.size.width);
 316  
 317              if (this._helper && !o.animate) this._proportionallyResize();
 318          }
 319  
 320          $('body').css('cursor', 'auto');
 321  
 322          this.element.removeClass("ui-resizable-resizing");
 323  
 324          this._propagate("stop", event);
 325  
 326          if (this._helper) this.helper.remove();
 327          return false;
 328  
 329      },
 330  
 331      _updateCache: function(data) {
 332          var o = this.options;
 333          this.offset = this.helper.offset();
 334          if (isNumber(data.left)) this.position.left = data.left;
 335          if (isNumber(data.top)) this.position.top = data.top;
 336          if (isNumber(data.height)) this.size.height = data.height;
 337          if (isNumber(data.width)) this.size.width = data.width;
 338      },
 339  
 340      _updateRatio: function(data, event) {
 341  
 342          var o = this.options, cpos = this.position, csize = this.size, a = this.axis;
 343  
 344          if (data.height) data.width = (csize.height * this.aspectRatio);
 345          else if (data.width) data.height = (csize.width / this.aspectRatio);
 346  
 347          if (a == 'sw') {
 348              data.left = cpos.left + (csize.width - data.width);
 349              data.top = null;
 350          }
 351          if (a == 'nw') {
 352              data.top = cpos.top + (csize.height - data.height);
 353              data.left = cpos.left + (csize.width - data.width);
 354          }
 355  
 356          return data;
 357      },
 358  
 359      _respectSize: function(data, event) {
 360  
 361          var el = this.helper, o = this.options, pRatio = this._aspectRatio || event.shiftKey, a = this.axis,
 362                  ismaxw = isNumber(data.width) && o.maxWidth && (o.maxWidth < data.width), ismaxh = isNumber(data.height) && o.maxHeight && (o.maxHeight < data.height),
 363                      isminw = isNumber(data.width) && o.minWidth && (o.minWidth > data.width), isminh = isNumber(data.height) && o.minHeight && (o.minHeight > data.height);
 364  
 365          if (isminw) data.width = o.minWidth;
 366          if (isminh) data.height = o.minHeight;
 367          if (ismaxw) data.width = o.maxWidth;
 368          if (ismaxh) data.height = o.maxHeight;
 369  
 370          var dw = this.originalPosition.left + this.originalSize.width, dh = this.position.top + this.size.height;
 371          var cw = /sw|nw|w/.test(a), ch = /nw|ne|n/.test(a);
 372  
 373          if (isminw && cw) data.left = dw - o.minWidth;
 374          if (ismaxw && cw) data.left = dw - o.maxWidth;
 375          if (isminh && ch)    data.top = dh - o.minHeight;
 376          if (ismaxh && ch)    data.top = dh - o.maxHeight;
 377  
 378          // fixing jump error on top/left - bug #2330

 379          var isNotwh = !data.width && !data.height;
 380          if (isNotwh && !data.left && data.top) data.top = null;
 381          else if (isNotwh && !data.top && data.left) data.left = null;
 382  
 383          return data;
 384      },
 385  
 386      _proportionallyResize: function() {
 387  
 388          var o = this.options;
 389          if (!this._proportionallyResizeElements.length) return;
 390          var element = this.helper || this.element;
 391  
 392          for (var i=0; i < this._proportionallyResizeElements.length; i++) {
 393  
 394              var prel = this._proportionallyResizeElements[i];
 395  
 396              if (!this.borderDif) {
 397                  var b = [prel.css('borderTopWidth'), prel.css('borderRightWidth'), prel.css('borderBottomWidth'), prel.css('borderLeftWidth')],
 398                      p = [prel.css('paddingTop'), prel.css('paddingRight'), prel.css('paddingBottom'), prel.css('paddingLeft')];
 399  
 400                  this.borderDif = $.map(b, function(v, i) {
 401                      var border = parseInt(v,10)||0, padding = parseInt(p[i],10)||0;
 402                      return border + padding;
 403                  });
 404              }
 405  
 406              if ($.browser.msie && !(!($(element).is(':hidden') || $(element).parents(':hidden').length)))
 407                  continue;
 408  
 409              prel.css({
 410                  height: (element.height() - this.borderDif[0] - this.borderDif[2]) || 0,
 411                  width: (element.width() - this.borderDif[1] - this.borderDif[3]) || 0
 412              });
 413  
 414          };
 415  
 416      },
 417  
 418      _renderProxy: function() {
 419  
 420          var el = this.element, o = this.options;
 421          this.elementOffset = el.offset();
 422  
 423          if(this._helper) {
 424  
 425              this.helper = this.helper || $('<div style="overflow:hidden;"></div>');
 426  
 427              // fix ie6 offset TODO: This seems broken

 428              var ie6 = $.browser.msie && $.browser.version < 7, ie6offset = (ie6 ? 1 : 0),
 429              pxyoffset = ( ie6 ? 2 : -1 );
 430  
 431              this.helper.addClass(this._helper).css({
 432                  width: this.element.outerWidth() + pxyoffset,
 433                  height: this.element.outerHeight() + pxyoffset,
 434                  position: 'absolute',
 435                  left: this.elementOffset.left - ie6offset +'px',
 436                  top: this.elementOffset.top - ie6offset +'px',
 437                  zIndex: ++o.zIndex //TODO: Don't modify option
 438              });
 439  
 440              this.helper
 441                  .appendTo("body")
 442                  .disableSelection();
 443  
 444          } else {
 445              this.helper = this.element;
 446          }
 447  
 448      },
 449  
 450      _change: {
 451          e: function(event, dx, dy) {
 452              return { width: this.originalSize.width + dx };
 453          },
 454          w: function(event, dx, dy) {
 455              var o = this.options, cs = this.originalSize, sp = this.originalPosition;
 456              return { left: sp.left + dx, width: cs.width - dx };
 457          },
 458          n: function(event, dx, dy) {
 459              var o = this.options, cs = this.originalSize, sp = this.originalPosition;
 460              return { top: sp.top + dy, height: cs.height - dy };
 461          },
 462          s: function(event, dx, dy) {
 463              return { height: this.originalSize.height + dy };
 464          },
 465          se: function(event, dx, dy) {
 466              return $.extend(this._change.s.apply(this, arguments), this._change.e.apply(this, [event, dx, dy]));
 467          },
 468          sw: function(event, dx, dy) {
 469              return $.extend(this._change.s.apply(this, arguments), this._change.w.apply(this, [event, dx, dy]));
 470          },
 471          ne: function(event, dx, dy) {
 472              return $.extend(this._change.n.apply(this, arguments), this._change.e.apply(this, [event, dx, dy]));
 473          },
 474          nw: function(event, dx, dy) {
 475              return $.extend(this._change.n.apply(this, arguments), this._change.w.apply(this, [event, dx, dy]));
 476          }
 477      },
 478  
 479      _propagate: function(n, event) {
 480          $.ui.plugin.call(this, n, [event, this.ui()]);
 481          (n != "resize" && this._trigger(n, event, this.ui()));
 482      },
 483  
 484      plugins: {},
 485  
 486      ui: function() {
 487          return {
 488              originalElement: this.originalElement,
 489              element: this.element,
 490              helper: this.helper,
 491              position: this.position,
 492              size: this.size,
 493              originalSize: this.originalSize,
 494              originalPosition: this.originalPosition
 495          };
 496      }
 497  
 498  }));
 499  
 500  $.extend($.ui.resizable, {
 501      version: "1.7.2",
 502      eventPrefix: "resize",
 503      defaults: {
 504          alsoResize: false,
 505          animate: false,
 506          animateDuration: "slow",
 507          animateEasing: "swing",
 508          aspectRatio: false,
 509          autoHide: false,
 510          cancel: ":input,option",
 511          containment: false,
 512          delay: 0,
 513          distance: 1,
 514          ghost: false,
 515          grid: false,
 516          handles: "e,s,se",
 517          helper: false,
 518          maxHeight: null,
 519          maxWidth: null,
 520          minHeight: 10,
 521          minWidth: 10,
 522          zIndex: 1000
 523      }
 524  });
 525  
 526  /*

 527   * Resizable Extensions

 528   */
 529  
 530  $.ui.plugin.add("resizable", "alsoResize", {
 531  
 532      start: function(event, ui) {
 533  
 534          var self = $(this).data("resizable"), o = self.options;
 535  
 536          _store = function(exp) {
 537              $(exp).each(function() {
 538                  $(this).data("resizable-alsoresize", {
 539                      width: parseInt($(this).width(), 10), height: parseInt($(this).height(), 10),
 540                      left: parseInt($(this).css('left'), 10), top: parseInt($(this).css('top'), 10)
 541                  });
 542              });
 543          };
 544  
 545          if (typeof(o.alsoResize) == 'object' && !o.alsoResize.parentNode) {
 546              if (o.alsoResize.length) { o.alsoResize = o.alsoResize[0];    _store(o.alsoResize); }
 547              else { $.each(o.alsoResize, function(exp, c) { _store(exp); }); }
 548          }else{
 549              _store(o.alsoResize);
 550          }
 551      },
 552  
 553      resize: function(event, ui){
 554          var self = $(this).data("resizable"), o = self.options, os = self.originalSize, op = self.originalPosition;
 555  
 556          var delta = {
 557              height: (self.size.height - os.height) || 0, width: (self.size.width - os.width) || 0,
 558              top: (self.position.top - op.top) || 0, left: (self.position.left - op.left) || 0
 559          },
 560  
 561          _alsoResize = function(exp, c) {
 562              $(exp).each(function() {
 563                  var el = $(this), start = $(this).data("resizable-alsoresize"), style = {}, css = c && c.length ? c : ['width', 'height', 'top', 'left'];
 564  
 565                  $.each(css || ['width', 'height', 'top', 'left'], function(i, prop) {
 566                      var sum = (start[prop]||0) + (delta[prop]||0);
 567                      if (sum && sum >= 0)
 568                          style[prop] = sum || null;
 569                  });
 570  
 571                  //Opera fixing relative position

 572                  if (/relative/.test(el.css('position')) && $.browser.opera) {
 573                      self._revertToRelativePosition = true;
 574                      el.css({ position: 'absolute', top: 'auto', left: 'auto' });
 575                  }
 576  
 577                  el.css(style);
 578              });
 579          };
 580  
 581          if (typeof(o.alsoResize) == 'object' && !o.alsoResize.nodeType) {
 582              $.each(o.alsoResize, function(exp, c) { _alsoResize(exp, c); });
 583          }else{
 584              _alsoResize(o.alsoResize);
 585          }
 586      },
 587  
 588      stop: function(event, ui){
 589          var self = $(this).data("resizable");
 590  
 591          //Opera fixing relative position

 592          if (self._revertToRelativePosition && $.browser.opera) {
 593              self._revertToRelativePosition = false;
 594              el.css({ position: 'relative' });
 595          }
 596  
 597          $(this).removeData("resizable-alsoresize-start");
 598      }
 599  });
 600  
 601  $.ui.plugin.add("resizable", "animate", {
 602  
 603      stop: function(event, ui) {
 604          var self = $(this).data("resizable"), o = self.options;
 605  
 606          var pr = self._proportionallyResizeElements, ista = pr.length && (/textarea/i).test(pr[0].nodeName),
 607                      soffseth = ista && $.ui.hasScroll(pr[0], 'left') /* TODO - jump height */ ? 0 : self.sizeDiff.height,
 608                          soffsetw = ista ? 0 : self.sizeDiff.width;
 609  
 610          var style = { width: (self.size.width - soffsetw), height: (self.size.height - soffseth) },
 611                      left = (parseInt(self.element.css('left'), 10) + (self.position.left - self.originalPosition.left)) || null,
 612                          top = (parseInt(self.element.css('top'), 10) + (self.position.top - self.originalPosition.top)) || null;
 613  
 614          self.element.animate(
 615              $.extend(style, top && left ? { top: top, left: left } : {}), {
 616                  duration: o.animateDuration,
 617                  easing: o.animateEasing,
 618                  step: function() {
 619  
 620                      var data = {
 621                          width: parseInt(self.element.css('width'), 10),
 622                          height: parseInt(self.element.css('height'), 10),
 623                          top: parseInt(self.element.css('top'), 10),
 624                          left: parseInt(self.element.css('left'), 10)
 625                      };
 626  
 627                      if (pr && pr.length) $(pr[0]).css({ width: data.width, height: data.height });
 628  
 629                      // propagating resize, and updating values for each animation step

 630                      self._updateCache(data);
 631                      self._propagate("resize", event);
 632  
 633                  }
 634              }
 635          );
 636      }
 637  
 638  });
 639  
 640  $.ui.plugin.add("resizable", "containment", {
 641  
 642      start: function(event, ui) {
 643          var self = $(this).data("resizable"), o = self.options, el = self.element;
 644          var oc = o.containment,    ce = (oc instanceof $) ? oc.get(0) : (/parent/.test(oc)) ? el.parent().get(0) : oc;
 645          if (!ce) return;
 646  
 647          self.containerElement = $(ce);
 648  
 649          if (/document/.test(oc) || oc == document) {
 650              self.containerOffset = { left: 0, top: 0 };
 651              self.containerPosition = { left: 0, top: 0 };
 652  
 653              self.parentData = {
 654                  element: $(document), left: 0, top: 0,
 655                  width: $(document).width(), height: $(document).height() || document.body.parentNode.scrollHeight
 656              };
 657          }
 658  
 659          // i'm a node, so compute top, left, right, bottom

 660          else {
 661              var element = $(ce), p = [];
 662              $([ "Top", "Right", "Left", "Bottom" ]).each(function(i, name) { p[i] = num(element.css("padding" + name)); });
 663  
 664              self.containerOffset = element.offset();
 665              self.containerPosition = element.position();
 666              self.containerSize = { height: (element.innerHeight() - p[3]), width: (element.innerWidth() - p[1]) };
 667  
 668              var co = self.containerOffset, ch = self.containerSize.height,    cw = self.containerSize.width,
 669                          width = ($.ui.hasScroll(ce, "left") ? ce.scrollWidth : cw ), height = ($.ui.hasScroll(ce) ? ce.scrollHeight : ch);
 670  
 671              self.parentData = {
 672                  element: ce, left: co.left, top: co.top, width: width, height: height
 673              };
 674          }
 675      },
 676  
 677      resize: function(event, ui) {
 678          var self = $(this).data("resizable"), o = self.options,
 679                  ps = self.containerSize, co = self.containerOffset, cs = self.size, cp = self.position,
 680                  pRatio = self._aspectRatio || event.shiftKey, cop = { top:0, left:0 }, ce = self.containerElement;
 681  
 682          if (ce[0] != document && (/static/).test(ce.css('position'))) cop = co;
 683  
 684          if (cp.left < (self._helper ? co.left : 0)) {
 685              self.size.width = self.size.width + (self._helper ? (self.position.left - co.left) : (self.position.left - cop.left));
 686              if (pRatio) self.size.height = self.size.width / o.aspectRatio;
 687              self.position.left = o.helper ? co.left : 0;
 688          }
 689  
 690          if (cp.top < (self._helper ? co.top : 0)) {
 691              self.size.height = self.size.height + (self._helper ? (self.position.top - co.top) : self.position.top);
 692              if (pRatio) self.size.width = self.size.height * o.aspectRatio;
 693              self.position.top = self._helper ? co.top : 0;
 694          }
 695  
 696          self.offset.left = self.parentData.left+self.position.left;
 697          self.offset.top = self.parentData.top+self.position.top;
 698  
 699          var woset = Math.abs( (self._helper ? self.offset.left - cop.left : (self.offset.left - cop.left)) + self.sizeDiff.width ),
 700                      hoset = Math.abs( (self._helper ? self.offset.top - cop.top : (self.offset.top - co.top)) + self.sizeDiff.height );
 701  
 702          var isParent = self.containerElement.get(0) == self.element.parent().get(0),
 703              isOffsetRelative = /relative|absolute/.test(self.containerElement.css('position'));
 704  
 705          if(isParent && isOffsetRelative) woset -= self.parentData.left;
 706  
 707          if (woset + self.size.width >= self.parentData.width) {
 708              self.size.width = self.parentData.width - woset;
 709              if (pRatio) self.size.height = self.size.width / self.aspectRatio;
 710          }
 711  
 712          if (hoset + self.size.height >= self.parentData.height) {
 713              self.size.height = self.parentData.height - hoset;
 714              if (pRatio) self.size.width = self.size.height * self.aspectRatio;
 715          }
 716      },
 717  
 718      stop: function(event, ui){
 719          var self = $(this).data("resizable"), o = self.options, cp = self.position,
 720                  co = self.containerOffset, cop = self.containerPosition, ce = self.containerElement;
 721  
 722          var helper = $(self.helper), ho = helper.offset(), w = helper.outerWidth() - self.sizeDiff.width, h = helper.outerHeight() - self.sizeDiff.height;
 723  
 724          if (self._helper && !o.animate && (/relative/).test(ce.css('position')))
 725              $(this).css({ left: ho.left - cop.left - co.left, width: w, height: h });
 726  
 727          if (self._helper && !o.animate && (/static/).test(ce.css('position')))
 728              $(this).css({ left: ho.left - cop.left - co.left, width: w, height: h });
 729  
 730      }
 731  });
 732  
 733  $.ui.plugin.add("resizable", "ghost", {
 734  
 735      start: function(event, ui) {
 736  
 737          var self = $(this).data("resizable"), o = self.options, cs = self.size;
 738  
 739          self.ghost = self.originalElement.clone();
 740          self.ghost
 741              .css({ opacity: .25, display: 'block', position: 'relative', height: cs.height, width: cs.width, margin: 0, left: 0, top: 0 })
 742              .addClass('ui-resizable-ghost')
 743              .addClass(typeof o.ghost == 'string' ? o.ghost : '');
 744  
 745          self.ghost.appendTo(self.helper);
 746  
 747      },
 748  
 749      resize: function(event, ui){
 750          var self = $(this).data("resizable"), o = self.options;
 751          if (self.ghost) self.ghost.css({ position: 'relative', height: self.size.height, width: self.size.width });
 752      },
 753  
 754      stop: function(event, ui){
 755          var self = $(this).data("resizable"), o = self.options;
 756          if (self.ghost && self.helper) self.helper.get(0).removeChild(self.ghost.get(0));
 757      }
 758  
 759  });
 760  
 761  $.ui.plugin.add("resizable", "grid", {
 762  
 763      resize: function(event, ui) {
 764          var self = $(this).data("resizable"), o = self.options, cs = self.size, os = self.originalSize, op = self.originalPosition, a = self.axis, ratio = o._aspectRatio || event.shiftKey;
 765          o.grid = typeof o.grid == "number" ? [o.grid, o.grid] : o.grid;
 766          var ox = Math.round((cs.width - os.width) / (o.grid[0]||1)) * (o.grid[0]||1), oy = Math.round((cs.height - os.height) / (o.grid[1]||1)) * (o.grid[1]||1);
 767  
 768          if (/^(se|s|e)$/.test(a)) {
 769              self.size.width = os.width + ox;
 770              self.size.height = os.height + oy;
 771          }
 772          else if (/^(ne)$/.test(a)) {
 773              self.size.width = os.width + ox;
 774              self.size.height = os.height + oy;
 775              self.position.top = op.top - oy;
 776          }
 777          else if (/^(sw)$/.test(a)) {
 778              self.size.width = os.width + ox;
 779              self.size.height = os.height + oy;
 780              self.position.left = op.left - ox;
 781          }
 782          else {
 783              self.size.width = os.width + ox;
 784              self.size.height = os.height + oy;
 785              self.position.top = op.top - oy;
 786              self.position.left = op.left - ox;
 787          }
 788      }
 789  
 790  });
 791  
 792  var num = function(v) {
 793      return parseInt(v, 10) || 0;
 794  };
 795  
 796  var isNumber = function(value) {
 797      return !isNaN(parseInt(value, 10));
 798  };
 799  
 800  })(jQuery);