[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-constrain', function (Y, NAME) {
   9  
  10  var Lang = Y.Lang,
  11      isBoolean = Lang.isBoolean,
  12      isNumber = Lang.isNumber,
  13      isString = Lang.isString,
  14      capitalize = Y.Resize.capitalize,
  15  
  16      isNode = function(v) {
  17          return (v instanceof Y.Node);
  18      },
  19  
  20      toNumber = function(num) {
  21          return parseFloat(num) || 0;
  22      },
  23  
  24      BORDER_BOTTOM_WIDTH = 'borderBottomWidth',
  25      BORDER_LEFT_WIDTH = 'borderLeftWidth',
  26      BORDER_RIGHT_WIDTH = 'borderRightWidth',
  27      BORDER_TOP_WIDTH = 'borderTopWidth',
  28      BORDER = 'border',
  29      BOTTOM = 'bottom',
  30      CON = 'con',
  31      CONSTRAIN = 'constrain',
  32      HOST = 'host',
  33      LEFT = 'left',
  34      MAX_HEIGHT = 'maxHeight',
  35      MAX_WIDTH = 'maxWidth',
  36      MIN_HEIGHT = 'minHeight',
  37      MIN_WIDTH = 'minWidth',
  38      NODE = 'node',
  39      OFFSET_HEIGHT = 'offsetHeight',
  40      OFFSET_WIDTH = 'offsetWidth',
  41      PRESEVE_RATIO = 'preserveRatio',
  42      REGION = 'region',
  43      RESIZE_CONTRAINED = 'resizeConstrained',
  44      RIGHT = 'right',
  45      TICK_X = 'tickX',
  46      TICK_Y = 'tickY',
  47      TOP = 'top',
  48      WIDTH = 'width',
  49      VIEW = 'view',
  50      VIEWPORT_REGION = 'viewportRegion';
  51  
  52  /**
  53  A Resize plugin that will attempt to constrain the resize node to the boundaries.
  54  @module resize
  55  @submodule resize-contrain
  56  @class ResizeConstrained
  57  @param config {Object} Object literal specifying widget configuration properties.
  58  @constructor
  59  @extends Plugin.Base
  60  @namespace Plugin
  61  */
  62  
  63  function ResizeConstrained() {
  64      ResizeConstrained.superclass.constructor.apply(this, arguments);
  65  }
  66  
  67  Y.mix(ResizeConstrained, {
  68      NAME: RESIZE_CONTRAINED,
  69  
  70      NS: CON,
  71  
  72      ATTRS: {
  73          /**
  74          * Will attempt to constrain the resize node to the boundaries. Arguments:<br>
  75          * 'view': Contrain to Viewport<br>
  76          * '#selector_string': Constrain to this node<br>
  77          * '{Region Object}': An Object Literal containing a valid region (top, right, bottom, left) of page positions
  78          *
  79          * @attribute constrain
  80          * @type {String|Object|Node}
  81          */
  82          constrain: {
  83              setter: function(v) {
  84                  if (v && (isNode(v) || isString(v) || v.nodeType)) {
  85                      v = Y.one(v);
  86                  }
  87  
  88                  return v;
  89              }
  90          },
  91  
  92          /**
  93           * The minimum height of the element
  94           *
  95           * @attribute minHeight
  96           * @default 15
  97           * @type Number
  98           */
  99          minHeight: {
 100              value: 15,
 101              validator: isNumber
 102          },
 103  
 104          /**
 105           * The minimum width of the element
 106           *
 107           * @attribute minWidth
 108           * @default 15
 109           * @type Number
 110           */
 111          minWidth: {
 112              value: 15,
 113              validator: isNumber
 114          },
 115  
 116          /**
 117           * The maximum height of the element
 118           *
 119           * @attribute maxHeight
 120           * @default Infinity
 121           * @type Number
 122           */
 123          maxHeight: {
 124              value: Infinity,
 125              validator: isNumber
 126          },
 127  
 128          /**
 129           * The maximum width of the element
 130           *
 131           * @attribute maxWidth
 132           * @default Infinity
 133           * @type Number
 134           */
 135          maxWidth: {
 136              value: Infinity,
 137              validator: isNumber
 138          },
 139  
 140          /**
 141           * Maintain the element's ratio when resizing.
 142           *
 143           * @attribute preserveRatio
 144           * @default false
 145           * @type boolean
 146           */
 147          preserveRatio: {
 148              value: false,
 149              validator: isBoolean
 150          },
 151  
 152          /**
 153           * The number of x ticks to span the resize to.
 154           *
 155           * @attribute tickX
 156           * @default false
 157           * @type Number | false
 158           */
 159          tickX: {
 160              value: false
 161          },
 162  
 163          /**
 164           * The number of y ticks to span the resize to.
 165           *
 166           * @attribute tickY
 167           * @default false
 168           * @type Number | false
 169           */
 170          tickY: {
 171              value: false
 172          }
 173      }
 174  });
 175  
 176  Y.extend(ResizeConstrained, Y.Plugin.Base, {
 177      /**
 178       * Stores the <code>constrain</code>
 179       * surrounding information retrieved from
 180       * <a href="Resize.html#method__getBoxSurroundingInfo">_getBoxSurroundingInfo</a>.
 181       *
 182       * @property constrainSurrounding
 183       * @type Object
 184       * @default null
 185       */
 186      constrainSurrounding: null,
 187  
 188      initializer: function() {
 189          var instance = this,
 190              host = instance.get(HOST);
 191  
 192          host.delegate.dd.plug(
 193              Y.Plugin.DDConstrained,
 194              {
 195                  tickX: instance.get(TICK_X),
 196                  tickY: instance.get(TICK_Y)
 197              }
 198          );
 199  
 200          host.after('resize:align', Y.bind(instance._handleResizeAlignEvent, instance));
 201          host.on('resize:start', Y.bind(instance._handleResizeStartEvent, instance));
 202      },
 203  
 204      /**
 205       * Helper method to update the current values on
 206       * <a href="Resize.html#property_info">info</a> to respect the
 207       * constrain node.
 208       *
 209       * @method _checkConstrain
 210       * @param {String} axis 'top' or 'left'
 211       * @param {String} axisConstrain 'bottom' or 'right'
 212       * @param {String} offset 'offsetHeight' or 'offsetWidth'
 213       * @protected
 214       */
 215      _checkConstrain: function(axis, axisConstrain, offset) {
 216          var instance = this,
 217              point1,
 218              point1Constrain,
 219              point2,
 220              point2Constrain,
 221              host = instance.get(HOST),
 222              info = host.info,
 223              constrainBorders = instance.constrainSurrounding.border,
 224              region = instance._getConstrainRegion();
 225  
 226          if (region) {
 227              point1 = info[axis] + info[offset];
 228              point1Constrain = region[axisConstrain] - toNumber(constrainBorders[capitalize(BORDER, axisConstrain, WIDTH)]);
 229  
 230              if (point1 >= point1Constrain) {
 231                  info[offset] -= (point1 - point1Constrain);
 232              }
 233  
 234              point2 = info[axis];
 235              point2Constrain = region[axis] + toNumber(constrainBorders[capitalize(BORDER, axis, WIDTH)]);
 236  
 237              if (point2 <= point2Constrain) {
 238                  info[axis] += (point2Constrain - point2);
 239                  info[offset] -= (point2Constrain - point2);
 240              }
 241          }
 242      },
 243  
 244      /**
 245       * Update the current values on <a href="Resize.html#property_info">info</a>
 246       * to respect the maxHeight and minHeight.
 247       *
 248       * @method _checkHeight
 249       * @protected
 250       */
 251      _checkHeight: function() {
 252          var instance = this,
 253              host = instance.get(HOST),
 254              info = host.info,
 255              maxHeight = (instance.get(MAX_HEIGHT) + host.totalVSurrounding),
 256              minHeight = (instance.get(MIN_HEIGHT) + host.totalVSurrounding);
 257  
 258          instance._checkConstrain(TOP, BOTTOM, OFFSET_HEIGHT);
 259  
 260          if (info.offsetHeight > maxHeight) {
 261              host._checkSize(OFFSET_HEIGHT, maxHeight);
 262          }
 263  
 264          if (info.offsetHeight < minHeight) {
 265              host._checkSize(OFFSET_HEIGHT, minHeight);
 266          }
 267      },
 268  
 269      /**
 270       * Update the current values on <a href="Resize.html#property_info">info</a>
 271       * calculating the correct ratio for the other values.
 272       *
 273       * @method _checkRatio
 274       * @protected
 275       */
 276      _checkRatio: function() {
 277          var instance = this,
 278              host = instance.get(HOST),
 279              info = host.info,
 280              originalInfo = host.originalInfo,
 281              oWidth = originalInfo.offsetWidth,
 282              oHeight = originalInfo.offsetHeight,
 283              oTop = originalInfo.top,
 284              oLeft = originalInfo.left,
 285              oBottom = originalInfo.bottom,
 286              oRight = originalInfo.right,
 287              // wRatio/hRatio functions keep the ratio information always synced with the current info information
 288              // RETURN: percentage how much width/height has changed from the original width/height
 289              wRatio = function() {
 290                  return (info.offsetWidth/oWidth);
 291              },
 292              hRatio = function() {
 293                  return (info.offsetHeight/oHeight);
 294              },
 295              isClosestToHeight = host.changeHeightHandles,
 296              bottomDiff,
 297              constrainBorders,
 298              constrainRegion,
 299              leftDiff,
 300              rightDiff,
 301              topDiff;
 302  
 303          // check whether the resizable node is closest to height or not
 304          if (instance.get(CONSTRAIN) && host.changeHeightHandles && host.changeWidthHandles) {
 305              constrainRegion = instance._getConstrainRegion();
 306              constrainBorders = instance.constrainSurrounding.border;
 307              bottomDiff = (constrainRegion.bottom - toNumber(constrainBorders[BORDER_BOTTOM_WIDTH])) - oBottom;
 308              leftDiff = oLeft - (constrainRegion.left + toNumber(constrainBorders[BORDER_LEFT_WIDTH]));
 309              rightDiff = (constrainRegion.right - toNumber(constrainBorders[BORDER_RIGHT_WIDTH])) - oRight;
 310              topDiff = oTop - (constrainRegion.top + toNumber(constrainBorders[BORDER_TOP_WIDTH]));
 311  
 312              if (host.changeLeftHandles && host.changeTopHandles) {
 313                  isClosestToHeight = (topDiff < leftDiff);
 314              }
 315              else if (host.changeLeftHandles) {
 316                  isClosestToHeight = (bottomDiff < leftDiff);
 317              }
 318              else if (host.changeTopHandles) {
 319                  isClosestToHeight = (topDiff < rightDiff);
 320              }
 321              else {
 322                  isClosestToHeight = (bottomDiff < rightDiff);
 323              }
 324          }
 325  
 326          // when the height of the resizable element touch the border of the constrain first
 327          // force the offsetWidth to be calculated based on the height ratio
 328          if (isClosestToHeight) {
 329              info.offsetWidth = oWidth*hRatio();
 330              instance._checkWidth();
 331              info.offsetHeight = oHeight*wRatio();
 332          }
 333          else {
 334              info.offsetHeight = oHeight*wRatio();
 335              instance._checkHeight();
 336              info.offsetWidth = oWidth*hRatio();
 337          }
 338  
 339          // fixing the top on handles which are able to change top
 340          // the idea here is change the top based on how much the height has changed instead of follow the dy
 341          if (host.changeTopHandles) {
 342              info.top = oTop + (oHeight - info.offsetHeight);
 343          }
 344  
 345          // fixing the left on handles which are able to change left
 346          // the idea here is change the left based on how much the width has changed instead of follow the dx
 347          if (host.changeLeftHandles) {
 348              info.left = oLeft + (oWidth - info.offsetWidth);
 349          }
 350  
 351          // rounding values to avoid pixel jumpings
 352          Y.each(info, function(value, key) {
 353              if (isNumber(value)) {
 354                  info[key] = Math.round(value);
 355              }
 356          });
 357      },
 358  
 359      /**
 360       * Check whether the resizable node is inside the constrain region.
 361       *
 362       * @method _checkRegion
 363       * @protected
 364       * @return {boolean}
 365       */
 366      _checkRegion: function() {
 367          var instance = this,
 368              host = instance.get(HOST),
 369              region = instance._getConstrainRegion();
 370  
 371          return Y.DOM.inRegion(null, region, true, host.info);
 372      },
 373  
 374      /**
 375       * Update the current values on <a href="Resize.html#property_info">info</a>
 376       * to respect the maxWidth and minWidth.
 377       *
 378       * @method _checkWidth
 379       * @protected
 380       */
 381      _checkWidth: function() {
 382          var instance = this,
 383              host = instance.get(HOST),
 384              info = host.info,
 385              maxWidth = (instance.get(MAX_WIDTH) + host.totalHSurrounding),
 386              minWidth = (instance.get(MIN_WIDTH) + host.totalHSurrounding);
 387  
 388          instance._checkConstrain(LEFT, RIGHT, OFFSET_WIDTH);
 389  
 390          if (info.offsetWidth < minWidth) {
 391              host._checkSize(OFFSET_WIDTH, minWidth);
 392          }
 393  
 394          if (info.offsetWidth > maxWidth) {
 395              host._checkSize(OFFSET_WIDTH, maxWidth);
 396          }
 397      },
 398  
 399      /**
 400       * Get the constrain region based on the <code>constrain</code>
 401       * attribute.
 402       *
 403       * @method _getConstrainRegion
 404       * @protected
 405       * @return {Object Region}
 406       */
 407      _getConstrainRegion: function() {
 408          var instance = this,
 409              host = instance.get(HOST),
 410              node = host.get(NODE),
 411              constrain = instance.get(CONSTRAIN),
 412              region = null;
 413  
 414          if (constrain) {
 415              if (constrain === VIEW) {
 416                  region = node.get(VIEWPORT_REGION);
 417              }
 418              else if (isNode(constrain)) {
 419                  region = constrain.get(REGION);
 420              }
 421              else {
 422                  region = constrain;
 423              }
 424          }
 425  
 426          return region;
 427      },
 428  
 429      _handleResizeAlignEvent: function() {
 430          var instance = this,
 431              host = instance.get(HOST);
 432  
 433          // check the max/min height and locking top when these values are reach
 434          instance._checkHeight();
 435  
 436          // check the max/min width and locking left when these values are reach
 437          instance._checkWidth();
 438  
 439          // calculating the ratio, for proportionally resizing
 440          if (instance.get(PRESEVE_RATIO)) {
 441              instance._checkRatio();
 442          }
 443  
 444          if (instance.get(CONSTRAIN) && !instance._checkRegion()) {
 445              host.info = host.lastInfo;
 446          }
 447      },
 448  
 449      _handleResizeStartEvent: function() {
 450          var instance = this,
 451              constrain = instance.get(CONSTRAIN),
 452              host = instance.get(HOST);
 453  
 454          instance.constrainSurrounding = host._getBoxSurroundingInfo(constrain);
 455      }
 456  });
 457  
 458  Y.namespace('Plugin');
 459  Y.Plugin.ResizeConstrained = ResizeConstrained;
 460  
 461  
 462  }, '3.17.2', {"requires": ["plugin", "resize-base"]});