Version 3.18.1
Show:

File: resize/js/resize-plugin.js

            /**
             * The Resize Plugin allows you to make a Node or a Widget resizable. It supports all the functionality of
             * the standalone Resize utility. Additionally, resizing a widget updates the widget's height,width and x,y
             * attributes, if they exist.
            
            
                    var overlay = new Y.Overlay({
                       width: "200px",
                       srcNode: "#overlay",
                       visible: false,
                       align: {node:".example", points:["tc", "bc"]}
                    });
                    overlay.plug(Y.Plugin.Resize);
            
            
             *
             * @module resize
             * @submodule resize-plugin
             * @extends Resize
             * @class Plugin.Resize
             * @constructor
             */
            var ResizePlugin = function(config) {
            
                            //if its a widget, get the bounding box
                            config.node = ((Y.Widget && config.host instanceof Y.Widget) ? config.host.get('boundingBox') : config.host);
                            if (config.host instanceof Y.Widget) {
                                    config.widget = config.host;
                            }
                            else {
                                    config.widget = false;
                            }
            
                            ResizePlugin.superclass.constructor.call(this, config);
                    };
            
                    /**
                    * @property NAME
                    * @description resize-plugin
                    * @type {String}
                    */
                    ResizePlugin.NAME = "resize-plugin";
            
                    /**
                    * The Resize instance will be placed on the Node instance under
                    * the resize namespace. It can be accessed via Node.resize or Widget.resize;
                    * @property NS
                    * @type {String}
                    */
                    ResizePlugin.NS = "resize";
            
                    /**
                     * Static property used to define the default attribute
                     * configuration for the Resize plugin.
                     *
                     * @property ATTRS
                     * @type Object
                     * @static
                     */
                    ResizePlugin.ATTRS = {
            
                          /**
                           * Stores the node that is being resized
                           *
                           * @attribute node
                           * @default undefined
                           * @public
                           */
                            node: {
                                    value: undefined
                            },
            
                            /**
                             * Stores the widget that the node belongs to, if one exists
                             *
                             * @attribute widget
                             * @default undefined
                             * @public
                             */
                            widget: {
                                    value:undefined
                            }
                    };
            
            
                    Y.extend(ResizePlugin, Y.Resize, {
            
                            /**
                             * Stores the values for node and widget, and sets up an event-listener
                             *
                             * @method initializer
                             * @protected
                             */
                            initializer: function(config) {
            
                                    this.set('node', config.node);
                                    this.set('widget', config.widget);
            
                                    this.on('resize:resize', function(e) {
                                            this._correctDimensions(e);
                                    });
                            },
            
                            /**
                             * Updates the node's (x,y) values if they are changed via resizing.
                             * If the node belongs to a widget, passes the widget down to _setWidgetProperties method
                             *
                             * @method _correctDimensions
                             * @param {EventFacade} e The Event object
                             * @private
                             */
                            _correctDimensions: function(e) {
            
                                    var node = this.get('node'),
                                    x = {
                                        old: node.getX(),
                                        cur: e.currentTarget.info.left
                                    },
                                    y = {
                                        old: node.getY(),
                                        cur: e.currentTarget.info.top
                                    };
            
            
                                    if (this.get('widget')) {
                                        this._setWidgetProperties(e, x, y);
                                    }
            
                                    //now set properties on just the node or the widget's bounding box
                                    if (this._isDifferent(x.old, x.cur)) {
                                        node.set('x', x.cur);
                                    }
            
                                    if (this._isDifferent(y.old, y.cur)) {
                                        node.set('y', y.cur);
                                    }
            
                            },
            
            
                               /**
                                * If the host is a widget, then set the width, height. Then look for widgetPosition and set x,y
                                *
                                * @method _setWidgetProperties
                                * @param {EventFacade} e The Event object
                                * @param {Object} x Literal containing old x value and current x value
                                * @param {Object} y Literal containing old y value and current y value
                                * @private
                                */
                               _setWidgetProperties: function(e,x,y) {
                                   //all widgets have width/height attrs. change these only if they differ from the old values
            
                                   var widget = this.get('widget'),
                                   oldHeight = widget.get('height'),
                                   oldWidth = widget.get('width'),
                                   currentWidth = e.currentTarget.info.offsetWidth - e.currentTarget.totalHSurrounding,
                                   currentHeight = e.currentTarget.info.offsetHeight - e.currentTarget.totalVSurrounding;
            
                                   if (this._isDifferent(oldHeight, currentHeight)) {
                                      widget.set('height', currentHeight);
                                   }
            
                                   if (this._isDifferent(oldWidth, currentWidth)) {
                                      widget.set('width', currentWidth);
                                   }
            
            
            
                                   //If the widget uses Y.WidgetPosition, it will also have x,y position support.
                                   if (widget.hasImpl && widget.hasImpl(Y.WidgetPosition)) {
            
                                       if (this._isDifferent(widget.get('x'), x.cur)) {
                                           widget.set('x', x.cur);
                                       }
            
                                       if (this._isDifferent(widget.get('y'), y.cur)) {
                                           widget.set('y', y.cur);
                                       }
            
            
                                   }
                               },
            
                               /**
                                  * a little utility method that returns a value if the old !== new, otherwise it returns false.
                                  *
                                  * @method _isDifferent
                                  * @param {Number} oldVal
                                  * @param {Number} newVal
                                  * @private
                                  */
                               _isDifferent: function(oldVal, newVal) {
                                   var retValue = false;
                                   if (oldVal !== newVal) {
                                       retValue = newVal;
                                   }
                                   return retValue;
                               }
            
            
                    });
                    Y.namespace('Plugin');
                    Y.Plugin.Resize = ResizePlugin;