A YUI3 resize plugin... first effort.js

YUI.add('node-resize', function(Y) {



       /**
        * Simple resize
        */
       /**
        * Simple Resize plugin that can be attached to a Node via the plug method.
        * @class Resize
        * @constructor
        * @namespace Plugin
        */


        var Resize = function(config) {

            Resize.superclass.constructor.apply(this, arguments);
        };


        
        /**
        * @property NAME
        * @description resize
        * @type {String}
        */
        Resize.NAME = "resizePlugin";

        /**
        * @property NS
        * @description The Resize instance will be placed on the Node instance 
        *         under the resize namespace. It can be accessed via Node.Resize;
        * @type {String}
        */
        Resize.NS = "resize";




        Resize.ATTRS = {
        
        
          handles: {
              value: [ "r", "br", "b" ]
          }

        
        
        };



        Y.extend(Resize, Y.Plugin.Base, {
        
        
        
            _currentHandle: false,
            
            _locked: false,


            /**
             * Called by Y.Plugin.Base
             * Renders UI and adds DD and handlers to them
             */
            initializer: function( config ) {
               this._renderHandles();
               this._addDD();
            },
            
            
            
            /**
             *
             *
             * Render methods
             *
             *
             *
             */
            
            /**
             * Add some divs to the host node as handles
             */
            _renderHandles: function() {
               var host = this.get("host");

                    /**
                     * Renders an individual handle at position
                     */
                    var _renderHandle = function( position ) {

                      return Y.Node.create( "<div>handle</div>" )
                                   .addClass("yui3-resize-handle")
                                   .addClass("yui3-resize-handle-" + position )
                                   .append( Y.Node
                                             .create( "<div></div>" )
                                             .addClass("yui3-resize-handle-inner-" + position ) );
                                               
                    };
                    
               
               Y.each( this.get("handles" ), 
                       function( v, k ){
                          host.append( _renderHandle( v, k ) ); 
                       }
               );

               host.addClass("yui3-resize");
            },
            
            

            
            
            
            
            
            /**
             *
             *
             * DD and handler methods
             *
             *
             */
            
            
            /**
             * Add drag drop plugin to host element and make 
             * .yui3-resize-handle a handle.
             * @private
             */
            _addDD: function() {
               var host = this.get("host");
               host.plug( Y.Plugin.Drag );
               
               host.dd.addHandle( '.yui3-resize-handle' );
               
               host.dd.on( 'drag:start' , this._startResize , null, host );
               host.dd.on( 'drag:drag' , this._resize , null, host );
               host.dd.on( 'drag:end' , this._endResize , null, host );

            },
            
            
            
            /**
             * Handler for start of resize
             * @private
             */
            _startResize: function( ev ) {
               var host = ev.target.get("node");
               host._currentHandle = host.dd.get("activeHandle") ;
            },



            
            /**
             * Handler for actual resize
             * @private
             */
            _resize: function( ev  ){
      
               var host = ev.target.get( "node" );
              
               if( host._locked === true || host._currentHandle === false ) {
                 return;
               }
              
               var w = parseInt( host.getStyle( "width" ) ),
                   h = parseInt( host.getStyle( "height" ) ),
                   t = parseInt( host.getStyle( "top" ) ),
                   l = parseInt( host.getStyle( "left" ) ),
                   dw = ev.info.delta[ 0 ],
                   dh = ev.info.delta[ 1 ],
                   ch =  host._currentHandle ;

               

            
               if ( ch.hasClass( "yui3-resize-handle-r" ) ) {
                   
                 w += dw;
               
               }
               
               else if ( ch.hasClass( "yui3-resize-handle-l" ) ) {

                 w -= dw;
                 l += dw;
               }
                   
               else if( ch.hasClass( "yui3-resize-handle-t" ) ) {
                   
                 h -= dh;
                 t += dh;
               
               }
               
               else if ( ch.hasClass( "yui3-resize-handle-b" ) ) {
               
                 h += dh;
               
               }
               
               else if( ch.hasClass( "yui3-resize-handle-tl" ) ) {
               
                 w -= dw;
                 l += dw;
                 h -= dh;
                 t += dh;
               
               }

               else if( ch.hasClass( "yui3-resize-handle-tr" ) ) {
               
                 w += dw;
                 h -= dh;
                 t += dh;
               
               }

               else if( ch.hasClass( "yui3-resize-handle-bl" ) ) {
               
                 w -= dw;
                 l += dw;
                 h += dh;
               
               }               

               else if( ch.hasClass( "yui3-resize-handle-br" ) ) {
               
                 w += dw;
                 h += dh;
               
               }

               host.setStyle( "width" , w + "px" );
               host.setStyle( "height" , h + "px" );
               host.setStyle( "top" , t + "px" );
               host.setStyle( "left" , l + "px" );
               ev.preventDefault();
            
            },
            
            
            /**
             * At the end of the resize
             */
            _endResize: function( ev ) {
               ev.target.get("node")._currentHandle = false;
            }
            
        
        } );
        
        Y.Plugin.Resize = Resize;




}, '3.1.0pr1' ,{requires:['attribute', 'node', 'plugin','dd-plugin'] });