[Summary view] [Print] [Text view]

   1  YUI.add('yui2-resize', function(Y) {
   2      var YAHOO    = Y.YUI2;
   3      /*
   4  Copyright (c) 2011, Yahoo! Inc. All rights reserved.
   5  Code licensed under the BSD License:
   6  http://developer.yahoo.com/yui/license.html
   7  version: 2.9.0
   8  */
   9  /**
  10   * @description <p>Makes an element resizable</p>
  11   * @namespace YAHOO.util
  12   * @requires yahoo, dom, dragdrop, element, event
  13   * @optional animation
  14   * @module resize
  15   */
  16  (function() {
  17  var D = YAHOO.util.Dom,
  18      Event = YAHOO.util.Event,
  19      Lang = YAHOO.lang;
  20  
  21      /**
  22       * @constructor
  23       * @class Resize
  24       * @extends YAHOO.util.Element
  25       * @description <p>Makes an element resizable</p>
  26       * @param {String/HTMLElement} el The element to make resizable.
  27       * @param {Object} attrs Object liternal containing configuration parameters.
  28      */
  29  
  30      var Resize = function(el, config) {
  31          YAHOO.log('Creating Resize Object', 'info', 'Resize');
  32          var oConfig = {
  33              element: el,
  34              attributes: config || {}
  35          };
  36  
  37          Resize.superclass.constructor.call(this, oConfig.element, oConfig.attributes);    
  38      };
  39  
  40      /**
  41      * @private
  42      * @static
  43      * @property _instances
  44      * @description Internal hash table for all resize instances
  45      * @type Object
  46      */ 
  47      Resize._instances = {};
  48      /**
  49      * @static
  50      * @method getResizeById 
  51      * @description Get's a resize object by the HTML id of the element associated with the Resize object.
  52      * @return {Object} The Resize Object
  53      */ 
  54      Resize.getResizeById = function(id) {
  55          if (Resize._instances[id]) {
  56              return Resize._instances[id];
  57          }
  58          YAHOO.log('No Instance Found', 'error', 'Resize');
  59          return false;
  60      };
  61  
  62      YAHOO.extend(Resize, YAHOO.util.Element, {
  63          /**
  64          * @private
  65          * @property CSS_RESIZE
  66          * @description Base CSS class name
  67          * @type String
  68          */ 
  69          CSS_RESIZE: 'yui-resize',
  70          /**
  71          * @private
  72          * @property CSS_DRAG
  73          * @description Class name added when dragging is enabled
  74          * @type String
  75          */ 
  76          CSS_DRAG: 'yui-draggable',
  77          /**
  78          * @private
  79          * @property CSS_HOVER
  80          * @description Class name used for hover only handles
  81          * @type String
  82          */ 
  83          CSS_HOVER: 'yui-resize-hover',
  84          /**
  85          * @private
  86          * @property CSS_PROXY
  87          * @description Class name given to the proxy element
  88          * @type String
  89          */ 
  90          CSS_PROXY: 'yui-resize-proxy',
  91          /**
  92          * @private
  93          * @property CSS_WRAP
  94          * @description Class name given to the wrap element
  95          * @type String
  96          */ 
  97          CSS_WRAP: 'yui-resize-wrap',
  98          /**
  99          * @private
 100          * @property CSS_KNOB
 101          * @description Class name used to make the knob style handles
 102          * @type String
 103          */ 
 104          CSS_KNOB: 'yui-resize-knob',
 105          /**
 106          * @private
 107          * @property CSS_HIDDEN
 108          * @description Class name given to the wrap element to make all handles hidden
 109          * @type String
 110          */ 
 111          CSS_HIDDEN: 'yui-resize-hidden',
 112          /**
 113          * @private
 114          * @property CSS_HANDLE
 115          * @description Class name given to all handles, used as a base for single handle names as well.. Handle "t" will get this.CSS_HANDLE + '-t' as well as this.CSS_HANDLE
 116          * @type String
 117          */ 
 118          CSS_HANDLE: 'yui-resize-handle',
 119          /**
 120          * @private
 121          * @property CSS_STATUS
 122          * @description Class name given to the status element
 123          * @type String
 124          */ 
 125          CSS_STATUS: 'yui-resize-status',
 126          /**
 127          * @private
 128          * @property CSS_GHOST
 129          * @description Class name given to the wrap element when the ghost property is active
 130          * @type String
 131          */ 
 132          CSS_GHOST: 'yui-resize-ghost',
 133          /**
 134          * @private
 135          * @property CSS_RESIZING
 136          * @description Class name given to the wrap element when a resize action is taking place.
 137          * @type String
 138          */ 
 139          CSS_RESIZING: 'yui-resize-resizing',
 140          /**
 141          * @private
 142          * @property _resizeEvent
 143          * @description The mouse event used to resize with
 144          * @type Event
 145          */ 
 146          _resizeEvent: null,
 147          /**
 148          * @private
 149          * @property dd
 150          * @description The <a href="YAHOO.util.DragDrop.html">YAHOO.util.DragDrop</a> instance used if draggable is true
 151          * @type Object
 152          */ 
 153          dd: null,
 154          /** 
 155          * @private
 156          * @property browser
 157          * @description A copy of the YAHOO.env.ua property
 158          * @type Object
 159          */
 160          browser: YAHOO.env.ua,
 161          /** 
 162          * @private
 163          * @property _locked
 164          * @description A flag to show if the resize is locked
 165          * @type Boolean
 166          */
 167          _locked: null,
 168          /** 
 169          * @private
 170          * @property _positioned
 171          * @description A flag to show if the element is absolutely positioned
 172          * @type Boolean
 173          */
 174          _positioned: null,
 175          /** 
 176          * @private
 177          * @property _dds
 178          * @description An Object containing references to all of the <a href="YAHOO.util.DragDrop.html">YAHOO.util.DragDrop</a> instances used for the resize handles
 179          * @type Object
 180          */
 181          _dds: null,
 182          /** 
 183          * @private
 184          * @property _wrap
 185          * @description The HTML reference of the element wrapper
 186          * @type HTMLElement
 187          */
 188          _wrap: null,
 189          /** 
 190          * @private
 191          * @property _proxy
 192          * @description The HTML reference of the element proxy
 193          * @type HTMLElement
 194          */
 195          _proxy: null,
 196          /** 
 197          * @private
 198          * @property _handles
 199          * @description An object containing references to all of the resize handles.
 200          * @type Object
 201          */
 202          _handles: null,
 203          /** 
 204          * @private
 205          * @property _currentHandle
 206          * @description The string identifier of the currently active handle. e.g. 'r', 'br', 'tl'
 207          * @type String
 208          */
 209          _currentHandle: null,
 210          /** 
 211          * @private
 212          * @property _currentDD
 213          * @description A link to the currently active DD object
 214          * @type Object
 215          */
 216          _currentDD: null,
 217          /** 
 218          * @private
 219          * @property _cache
 220          * @description An lookup table containing key information for the element being resized. e.g. height, width, x position, y position, etc..
 221          * @type Object
 222          */
 223          _cache: null,
 224          /** 
 225          * @private
 226          * @property _active
 227          * @description Flag to show if the resize is active. Used for events.
 228          * @type Boolean
 229          */
 230          _active: null,
 231          /** 
 232          * @private
 233          * @method _createProxy
 234          * @description Creates the proxy element if the proxy config is true
 235          */
 236          _createProxy: function() {
 237              if (this.get('proxy')) {
 238                  YAHOO.log('Creating the Proxy Element', 'info', 'Resize');
 239                  this._proxy = document.createElement('div');
 240                  this._proxy.className = this.CSS_PROXY;
 241                  this._proxy.style.height = this.get('element').clientHeight + 'px';
 242                  this._proxy.style.width = this.get('element').clientWidth + 'px';
 243                  this._wrap.parentNode.appendChild(this._proxy);
 244              } else {
 245                  YAHOO.log('No proxy element, turn off animate config option', 'info', 'Resize');
 246                  this.set('animate', false);
 247              }
 248          },
 249          /** 
 250          * @private
 251          * @method _createWrap
 252          * @description Creates the wrap element if the wrap config is true. It will auto wrap the following element types: img, textarea, input, iframe, select
 253          */
 254          _createWrap: function() {
 255              YAHOO.log('Create the wrap element', 'info', 'Resize');
 256              this._positioned = false;
 257              //Force wrap for elements that can't have children 
 258              if (this.get('wrap') === false) {
 259                  switch (this.get('element').tagName.toLowerCase()) {
 260                      case 'img':
 261                      case 'textarea':
 262                      case 'input':
 263                      case 'iframe':
 264                      case 'select':
 265                          YAHOO.log('Auto-wrapping the element (' + this.get('element').tagName.toLowerCase() + ')', 'warn', 'Resize');
 266                          this.set('wrap', true);
 267                          break;
 268                  }
 269              }
 270              if (this.get('wrap') === true) {
 271                  YAHOO.log('Creating the wrap element', 'info', 'Resize');
 272                  this._wrap = document.createElement('div');
 273                  this._wrap.id = this.get('element').id + '_wrap';
 274                  this._wrap.className = this.CSS_WRAP;
 275                  if (this.get('element').tagName.toLowerCase() == 'textarea') {
 276                      D.addClass(this._wrap, 'yui-resize-textarea');
 277                  }
 278                  D.setStyle(this._wrap, 'width', this.get('width') + 'px');
 279                  D.setStyle(this._wrap, 'height', this.get('height') + 'px');
 280                  D.setStyle(this._wrap, 'z-index', this.getStyle('z-index'));
 281                  this.setStyle('z-index', 0);
 282                  var pos = D.getStyle(this.get('element'), 'position');
 283                  D.setStyle(this._wrap, 'position', ((pos == 'static') ? 'relative' : pos));
 284                  D.setStyle(this._wrap, 'top', D.getStyle(this.get('element'), 'top'));
 285                  D.setStyle(this._wrap, 'left', D.getStyle(this.get('element'), 'left'));
 286                  if (D.getStyle(this.get('element'), 'position') == 'absolute') {
 287                      this._positioned = true;
 288                      YAHOO.log('The element is positioned absolute', 'info', 'Resize');
 289                      D.setStyle(this.get('element'), 'position', 'relative');
 290                      D.setStyle(this.get('element'), 'top', '0');
 291                      D.setStyle(this.get('element'), 'left', '0');
 292                  }
 293                  var par = this.get('element').parentNode;
 294                  par.replaceChild(this._wrap, this.get('element'));
 295                  this._wrap.appendChild(this.get('element'));
 296              } else {
 297                  this._wrap = this.get('element');
 298                  if (D.getStyle(this._wrap, 'position') == 'absolute') {
 299                      this._positioned = true;
 300                  }
 301              }
 302              if (this.get('draggable')) {
 303                  this._setupDragDrop();
 304              }
 305              if (this.get('hover')) {
 306                  D.addClass(this._wrap, this.CSS_HOVER);
 307              }
 308              if (this.get('knobHandles')) {
 309                  D.addClass(this._wrap, this.CSS_KNOB);
 310              }
 311              if (this.get('hiddenHandles')) {
 312                  D.addClass(this._wrap, this.CSS_HIDDEN);
 313              }
 314              D.addClass(this._wrap, this.CSS_RESIZE);
 315          },
 316          /** 
 317          * @private
 318          * @method _setupDragDrop
 319          * @description Setup the <a href="YAHOO.util.DragDrop.html">YAHOO.util.DragDrop</a> instance on the element
 320          */
 321          _setupDragDrop: function() {
 322              YAHOO.log('Setting up the dragdrop instance on the element', 'info', 'Resize');
 323              D.addClass(this._wrap, this.CSS_DRAG);
 324              this.dd = new YAHOO.util.DD(this._wrap, this.get('id') + '-resize', { dragOnly: true, useShim: this.get('useShim') });
 325              this.dd.on('dragEvent', function() {
 326                  this.fireEvent('dragEvent', arguments);
 327              }, this, true);
 328          },
 329          /** 
 330          * @private
 331          * @method _createHandles
 332          * @description Creates the handles as specified in the config
 333          */
 334          _createHandles: function() {
 335              YAHOO.log('Creating the handles', 'info', 'Resize');
 336              this._handles = {};
 337              this._dds = {};
 338              var h = this.get('handles');
 339              for (var i = 0; i < h.length; i++) {
 340                  YAHOO.log('Creating handle position: ' + h[i], 'info', 'Resize');
 341                  this._handles[h[i]] = document.createElement('div');
 342                  this._handles[h[i]].id = D.generateId(this._handles[h[i]]);
 343                  this._handles[h[i]].className = this.CSS_HANDLE + ' ' + this.CSS_HANDLE + '-' + h[i];
 344                  var k = document.createElement('div');
 345                  k.className = this.CSS_HANDLE + '-inner-' + h[i];
 346                  this._handles[h[i]].appendChild(k);
 347                  this._wrap.appendChild(this._handles[h[i]]);
 348                  Event.on(this._handles[h[i]], 'mouseover', this._handleMouseOver, this, true);
 349                  Event.on(this._handles[h[i]], 'mouseout', this._handleMouseOut, this, true);
 350                  this._dds[h[i]] = new YAHOO.util.DragDrop(this._handles[h[i]], this.get('id') + '-handle-' + h, { useShim: this.get('useShim') });
 351                  this._dds[h[i]].setPadding(15, 15, 15, 15);
 352                  this._dds[h[i]].on('startDragEvent', this._handleStartDrag, this._dds[h[i]], this);
 353                  this._dds[h[i]].on('mouseDownEvent', this._handleMouseDown, this._dds[h[i]], this);
 354              }
 355              YAHOO.log('Creating the Status box', 'info', 'Resize');
 356              this._status = document.createElement('span');
 357              this._status.className = this.CSS_STATUS;
 358              document.body.insertBefore(this._status, document.body.firstChild);
 359          },
 360          /** 
 361          * @private
 362          * @method _ieSelectFix
 363          * @description The function we use as the onselectstart handler when we start a drag in Internet Explorer
 364          */
 365          _ieSelectFix: function() {
 366              return false;
 367          },
 368          /** 
 369          * @private
 370          * @property _ieSelectBack
 371          * @description We will hold a copy of the current "onselectstart" method on this property, and reset it after we are done using it.
 372          */
 373          _ieSelectBack: null,
 374          /** 
 375          * @private
 376          * @method _setAutoRatio
 377          * @param {Event} ev A mouse event.
 378          * @description This method checks to see if the "autoRatio" config is set. If it is, we will check to see if the "Shift Key" is pressed. If so, we will set the config ratio to true.
 379          */
 380          _setAutoRatio: function(ev) {
 381              if (this.get('autoRatio')) {
 382                  YAHOO.log('Setting up AutoRatio', 'info', 'Resize');
 383                  if (ev && ev.shiftKey) {
 384                      //Shift Pressed
 385                      YAHOO.log('Shift key presses, turning on ratio', 'info', 'Resize');
 386                      this.set('ratio', true);
 387                  } else {
 388                      YAHOO.log('Resetting ratio back to default', 'info', 'Resize');
 389                      this.set('ratio', this._configs.ratio._initialConfig.value);
 390                  }
 391              }
 392          },
 393          /** 
 394          * @private
 395          * @method _handleMouseDown
 396          * @param {Event} ev A mouse event.
 397          * @description This method preps the autoRatio on MouseDown.
 398          */
 399          _handleMouseDown: function(ev) {
 400              if (this._locked) {
 401                  YAHOO.log('Resize Locked', 'info', 'Resize');
 402                  return false;
 403              }
 404              if (D.getStyle(this._wrap, 'position') == 'absolute') {
 405                  this._positioned = true;
 406              }
 407              if (ev) {
 408                  this._setAutoRatio(ev);
 409              }
 410              if (this.browser.ie) {
 411                  this._ieSelectBack = document.body.onselectstart;
 412                  document.body.onselectstart = this._ieSelectFix;
 413              }
 414          },
 415          /** 
 416          * @private
 417          * @method _handleMouseOver
 418          * @param {Event} ev A mouse event.
 419          * @description Adds CSS class names to the handles
 420          */
 421          _handleMouseOver: function(ev) {
 422              if (this._locked) {
 423                  YAHOO.log('Resize Locked', 'info', 'Resize');
 424                  return false;
 425              }
 426              D.removeClass(this._wrap, this.CSS_RESIZE);
 427  
 428              if (this.get('hover')) {
 429                  D.removeClass(this._wrap, this.CSS_HOVER);
 430              }
 431              var tar = Event.getTarget(ev);
 432              if (!D.hasClass(tar, this.CSS_HANDLE)) {
 433                  tar = tar.parentNode;
 434              }
 435              if (D.hasClass(tar, this.CSS_HANDLE) && !this._active) {
 436                  D.addClass(tar, this.CSS_HANDLE + '-active');
 437                  for (var i in this._handles) {
 438                      if (Lang.hasOwnProperty(this._handles, i)) {
 439                          if (this._handles[i] == tar) {
 440                              D.addClass(tar, this.CSS_HANDLE + '-' + i + '-active');
 441                              break;
 442                          }
 443                      }
 444                  }
 445              }
 446  
 447              D.addClass(this._wrap, this.CSS_RESIZE);
 448          },
 449          /** 
 450          * @private
 451          * @method _handleMouseOut
 452          * @param {Event} ev A mouse event.
 453          * @description Removes CSS class names to the handles
 454          */
 455          _handleMouseOut: function(ev) {
 456              D.removeClass(this._wrap, this.CSS_RESIZE);
 457              if (this.get('hover') && !this._active) {
 458                  D.addClass(this._wrap, this.CSS_HOVER);
 459              }
 460              var tar = Event.getTarget(ev);
 461              if (!D.hasClass(tar, this.CSS_HANDLE)) {
 462                  tar = tar.parentNode;
 463              }
 464              if (D.hasClass(tar, this.CSS_HANDLE) && !this._active) {
 465                  D.removeClass(tar, this.CSS_HANDLE + '-active');
 466                  for (var i in this._handles) {
 467                      if (Lang.hasOwnProperty(this._handles, i)) {
 468                          if (this._handles[i] == tar) {
 469                              D.removeClass(tar, this.CSS_HANDLE + '-' + i + '-active');
 470                              break;
 471                          }
 472                      }
 473                  }
 474              }
 475              D.addClass(this._wrap, this.CSS_RESIZE);
 476          },
 477          /** 
 478          * @private
 479          * @method _handleStartDrag
 480          * @param {Object} args The args passed from the CustomEvent.
 481          * @param {Object} dd The <a href="YAHOO.util.DragDrop.html">YAHOO.util.DragDrop</a> object we are working with.
 482          * @description Resizes the proxy, sets up the <a href="YAHOO.util.DragDrop.html">YAHOO.util.DragDrop</a> handlers, updates the status div and preps the cache
 483          */
 484          _handleStartDrag: function(args, dd) {
 485              YAHOO.log('startDrag', 'info', 'Resize');
 486              var tar = dd.getDragEl();
 487              if (D.hasClass(tar, this.CSS_HANDLE)) {
 488                  if (D.getStyle(this._wrap, 'position') == 'absolute') {
 489                      this._positioned = true;
 490                  }
 491                  this._active = true;
 492                  this._currentDD = dd;
 493                  if (this._proxy) {
 494                      YAHOO.log('Activate proxy element', 'info', 'Resize');
 495                      this._proxy.style.visibility = 'visible';
 496                      this._proxy.style.zIndex = '1000';
 497                      this._proxy.style.height = this.get('element').clientHeight + 'px';
 498                      this._proxy.style.width = this.get('element').clientWidth + 'px';
 499                  }
 500  
 501                  for (var i in this._handles) {
 502                      if (Lang.hasOwnProperty(this._handles, i)) {
 503                          if (this._handles[i] == tar) {
 504                              this._currentHandle = i;
 505                              var handle = '_handle_for_' + i;
 506                              D.addClass(tar, this.CSS_HANDLE + '-' + i + '-active');
 507                              dd.on('dragEvent', this[handle], this, true);
 508                              dd.on('mouseUpEvent', this._handleMouseUp, this, true);
 509                              YAHOO.log('Adding DragEvents to: ' + i, 'info', 'Resize');
 510                              break;
 511                          }
 512                      }
 513                  }
 514  
 515  
 516                  D.addClass(tar, this.CSS_HANDLE + '-active');
 517  
 518                  if (this.get('proxy')) {
 519                      YAHOO.log('Posiiton Proxy Element', 'info', 'Resize');
 520                      var xy = D.getXY(this.get('element'));
 521                      D.setXY(this._proxy, xy);
 522                      if (this.get('ghost')) {
 523                          YAHOO.log('Add Ghost Class', 'info', 'Resize');
 524                          this.addClass(this.CSS_GHOST);
 525                      }
 526                  }
 527                  D.addClass(this._wrap, this.CSS_RESIZING);
 528                  this._setCache();
 529                  this._updateStatus(this._cache.height, this._cache.width, this._cache.top, this._cache.left);
 530                  YAHOO.log('Firing startResize Event', 'info', 'Resize');
 531                  this.fireEvent('startResize', { type: 'startresize', target: this});
 532              }
 533          },
 534          /** 
 535          * @private
 536          * @method _setCache
 537          * @description Sets up the this._cache hash table.
 538          */
 539          _setCache: function() {
 540              YAHOO.log('Setting up property cache', 'info', 'Resize');
 541              this._cache.xy = D.getXY(this._wrap);
 542              D.setXY(this._wrap, this._cache.xy);
 543              this._cache.height = this.get('clientHeight');
 544              this._cache.width = this.get('clientWidth');
 545              this._cache.start.height = this._cache.height;
 546              this._cache.start.width = this._cache.width;
 547              this._cache.start.top = this._cache.xy[1];
 548              this._cache.start.left = this._cache.xy[0];
 549              this._cache.top = this._cache.xy[1];
 550              this._cache.left = this._cache.xy[0];
 551              this.set('height', this._cache.height, true);
 552              this.set('width', this._cache.width, true);
 553          },
 554          /** 
 555          * @private
 556          * @method _handleMouseUp
 557          * @param {Event} ev A mouse event.
 558          * @description Cleans up listeners, hides proxy element and removes class names.
 559          */
 560          _handleMouseUp: function(ev) {
 561              this._active = false;
 562  
 563              var handle = '_handle_for_' + this._currentHandle;
 564              this._currentDD.unsubscribe('dragEvent', this[handle], this, true);
 565              this._currentDD.unsubscribe('mouseUpEvent', this._handleMouseUp, this, true);
 566  
 567              if (this._proxy) {
 568                  YAHOO.log('Hide Proxy Element', 'info', 'Resize');
 569                  this._proxy.style.visibility = 'hidden';
 570                  this._proxy.style.zIndex = '-1';
 571                  if (this.get('setSize')) {
 572                      YAHOO.log('Setting Size', 'info', 'Resize');
 573                      this.resize(ev, this._cache.height, this._cache.width, this._cache.top, this._cache.left, true);
 574                  } else {
 575                      YAHOO.log('Firing Resize Event', 'info', 'Resize');
 576                      this.fireEvent('resize', { ev: 'resize', target: this, height: this._cache.height, width: this._cache.width, top: this._cache.top, left: this._cache.left });
 577                  }
 578  
 579                  if (this.get('ghost')) {
 580                      YAHOO.log('Removing Ghost Class', 'info', 'Resize');
 581                      this.removeClass(this.CSS_GHOST);
 582                  }
 583              }
 584  
 585              if (this.get('hover')) {
 586                  D.addClass(this._wrap, this.CSS_HOVER);
 587              }
 588              if (this._status) {
 589                  D.setStyle(this._status, 'display', 'none');
 590              }
 591              if (this.browser.ie) {
 592                  YAHOO.log('Resetting IE onselectstart function', 'info', 'Resize');
 593                  document.body.onselectstart = this._ieSelectBack;
 594              }
 595  
 596              if (this.browser.ie) {
 597                  D.removeClass(this._wrap, this.CSS_RESIZE);
 598              }
 599  
 600              for (var i in this._handles) {
 601                  if (Lang.hasOwnProperty(this._handles, i)) {
 602                      D.removeClass(this._handles[i], this.CSS_HANDLE + '-active');
 603                  }
 604              }
 605              if (this.get('hover') && !this._active) {
 606                  D.addClass(this._wrap, this.CSS_HOVER);
 607              }
 608              D.removeClass(this._wrap, this.CSS_RESIZING);
 609  
 610              D.removeClass(this._handles[this._currentHandle], this.CSS_HANDLE + '-' + this._currentHandle + '-active');
 611              D.removeClass(this._handles[this._currentHandle], this.CSS_HANDLE + '-active');
 612  
 613              if (this.browser.ie) {
 614                  D.addClass(this._wrap, this.CSS_RESIZE);
 615              }
 616  
 617              this._resizeEvent = null;
 618              this._currentHandle = null;
 619              
 620              if (!this.get('animate')) {
 621                  this.set('height', this._cache.height, true);
 622                  this.set('width', this._cache.width, true);
 623              }
 624  
 625              YAHOO.log('Firing endResize Event', 'info', 'Resize');
 626              this.fireEvent('endResize', { ev: 'endResize', target: this, height: this._cache.height, width: this._cache.width, top: this._cache.top, left: this._cache.left });
 627          },
 628          /** 
 629          * @private
 630          * @method _setRatio
 631          * @param {Number} h The height offset.
 632          * @param {Number} w The with offset.
 633          * @param {Number} t The top offset.
 634          * @param {Number} l The left offset.
 635          * @description Using the Height, Width, Top & Left, it recalcuates them based on the original element size.
 636          * @return {Array} The new Height, Width, Top & Left settings
 637          */
 638          _setRatio: function(h, w, t, l) {
 639              YAHOO.log('Setting Ratio', 'info', 'Resize');
 640              var oh = h, ow = w;
 641              if (this.get('ratio')) {
 642                  var orgH = this._cache.height,
 643                      orgW = this._cache.width,
 644                      nh = parseInt(this.get('height'), 10),
 645                      nw = parseInt(this.get('width'), 10),
 646                      maxH = this.get('maxHeight'),
 647                      minH = this.get('minHeight'),
 648                      maxW = this.get('maxWidth'),
 649                      minW = this.get('minWidth');
 650  
 651                  switch (this._currentHandle) {
 652                      case 'l':
 653                          h = nh * (w / nw);
 654                          h = Math.min(Math.max(minH, h), maxH);                        
 655                          w = nw * (h / nh);
 656                          t = (this._cache.start.top - (-((nh - h) / 2)));
 657                          l = (this._cache.start.left - (-((nw - w))));
 658                          break;
 659                      case 'r':
 660                          h = nh * (w / nw);
 661                          h = Math.min(Math.max(minH, h), maxH);                        
 662                          w = nw * (h / nh);
 663                          t = (this._cache.start.top - (-((nh - h) / 2)));
 664                          break;
 665                      case 't':
 666                          w = nw * (h / nh);
 667                          h = nh * (w / nw);
 668                          l = (this._cache.start.left - (-((nw - w) / 2)));
 669                          t = (this._cache.start.top - (-((nh - h))));
 670                          break;
 671                      case 'b':
 672                          w = nw * (h / nh);
 673                          h = nh * (w / nw);
 674                          l = (this._cache.start.left - (-((nw - w) / 2)));
 675                          break;
 676                      case 'bl':
 677                          h = nh * (w / nw);
 678                          w = nw * (h / nh);
 679                          l = (this._cache.start.left - (-((nw - w))));
 680                          break;
 681                      case 'br':
 682                          h = nh * (w / nw);
 683                          w = nw * (h / nh);
 684                          break;
 685                      case 'tl':
 686                          h = nh * (w / nw);
 687                          w = nw * (h / nh);
 688                          l = (this._cache.start.left - (-((nw - w))));
 689                          t = (this._cache.start.top - (-((nh - h))));
 690                          break;
 691                      case 'tr':
 692                          h = nh * (w / nw);
 693                          w = nw * (h / nh);
 694                          l = (this._cache.start.left);
 695                          t = (this._cache.start.top - (-((nh - h))));
 696                          break;
 697                  }
 698                  oh = this._checkHeight(h);
 699                  ow = this._checkWidth(w);
 700                  if ((oh != h) || (ow != w)) {
 701                      t = 0;
 702                      l = 0;
 703                      if (oh != h) {
 704                          ow = this._cache.width;
 705                      }
 706                      if (ow != w) {
 707                          oh = this._cache.height;
 708                      }
 709                  }
 710              }
 711              return [oh, ow, t, l];
 712          },
 713          /** 
 714          * @private
 715          * @method _updateStatus
 716          * @param {Number} h The new height setting.
 717          * @param {Number} w The new width setting.
 718          * @param {Number} t The new top setting.
 719          * @param {Number} l The new left setting.
 720          * @description Using the Height, Width, Top & Left, it updates the status element with the elements sizes.
 721          */
 722          _updateStatus: function(h, w, t, l) {
 723              if (this._resizeEvent && (!Lang.isString(this._resizeEvent))) {
 724                  YAHOO.log('Updating Status Box', 'info', 'Resize');
 725                  h = ((h === 0) ? this._cache.start.height : h);
 726                  w = ((w === 0) ? this._cache.start.width : w);
 727                  var h1 = parseInt(this.get('height'), 10),
 728                      w1 = parseInt(this.get('width'), 10);
 729                  
 730                  if (isNaN(h1)) {
 731                      h1 = parseInt(h, 10);
 732                  }
 733                  if (isNaN(w1)) {
 734                      w1 = parseInt(w, 10);
 735                  }
 736                  var diffH = (parseInt(h, 10) - h1);
 737                  var diffW = (parseInt(w, 10) - w1);
 738                  this._cache.offsetHeight = diffH;
 739                  this._cache.offsetWidth = diffW;
 740                  if (this.get('status')) {
 741                      YAHOO.log('Showing Status Box', 'info', 'Resize');
 742                      D.setStyle(this._status, 'display', 'inline');
 743                      //This will cause IE8 to crash if the status box is hidden..
 744                      this._status.innerHTML = '<strong>' + parseInt(h, 10) + ' x ' + parseInt(w, 10) + '</strong><em>' + ((diffH > 0) ? '+' : '') + diffH + ' x ' + ((diffW > 0) ? '+' : '') + diffW + '</em>';
 745                      D.setXY(this._status, [Event.getPageX(this._resizeEvent) + 12, Event.getPageY(this._resizeEvent) + 12]);
 746                  }
 747              }
 748          },
 749          /** 
 750          * @method lock
 751          * @description Lock the resize so it can't be resized
 752          * @param {Boolean} dd If the draggable config is set, lock it too
 753          * @return {<a href="YAHOO.util.Resize.html">YAHOO.util.Resize</a>} The Resize instance
 754          */
 755          lock: function(dd) {
 756              this._locked = true;
 757              if (dd && this.dd) {
 758                  D.removeClass(this._wrap, 'yui-draggable');
 759                  this.dd.lock();
 760              }
 761              return this;
 762          },
 763          /** 
 764          * @method unlock
 765          * @description Unlock the resize so it can be resized
 766          * @param {Boolean} dd If the draggable config is set, unlock it too
 767          * @return {<a href="YAHOO.util.Resize.html">YAHOO.util.Resize</a>} The Resize instance
 768          */
 769          unlock: function(dd) {
 770              this._locked = false;
 771              if (dd && this.dd) {
 772                  D.addClass(this._wrap, 'yui-draggable');
 773                  this.dd.unlock();
 774              }
 775              return this;
 776          },
 777          /** 
 778          * @method isLocked
 779          * @description Check the locked status of the resize instance
 780          * @return {Boolean}
 781          */
 782          isLocked: function() {
 783              return this._locked;
 784          },
 785          /** 
 786          * @method reset
 787          * @description Resets the element to is start state.
 788          * @return {<a href="YAHOO.util.Resize.html">YAHOO.util.Resize</a>} The Resize instance
 789          */
 790          reset: function() {
 791              YAHOO.log('Resetting to cached sizes and position', 'info', 'Resize');
 792              this.resize(null, this._cache.start.height, this._cache.start.width, this._cache.start.top, this._cache.start.left, true);
 793              return this;
 794          },
 795          /** 
 796          * @private
 797          * @method resize
 798          * @param {Event} ev The mouse event.
 799          * @param {Number} h The new height setting.
 800          * @param {Number} w The new width setting.
 801          * @param {Number} t The new top setting.
 802          * @param {Number} l The new left setting.
 803          * @param {Boolean} force Resize the element (used for proxy resize).
 804          * @param {Boolean} silent Don't fire the beforeResize Event.
 805          * @description Resizes the element, wrapper or proxy based on the data from the handlers.
 806          * @return {<a href="YAHOO.util.Resize.html">YAHOO.util.Resize</a>} The Resize instance
 807          */
 808          resize: function(ev, h, w, t, l, force, silent) {
 809              if (this._locked) {
 810                  YAHOO.log('Resize Locked', 'info', 'Resize');
 811                  return false;
 812              }
 813              YAHOO.log('Resize: ' + h + ',' + w + ',' + t + ',' + l, 'info', 'Resize');
 814              this._resizeEvent = ev;
 815              var el = this._wrap, anim = this.get('animate'), set = true;
 816              if (this._proxy && !force) {
 817                  el = this._proxy;
 818                  anim = false;
 819              }
 820              this._setAutoRatio(ev);
 821              if (this._positioned) {
 822                  if (this._proxy) {
 823                      t = this._cache.top - t;
 824                      l = this._cache.left - l;
 825                  }
 826              }
 827              
 828              
 829              var ratio = this._setRatio(h, w, t, l);
 830              h = parseInt(ratio[0], 10);
 831              w = parseInt(ratio[1], 10);
 832              t = parseInt(ratio[2], 10);
 833              l = parseInt(ratio[3], 10);
 834              
 835              if (t == 0) {
 836                  //No Offset, get from cache
 837                  t = D.getY(el);
 838              }
 839              if (l == 0) {
 840                  //No Offset, get from cache
 841                  l = D.getX(el);
 842              }
 843  
 844              
 845  
 846              if (this._positioned) {
 847                  if (this._proxy && force) {
 848                      if (!anim) {
 849                          el.style.top = this._proxy.style.top;
 850                          el.style.left = this._proxy.style.left;
 851                      } else {
 852                          t = this._proxy.style.top;
 853                          l = this._proxy.style.left;
 854                      }
 855                  } else {
 856                      if (!this.get('ratio') && !this._proxy) {
 857                          t = this._cache.top + -(t);
 858                          l = this._cache.left + -(l);
 859                      }
 860                      if (t) {
 861                          if (this.get('minY')) {
 862                              if (t < this.get('minY')) {
 863                                  t = this.get('minY');
 864                              }
 865                          }
 866                          if (this.get('maxY')) {
 867                              if (t > this.get('maxY')) {
 868                                  t = this.get('maxY');
 869                              }
 870                          }
 871                      }
 872                      if (l) {
 873                          if (this.get('minX')) {
 874                              if (l < this.get('minX')) {
 875                                  l = this.get('minX');
 876                              }
 877                          }
 878                          if (this.get('maxX')) {
 879                              if ((l + w) > this.get('maxX')) {
 880                                  l = (this.get('maxX') - w);
 881                              }
 882                          }
 883                      }
 884                  }
 885              }
 886              if (!silent) {
 887                  YAHOO.log('beforeResize', 'info', 'Resize');
 888                  var beforeReturn = this.fireEvent('beforeResize', { ev: 'beforeResize', target: this, height: h, width: w, top: t, left: l });
 889                  if (beforeReturn === false) {
 890                      YAHOO.log('Resized cancelled because befireResize returned false', 'info', 'Resize');
 891                      return false;
 892                  }
 893              }
 894  
 895              this._updateStatus(h, w, t, l);
 896  
 897  
 898              if (this._positioned) {
 899                  if (this._proxy && force) {
 900                      //Do nothing
 901                  } else {
 902                      if (t) {
 903                          D.setY(el, t);
 904                          this._cache.top = t;
 905                      }
 906                      if (l) {
 907                          D.setX(el, l);
 908                          this._cache.left = l;
 909                      }
 910                  }
 911              }
 912              if (h) {
 913                  if (!anim) {
 914                      set = true;
 915                      if (this._proxy && force) {
 916                          if (!this.get('setSize')) {
 917                              set = false;
 918                          }
 919                      }
 920                      if (set) {
 921                          el.style.height = h + 'px';
 922                      }
 923                      if ((this._proxy && force) || !this._proxy) {
 924                          if (this._wrap != this.get('element')) {
 925                              this.get('element').style.height = h + 'px';
 926                          }
 927                      }
 928                  }
 929                  this._cache.height = h;
 930              }
 931              if (w) {
 932                  this._cache.width = w;
 933                  if (!anim) {
 934                      set = true;
 935                      if (this._proxy && force) {
 936                          if (!this.get('setSize')) {
 937                              set = false;
 938                          }
 939                      }
 940                      if (set) {
 941                          el.style.width = w + 'px';
 942                      }
 943                      if ((this._proxy && force) || !this._proxy) {
 944                          if (this._wrap != this.get('element')) {
 945                              this.get('element').style.width = w + 'px';
 946                          }
 947                      }
 948                  }
 949              }
 950              if (anim) {
 951                  if (YAHOO.util.Anim) {
 952                      var _anim = new YAHOO.util.Anim(el, {
 953                          height: {
 954                              to: this._cache.height
 955                          },
 956                          width: {
 957                              to: this._cache.width
 958                          }
 959                      }, this.get('animateDuration'), this.get('animateEasing'));
 960                      if (this._positioned) {
 961                          if (t) {
 962                              _anim.attributes.top = {
 963                                  to: parseInt(t, 10)
 964                              };
 965                          }
 966                          if (l) {
 967                              _anim.attributes.left = {
 968                                  to: parseInt(l, 10)
 969                              };
 970                          }
 971                      }
 972  
 973                      if (this._wrap != this.get('element')) {
 974                          _anim.onTween.subscribe(function() {
 975                              this.get('element').style.height = el.style.height;
 976                              this.get('element').style.width = el.style.width;
 977                          }, this, true);
 978                      }
 979  
 980                      _anim.onComplete.subscribe(function() {
 981                          YAHOO.log('Animation onComplete fired', 'info', 'Resize');
 982                          this.set('height', h);
 983                          this.set('width', w);
 984                          this.fireEvent('resize', { ev: 'resize', target: this, height: h, width: w, top: t, left: l });
 985                      }, this, true);
 986                      _anim.animate();
 987  
 988                  }
 989              } else {
 990                  if (this._proxy && !force) {
 991                      YAHOO.log('proxyResize', 'info', 'Resize');
 992                      this.fireEvent('proxyResize', { ev: 'proxyresize', target: this, height: h, width: w, top: t, left: l });
 993                  } else {
 994                      YAHOO.log('resize', 'info', 'Resize');
 995                      this.fireEvent('resize', { ev: 'resize', target: this, height: h, width: w, top: t, left: l });
 996                  }
 997              }
 998              return this;
 999          },
1000          /** 
1001          * @private
1002          * @method _handle_for_br
1003          * @param {Object} args The arguments from the CustomEvent.
1004          * @description Handles the sizes for the Bottom Right handle.
1005          */
1006          _handle_for_br: function(args) {
1007              YAHOO.log('Handle BR', 'info', 'Resize');
1008              var newW = this._setWidth(args.e);
1009              var newH = this._setHeight(args.e);
1010              this.resize(args.e, newH, newW, 0, 0);
1011          },
1012          /** 
1013          * @private
1014          * @method _handle_for_bl
1015          * @param {Object} args The arguments from the CustomEvent.
1016          * @description Handles the sizes for the Bottom Left handle.
1017          */
1018          _handle_for_bl: function(args) {
1019              YAHOO.log('Handle BL', 'info', 'Resize');
1020              var newW = this._setWidth(args.e, true);
1021              var newH = this._setHeight(args.e);
1022              var l = (newW - this._cache.width);
1023              this.resize(args.e, newH, newW, 0, l);
1024          },
1025          /** 
1026          * @private
1027          * @method _handle_for_tl
1028          * @param {Object} args The arguments from the CustomEvent.
1029          * @description Handles the sizes for the Top Left handle.
1030          */
1031          _handle_for_tl: function(args) {
1032              YAHOO.log('Handle TL', 'info', 'Resize');
1033              var newW = this._setWidth(args.e, true);
1034              var newH = this._setHeight(args.e, true);
1035              var t = (newH - this._cache.height);
1036              var l = (newW - this._cache.width);
1037              this.resize(args.e, newH, newW, t, l);
1038          },
1039          /** 
1040          * @private
1041          * @method _handle_for_tr
1042          * @param {Object} args The arguments from the CustomEvent.
1043          * @description Handles the sizes for the Top Right handle.
1044          */
1045          _handle_for_tr: function(args) {
1046              YAHOO.log('Handle TR', 'info', 'Resize');
1047              var newW = this._setWidth(args.e);
1048              var newH = this._setHeight(args.e, true);
1049              var t = (newH - this._cache.height);
1050              this.resize(args.e, newH, newW, t, 0);
1051          },
1052          /** 
1053          * @private
1054          * @method _handle_for_r
1055          * @param {Object} args The arguments from the CustomEvent.
1056          * @description Handles the sizes for the Right handle.
1057          */
1058          _handle_for_r: function(args) {
1059              YAHOO.log('Handle R', 'info', 'Resize');
1060              this._dds.r.setYConstraint(0,0);
1061              var newW = this._setWidth(args.e);
1062              this.resize(args.e, 0, newW, 0, 0);
1063          },
1064          /** 
1065          * @private
1066          * @method _handle_for_l
1067          * @param {Object} args The arguments from the CustomEvent.
1068          * @description Handles the sizes for the Left handle.
1069          */
1070          _handle_for_l: function(args) {
1071              YAHOO.log('Handle L', 'info', 'Resize');
1072              this._dds.l.setYConstraint(0,0);
1073              var newW = this._setWidth(args.e, true);
1074              var l = (newW - this._cache.width);
1075              this.resize(args.e, 0, newW, 0, l);
1076          },
1077          /** 
1078          * @private
1079          * @method _handle_for_b
1080          * @param {Object} args The arguments from the CustomEvent.
1081          * @description Handles the sizes for the Bottom handle.
1082          */
1083          _handle_for_b: function(args) {
1084              YAHOO.log('Handle B', 'info', 'Resize');
1085              this._dds.b.setXConstraint(0,0);
1086              var newH = this._setHeight(args.e);
1087              this.resize(args.e, newH, 0, 0, 0);
1088          },
1089          /** 
1090          * @private
1091          * @method _handle_for_t
1092          * @param {Object} args The arguments from the CustomEvent.
1093          * @description Handles the sizes for the Top handle.
1094          */
1095          _handle_for_t: function(args) {
1096              YAHOO.log('Handle T', 'info', 'Resize');
1097              this._dds.t.setXConstraint(0,0);
1098              var newH = this._setHeight(args.e, true);
1099              var t = (newH - this._cache.height);
1100              this.resize(args.e, newH, 0, t, 0);
1101          },
1102          /** 
1103          * @private
1104          * @method _setWidth
1105          * @param {Event} ev The mouse event.
1106          * @param {Boolean} flip Argument to determine the direction of the movement.
1107          * @description Calculates the width based on the mouse event.
1108          * @return {Number} The new value
1109          */
1110          _setWidth: function(ev, flip) {
1111              YAHOO.log('Set width based on Event', 'info', 'Resize');
1112              var xy = this._cache.xy[0],
1113                  w = this._cache.width,
1114                  x = Event.getPageX(ev),
1115                  nw = (x - xy);
1116  
1117                  if (flip) {
1118                      nw = (xy - x) + parseInt(this.get('width'), 10);
1119                  }
1120                  
1121                  nw = this._snapTick(nw, this.get('xTicks'));
1122                  nw = this._checkWidth(nw);
1123              return nw;
1124          },
1125          /** 
1126          * @private
1127          * @method _checkWidth
1128          * @param {Number} w The width to check.
1129          * @description Checks the value passed against the maxWidth and minWidth.
1130          * @return {Number} the new value
1131          */
1132          _checkWidth: function(w) {
1133              YAHOO.log('Checking the min/max width', 'info', 'Resize');
1134              if (this.get('minWidth')) {
1135                  if (w <= this.get('minWidth')) {
1136                      YAHOO.log('Using minWidth', 'info', 'Resize');
1137                      w = this.get('minWidth');
1138                  }
1139              }
1140              if (this.get('maxWidth')) {
1141                  if (w >= this.get('maxWidth')) {
1142                      YAHOO.log('Using Max Width', 'info', 'Resize');
1143                      w = this.get('maxWidth');
1144                  }
1145              }
1146              return w;
1147          },
1148          /** 
1149          * @private
1150          * @method _checkHeight
1151          * @param {Number} h The height to check.
1152          * @description Checks the value passed against the maxHeight and minHeight.
1153          * @return {Number} The new value
1154          */
1155          _checkHeight: function(h) {
1156              YAHOO.log('Checking the min/max height', 'info', 'Resize');
1157              if (this.get('minHeight')) {
1158                  if (h <= this.get('minHeight')) {
1159                      YAHOO.log('Using minHeight', 'info', 'Resize');
1160                      h = this.get('minHeight');
1161                  }
1162              }
1163              if (this.get('maxHeight')) {
1164                  if (h >= this.get('maxHeight')) {
1165                      YAHOO.log('using maxHeight', 'info', 'Resize');
1166                      h = this.get('maxHeight');
1167                  }
1168              }
1169              return h;
1170          },
1171          /** 
1172          * @private
1173          * @method _setHeight
1174          * @param {Event} ev The mouse event.
1175          * @param {Boolean} flip Argument to determine the direction of the movement.
1176          * @description Calculated the height based on the mouse event.
1177          * @return {Number} The new value
1178          */
1179          _setHeight: function(ev, flip) {
1180              YAHOO.log('Setting the height based on the Event', 'info', 'Resize');
1181              var xy = this._cache.xy[1],
1182                  h = this._cache.height,
1183                  y = Event.getPageY(ev),
1184                  nh = (y - xy);
1185  
1186                  if (flip) {
1187                      nh = (xy - y) + parseInt(this.get('height'), 10);
1188                  }
1189                  nh = this._snapTick(nh, this.get('yTicks'));
1190                  nh = this._checkHeight(nh);
1191                  
1192              return nh;
1193          },
1194          /** 
1195          * @private
1196          * @method _snapTick
1197          * @param {Number} size The size to tick against.
1198          * @param {Number} pix The tick pixels.
1199          * @description Adjusts the number based on the ticks used.
1200          * @return {Number} the new snapped position
1201          */
1202          _snapTick: function(size, pix) {
1203              YAHOO.log('Snapping to ticks', 'info', 'Resize');
1204              if (!size || !pix) {
1205                  return size;
1206              }
1207              var _s = size;
1208              var _x = size % pix;
1209              if (_x > 0) {
1210                  if (_x > (pix / 2)) {
1211                      _s = size + (pix - _x);
1212                  } else {
1213                      _s = size - _x;
1214                  }
1215              }
1216              return _s;
1217          },
1218          /** 
1219          * @private
1220          * @method init
1221          * @description The Resize class's initialization method
1222          */        
1223          init: function(p_oElement, p_oAttributes) {
1224              YAHOO.log('init', 'info', 'Resize');
1225              this._locked = false;
1226              this._cache = {
1227                  xy: [],
1228                  height: 0,
1229                  width: 0,
1230                  top: 0,
1231                  left: 0,
1232                  offsetHeight: 0,
1233                  offsetWidth: 0,
1234                  start: {
1235                      height: 0,
1236                      width: 0,
1237                      top: 0,
1238                      left: 0
1239                  }
1240              };
1241  
1242              Resize.superclass.init.call(this, p_oElement, p_oAttributes);
1243  
1244              this.set('setSize', this.get('setSize'));
1245  
1246              if (p_oAttributes.height) {
1247                  this.set('height', parseInt(p_oAttributes.height, 10));
1248              } else {
1249                  var h = this.getStyle('height');
1250                  if (h == 'auto') {
1251                      this.set('height', parseInt(this.get('element').offsetHeight, 10));
1252                  }
1253              }
1254              if (p_oAttributes.width) {
1255                  this.set('width', parseInt(p_oAttributes.width, 10));
1256              } else {
1257                  var w = this.getStyle('width');
1258                  if (w == 'auto') {
1259                      this.set('width', parseInt(this.get('element').offsetWidth, 10));
1260                  }
1261              }
1262              
1263              var id = p_oElement;
1264              if (!Lang.isString(id)) {
1265                  id = D.generateId(id);
1266              }
1267              Resize._instances[id] = this;
1268  
1269              this._active = false;
1270              
1271              this._createWrap();
1272              this._createProxy();
1273              this._createHandles();
1274  
1275          },
1276          /**
1277          * @method getProxyEl
1278          * @description Get the HTML reference for the proxy, returns null if no proxy.
1279          * @return {HTMLElement} The proxy element
1280          */      
1281          getProxyEl: function() {
1282              return this._proxy;
1283          },
1284          /**
1285          * @method getWrapEl
1286          * @description Get the HTML reference for the wrap element, returns the current element if not wrapped.
1287          * @return {HTMLElement} The wrap element
1288          */      
1289          getWrapEl: function() {
1290              return this._wrap;
1291          },
1292          /**
1293          * @method getStatusEl
1294          * @description Get the HTML reference for the status element.
1295          * @return {HTMLElement} The status element
1296          */      
1297          getStatusEl: function() {
1298              return this._status;
1299          },
1300          /**
1301          * @method getActiveHandleEl
1302          * @description Get the HTML reference for the currently active resize handle.
1303          * @return {HTMLElement} The handle element that is active
1304          */      
1305          getActiveHandleEl: function() {
1306              return this._handles[this._currentHandle];
1307          },
1308          /**
1309          * @method isActive
1310          * @description Returns true or false if a resize operation is currently active on the element.
1311          * @return {Boolean}
1312          */      
1313          isActive: function() {
1314              return ((this._active) ? true : false);
1315          },
1316          /**
1317          * @private
1318          * @method initAttributes
1319          * @description Initializes all of the configuration attributes used to create a resizable element.
1320          * @param {Object} attr Object literal specifying a set of 
1321          * configuration attributes used to create the utility.
1322          */      
1323          initAttributes: function(attr) {
1324              Resize.superclass.initAttributes.call(this, attr);
1325  
1326              /**
1327              * @attribute useShim
1328              * @description This setting will be passed to the DragDrop instances on the resize handles and for the draggable property.
1329              * This property should be used if you want the resize handles to work over iframe and other elements.
1330              * @type Boolean
1331              */
1332              this.setAttributeConfig('useShim', {
1333                  value: ((attr.useShim === true) ? true : false),
1334                  validator: YAHOO.lang.isBoolean,
1335                  method: function(u) {
1336                      for (var i in this._dds) {
1337                          if (Lang.hasOwnProperty(this._dds, i)) {
1338                              this._dds[i].useShim = u;
1339                          }
1340                      }
1341                      if (this.dd) {
1342                          this.dd.useShim = u;
1343                      }
1344                  }
1345              });
1346              /**
1347              * @attribute setSize
1348              * @description Set the size of the resized element, if set to false the element will not be auto resized,
1349              * the resize event will contain the dimensions so the end user can resize it on their own.
1350              * This setting will only work with proxy set to true and animate set to false.
1351              * @type Boolean
1352              */
1353              this.setAttributeConfig('setSize', {
1354                  value: ((attr.setSize === false) ? false : true),
1355                  validator: YAHOO.lang.isBoolean
1356              });
1357  
1358              /**
1359              * @attribute wrap
1360              * @description Should we wrap the element
1361              * @type Boolean
1362              */
1363              this.setAttributeConfig('wrap', {
1364                  writeOnce: true,
1365                  validator: YAHOO.lang.isBoolean,
1366                  value: attr.wrap || false
1367              });
1368  
1369              /**
1370              * @attribute handles
1371              * @description The handles to use (any combination of): 't', 'b', 'r', 'l', 'bl', 'br', 'tl', 'tr'. Defaults to: ['r', 'b', 'br'].
1372              * Can use a shortcut of All. Note: 8 way resizing should be done on an element that is absolutely positioned.
1373              * @type Array
1374              */
1375              this.setAttributeConfig('handles', {
1376                  writeOnce: true,
1377                  value: attr.handles || ['r', 'b', 'br'],
1378                  validator: function(handles) {
1379                      if (Lang.isString(handles) && handles.toLowerCase() == 'all') {
1380                          handles = ['t', 'b', 'r', 'l', 'bl', 'br', 'tl', 'tr'];
1381                      }
1382                      if (!Lang.isArray(handles)) {
1383                          handles = handles.replace(/, /g, ',');
1384                          handles = handles.split(',');
1385                      }
1386                      this._configs.handles.value = handles;
1387                  }
1388              });
1389  
1390              /**
1391              * @attribute width
1392              * @description The width of the element
1393              * @type Number
1394              */
1395              this.setAttributeConfig('width', {
1396                  value: attr.width || parseInt(this.getStyle('width'), 10),
1397                  validator: YAHOO.lang.isNumber,
1398                  method: function(width) {
1399                      width = parseInt(width, 10);
1400                      if (width > 0) {
1401                          if (this.get('setSize')) {
1402                              this.setStyle('width', width + 'px');
1403                          }
1404                          this._cache.width = width;
1405                          this._configs.width.value = width;
1406                      }
1407                  }
1408              });
1409  
1410              /**
1411              * @attribute height
1412              * @description The height of the element
1413              * @type Number
1414              */
1415              this.setAttributeConfig('height', {
1416                  value: attr.height || parseInt(this.getStyle('height'), 10),
1417                  validator: YAHOO.lang.isNumber,
1418                  method: function(height) {
1419                      height = parseInt(height, 10);
1420                      if (height > 0) {
1421                          if (this.get('setSize')) {
1422                              this.setStyle('height', height + 'px');
1423                          }
1424                          this._cache.height = height;
1425                          this._configs.height.value = height;
1426                      }
1427                  }
1428              });
1429  
1430              /**
1431              * @attribute minWidth
1432              * @description The minimum width of the element
1433              * @type Number
1434              */
1435              this.setAttributeConfig('minWidth', {
1436                  value: attr.minWidth || 15,
1437                  validator: YAHOO.lang.isNumber
1438              });
1439  
1440              /**
1441              * @attribute minHeight
1442              * @description The minimum height of the element
1443              * @type Number
1444              */
1445              this.setAttributeConfig('minHeight', {
1446                  value: attr.minHeight || 15,
1447                  validator: YAHOO.lang.isNumber
1448              });
1449  
1450              /**
1451              * @attribute maxWidth
1452              * @description The maximum width of the element
1453              * @type Number
1454              */
1455              this.setAttributeConfig('maxWidth', {
1456                  value: attr.maxWidth || 10000,
1457                  validator: YAHOO.lang.isNumber
1458              });
1459  
1460              /**
1461              * @attribute maxHeight
1462              * @description The maximum height of the element
1463              * @type Number
1464              */
1465              this.setAttributeConfig('maxHeight', {
1466                  value: attr.maxHeight || 10000,
1467                  validator: YAHOO.lang.isNumber
1468              });
1469  
1470              /**
1471              * @attribute minY
1472              * @description The minimum y coord of the element
1473              * @type Number
1474              */
1475              this.setAttributeConfig('minY', {
1476                  value: attr.minY || false
1477              });
1478  
1479              /**
1480              * @attribute minX
1481              * @description The minimum x coord of the element
1482              * @type Number
1483              */
1484              this.setAttributeConfig('minX', {
1485                  value: attr.minX || false
1486              });
1487              /**
1488              * @attribute maxY
1489              * @description The max y coord of the element
1490              * @type Number
1491              */
1492              this.setAttributeConfig('maxY', {
1493                  value: attr.maxY || false
1494              });
1495  
1496              /**
1497              * @attribute maxX
1498              * @description The max x coord of the element
1499              * @type Number
1500              */
1501              this.setAttributeConfig('maxX', {
1502                  value: attr.maxX || false
1503              });
1504  
1505              /**
1506              * @attribute animate
1507              * @description Should be use animation to resize the element (can only be used if we use proxy).
1508              * @type Boolean
1509              */
1510              this.setAttributeConfig('animate', {
1511                  value: attr.animate || false,
1512                  validator: function(value) {
1513                      var ret = true;
1514                      if (!YAHOO.util.Anim) {
1515                          ret = false;
1516                      }
1517                      return ret;
1518                  }               
1519              });
1520  
1521              /**
1522              * @attribute animateEasing
1523              * @description The Easing to apply to the animation.
1524              * @type Object
1525              */
1526              this.setAttributeConfig('animateEasing', {
1527                  value: attr.animateEasing || function() {
1528                      var easing = false;
1529                      if (YAHOO.util.Easing && YAHOO.util.Easing.easeOut) {
1530                          easing = YAHOO.util.Easing.easeOut;
1531                      }
1532                      return easing;
1533                  }()
1534              });
1535  
1536              /**
1537              * @attribute animateDuration
1538              * @description The Duration to apply to the animation.
1539              * @type Number
1540              */
1541              this.setAttributeConfig('animateDuration', {
1542                  value: attr.animateDuration || 0.5
1543              });
1544  
1545              /**
1546              * @attribute proxy
1547              * @description Resize a proxy element instead of the real element.
1548              * @type Boolean
1549              */
1550              this.setAttributeConfig('proxy', {
1551                  value: attr.proxy || false,
1552                  validator: YAHOO.lang.isBoolean
1553              });
1554  
1555              /**
1556              * @attribute ratio
1557              * @description Maintain the element's ratio when resizing.
1558              * @type Boolean
1559              */
1560              this.setAttributeConfig('ratio', {
1561                  value: attr.ratio || false,
1562                  validator: YAHOO.lang.isBoolean
1563              });
1564  
1565              /**
1566              * @attribute ghost
1567              * @description Apply an opacity filter to the element being resized (only works with proxy).
1568              * @type Boolean
1569              */
1570              this.setAttributeConfig('ghost', {
1571                  value: attr.ghost || false,
1572                  validator: YAHOO.lang.isBoolean
1573              });
1574  
1575              /**
1576              * @attribute draggable
1577              * @description A convienence method to make the element draggable
1578              * @type Boolean
1579              */
1580              this.setAttributeConfig('draggable', {
1581                  value: attr.draggable || false,
1582                  validator: YAHOO.lang.isBoolean,
1583                  method: function(dd) {
1584                      if (dd && this._wrap && !this.dd) {
1585                          this._setupDragDrop();
1586                      } else {
1587                          if (this.dd) {
1588                              if (dd) {
1589                                  //activating an old DD instance..
1590                                  D.addClass(this._wrap, this.CSS_DRAG);
1591                                  this.dd.DDM.regDragDrop(this.dd, "default");
1592                              } else {
1593                                  D.removeClass(this._wrap, this.CSS_DRAG);
1594                                  this.dd.unreg();
1595                              }
1596                          }
1597                      }
1598                  }
1599              });
1600  
1601              /**
1602              * @attribute hover
1603              * @description Only show the handles when they are being moused over.
1604              * @type Boolean
1605              */
1606              this.setAttributeConfig('hover', {
1607                  value: attr.hover || false,
1608                  validator: YAHOO.lang.isBoolean
1609              });
1610  
1611              /**
1612              * @attribute hiddenHandles
1613              * @description Don't show the handles, just use the cursor to the user.
1614              * @type Boolean
1615              */
1616              this.setAttributeConfig('hiddenHandles', {
1617                  value: attr.hiddenHandles || false,
1618                  validator: YAHOO.lang.isBoolean
1619              });
1620  
1621              /**
1622              * @attribute knobHandles
1623              * @description Use the smaller handles, instead if the full size handles.
1624              * @type Boolean
1625              */
1626              this.setAttributeConfig('knobHandles', {
1627                  value: attr.knobHandles || false,
1628                  validator: YAHOO.lang.isBoolean
1629              });
1630  
1631              /**
1632              * @attribute xTicks
1633              * @description The number of x ticks to span the resize to.
1634              * @type Number or False
1635              */
1636              this.setAttributeConfig('xTicks', {
1637                  value: attr.xTicks || false
1638              });
1639  
1640              /**
1641              * @attribute yTicks
1642              * @description The number of y ticks to span the resize to.
1643              * @type Number or False
1644              */
1645              this.setAttributeConfig('yTicks', {
1646                  value: attr.yTicks || false
1647              });
1648  
1649              /**
1650              * @attribute status
1651              * @description Show the status (new size) of the resize.
1652              * @type Boolean
1653              */
1654              this.setAttributeConfig('status', {
1655                  value: attr.status || false,
1656                  validator: YAHOO.lang.isBoolean
1657              });
1658  
1659              /**
1660              * @attribute autoRatio
1661              * @description Using the shift key during a resize will toggle the ratio config.
1662              * @type Boolean
1663              */
1664              this.setAttributeConfig('autoRatio', {
1665                  value: attr.autoRatio || false,
1666                  validator: YAHOO.lang.isBoolean
1667              });
1668  
1669          },
1670          /**
1671          * @method destroy
1672          * @description Destroys the resize object and all of it's elements & listeners.
1673          */        
1674          destroy: function() {
1675              YAHOO.log('Destroying Resize', 'info', 'Resize');
1676              for (var h in this._handles) {
1677                  if (Lang.hasOwnProperty(this._handles, h)) {
1678                      Event.purgeElement(this._handles[h]);
1679                      this._handles[h].parentNode.removeChild(this._handles[h]);
1680                  }
1681              }
1682              if (this._proxy) {
1683                  this._proxy.parentNode.removeChild(this._proxy);
1684              }
1685              if (this._status) {
1686                  this._status.parentNode.removeChild(this._status);
1687              }
1688              if (this.dd) {
1689                  this.dd.unreg();
1690                  D.removeClass(this._wrap, this.CSS_DRAG);
1691              }
1692              if (this._wrap != this.get('element')) {
1693                  this.setStyle('position', (this._positioned ? 'absolute' : 'relative'));
1694                  this.setStyle('top', D.getStyle(this._wrap, 'top'));
1695                  this.setStyle('left',D.getStyle(this._wrap, 'left'));
1696                  this._wrap.parentNode.replaceChild(this.get('element'), this._wrap);
1697              }
1698              this.removeClass(this.CSS_RESIZE);
1699  
1700              delete YAHOO.util.Resize._instances[this.get('id')];
1701              //Brutal Object Destroy
1702              for (var i in this) {
1703                  if (Lang.hasOwnProperty(this, i)) {
1704                      this[i] = null;
1705                      delete this[i];
1706                  }
1707              }
1708          },
1709          /**
1710          * @method toString
1711          * @description Returns a string representing the Resize Object.
1712          * @return {String}
1713          */        
1714          toString: function() {
1715              if (this.get) {
1716                  return 'Resize (#' + this.get('id') + ')';
1717              }
1718              return 'Resize Utility';
1719          }
1720      });
1721  
1722      YAHOO.util.Resize = Resize;
1723   
1724  /**
1725  * @event dragEvent
1726  * @description Fires when the <a href="YAHOO.util.DragDrop.html">YAHOO.util.DragDrop</a> dragEvent is fired for the config option draggable.
1727  * @type YAHOO.util.CustomEvent
1728  */
1729  /**
1730  * @event startResize
1731  * @description Fires when a resize action is started.
1732  * @type YAHOO.util.CustomEvent
1733  */
1734  /**
1735  * @event endResize
1736  * @description Fires when the mouseUp event from the Drag Instance fires.
1737  * @type YAHOO.util.CustomEvent
1738  */
1739  /**
1740  * @event resize
1741  * @description Fires on every element resize (only fires once when used with proxy config setting).
1742  * @type YAHOO.util.CustomEvent
1743  */
1744  /**
1745  * @event beforeResize
1746  * @description Fires before every element resize after the size calculations, returning false will stop the resize.
1747  * @type YAHOO.util.CustomEvent
1748  */
1749  /**
1750  * @event proxyResize
1751  * @description Fires on every proxy resize (only fires when used with proxy config setting).
1752  * @type YAHOO.util.CustomEvent
1753  */
1754  
1755  })();
1756  
1757  YAHOO.register("resize", YAHOO.util.Resize, {version: "2.9.0", build: "2800"});
1758  
1759  }, '2.9.0' ,{"requires": ["yui2-yahoo", "yui2-dom", "yui2-event", "yui2-dragdrop", "yui2-element", "yui2-skin-sam-resize"], "optional": ["yui2-animation"]});