[Summary view] [Print] [Text view]

   1  /*
   2  YUI 3.17.2 (build 9c3c78e)
   3  Copyright 2014 Yahoo! Inc. All rights reserved.
   4  Licensed under the BSD License.
   5  http://yuilibrary.com/license/
   6  */
   7  
   8  YUI.add('resize-plugin', function (Y, NAME) {
   9  
  10  /**
  11   * The Resize Plugin allows you to make a Node or a Widget resizable. It supports all the functionality of
  12   * the standalone Resize utility. Additionally, resizing a widget updates the widget's height,width and x,y
  13   * attributes, if they exist.
  14  
  15  
  16          var overlay = new Y.Overlay({
  17             width: "200px",
  18             srcNode: "#overlay",
  19             visible: false,
  20             align: {node:".example", points:["tc", "bc"]}
  21          });
  22          overlay.plug(Y.Plugin.Resize);
  23  
  24  
  25   *
  26   * @module resize
  27   * @submodule resize-plugin
  28   * @extends Resize
  29   * @class Plugin.Resize
  30   * @constructor
  31   */
  32  var ResizePlugin = function(config) {
  33  
  34                  //if its a widget, get the bounding box
  35                  config.node = ((Y.Widget && config.host instanceof Y.Widget) ? config.host.get('boundingBox') : config.host);
  36                  if (config.host instanceof Y.Widget) {
  37                          config.widget = config.host;
  38                  }
  39                  else {
  40                          config.widget = false;
  41                  }
  42  
  43                  ResizePlugin.superclass.constructor.call(this, config);
  44          };
  45  
  46          /**
  47          * @property NAME
  48          * @description resize-plugin
  49          * @type {String}
  50          */
  51          ResizePlugin.NAME = "resize-plugin";
  52  
  53          /**
  54          * The Resize instance will be placed on the Node instance under
  55          * the resize namespace. It can be accessed via Node.resize or Widget.resize;
  56          * @property NS
  57          * @type {String}
  58          */
  59          ResizePlugin.NS = "resize";
  60  
  61          /**
  62           * Static property used to define the default attribute
  63           * configuration for the Resize plugin.
  64           *
  65           * @property ATTRS
  66           * @type Object
  67           * @static
  68           */
  69          ResizePlugin.ATTRS = {
  70  
  71                /**
  72                 * Stores the node that is being resized
  73                 *
  74                 * @attribute node
  75                 * @default undefined
  76                 * @public
  77                 */
  78                  node: {
  79                          value: undefined
  80                  },
  81  
  82                  /**
  83                   * Stores the widget that the node belongs to, if one exists
  84                   *
  85                   * @attribute widget
  86                   * @default undefined
  87                   * @public
  88                   */
  89                  widget: {
  90                          value:undefined
  91                  }
  92          };
  93  
  94  
  95          Y.extend(ResizePlugin, Y.Resize, {
  96  
  97                  /**
  98                   * Stores the values for node and widget, and sets up an event-listener
  99                   *
 100                   * @method initializer
 101                   * @protected
 102                   */
 103                  initializer: function(config) {
 104  
 105                          this.set('node', config.node);
 106                          this.set('widget', config.widget);
 107  
 108                          this.on('resize:resize', function(e) {
 109                                  this._correctDimensions(e);
 110                          });
 111                  },
 112  
 113                  /**
 114                   * Updates the node's (x,y) values if they are changed via resizing.
 115                   * If the node belongs to a widget, passes the widget down to _setWidgetProperties method
 116                   *
 117                   * @method _correctDimensions
 118                   * @param {EventFacade} e The Event object
 119                   * @private
 120                   */
 121                  _correctDimensions: function(e) {
 122  
 123                          var node = this.get('node'),
 124                          x = {
 125                              old: node.getX(),
 126                              cur: e.currentTarget.info.left
 127                          },
 128                          y = {
 129                              old: node.getY(),
 130                              cur: e.currentTarget.info.top
 131                          };
 132  
 133  
 134                          if (this.get('widget')) {
 135                              this._setWidgetProperties(e, x, y);
 136                          }
 137  
 138                          //now set properties on just the node or the widget's bounding box
 139                          if (this._isDifferent(x.old, x.cur)) {
 140                              node.set('x', x.cur);
 141                          }
 142  
 143                          if (this._isDifferent(y.old, y.cur)) {
 144                              node.set('y', y.cur);
 145                          }
 146  
 147                  },
 148  
 149  
 150                     /**
 151                      * If the host is a widget, then set the width, height. Then look for widgetPosition and set x,y
 152                      *
 153                      * @method _setWidgetProperties
 154                      * @param {EventFacade} e The Event object
 155                      * @param {Object} x Literal containing old x value and current x value
 156                      * @param {Object} y Literal containing old y value and current y value
 157                      * @private
 158                      */
 159                     _setWidgetProperties: function(e,x,y) {
 160                         //all widgets have width/height attrs. change these only if they differ from the old values
 161  
 162                         var widget = this.get('widget'),
 163                         oldHeight = widget.get('height'),
 164                         oldWidth = widget.get('width'),
 165                         currentWidth = e.currentTarget.info.offsetWidth - e.currentTarget.totalHSurrounding,
 166                         currentHeight = e.currentTarget.info.offsetHeight - e.currentTarget.totalVSurrounding;
 167  
 168                         if (this._isDifferent(oldHeight, currentHeight)) {
 169                            widget.set('height', currentHeight);
 170                         }
 171  
 172                         if (this._isDifferent(oldWidth, currentWidth)) {
 173                            widget.set('width', currentWidth);
 174                         }
 175  
 176  
 177  
 178                         //If the widget uses Y.WidgetPosition, it will also have x,y position support.
 179                         if (widget.hasImpl && widget.hasImpl(Y.WidgetPosition)) {
 180  
 181                             if (this._isDifferent(widget.get('x'), x.cur)) {
 182                                 widget.set('x', x.cur);
 183                             }
 184  
 185                             if (this._isDifferent(widget.get('y'), y.cur)) {
 186                                 widget.set('y', y.cur);
 187                             }
 188  
 189  
 190                         }
 191                     },
 192  
 193                     /**
 194                        * a little utility method that returns a value if the old !== new, otherwise it returns false.
 195                        *
 196                        * @method _isDifferent
 197                        * @param {Number} oldVal
 198                        * @param {Number} newVal
 199                        * @private
 200                        */
 201                     _isDifferent: function(oldVal, newVal) {
 202                         var retValue = false;
 203                         if (oldVal !== newVal) {
 204                             retValue = newVal;
 205                         }
 206                         return retValue;
 207                     }
 208  
 209  
 210          });
 211          Y.namespace('Plugin');
 212          Y.Plugin.Resize = ResizePlugin;
 213  
 214  
 215  }, '3.17.2', {"requires": ["resize-base", "plugin"], "optional": ["resize-constrain"]});