PageRenderTime 85ms CodeModel.GetById 16ms app.highlight 59ms RepoModel.GetById 1ms app.codeStats 0ms

/hippo/src/main/webapp/yui/resize/resize-debug.js

http://hdbc.googlecode.com/
JavaScript | 1702 lines | 1043 code | 75 blank | 584 comment | 235 complexity | 82b1f4bc7164eec3dd4fffd26bb1f749 MD5 | raw file

Large files files are truncated, but you can click here to view the full file

   1/*
   2Copyright (c) 2009, Yahoo! Inc. All rights reserved.
   3Code licensed under the BSD License:
   4http://developer.yahoo.net/yui/license.txt
   5version: 2.7.0
   6*/
   7/**
   8 * @description <p>Makes an element resizable</p>
   9 * @namespace YAHOO.util
  10 * @requires yahoo, dom, dragdrop, element, event
  11 * @optional animation
  12 * @module resize
  13 */
  14(function() {
  15var D = YAHOO.util.Dom,
  16    Event = YAHOO.util.Event,
  17    Lang = YAHOO.lang;
  18
  19    /**
  20     * @constructor
  21     * @class Resize
  22     * @extends YAHOO.util.Element
  23     * @description <p>Makes an element resizable</p>
  24     * @param {String/HTMLElement} el The element to make resizable.
  25     * @param {Object} attrs Object liternal containing configuration parameters.
  26    */
  27
  28    var Resize = function(el, config) {
  29        YAHOO.log('Creating Resize Object', 'info', 'Resize');
  30        var oConfig = {
  31            element: el,
  32            attributes: config || {}
  33        };
  34
  35        Resize.superclass.constructor.call(this, oConfig.element, oConfig.attributes);    
  36    };
  37
  38    /**
  39    * @private
  40    * @static
  41    * @property _instances
  42    * @description Internal hash table for all resize instances
  43    * @type Object
  44    */ 
  45    Resize._instances = {};
  46    /**
  47    * @static
  48    * @method getResizeById 
  49    * @description Get's a resize object by the HTML id of the element associated with the Resize object.
  50    * @return {Object} The Resize Object
  51    */ 
  52    Resize.getResizeById = function(id) {
  53        if (Resize._instances[id]) {
  54            return Resize._instances[id];
  55        }
  56        YAHOO.log('No Instance Found', 'error', 'Resize');
  57        return false;
  58    };
  59
  60    YAHOO.extend(Resize, YAHOO.util.Element, {
  61        /**
  62        * @private
  63        * @property CSS_RESIZE
  64        * @description Base CSS class name
  65        * @type String
  66        */ 
  67        CSS_RESIZE: 'yui-resize',
  68        /**
  69        * @private
  70        * @property CSS_DRAG
  71        * @description Class name added when dragging is enabled
  72        * @type String
  73        */ 
  74        CSS_DRAG: 'yui-draggable',
  75        /**
  76        * @private
  77        * @property CSS_HOVER
  78        * @description Class name used for hover only handles
  79        * @type String
  80        */ 
  81        CSS_HOVER: 'yui-resize-hover',
  82        /**
  83        * @private
  84        * @property CSS_PROXY
  85        * @description Class name given to the proxy element
  86        * @type String
  87        */ 
  88        CSS_PROXY: 'yui-resize-proxy',
  89        /**
  90        * @private
  91        * @property CSS_WRAP
  92        * @description Class name given to the wrap element
  93        * @type String
  94        */ 
  95        CSS_WRAP: 'yui-resize-wrap',
  96        /**
  97        * @private
  98        * @property CSS_KNOB
  99        * @description Class name used to make the knob style handles
 100        * @type String
 101        */ 
 102        CSS_KNOB: 'yui-resize-knob',
 103        /**
 104        * @private
 105        * @property CSS_HIDDEN
 106        * @description Class name given to the wrap element to make all handles hidden
 107        * @type String
 108        */ 
 109        CSS_HIDDEN: 'yui-resize-hidden',
 110        /**
 111        * @private
 112        * @property CSS_HANDLE
 113        * @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
 114        * @type String
 115        */ 
 116        CSS_HANDLE: 'yui-resize-handle',
 117        /**
 118        * @private
 119        * @property CSS_STATUS
 120        * @description Class name given to the status element
 121        * @type String
 122        */ 
 123        CSS_STATUS: 'yui-resize-status',
 124        /**
 125        * @private
 126        * @property CSS_GHOST
 127        * @description Class name given to the wrap element when the ghost property is active
 128        * @type String
 129        */ 
 130        CSS_GHOST: 'yui-resize-ghost',
 131        /**
 132        * @private
 133        * @property CSS_RESIZING
 134        * @description Class name given to the wrap element when a resize action is taking place.
 135        * @type String
 136        */ 
 137        CSS_RESIZING: 'yui-resize-resizing',
 138        /**
 139        * @private
 140        * @property _resizeEvent
 141        * @description The mouse event used to resize with
 142        * @type Event
 143        */ 
 144        _resizeEvent: null,
 145        /**
 146        * @private
 147        * @property dd
 148        * @description The <a href="YAHOO.util.DragDrop.html">YAHOO.util.DragDrop</a> instance used if draggable is true
 149        * @type Object
 150        */ 
 151        dd: null,
 152        /** 
 153        * @private
 154        * @property browser
 155        * @description A copy of the YAHOO.env.ua property
 156        * @type Object
 157        */
 158        browser: YAHOO.env.ua,
 159        /** 
 160        * @private
 161        * @property _locked
 162        * @description A flag to show if the resize is locked
 163        * @type Boolean
 164        */
 165        _locked: null,
 166        /** 
 167        * @private
 168        * @property _positioned
 169        * @description A flag to show if the element is absolutely positioned
 170        * @type Boolean
 171        */
 172        _positioned: null,
 173        /** 
 174        * @private
 175        * @property _dds
 176        * @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
 177        * @type Object
 178        */
 179        _dds: null,
 180        /** 
 181        * @private
 182        * @property _wrap
 183        * @description The HTML reference of the element wrapper
 184        * @type HTMLElement
 185        */
 186        _wrap: null,
 187        /** 
 188        * @private
 189        * @property _proxy
 190        * @description The HTML reference of the element proxy
 191        * @type HTMLElement
 192        */
 193        _proxy: null,
 194        /** 
 195        * @private
 196        * @property _handles
 197        * @description An object containing references to all of the resize handles.
 198        * @type Object
 199        */
 200        _handles: null,
 201        /** 
 202        * @private
 203        * @property _currentHandle
 204        * @description The string identifier of the currently active handle. e.g. 'r', 'br', 'tl'
 205        * @type String
 206        */
 207        _currentHandle: null,
 208        /** 
 209        * @private
 210        * @property _currentDD
 211        * @description A link to the currently active DD object
 212        * @type Object
 213        */
 214        _currentDD: null,
 215        /** 
 216        * @private
 217        * @property _cache
 218        * @description An lookup table containing key information for the element being resized. e.g. height, width, x position, y position, etc..
 219        * @type Object
 220        */
 221        _cache: null,
 222        /** 
 223        * @private
 224        * @property _active
 225        * @description Flag to show if the resize is active. Used for events.
 226        * @type Boolean
 227        */
 228        _active: null,
 229        /** 
 230        * @private
 231        * @method _createProxy
 232        * @description Creates the proxy element if the proxy config is true
 233        */
 234        _createProxy: function() {
 235            if (this.get('proxy')) {
 236                YAHOO.log('Creating the Proxy Element', 'info', 'Resize');
 237                this._proxy = document.createElement('div');
 238                this._proxy.className = this.CSS_PROXY;
 239                this._proxy.style.height = this.get('element').clientHeight + 'px';
 240                this._proxy.style.width = this.get('element').clientWidth + 'px';
 241                this._wrap.parentNode.appendChild(this._proxy);
 242            } else {
 243                YAHOO.log('No proxy element, turn off animate config option', 'info', 'Resize');
 244                this.set('animate', false);
 245            }
 246        },
 247        /** 
 248        * @private
 249        * @method _createWrap
 250        * @description Creates the wrap element if the wrap config is true. It will auto wrap the following element types: img, textarea, input, iframe, select
 251        */
 252        _createWrap: function() {
 253            YAHOO.log('Create the wrap element', 'info', 'Resize');
 254            this._positioned = false;
 255            //Force wrap for elements that can't have children 
 256            if (this.get('wrap') === false) {
 257                switch (this.get('element').tagName.toLowerCase()) {
 258                    case 'img':
 259                    case 'textarea':
 260                    case 'input':
 261                    case 'iframe':
 262                    case 'select':
 263                        YAHOO.log('Auto-wrapping the element (' + this.get('element').tagName.toLowerCase() + ')', 'warn', 'Resize');
 264                        this.set('wrap', true);
 265                        break;
 266                }
 267            }
 268            if (this.get('wrap') === true) {
 269                YAHOO.log('Creating the wrap element', 'info', 'Resize');
 270                this._wrap = document.createElement('div');
 271                this._wrap.id = this.get('element').id + '_wrap';
 272                this._wrap.className = this.CSS_WRAP;
 273                if (this.get('element').tagName.toLowerCase() == 'textarea') {
 274                    D.addClass(this._wrap, 'yui-resize-textarea');
 275                }
 276                D.setStyle(this._wrap, 'width', this.get('width') + 'px');
 277                D.setStyle(this._wrap, 'height', this.get('height') + 'px');
 278                D.setStyle(this._wrap, 'z-index', this.getStyle('z-index'));
 279                this.setStyle('z-index', 0);
 280                var pos = D.getStyle(this.get('element'), 'position');
 281                D.setStyle(this._wrap, 'position', ((pos == 'static') ? 'relative' : pos));
 282                D.setStyle(this._wrap, 'top', D.getStyle(this.get('element'), 'top'));
 283                D.setStyle(this._wrap, 'left', D.getStyle(this.get('element'), 'left'));
 284                if (D.getStyle(this.get('element'), 'position') == 'absolute') {
 285                    this._positioned = true;
 286                    YAHOO.log('The element is positioned absolute', 'info', 'Resize');
 287                    D.setStyle(this.get('element'), 'position', 'relative');
 288                    D.setStyle(this.get('element'), 'top', '0');
 289                    D.setStyle(this.get('element'), 'left', '0');
 290                }
 291                var par = this.get('element').parentNode;
 292                par.replaceChild(this._wrap, this.get('element'));
 293                this._wrap.appendChild(this.get('element'));
 294            } else {
 295                this._wrap = this.get('element');
 296                if (D.getStyle(this._wrap, 'position') == 'absolute') {
 297                    this._positioned = true;
 298                }
 299            }
 300            if (this.get('draggable')) {
 301                this._setupDragDrop();
 302            }
 303            if (this.get('hover')) {
 304                D.addClass(this._wrap, this.CSS_HOVER);
 305            }
 306            if (this.get('knobHandles')) {
 307                D.addClass(this._wrap, this.CSS_KNOB);
 308            }
 309            if (this.get('hiddenHandles')) {
 310                D.addClass(this._wrap, this.CSS_HIDDEN);
 311            }
 312            D.addClass(this._wrap, this.CSS_RESIZE);
 313        },
 314        /** 
 315        * @private
 316        * @method _setupDragDrop
 317        * @description Setup the <a href="YAHOO.util.DragDrop.html">YAHOO.util.DragDrop</a> instance on the element
 318        */
 319        _setupDragDrop: function() {
 320            YAHOO.log('Setting up the dragdrop instance on the element', 'info', 'Resize');
 321            D.addClass(this._wrap, this.CSS_DRAG);
 322            this.dd = new YAHOO.util.DD(this._wrap, this.get('id') + '-resize', { dragOnly: true, useShim: this.get('useShim') });
 323            this.dd.on('dragEvent', function() {
 324                this.fireEvent('dragEvent', arguments);
 325            }, this, true);
 326        },
 327        /** 
 328        * @private
 329        * @method _createHandles
 330        * @description Creates the handles as specified in the config
 331        */
 332        _createHandles: function() {
 333            YAHOO.log('Creating the handles', 'info', 'Resize');
 334            this._handles = {};
 335            this._dds = {};
 336            var h = this.get('handles');
 337            for (var i = 0; i < h.length; i++) {
 338                YAHOO.log('Creating handle position: ' + h[i], 'info', 'Resize');
 339                this._handles[h[i]] = document.createElement('div');
 340                this._handles[h[i]].id = D.generateId(this._handles[h[i]]);
 341                this._handles[h[i]].className = this.CSS_HANDLE + ' ' + this.CSS_HANDLE + '-' + h[i];
 342                var k = document.createElement('div');
 343                k.className = this.CSS_HANDLE + '-inner-' + h[i];
 344                this._handles[h[i]].appendChild(k);
 345                this._wrap.appendChild(this._handles[h[i]]);
 346                Event.on(this._handles[h[i]], 'mouseover', this._handleMouseOver, this, true);
 347                Event.on(this._handles[h[i]], 'mouseout', this._handleMouseOut, this, true);
 348                this._dds[h[i]] = new YAHOO.util.DragDrop(this._handles[h[i]], this.get('id') + '-handle-' + h, { useShim: this.get('useShim') });
 349                this._dds[h[i]].setPadding(15, 15, 15, 15);
 350                this._dds[h[i]].on('startDragEvent', this._handleStartDrag, this._dds[h[i]], this);
 351                this._dds[h[i]].on('mouseDownEvent', this._handleMouseDown, this._dds[h[i]], this);
 352            }
 353            YAHOO.log('Creating the Status box', 'info', 'Resize');
 354            this._status = document.createElement('span');
 355            this._status.className = this.CSS_STATUS;
 356            document.body.insertBefore(this._status, document.body.firstChild);
 357        },
 358        /** 
 359        * @private
 360        * @method _ieSelectFix
 361        * @description The function we use as the onselectstart handler when we start a drag in Internet Explorer
 362        */
 363        _ieSelectFix: function() {
 364            return false;
 365        },
 366        /** 
 367        * @private
 368        * @property _ieSelectBack
 369        * @description We will hold a copy of the current "onselectstart" method on this property, and reset it after we are done using it.
 370        */
 371        _ieSelectBack: null,
 372        /** 
 373        * @private
 374        * @method _setAutoRatio
 375        * @param {Event} ev A mouse event.
 376        * @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.
 377        */
 378        _setAutoRatio: function(ev) {
 379            if (this.get('autoRatio')) {
 380                YAHOO.log('Setting up AutoRatio', 'info', 'Resize');
 381                if (ev && ev.shiftKey) {
 382                    //Shift Pressed
 383                    YAHOO.log('Shift key presses, turning on ratio', 'info', 'Resize');
 384                    this.set('ratio', true);
 385                } else {
 386                    YAHOO.log('Resetting ratio back to default', 'info', 'Resize');
 387                    this.set('ratio', this._configs.ratio._initialConfig.value);
 388                }
 389            }
 390        },
 391        /** 
 392        * @private
 393        * @method _handleMouseDown
 394        * @param {Event} ev A mouse event.
 395        * @description This method preps the autoRatio on MouseDown.
 396        */
 397        _handleMouseDown: function(ev) {
 398            if (this._locked) {
 399                YAHOO.log('Resize Locked', 'info', 'Resize');
 400                return false;
 401            }
 402            if (D.getStyle(this._wrap, 'position') == 'absolute') {
 403                this._positioned = true;
 404            }
 405            if (ev) {
 406                this._setAutoRatio(ev);
 407            }
 408            if (this.browser.ie) {
 409                this._ieSelectBack = document.body.onselectstart;
 410                document.body.onselectstart = this._ieSelectFix;
 411            }
 412        },
 413        /** 
 414        * @private
 415        * @method _handleMouseOver
 416        * @param {Event} ev A mouse event.
 417        * @description Adds CSS class names to the handles
 418        */
 419        _handleMouseOver: function(ev) {
 420            if (this._locked) {
 421                YAHOO.log('Resize Locked', 'info', 'Resize');
 422                return false;
 423            }
 424            D.removeClass(this._wrap, this.CSS_RESIZE);
 425
 426            if (this.get('hover')) {
 427                D.removeClass(this._wrap, this.CSS_HOVER);
 428            }
 429            var tar = Event.getTarget(ev);
 430            if (!D.hasClass(tar, this.CSS_HANDLE)) {
 431                tar = tar.parentNode;
 432            }
 433            if (D.hasClass(tar, this.CSS_HANDLE) && !this._active) {
 434                D.addClass(tar, this.CSS_HANDLE + '-active');
 435                for (var i in this._handles) {
 436                    if (Lang.hasOwnProperty(this._handles, i)) {
 437                        if (this._handles[i] == tar) {
 438                            D.addClass(tar, this.CSS_HANDLE + '-' + i + '-active');
 439                            break;
 440                        }
 441                    }
 442                }
 443            }
 444
 445            D.addClass(this._wrap, this.CSS_RESIZE);
 446        },
 447        /** 
 448        * @private
 449        * @method _handleMouseOut
 450        * @param {Event} ev A mouse event.
 451        * @description Removes CSS class names to the handles
 452        */
 453        _handleMouseOut: function(ev) {
 454            D.removeClass(this._wrap, this.CSS_RESIZE);
 455            if (this.get('hover') && !this._active) {
 456                D.addClass(this._wrap, this.CSS_HOVER);
 457            }
 458            var tar = Event.getTarget(ev);
 459            if (!D.hasClass(tar, this.CSS_HANDLE)) {
 460                tar = tar.parentNode;
 461            }
 462            if (D.hasClass(tar, this.CSS_HANDLE) && !this._active) {
 463                D.removeClass(tar, this.CSS_HANDLE + '-active');
 464                for (var i in this._handles) {
 465                    if (Lang.hasOwnProperty(this._handles, i)) {
 466                        if (this._handles[i] == tar) {
 467                            D.removeClass(tar, this.CSS_HANDLE + '-' + i + '-active');
 468                            break;
 469                        }
 470                    }
 471                }
 472            }
 473            D.addClass(this._wrap, this.CSS_RESIZE);
 474        },
 475        /** 
 476        * @private
 477        * @method _handleStartDrag
 478        * @param {Object} args The args passed from the CustomEvent.
 479        * @param {Object} dd The <a href="YAHOO.util.DragDrop.html">YAHOO.util.DragDrop</a> object we are working with.
 480        * @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
 481        */
 482        _handleStartDrag: function(args, dd) {
 483            YAHOO.log('startDrag', 'info', 'Resize');
 484            var tar = dd.getDragEl();
 485            if (D.hasClass(tar, this.CSS_HANDLE)) {
 486                if (D.getStyle(this._wrap, 'position') == 'absolute') {
 487                    this._positioned = true;
 488                }
 489                this._active = true;
 490                this._currentDD = dd;
 491                if (this._proxy) {
 492                    YAHOO.log('Activate proxy element', 'info', 'Resize');
 493                    this._proxy.style.visibility = 'visible';
 494                    this._proxy.style.zIndex = '1000';
 495                    this._proxy.style.height = this.get('element').clientHeight + 'px';
 496                    this._proxy.style.width = this.get('element').clientWidth + 'px';
 497                }
 498
 499                for (var i in this._handles) {
 500                    if (Lang.hasOwnProperty(this._handles, i)) {
 501                        if (this._handles[i] == tar) {
 502                            this._currentHandle = i;
 503                            var handle = '_handle_for_' + i;
 504                            D.addClass(tar, this.CSS_HANDLE + '-' + i + '-active');
 505                            dd.on('dragEvent', this[handle], this, true);
 506                            dd.on('mouseUpEvent', this._handleMouseUp, this, true);
 507                            YAHOO.log('Adding DragEvents to: ' + i, 'info', 'Resize');
 508                            break;
 509                        }
 510                    }
 511                }
 512
 513
 514                D.addClass(tar, this.CSS_HANDLE + '-active');
 515
 516                if (this.get('proxy')) {
 517                    YAHOO.log('Posiiton Proxy Element', 'info', 'Resize');
 518                    var xy = D.getXY(this.get('element'));
 519                    D.setXY(this._proxy, xy);
 520                    if (this.get('ghost')) {
 521                        YAHOO.log('Add Ghost Class', 'info', 'Resize');
 522                        this.addClass(this.CSS_GHOST);
 523                    }
 524                }
 525                D.addClass(this._wrap, this.CSS_RESIZING);
 526                this._setCache();
 527                this._updateStatus(this._cache.height, this._cache.width, this._cache.top, this._cache.left);
 528                YAHOO.log('Firing startResize Event', 'info', 'Resize');
 529                this.fireEvent('startResize', { type: 'startresize', target: this});
 530            }
 531        },
 532        /** 
 533        * @private
 534        * @method _setCache
 535        * @description Sets up the this._cache hash table.
 536        */
 537        _setCache: function() {
 538            YAHOO.log('Setting up property cache', 'info', 'Resize');
 539            this._cache.xy = D.getXY(this._wrap);
 540            D.setXY(this._wrap, this._cache.xy);
 541            this._cache.height = this.get('clientHeight');
 542            this._cache.width = this.get('clientWidth');
 543            this._cache.start.height = this._cache.height;
 544            this._cache.start.width = this._cache.width;
 545            this._cache.start.top = this._cache.xy[1];
 546            this._cache.start.left = this._cache.xy[0];
 547            this._cache.top = this._cache.xy[1];
 548            this._cache.left = this._cache.xy[0];
 549            this.set('height', this._cache.height, true);
 550            this.set('width', this._cache.width, true);
 551        },
 552        /** 
 553        * @private
 554        * @method _handleMouseUp
 555        * @param {Event} ev A mouse event.
 556        * @description Cleans up listeners, hides proxy element and removes class names.
 557        */
 558        _handleMouseUp: function(ev) {
 559            this._active = false;
 560
 561            var handle = '_handle_for_' + this._currentHandle;
 562            this._currentDD.unsubscribe('dragEvent', this[handle], this, true);
 563            this._currentDD.unsubscribe('mouseUpEvent', this._handleMouseUp, this, true);
 564
 565            if (this._proxy) {
 566                YAHOO.log('Hide Proxy Element', 'info', 'Resize');
 567                this._proxy.style.visibility = 'hidden';
 568                this._proxy.style.zIndex = '-1';
 569                if (this.get('setSize')) {
 570                    YAHOO.log('Setting Size', 'info', 'Resize');
 571                    this.resize(ev, this._cache.height, this._cache.width, this._cache.top, this._cache.left, true);
 572                } else {
 573                    YAHOO.log('Firing Resize Event', 'info', 'Resize');
 574                    this.fireEvent('resize', { ev: 'resize', target: this, height: this._cache.height, width: this._cache.width, top: this._cache.top, left: this._cache.left });
 575                }
 576
 577                if (this.get('ghost')) {
 578                    YAHOO.log('Removing Ghost Class', 'info', 'Resize');
 579                    this.removeClass(this.CSS_GHOST);
 580                }
 581            }
 582
 583            if (this.get('hover')) {
 584                D.addClass(this._wrap, this.CSS_HOVER);
 585            }
 586            if (this._status) {
 587                D.setStyle(this._status, 'display', 'none');
 588            }
 589            if (this.browser.ie) {
 590                YAHOO.log('Resetting IE onselectstart function', 'info', 'Resize');
 591                document.body.onselectstart = this._ieSelectBack;
 592            }
 593
 594            if (this.browser.ie) {
 595                D.removeClass(this._wrap, this.CSS_RESIZE);
 596            }
 597
 598            for (var i in this._handles) {
 599                if (Lang.hasOwnProperty(this._handles, i)) {
 600                    D.removeClass(this._handles[i], this.CSS_HANDLE + '-active');
 601                }
 602            }
 603            if (this.get('hover') && !this._active) {
 604                D.addClass(this._wrap, this.CSS_HOVER);
 605            }
 606            D.removeClass(this._wrap, this.CSS_RESIZING);
 607
 608            D.removeClass(this._handles[this._currentHandle], this.CSS_HANDLE + '-' + this._currentHandle + '-active');
 609            D.removeClass(this._handles[this._currentHandle], this.CSS_HANDLE + '-active');
 610
 611            if (this.browser.ie) {
 612                D.addClass(this._wrap, this.CSS_RESIZE);
 613            }
 614
 615            this._resizeEvent = null;
 616            this._currentHandle = null;
 617            
 618            if (!this.get('animate')) {
 619                this.set('height', this._cache.height, true);
 620                this.set('width', this._cache.width, true);
 621            }
 622
 623            YAHOO.log('Firing endResize Event', 'info', 'Resize');
 624            this.fireEvent('endResize', { ev: 'endResize', target: this, height: this._cache.height, width: this._cache.width, top: this._cache.top, left: this._cache.left });
 625        },
 626        /** 
 627        * @private
 628        * @method _setRatio
 629        * @param {Number} h The height offset.
 630        * @param {Number} w The with offset.
 631        * @param {Number} t The top offset.
 632        * @param {Number} l The left offset.
 633        * @description Using the Height, Width, Top & Left, it recalcuates them based on the original element size.
 634        * @return {Array} The new Height, Width, Top & Left settings
 635        */
 636        _setRatio: function(h, w, t, l) {
 637            YAHOO.log('Setting Ratio', 'info', 'Resize');
 638            var oh = h, ow = w;
 639            if (this.get('ratio')) {
 640                var orgH = this._cache.height,
 641                    orgW = this._cache.width,
 642                    nh = parseInt(this.get('height'), 10),
 643                    nw = parseInt(this.get('width'), 10),
 644                    maxH = this.get('maxHeight'),
 645                    minH = this.get('minHeight'),
 646                    maxW = this.get('maxWidth'),
 647                    minW = this.get('minWidth');
 648
 649                switch (this._currentHandle) {
 650                    case 'l':
 651                        h = nh * (w / nw);
 652                        h = Math.min(Math.max(minH, h), maxH);                        
 653                        w = nw * (h / nh);
 654                        t = (this._cache.start.top - (-((nh - h) / 2)));
 655                        l = (this._cache.start.left - (-((nw - w))));
 656                        break;
 657                    case 'r':
 658                        h = nh * (w / nw);
 659                        h = Math.min(Math.max(minH, h), maxH);                        
 660                        w = nw * (h / nh);
 661                        t = (this._cache.start.top - (-((nh - h) / 2)));
 662                        break;
 663                    case 't':
 664                        w = nw * (h / nh);
 665                        h = nh * (w / nw);
 666                        l = (this._cache.start.left - (-((nw - w) / 2)));
 667                        t = (this._cache.start.top - (-((nh - h))));
 668                        break;
 669                    case 'b':
 670                        w = nw * (h / nh);
 671                        h = nh * (w / nw);
 672                        l = (this._cache.start.left - (-((nw - w) / 2)));
 673                        break;
 674                    case 'bl':
 675                        h = nh * (w / nw);
 676                        w = nw * (h / nh);
 677                        l = (this._cache.start.left - (-((nw - w))));
 678                        break;
 679                    case 'br':
 680                        h = nh * (w / nw);
 681                        w = nw * (h / nh);
 682                        break;
 683                    case 'tl':
 684                        h = nh * (w / nw);
 685                        w = nw * (h / nh);
 686                        l = (this._cache.start.left - (-((nw - w))));
 687                        t = (this._cache.start.top - (-((nh - h))));
 688                        break;
 689                    case 'tr':
 690                        h = nh * (w / nw);
 691                        w = nw * (h / nh);
 692                        l = (this._cache.start.left);
 693                        t = (this._cache.start.top - (-((nh - h))));
 694                        break;
 695                }
 696                oh = this._checkHeight(h);
 697                ow = this._checkWidth(w);
 698                if ((oh != h) || (ow != w)) {
 699                    t = 0;
 700                    l = 0;
 701                    if (oh != h) {
 702                        ow = this._cache.width;
 703                    }
 704                    if (ow != w) {
 705                        oh = this._cache.height;
 706                    }
 707                }
 708            }
 709            return [oh, ow, t, l];
 710        },
 711        /** 
 712        * @private
 713        * @method _updateStatus
 714        * @param {Number} h The new height setting.
 715        * @param {Number} w The new width setting.
 716        * @param {Number} t The new top setting.
 717        * @param {Number} l The new left setting.
 718        * @description Using the Height, Width, Top & Left, it updates the status element with the elements sizes.
 719        */
 720        _updateStatus: function(h, w, t, l) {
 721            if (this._resizeEvent && (!Lang.isString(this._resizeEvent))) {
 722                YAHOO.log('Updating Status Box', 'info', 'Resize');
 723                h = ((h === 0) ? this._cache.start.height : h);
 724                w = ((w === 0) ? this._cache.start.width : w);
 725                var h1 = parseInt(this.get('height'), 10),
 726                    w1 = parseInt(this.get('width'), 10);
 727                
 728                if (isNaN(h1)) {
 729                    h1 = parseInt(h, 10);
 730                }
 731                if (isNaN(w1)) {
 732                    w1 = parseInt(w, 10);
 733                }
 734                var diffH = (parseInt(h, 10) - h1);
 735                var diffW = (parseInt(w, 10) - w1);
 736                this._cache.offsetHeight = diffH;
 737                this._cache.offsetWidth = diffW;
 738                if (this.get('status')) {
 739                    YAHOO.log('Showing Status Box', 'info', 'Resize');
 740                    D.setStyle(this._status, 'display', 'inline');
 741                    //This will cause IE8 to crash if the status box is hidden..
 742                    this._status.innerHTML = '<strong>' + parseInt(h, 10) + ' x ' + parseInt(w, 10) + '</strong><em>' + ((diffH > 0) ? '+' : '') + diffH + ' x ' + ((diffW > 0) ? '+' : '') + diffW + '</em>';
 743                    D.setXY(this._status, [Event.getPageX(this._resizeEvent) + 12, Event.getPageY(this._resizeEvent) + 12]);
 744                }
 745            }
 746        },
 747        /** 
 748        * @method lock
 749        * @description Lock the resize so it can't be resized
 750        * @param {Boolean} dd If the draggable config is set, lock it too
 751        * @return {<a href="YAHOO.util.Resize.html">YAHOO.util.Resize</a>} The Resize instance
 752        */
 753        lock: function(dd) {
 754            this._locked = true;
 755            if (dd && this.dd) {
 756                D.removeClass(this._wrap, 'yui-draggable');
 757                this.dd.lock();
 758            }
 759            return this;
 760        },
 761        /** 
 762        * @method unlock
 763        * @description Unlock the resize so it can be resized
 764        * @param {Boolean} dd If the draggable config is set, unlock it too
 765        * @return {<a href="YAHOO.util.Resize.html">YAHOO.util.Resize</a>} The Resize instance
 766        */
 767        unlock: function(dd) {
 768            this._locked = false;
 769            if (dd && this.dd) {
 770                D.addClass(this._wrap, 'yui-draggable');
 771                this.dd.unlock();
 772            }
 773            return this;
 774        },
 775        /** 
 776        * @method isLocked
 777        * @description Check the locked status of the resize instance
 778        * @return {Boolean}
 779        */
 780        isLocked: function() {
 781            return this._locked;
 782        },
 783        /** 
 784        * @method reset
 785        * @description Resets the element to is start state.
 786        * @return {<a href="YAHOO.util.Resize.html">YAHOO.util.Resize</a>} The Resize instance
 787        */
 788        reset: function() {
 789            YAHOO.log('Resetting to cached sizes and position', 'info', 'Resize');
 790            this.resize(null, this._cache.start.height, this._cache.start.width, this._cache.start.top, this._cache.start.left, true);
 791            return this;
 792        },
 793        /** 
 794        * @private
 795        * @method resize
 796        * @param {Event} ev The mouse event.
 797        * @param {Number} h The new height setting.
 798        * @param {Number} w The new width setting.
 799        * @param {Number} t The new top setting.
 800        * @param {Number} l The new left setting.
 801        * @param {Boolean} force Resize the element (used for proxy resize).
 802        * @param {Boolean} silent Don't fire the beforeResize Event.
 803        * @description Resizes the element, wrapper or proxy based on the data from the handlers.
 804        * @return {<a href="YAHOO.util.Resize.html">YAHOO.util.Resize</a>} The Resize instance
 805        */
 806        resize: function(ev, h, w, t, l, force, silent) {
 807            if (this._locked) {
 808                YAHOO.log('Resize Locked', 'info', 'Resize');
 809                return false;
 810            }
 811            YAHOO.log('Resize: ' + h + ',' + w + ',' + t + ',' + l, 'info', 'Resize');
 812            this._resizeEvent = ev;
 813            var el = this._wrap, anim = this.get('animate'), set = true;
 814            if (this._proxy && !force) {
 815                el = this._proxy;
 816                anim = false;
 817            }
 818            this._setAutoRatio(ev);
 819            if (this._positioned) {
 820                if (this._proxy) {
 821                    t = this._cache.top - t;
 822                    l = this._cache.left - l;
 823                }
 824            }
 825            
 826            
 827            var ratio = this._setRatio(h, w, t, l);
 828            h = parseInt(ratio[0], 10);
 829            w = parseInt(ratio[1], 10);
 830            t = parseInt(ratio[2], 10);
 831            l = parseInt(ratio[3], 10);
 832            
 833            if (t == 0) {
 834                //No Offset, get from cache
 835                t = D.getY(el);
 836            }
 837            if (l == 0) {
 838                //No Offset, get from cache
 839                l = D.getX(el);
 840            }
 841
 842            
 843
 844            if (this._positioned) {
 845                if (this._proxy && force) {
 846                    if (!anim) {
 847                        el.style.top = this._proxy.style.top;
 848                        el.style.left = this._proxy.style.left;
 849                    } else {
 850                        t = this._proxy.style.top;
 851                        l = this._proxy.style.left;
 852                    }
 853                } else {
 854                    if (!this.get('ratio') && !this._proxy) {
 855                        t = this._cache.top + -(t);
 856                        l = this._cache.left + -(l);
 857                    }
 858                    if (t) {
 859                        if (this.get('minY')) {
 860                            if (t < this.get('minY')) {
 861                                t = this.get('minY');
 862                            }
 863                        }
 864                        if (this.get('maxY')) {
 865                            if (t > this.get('maxY')) {
 866                                t = this.get('maxY');
 867                            }
 868                        }
 869                    }
 870                    if (l) {
 871                        if (this.get('minX')) {
 872                            if (l < this.get('minX')) {
 873                                l = this.get('minX');
 874                            }
 875                        }
 876                        if (this.get('maxX')) {
 877                            if ((l + w) > this.get('maxX')) {
 878                                l = (this.get('maxX') - w);
 879                            }
 880                        }
 881                    }
 882                }
 883            }
 884            if (!silent) {
 885                YAHOO.log('beforeResize', 'info', 'Resize');
 886                var beforeReturn = this.fireEvent('beforeResize', { ev: 'beforeResize', target: this, height: h, width: w, top: t, left: l });
 887                if (beforeReturn === false) {
 888                    YAHOO.log('Resized cancelled because befireResize returned false', 'info', 'Resize');
 889                    return false;
 890                }
 891            }
 892
 893            this._updateStatus(h, w, t, l);
 894
 895
 896            if (this._positioned) {
 897                if (this._proxy && force) {
 898                    //Do nothing
 899                } else {
 900                    if (t) {
 901                        D.setY(el, t);
 902                        this._cache.top = t;
 903                    }
 904                    if (l) {
 905                        D.setX(el, l);
 906                        this._cache.left = l;
 907                    }
 908                }
 909            }
 910            if (h) {
 911                if (!anim) {
 912                    set = true;
 913                    if (this._proxy && force) {
 914                        if (!this.get('setSize')) {
 915                            set = false;
 916                        }
 917                    }
 918                    if (set) {
 919                        el.style.height = h + 'px';
 920                    }
 921                    if ((this._proxy && force) || !this._proxy) {
 922                        if (this._wrap != this.get('element')) {
 923                            this.get('element').style.height = h + 'px';
 924                        }
 925                    }
 926                }
 927                this._cache.height = h;
 928            }
 929            if (w) {
 930                this._cache.width = w;
 931                if (!anim) {
 932                    set = true;
 933                    if (this._proxy && force) {
 934                        if (!this.get('setSize')) {
 935                            set = false;
 936                        }
 937                    }
 938                    if (set) {
 939                        el.style.width = w + 'px';
 940                    }
 941                    if ((this._proxy && force) || !this._proxy) {
 942                        if (this._wrap != this.get('element')) {
 943                            this.get('element').style.width = w + 'px';
 944                        }
 945                    }
 946                }
 947            }
 948            if (anim) {
 949                if (YAHOO.util.Anim) {
 950                    var _anim = new YAHOO.util.Anim(el, {
 951                        height: {
 952                            to: this._cache.height
 953                        },
 954                        width: {
 955                            to: this._cache.width
 956                        }
 957                    }, this.get('animateDuration'), this.get('animateEasing'));
 958                    if (this._positioned) {
 959                        if (t) {
 960                            _anim.attributes.top = {
 961                                to: parseInt(t, 10)
 962                            };
 963                        }
 964                        if (l) {
 965                            _anim.attributes.left = {
 966                                to: parseInt(l, 10)
 967                            };
 968                        }
 969                    }
 970
 971                    if (this._wrap != this.get('element')) {
 972                        _anim.onTween.subscribe(function() {
 973                            this.get('element').style.height = el.style.height;
 974                            this.get('element').style.width = el.style.width;
 975                        }, this, true);
 976                    }
 977
 978                    _anim.onComplete.subscribe(function() {
 979                        YAHOO.log('Animation onComplete fired', 'info', 'Resize');
 980                        this.set('height', h);
 981                        this.set('width', w);
 982                        this.fireEvent('resize', { ev: 'resize', target: this, height: h, width: w, top: t, left: l });
 983                    }, this, true);
 984                    _anim.animate();
 985
 986                }
 987            } else {
 988                if (this._proxy && !force) {
 989                    YAHOO.log('proxyResize', 'info', 'Resize');
 990                    this.fireEvent('proxyResize', { ev: 'proxyresize', target: this, height: h, width: w, top: t, left: l });
 991                } else {
 992                    YAHOO.log('resize', 'info', 'Resize');
 993                    this.fireEvent('resize', { ev: 'resize', target: this, height: h, width: w, top: t, left: l });
 994                }
 995            }
 996            return this;
 997        },
 998        /** 
 999        * @private
1000        * @method _handle_for_br
1001        * @param {Object} args The arguments from the CustomEvent.
1002        * @description Handles the sizes for the Bottom Right handle.
1003        */
1004        _handle_for_br: function(args) {
1005            YAHOO.log('Handle BR', 'info', 'Resize');
1006            var newW = this._setWidth(args.e);
1007            var newH = this._setHeight(args.e);
1008            this.resize(args.e, newH, newW, 0, 0);
1009        },
1010        /** 
1011        * @private
1012        * @method _handle_for_bl
1013        * @param {Object} args The arguments from the CustomEvent.
1014        * @description Handles the sizes for the Bottom Left handle.
1015        */
1016        _handle_for_bl: function(args) {
1017            YAHOO.log('Handle BL', 'info', 'Resize');
1018            var newW = this._setWidth(args.e, true);
1019            var newH = this._setHeight(args.e);
1020            var l = (newW - this._cache.width);
1021            this.resize(args.e, newH, newW, 0, l);
1022        },
1023        /** 
1024        * @private
1025        * @method _handle_for_tl
1026        * @param {Object} args The arguments from the CustomEvent.
1027        * @description Handles the sizes for the Top Left handle.
1028        */
1029        _handle_for_tl: function(args) {
1030            YAHOO.log('Handle TL', 'info', 'Resize');
1031            var newW = this._setWidth(args.e, true);
1032            var newH = this._setHeight(args.e, true);
1033            var t = (newH - this._cache.height);
1034            var l = (newW - this._cache.width);
1035            this.resize(args.e, newH, newW, t, l);
1036        },
1037        /** 
1038        * @private
1039        * @method _handle_for_tr
1040        * @param {Object} args The arguments from the CustomEvent.
1041        * @description Handles the sizes for the Top Right handle.
1042        */
1043        _handle_for_tr: function(args) {
1044            YAHOO.log('Handle TR', 'info', 'Resize');
1045            var newW = this._setWidth(args.e);
1046            var newH = this._setHeight(args.e, true);
1047            var t = (newH - this._cache.height);
1048            this.resize(args.e, newH, newW, t, 0);
1049        },
1050        /** 
1051        * @private
1052        * @method _handle_for_r
1053        * @param {Object} args The arguments from the CustomEvent.
1054        * @description Handles the sizes for the Right handle.
1055        */
1056        _handle_for_r: function(args) {
1057            YAHOO.log('Handle R', 'info', 'Resize');
1058            this._dds.r.setYConstraint(0,0);
1059            var newW = this._setWidth(args.e);
1060            this.resize(args.e, 0, newW, 0, 0);
1061        },
1062        /** 
1063        * @private
1064        * @method _handle_for_l
1065        * @param {Object} args The arguments from the CustomEvent.
1066        * @description Handles the sizes for the Left handle.
1067        */
1068        _handle_for_l: function(args) {
1069            YAHOO.log('Handle L', 'info', 'Resize');
1070            this._dds.l.setYConstraint(0,0);
1071            var newW = this._setWidth(args.e, true);
1072            var l = (newW - this._cache.width);
1073            this.resize(args.e, 0, newW, 0, l);
1074        },
1075        /** 
1076        * @private
1077        * @method _handle_for_b
1078        * @param {Object} args The arguments from the CustomEvent.
1079        * @description Handles the sizes for the Bottom handle.
1080        */
1081        _handle_for_b: function(args) {
1082            YAHOO.log('Handle B', 'info', 'Resize');
1083            this._dds.b.setXConstraint(0,0);
1084            var newH = this._setHeight(args.e);
1085            this.resize(args.e, newH, 0, 0, 0);
1086        },
1087        /** 
1088        * @private
1089        * @method _handle_for_t
1090        * @param {Object} args The arguments from the CustomEvent.
1091        * @description Handles the sizes for the Top handle.
1092        */
1093        _handle_for_t: function(args) {
1094            YAHOO.log('Handle T', 'info', 'Resize');
1095            this._dds.t.setXConstraint(0,0);
1096            var newH = this._setHeight(args.e, true);
1097            var t = (newH - this._cache.height);
1098            this.resize(args.e, newH, 0, t, 0);
1099        },
1100        /** 
1101        * @private
1102        * @method _setWidth
1103        * @param {Event} ev The mouse event.
1104        * @param {Boolean} flip Argument to determine the direction of the movement.
1105        * @description Calculates the width based on the mouse event.
1106        * @return {Number} The new value
1107        */
1108        _setWidth: function(ev, flip) {
1109            YAHOO.log('Set width based on Event', 'info', 'Resize');
1110            var xy = this._cache.xy[0],
1111                w = this._cache.width,
1112                x = Event.getPageX(ev),
1113                nw = (x - xy);
1114
1115                if (flip) {
1116                    nw = (xy - x) + parseInt(this.get('width'), 10);
1117                }
1118                
1119                nw = this._snapTick(nw, this.get('xTicks'));
1120                nw = this._checkWidth(nw);
1121            return nw;
1122        },
1123        /** 
1124        * @private
1125        * @method _checkWidth
1126        * @param {Number} w The width to check.
1127        * @description Checks the value passed against the maxWidth and minWidth.
1128        * @return {Number} the new value
1129        */
1130        _checkWidth: function(w) {
1131            YAHOO.log('Checking the min/max width', 'info', 'Resize');
1132            if (this.get('minWidth')) {
1133                if (w <= this.get('minWidth')) {
1134                    YAHOO.log('Using minWidth', 'info', 'Resize');
1135                    w = this.get('minWidth');
1136                }
1137            }
1138            if (this.get('maxWidth')) {
1139                if (w >= this.get('maxWidth')) {
1140                    YAHOO.log('Using Max Width', 'info', 'Resize');
1141                    w = this.get('maxWidth');
1142                }
1143            }
1144            return w;
1145        },
1146        /** 
1147        * @private
1148        * @method _checkHeight
1149        * @param {Number} h The height to check.
1150        * @description Checks the value passed against the maxHeight and minHeight.
1151        * @return {Number} The new value
1152        */
1153        _checkHeight: function(h) {
1154            YAHOO.log('Checking the min/max height', 'info', 'Resize');
1155            if (this.get('minHeight')) {
1156                if (h <= this.get('minHeight')) {
1157                    YAHOO.log('Using minHeight', 'info', 'Resize');
1158                    h = this.get('minHeight');
1159                }
1160            }
1161            if (this.get('maxHeight')) {
1162                if (h >= this.get('maxHeight')) {
1163                    YAHOO.log('using maxHeight', 'info', 'Resize');
1164                    h = this.get('maxHeight');
1165                }
1166            }
1167            return h;
1168        },
1169        /** 
1170        * @private
1171        * @method _setHeight
1172        * @param {Event} ev The mouse event.
1173        * @param {Boolean} flip Argument to determine the direction of the movement.
1174        * @description Calculated the height based on the mouse event.
1175        * @return {Number} The new value
1176        */
1177        _setHeight: function(ev, flip) {
1178            YAHOO.log('Setting the height based on the Event', 'info', 'Resize');
1179            var xy = this._cache.xy[1],
1180                h = this._cache.height,
1181                y = Event.getPageY(ev),
1182                nh = (y - xy);
1183
1184                if (flip) {
1185                    nh = (xy - y) + parseInt(this.get('height'), 10);
1186                }
1187                nh = this._snapTick(nh, this.get('yTicks'));
1188                nh = this._checkHeight(nh);
1189                
1190            return nh;
1191        },
1192        /** 
1193        * @private
1194        * @method _snapTick
1195        * @param {Number} size The size to tick against.
1196        * @param {Number} pix The tick pixels.
1197        * @description Adjusts the number based on the ticks used.
1198        * @return {Number} the new snapped position
1199        */
1200        _snapTick: function(size, pix) {
1201            YAHOO.log('Snapping to ticks', 'info', 'Resize');
1202            if (!size || !pix) {
1203                return size;
1204            }
1205            var _s = size;
1206            var _x = size % pix;
1207            if (_x > 0) {
1208                if (_x > (pix / 2)) {
1209                    _s = size + (pix - _x);
1210                } else {
1211                    _s = size - _x;
1212                }
1213            }
1214            return _s;
1215        },
1216        /** 
1217        * @private
1218        * @method init
1219        * @description The Resize class's initialization method
1220        */        
1221        init: function(p_oElement, p_oAttributes) {
1222            YAHOO.log('init', 'info', 'Resize');
1223            this._locked = false;
1224            this._cache = {
1225                xy: [],
1226                height: 0,
1227                width: 0,
1228                top: 0,
1229                left: 0,
1230                offsetHeight: 0,
1231                offsetWidth: 0,
1232                start: {
1233                    height: 0,
1234                    width: 0,
1235                    top: 0,
1236                    left: 0
1237                }
1238            };
1239
1240            Resize.superclass.init.call(this, p_oElement, p_oAttributes);
1241
1242            this.set('setSize', this.get('setSize'));
1243
1244            if (p_oAttributes.height) {
1245                this.set('height', parseInt(p_oAttributes.height, 10));
1246            } else {
1247                var h = this.getStyle('height');
1248                if (h == 'auto') {
1249                    this.set('height', parseInt(this.get('element').offsetHeight, 10));
1250                }
1251            }
1252            if (p_oAttributes.width) {
1253                this.set('width', parseInt(p_oAttributes.width, 10));
1254            } else {
1255                var w = this.getStyle('width');
1256                if (w == 'auto') {
1257                    this.set('width', parseInt(this.get('element').offsetWidth, 10));
1258                }
1259            }
1260            
1261            var id = p_oElement;
1262            if (!Lang.isString(id)) {
1263                id = D.generateId(id);
1264            }
1265

Large files files are truncated, but you can click here to view the full file