Version 3.18.1
Show:

File: resize/js/resize-base.js

  1.             /**
  2.              * The Resize Utility allows you to make an HTML element resizable.
  3.              * @module resize
  4.              * @main resize
  5.              */
  6.             
  7.             var Lang = Y.Lang,
  8.                 isArray = Lang.isArray,
  9.                 isBoolean = Lang.isBoolean,
  10.                 isNumber = Lang.isNumber,
  11.                 isString = Lang.isString,
  12.             
  13.                 yArray  = Y.Array,
  14.                 trim = Lang.trim,
  15.                 indexOf = yArray.indexOf,
  16.             
  17.                 COMMA = ',',
  18.                 DOT = '.',
  19.                 EMPTY_STR = '',
  20.                 HANDLE_SUB = '{handle}',
  21.                 SPACE = ' ',
  22.             
  23.                 ACTIVE = 'active',
  24.                 ACTIVE_HANDLE = 'activeHandle',
  25.                 ACTIVE_HANDLE_NODE = 'activeHandleNode',
  26.                 ALL = 'all',
  27.                 AUTO_HIDE = 'autoHide',
  28.                 BORDER = 'border',
  29.                 BOTTOM = 'bottom',
  30.                 CLASS_NAME = 'className',
  31.                 COLOR = 'color',
  32.                 DEF_MIN_HEIGHT = 'defMinHeight',
  33.                 DEF_MIN_WIDTH = 'defMinWidth',
  34.                 HANDLE = 'handle',
  35.                 HANDLES = 'handles',
  36.                 HANDLES_WRAPPER = 'handlesWrapper',
  37.                 HIDDEN = 'hidden',
  38.                 INNER = 'inner',
  39.                 LEFT = 'left',
  40.                 MARGIN = 'margin',
  41.                 NODE = 'node',
  42.                 NODE_NAME = 'nodeName',
  43.                 NONE = 'none',
  44.                 OFFSET_HEIGHT = 'offsetHeight',
  45.                 OFFSET_WIDTH = 'offsetWidth',
  46.                 PADDING = 'padding',
  47.                 PARENT_NODE = 'parentNode',
  48.                 POSITION = 'position',
  49.                 RELATIVE = 'relative',
  50.                 RESIZE = 'resize',
  51.                 RESIZING = 'resizing',
  52.                 RIGHT = 'right',
  53.                 STATIC = 'static',
  54.                 STYLE = 'style',
  55.                 TOP = 'top',
  56.                 WIDTH = 'width',
  57.                 WRAP = 'wrap',
  58.                 WRAPPER = 'wrapper',
  59.                 WRAP_TYPES = 'wrapTypes',
  60.             
  61.                 EV_MOUSE_UP = 'resize:mouseUp',
  62.                 EV_RESIZE = 'resize:resize',
  63.                 EV_RESIZE_ALIGN = 'resize:align',
  64.                 EV_RESIZE_END = 'resize:end',
  65.                 EV_RESIZE_START = 'resize:start',
  66.             
  67.                 T = 't',
  68.                 TR = 'tr',
  69.                 R = 'r',
  70.                 BR = 'br',
  71.                 B = 'b',
  72.                 BL = 'bl',
  73.                 L = 'l',
  74.                 TL = 'tl',
  75.             
  76.                 concat = function() {
  77.                     return Array.prototype.slice.call(arguments).join(SPACE);
  78.                 },
  79.             
  80.                 // round the passed number to get rid of pixel-flickering
  81.                 toRoundNumber = function(num) {
  82.                     return Math.round(parseFloat(num)) || 0;
  83.                 },
  84.             
  85.                 getCompStyle = function(node, val) {
  86.                     return node.getComputedStyle(val);
  87.                 },
  88.             
  89.                 handleAttrName = function(handle) {
  90.                     return HANDLE + handle.toUpperCase();
  91.                 },
  92.             
  93.                 isNode = function(v) {
  94.                     return (v instanceof Y.Node);
  95.                 },
  96.             
  97.                 toInitialCap = Y.cached(
  98.                     function(str) {
  99.                         return str.substring(0, 1).toUpperCase() + str.substring(1);
  100.                     }
  101.                 ),
  102.             
  103.                 capitalize = Y.cached(function() {
  104.                     var out = [],
  105.                         args = yArray(arguments, 0, true);
  106.             
  107.                     yArray.each(args, function(part, i) {
  108.                         if (i > 0) {
  109.                             part = toInitialCap(part);
  110.                         }
  111.                         out.push(part);
  112.                     });
  113.             
  114.                     return out.join(EMPTY_STR);
  115.                 }),
  116.             
  117.                 getCN = Y.ClassNameManager.getClassName,
  118.             
  119.                 CSS_RESIZE = getCN(RESIZE),
  120.                 CSS_RESIZE_HANDLE = getCN(RESIZE, HANDLE),
  121.                 CSS_RESIZE_HANDLE_ACTIVE = getCN(RESIZE, HANDLE, ACTIVE),
  122.                 CSS_RESIZE_HANDLE_INNER = getCN(RESIZE, HANDLE, INNER),
  123.                 CSS_RESIZE_HANDLE_INNER_PLACEHOLDER = getCN(RESIZE, HANDLE, INNER, HANDLE_SUB),
  124.                 CSS_RESIZE_HANDLE_PLACEHOLDER = getCN(RESIZE, HANDLE, HANDLE_SUB),
  125.                 CSS_RESIZE_HIDDEN_HANDLES = getCN(RESIZE, HIDDEN, HANDLES),
  126.                 CSS_RESIZE_HANDLES_WRAPPER = getCN(RESIZE, HANDLES, WRAPPER),
  127.                 CSS_RESIZE_WRAPPER = getCN(RESIZE, WRAPPER);
  128.             
  129.             /**
  130.             A base class for Resize, providing:
  131.             
  132.                * Basic Lifecycle (initializer, renderUI, bindUI, syncUI, destructor)
  133.                * Applies drag handles to an element to make it resizable
  134.                * Here is the list of valid resize handles:
  135.                    `[ 't', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl' ]`. You can
  136.                    read this list as top, top-right, right, bottom-right, bottom,
  137.                    bottom-left, left, top-left.
  138.                * The drag handles are inserted into the element and positioned
  139.                    absolute. Some elements, such as a textarea or image, don't support
  140.                    children. To overcome that, set wrap:true in your config and the
  141.                    element willbe wrapped for you automatically.
  142.             
  143.             Quick Example:
  144.             
  145.                 var instance = new Y.Resize({
  146.                     node: '#resize1',
  147.                     preserveRatio: true,
  148.                     wrap: true,
  149.                     maxHeight: 170,
  150.                     maxWidth: 400,
  151.                     handles: 't, tr, r, br, b, bl, l, tl'
  152.                 });
  153.             
  154.             Check the list of <a href="Resize.html#attrs">Configuration Attributes</a> available for
  155.             Resize.
  156.             
  157.             @class Resize
  158.             @param config {Object} Object literal specifying widget configuration properties.
  159.             @constructor
  160.             @extends Base
  161.             */
  162.             
  163.             function Resize() {
  164.                 Resize.superclass.constructor.apply(this, arguments);
  165.             }
  166.             
  167.             Y.mix(Resize, {
  168.                 /**
  169.                  * Static property provides a string to identify the class.
  170.                  *
  171.                  * @property NAME
  172.                  * @type String
  173.                  * @static
  174.                  */
  175.                 NAME: RESIZE,
  176.             
  177.                 /**
  178.                  * Static property used to define the default attribute
  179.                  * configuration for the Resize.
  180.                  *
  181.                  * @property ATTRS
  182.                  * @type Object
  183.                  * @static
  184.                  */
  185.                 ATTRS: {
  186.                     /**
  187.                      * Stores the active handle during the resize.
  188.                      *
  189.                      * @attribute activeHandle
  190.                      * @default null
  191.                      * @private
  192.                      * @type String
  193.                      */
  194.                     activeHandle: {
  195.                         value: null,
  196.                         validator: function(v) {
  197.                             return Y.Lang.isString(v) || Y.Lang.isNull(v);
  198.                         }
  199.                     },
  200.             
  201.                     /**
  202.                      * Stores the active handle element during the resize.
  203.                      *
  204.                      * @attribute activeHandleNode
  205.                      * @default null
  206.                      * @private
  207.                      * @type Node
  208.                      */
  209.                     activeHandleNode: {
  210.                         value: null,
  211.                         validator: isNode
  212.                     },
  213.             
  214.                     /**
  215.                      * False to ensure that the resize handles are always visible, true to
  216.                      * display them only when the user mouses over the resizable borders.
  217.                      *
  218.                      * @attribute autoHide
  219.                      * @default false
  220.                      * @type boolean
  221.                      */
  222.                     autoHide: {
  223.                         value: false,
  224.                         validator: isBoolean
  225.                     },
  226.             
  227.                     /**
  228.                      * The default minimum height of the element. Only used when
  229.                      * ResizeConstrained is not plugged.
  230.                      *
  231.                      * @attribute defMinHeight
  232.                      * @default 15
  233.                      * @type Number
  234.                      */
  235.                     defMinHeight: {
  236.                         value: 15,
  237.                         validator: isNumber
  238.                     },
  239.             
  240.                     /**
  241.                      * The default minimum width of the element. Only used when
  242.                      * ResizeConstrained is not plugged.
  243.                      *
  244.                      * @attribute defMinWidth
  245.                      * @default 15
  246.                      * @type Number
  247.                      */
  248.                     defMinWidth: {
  249.                         value: 15,
  250.                         validator: isNumber
  251.                     },
  252.             
  253.                     /**
  254.                      * The handles to use (any combination of): 't', 'b', 'r', 'l', 'bl',
  255.                      * 'br', 'tl', 'tr'. Can use a shortcut of All.
  256.                      *
  257.                      * @attribute handles
  258.                      * @default all
  259.                      * @type Array | String
  260.                      */
  261.                     handles: {
  262.                         setter: '_setHandles',
  263.                         value: ALL
  264.                     },
  265.             
  266.                     /**
  267.                      * Node to wrap the resize handles.
  268.                      *
  269.                      * @attribute handlesWrapper
  270.                      * @type Node
  271.                      */
  272.                     handlesWrapper: {
  273.                         readOnly: true,
  274.                         setter: Y.one,
  275.                         valueFn: '_valueHandlesWrapper'
  276.                     },
  277.             
  278.                     /**
  279.                      * The selector or element to resize. Required.
  280.                      *
  281.                      * @attribute node
  282.                      * @type Node
  283.                      */
  284.                     node: {
  285.                         setter: Y.one
  286.                     },
  287.             
  288.                     /**
  289.                      * True when the element is being Resized.
  290.                      *
  291.                      * @attribute resizing
  292.                      * @default false
  293.                      * @type boolean
  294.                      */
  295.                     resizing: {
  296.                         value: false,
  297.                         validator: isBoolean
  298.                     },
  299.             
  300.                     /**
  301.                      * True to wrap an element with a div if needed (required for textareas
  302.                      * and images, defaults to false) in favor of the handles config option.
  303.                      * The wrapper element type (default div) could be over-riden passing the
  304.                      * <code>wrapper</code> attribute.
  305.                      *
  306.                      * @attribute wrap
  307.                      * @default false
  308.                      * @type boolean
  309.                      */
  310.                     wrap: {
  311.                         setter: '_setWrap',
  312.                         value: false,
  313.                         validator: isBoolean
  314.                     },
  315.             
  316.                     /**
  317.                      * Elements that requires a wrapper by default. Normally are elements
  318.                      * which cannot have children elements.
  319.                      *
  320.                      * @attribute wrapTypes
  321.                      * @default /canvas|textarea|input|select|button|img/i
  322.                      * @readOnly
  323.                      * @type Regex
  324.                      */
  325.                     wrapTypes: {
  326.                         readOnly: true,
  327.                         value: /^canvas|textarea|input|select|button|img|iframe|table|embed$/i
  328.                     },
  329.             
  330.                     /**
  331.                      * Element to wrap the <code>wrapTypes</code>. This element will house
  332.                      * the handles elements.
  333.                      *
  334.                      * @attribute wrapper
  335.                      * @default div
  336.                      * @type String | Node
  337.                      * @writeOnce
  338.                      */
  339.                     wrapper: {
  340.                         readOnly: true,
  341.                         valueFn: '_valueWrapper',
  342.                         writeOnce: true
  343.                     }
  344.                 },
  345.             
  346.                 RULES: {
  347.                     b: function(instance, dx, dy) {
  348.                         var info = instance.info,
  349.                             originalInfo = instance.originalInfo;
  350.             
  351.                         info.offsetHeight = originalInfo.offsetHeight + dy;
  352.                     },
  353.             
  354.                     l: function(instance, dx) {
  355.                         var info = instance.info,
  356.                             originalInfo = instance.originalInfo;
  357.             
  358.                         info.left = originalInfo.left + dx;
  359.                         info.offsetWidth = originalInfo.offsetWidth - dx;
  360.                     },
  361.             
  362.                     r: function(instance, dx) {
  363.                         var info = instance.info,
  364.                             originalInfo = instance.originalInfo;
  365.             
  366.                         info.offsetWidth = originalInfo.offsetWidth + dx;
  367.                     },
  368.             
  369.                     t: function(instance, dx, dy) {
  370.                         var info = instance.info,
  371.                             originalInfo = instance.originalInfo;
  372.             
  373.                         info.top = originalInfo.top + dy;
  374.                         info.offsetHeight = originalInfo.offsetHeight - dy;
  375.                     },
  376.             
  377.                     tr: function() {
  378.                         this.t.apply(this, arguments);
  379.                         this.r.apply(this, arguments);
  380.                     },
  381.             
  382.                     bl: function() {
  383.                         this.b.apply(this, arguments);
  384.                         this.l.apply(this, arguments);
  385.                     },
  386.             
  387.                     br: function() {
  388.                         this.b.apply(this, arguments);
  389.                         this.r.apply(this, arguments);
  390.                     },
  391.             
  392.                     tl: function() {
  393.                         this.t.apply(this, arguments);
  394.                         this.l.apply(this, arguments);
  395.                     }
  396.                 },
  397.             
  398.                 capitalize: capitalize
  399.             });
  400.             
  401.             Y.Resize = Y.extend(
  402.                 Resize,
  403.                 Y.Base,
  404.                 {
  405.                     /**
  406.                      * Array containing all possible resizable handles.
  407.                      *
  408.                      * @property ALL_HANDLES
  409.                      * @type {String}
  410.                      */
  411.                     ALL_HANDLES: [ T, TR, R, BR, B, BL, L, TL ],
  412.             
  413.                     /**
  414.                      * Regex which matches with the handles that could change the height of
  415.                      * the resizable element.
  416.                      *
  417.                      * @property REGEX_CHANGE_HEIGHT
  418.                      * @type {String}
  419.                      */
  420.                     REGEX_CHANGE_HEIGHT: /^(t|tr|b|bl|br|tl)$/i,
  421.             
  422.                     /**
  423.                      * Regex which matches with the handles that could change the left of
  424.                      * the resizable element.
  425.                      *
  426.                      * @property REGEX_CHANGE_LEFT
  427.                      * @type {String}
  428.                      */
  429.                     REGEX_CHANGE_LEFT: /^(tl|l|bl)$/i,
  430.             
  431.                     /**
  432.                      * Regex which matches with the handles that could change the top of
  433.                      * the resizable element.
  434.                      *
  435.                      * @property REGEX_CHANGE_TOP
  436.                      * @type {String}
  437.                      */
  438.                     REGEX_CHANGE_TOP: /^(tl|t|tr)$/i,
  439.             
  440.                     /**
  441.                      * Regex which matches with the handles that could change the width of
  442.                      * the resizable element.
  443.                      *
  444.                      * @property REGEX_CHANGE_WIDTH
  445.                      * @type {String}
  446.                      */
  447.                     REGEX_CHANGE_WIDTH: /^(bl|br|l|r|tl|tr)$/i,
  448.             
  449.                     /**
  450.                      * Template used to create the resize wrapper for the handles.
  451.                      *
  452.                      * @property HANDLES_WRAP_TEMPLATE
  453.                      * @type {String}
  454.                      */
  455.                     HANDLES_WRAP_TEMPLATE: '<div class="'+CSS_RESIZE_HANDLES_WRAPPER+'"></div>',
  456.             
  457.                     /**
  458.                      * Template used to create the resize wrapper node when needed.
  459.                      *
  460.                      * @property WRAP_TEMPLATE
  461.                      * @type {String}
  462.                      */
  463.                     WRAP_TEMPLATE: '<div class="'+CSS_RESIZE_WRAPPER+'"></div>',
  464.             
  465.                     /**
  466.                      * Template used to create each resize handle.
  467.                      *
  468.                      * @property HANDLE_TEMPLATE
  469.                      * @type {String}
  470.                      */
  471.                     HANDLE_TEMPLATE: '<div class="'+concat(CSS_RESIZE_HANDLE, CSS_RESIZE_HANDLE_PLACEHOLDER)+'">' +
  472.                                         '<div class="'+concat(CSS_RESIZE_HANDLE_INNER, CSS_RESIZE_HANDLE_INNER_PLACEHOLDER)+'">&nbsp;</div>' +
  473.                                     '</div>',
  474.             
  475.             
  476.                     /**
  477.                      * Each box has a content area and optional surrounding padding and
  478.                      * border areas. This property stores the sum of all horizontal
  479.                      * surrounding * information needed to adjust the node height.
  480.                      *
  481.                      * @property totalHSurrounding
  482.                      * @default 0
  483.                      * @type number
  484.                      */
  485.                     totalHSurrounding: 0,
  486.             
  487.                     /**
  488.                      * Each box has a content area and optional surrounding padding and
  489.                      * border areas. This property stores the sum of all vertical
  490.                      * surrounding * information needed to adjust the node height.
  491.                      *
  492.                      * @property totalVSurrounding
  493.                      * @default 0
  494.                      * @type number
  495.                      */
  496.                     totalVSurrounding: 0,
  497.             
  498.                     /**
  499.                      * Stores the <a href="Resize.html#attr_node">node</a>
  500.                      * surrounding information retrieved from
  501.                      * <a href="Resize.html#method__getBoxSurroundingInfo">_getBoxSurroundingInfo</a>.
  502.                      *
  503.                      * @property nodeSurrounding
  504.                      * @type Object
  505.                      * @default null
  506.                      */
  507.                     nodeSurrounding: null,
  508.             
  509.                     /**
  510.                      * Stores the <a href="Resize.html#attr_wrapper">wrapper</a>
  511.                      * surrounding information retrieved from
  512.                      * <a href="Resize.html#method__getBoxSurroundingInfo">_getBoxSurroundingInfo</a>.
  513.                      *
  514.                      * @property wrapperSurrounding
  515.                      * @type Object
  516.                      * @default null
  517.                      */
  518.                     wrapperSurrounding: null,
  519.             
  520.                     /**
  521.                      * Whether the handle being dragged can change the height.
  522.                      *
  523.                      * @property changeHeightHandles
  524.                      * @default false
  525.                      * @type boolean
  526.                      */
  527.                     changeHeightHandles: false,
  528.             
  529.                     /**
  530.                      * Whether the handle being dragged can change the left.
  531.                      *
  532.                      * @property changeLeftHandles
  533.                      * @default false
  534.                      * @type boolean
  535.                      */
  536.                     changeLeftHandles: false,
  537.             
  538.                     /**
  539.                      * Whether the handle being dragged can change the top.
  540.                      *
  541.                      * @property changeTopHandles
  542.                      * @default false
  543.                      * @type boolean
  544.                      */
  545.                     changeTopHandles: false,
  546.             
  547.                     /**
  548.                      * Whether the handle being dragged can change the width.
  549.                      *
  550.                      * @property changeWidthHandles
  551.                      * @default false
  552.                      * @type boolean
  553.                      */
  554.                     changeWidthHandles: false,
  555.             
  556.                     /**
  557.                      * Store DD.Delegate reference for the respective Resize instance.
  558.                      *
  559.                      * @property delegate
  560.                      * @default null
  561.                      * @type Object
  562.                      */
  563.                     delegate: null,
  564.             
  565.                     /**
  566.                      * Stores the current values for the height, width, top and left. You are
  567.                      * able to manipulate these values on resize in order to change the resize
  568.                      * behavior.
  569.                      *
  570.                      * @property info
  571.                      * @type Object
  572.                      * @protected
  573.                      */
  574.                     info: null,
  575.             
  576.                     /**
  577.                      * Stores the last values for the height, width, top and left.
  578.                      *
  579.                      * @property lastInfo
  580.                      * @type Object
  581.                      * @protected
  582.                      */
  583.                     lastInfo: null,
  584.             
  585.                     /**
  586.                      * Stores the original values for the height, width, top and left, stored
  587.                      * on resize start.
  588.                      *
  589.                      * @property originalInfo
  590.                      * @type Object
  591.                      * @protected
  592.                      */
  593.                     originalInfo: null,
  594.             
  595.                     /**
  596.                      * Construction logic executed during Resize instantiation. Lifecycle.
  597.                      *
  598.                      * @method initializer
  599.                      * @protected
  600.                      */
  601.                     initializer: function() {
  602.                         this._eventHandles = [];
  603.             
  604.                         this.renderer();
  605.                     },
  606.             
  607.                     /**
  608.                      * Create the DOM structure for the Resize. Lifecycle.
  609.                      *
  610.                      * @method renderUI
  611.                      * @protected
  612.                      */
  613.                     renderUI: function() {
  614.                         var instance = this;
  615.             
  616.                         instance._renderHandles();
  617.                     },
  618.             
  619.                     /**
  620.                      * Bind the events on the Resize UI. Lifecycle.
  621.                      *
  622.                      * @method bindUI
  623.                      * @protected
  624.                      */
  625.                     bindUI: function() {
  626.                         var instance = this;
  627.             
  628.                         instance._createEvents();
  629.                         instance._bindDD();
  630.                         instance._bindHandle();
  631.                     },
  632.             
  633.                     /**
  634.                      * Sync the Resize UI.
  635.                      *
  636.                      * @method syncUI
  637.                      * @protected
  638.                      */
  639.                     syncUI: function() {
  640.                         var instance = this;
  641.             
  642.                         this.get(NODE).addClass(CSS_RESIZE);
  643.             
  644.                         // hide handles if AUTO_HIDE is true
  645.                         instance._setHideHandlesUI(
  646.                             instance.get(AUTO_HIDE)
  647.                         );
  648.                     },
  649.             
  650.                     /**
  651.                      * Destructor lifecycle implementation for the Resize class.
  652.                      * Detaches all previously attached listeners and removes the Resize handles.
  653.                      *
  654.                      * @method destructor
  655.                      * @protected
  656.                      */
  657.                     destructor: function() {
  658.                         var instance = this,
  659.                             node = instance.get(NODE),
  660.                             wrapper = instance.get(WRAPPER),
  661.                             pNode = wrapper.get(PARENT_NODE);
  662.             
  663.                         Y.each(
  664.                             instance._eventHandles,
  665.                             function(handle) {
  666.                                 handle.detach();
  667.                             }
  668.                         );
  669.             
  670.                         instance._eventHandles.length = 0;
  671.             
  672.                         // destroy handles dd and remove them from the dom
  673.                         instance.eachHandle(function(handleEl) {
  674.                             instance.delegate.dd.destroy();
  675.             
  676.                             // remove handle
  677.                             handleEl.remove(true);
  678.                         });
  679.             
  680.                         instance.delegate.destroy();
  681.             
  682.                         // unwrap node
  683.                         if (instance.get(WRAP)) {
  684.                             instance._copyStyles(wrapper, node);
  685.             
  686.                             if (pNode) {
  687.                                 pNode.insertBefore(node, wrapper);
  688.                             }
  689.             
  690.                             wrapper.remove(true);
  691.                         }
  692.             
  693.                         node.removeClass(CSS_RESIZE);
  694.                         node.removeClass(CSS_RESIZE_HIDDEN_HANDLES);
  695.                     },
  696.             
  697.                     /**
  698.                      * Creates DOM (or manipulates DOM for progressive enhancement)
  699.                      * This method is invoked by initializer(). It's chained automatically for
  700.                      * subclasses if required.
  701.                      *
  702.                      * @method renderer
  703.                      * @protected
  704.                      */
  705.                     renderer: function() {
  706.                         this.renderUI();
  707.                         this.bindUI();
  708.                         this.syncUI();
  709.                     },
  710.             
  711.                     /**
  712.                      * <p>Loop through each handle which is being used and executes a callback.</p>
  713.                      * <p>Example:</p>
  714.                      * <pre><code>instance.eachHandle(
  715.                      *      function(handleName, index) { ... }
  716.                      *  );</code></pre>
  717.                      *
  718.                      * @method eachHandle
  719.                      * @param {function} fn Callback function to be executed for each handle.
  720.                      */
  721.                     eachHandle: function(fn) {
  722.                         var instance = this;
  723.             
  724.                         Y.each(
  725.                             instance.get(HANDLES),
  726.                             function(handle, i) {
  727.                                 var handleEl = instance.get(
  728.                                     handleAttrName(handle)
  729.                                 );
  730.             
  731.                                 fn.apply(instance, [handleEl, handle, i]);
  732.                             }
  733.                         );
  734.                     },
  735.             
  736.                     /**
  737.                      * Bind the handles DragDrop events to the Resize instance.
  738.                      *
  739.                      * @method _bindDD
  740.                      * @private
  741.                      */
  742.                     _bindDD: function() {
  743.                         var instance = this;
  744.             
  745.                         instance.delegate = new Y.DD.Delegate(
  746.                             {
  747.                                 bubbleTargets: instance,
  748.                                 container: instance.get(HANDLES_WRAPPER),
  749.                                 dragConfig: {
  750.                                     clickPixelThresh: 0,
  751.                                     clickTimeThresh: 0,
  752.                                     useShim: true,
  753.                                     move: false
  754.                                 },
  755.                                 nodes: DOT+CSS_RESIZE_HANDLE,
  756.                                 target: false
  757.                             }
  758.                         );
  759.             
  760.                         instance._eventHandles.push(
  761.                             instance.on('drag:drag', instance._handleResizeEvent),
  762.                             instance.on('drag:dropmiss', instance._handleMouseUpEvent),
  763.                             instance.on('drag:end', instance._handleResizeEndEvent),
  764.                             instance.on('drag:start', instance._handleResizeStartEvent)
  765.                         );
  766.                     },
  767.             
  768.                     /**
  769.                      * Bind the events related to the handles (_onHandleMouseEnter, _onHandleMouseLeave).
  770.                      *
  771.                      * @method _bindHandle
  772.                      * @private
  773.                      */
  774.                     _bindHandle: function() {
  775.                         var instance = this,
  776.                             wrapper = instance.get(WRAPPER);
  777.             
  778.                         instance._eventHandles.push(
  779.                             wrapper.on('mouseenter', Y.bind(instance._onWrapperMouseEnter, instance)),
  780.                             wrapper.on('mouseleave', Y.bind(instance._onWrapperMouseLeave, instance)),
  781.                             wrapper.delegate('mouseenter', Y.bind(instance._onHandleMouseEnter, instance), DOT+CSS_RESIZE_HANDLE),
  782.                             wrapper.delegate('mouseleave', Y.bind(instance._onHandleMouseLeave, instance), DOT+CSS_RESIZE_HANDLE)
  783.                         );
  784.                     },
  785.             
  786.                     /**
  787.                      * Create the custom events used on the Resize.
  788.                      *
  789.                      * @method _createEvents
  790.                      * @private
  791.                      */
  792.                     _createEvents: function() {
  793.                         var instance = this,
  794.                             // create publish function for kweight optimization
  795.                             publish = function(name, fn) {
  796.                                 instance.publish(name, {
  797.                                     defaultFn: fn,
  798.                                     queuable: false,
  799.                                     emitFacade: true,
  800.                                     bubbles: true,
  801.                                     prefix: RESIZE
  802.                                 });
  803.                             };
  804.             
  805.                         /**
  806.                          * Handles the resize start event. Fired when a handle starts to be
  807.                          * dragged.
  808.                          *
  809.                          * @event resize:start
  810.                          * @preventable _defResizeStartFn
  811.                          * @param {EventFacade} event The resize start event.
  812.                          * @bubbles Resize
  813.                          */
  814.                         publish(EV_RESIZE_START, this._defResizeStartFn);
  815.             
  816.                         /**
  817.                          * Handles the resize event. Fired on each pixel when the handle is
  818.                          * being dragged.
  819.                          *
  820.                          * @event resize:resize
  821.                          * @preventable _defResizeFn
  822.                          * @param {EventFacade} event The resize event.
  823.                          * @bubbles Resize
  824.                          */
  825.                         publish(EV_RESIZE, this._defResizeFn);
  826.             
  827.                         /**
  828.                          * Handles the resize align event.
  829.                          *
  830.                          * @event resize:align
  831.                          * @preventable _defResizeAlignFn
  832.                          * @param {EventFacade} event The resize align event.
  833.                          * @bubbles Resize
  834.                          */
  835.                         publish(EV_RESIZE_ALIGN, this._defResizeAlignFn);
  836.             
  837.                         /**
  838.                          * Handles the resize end event. Fired when a handle stop to be
  839.                          * dragged.
  840.                          *
  841.                          * @event resize:end
  842.                          * @preventable _defResizeEndFn
  843.                          * @param {EventFacade} event The resize end event.
  844.                          * @bubbles Resize
  845.                          */
  846.                         publish(EV_RESIZE_END, this._defResizeEndFn);
  847.             
  848.                         /**
  849.                          * Handles the resize mouseUp event. Fired when a mouseUp event happens on a
  850.                          * handle.
  851.                          *
  852.                          * @event resize:mouseUp
  853.                          * @preventable _defMouseUpFn
  854.                          * @param {EventFacade} event The resize mouseUp event.
  855.                          * @bubbles Resize
  856.                          */
  857.                         publish(EV_MOUSE_UP, this._defMouseUpFn);
  858.                     },
  859.             
  860.                     /**
  861.                       * Responsible for loop each handle element and append to the wrapper.
  862.                       *
  863.                       * @method _renderHandles
  864.                       * @protected
  865.                       */
  866.                     _renderHandles: function() {
  867.                         var instance = this,
  868.                             wrapper = instance.get(WRAPPER),
  869.                             handlesWrapper = instance.get(HANDLES_WRAPPER);
  870.             
  871.                         instance.eachHandle(function(handleEl) {
  872.                             handlesWrapper.append(handleEl);
  873.                         });
  874.             
  875.                         wrapper.append(handlesWrapper);
  876.                     },
  877.             
  878.                     /**
  879.                      * Creates the handle element based on the handle name and initialize the
  880.                      * DragDrop on it.
  881.                      *
  882.                      * @method _buildHandle
  883.                      * @param {String} handle Handle name ('t', 'tr', 'b', ...).
  884.                      * @protected
  885.                      */
  886.                     _buildHandle: function(handle) {
  887.                         var instance = this;
  888.             
  889.                         return Y.Node.create(
  890.                             Y.Lang.sub(instance.HANDLE_TEMPLATE, {
  891.                                 handle: handle
  892.                             })
  893.                         );
  894.                     },
  895.             
  896.                     /**
  897.                      * Basic resize calculations.
  898.                      *
  899.                      * @method _calcResize
  900.                      * @protected
  901.                      */
  902.                     _calcResize: function() {
  903.                         var instance = this,
  904.                             handle = instance.handle,
  905.                             info = instance.info,
  906.                             originalInfo = instance.originalInfo,
  907.             
  908.                             dx = info.actXY[0] - originalInfo.actXY[0],
  909.                             dy = info.actXY[1] - originalInfo.actXY[1];
  910.             
  911.                         if (handle && Y.Resize.RULES[handle]) {
  912.                             Y.Resize.RULES[handle](instance, dx, dy);
  913.                         }
  914.                         else {
  915.                             Y.log('Handle rule not found: ' + handle, 'warn', 'resize');
  916.                         }
  917.                     },
  918.             
  919.                     /**
  920.                      * Helper method to update the current size value on
  921.                      * <a href="Resize.html#property_info">info</a> to respect the
  922.                      * min/max values and fix the top/left calculations.
  923.                      *
  924.                      * @method _checkSize
  925.                      * @param {String} offset 'offsetHeight' or 'offsetWidth'
  926.                      * @param {number} size Size to restrict the offset
  927.                      * @protected
  928.                      */
  929.                     _checkSize: function(offset, size) {
  930.                         var instance = this,
  931.                             info = instance.info,
  932.                             originalInfo = instance.originalInfo,
  933.                             axis = (offset === OFFSET_HEIGHT) ? TOP : LEFT;
  934.             
  935.                         // forcing the offsetHeight/offsetWidth to be the passed size
  936.                         info[offset] = size;
  937.             
  938.                         // predicting, based on the original information, the last left valid in case of reach the min/max dimension
  939.                         // this calculation avoid browser event leaks when user interact very fast
  940.                         if (((axis === LEFT) && instance.changeLeftHandles) ||
  941.                             ((axis === TOP) && instance.changeTopHandles)) {
  942.             
  943.                             info[axis] = originalInfo[axis] + originalInfo[offset] - size;
  944.                         }
  945.                     },
  946.             
  947.                     /**
  948.                      * Copy relevant styles of the <a href="Resize.html#attr_node">node</a>
  949.                      * to the <a href="Resize.html#attr_wrapper">wrapper</a>.
  950.                      *
  951.                      * @method _copyStyles
  952.                      * @param {Node} node Node from.
  953.                      * @param {Node} wrapper Node to.
  954.                      * @protected
  955.                      */
  956.                     _copyStyles: function(node, wrapper) {
  957.                         var position = node.getStyle(POSITION).toLowerCase(),
  958.                             surrounding = this._getBoxSurroundingInfo(node),
  959.                             wrapperStyle;
  960.             
  961.                         // resizable wrapper should be positioned
  962.                         if (position === STATIC) {
  963.                             position = RELATIVE;
  964.                         }
  965.             
  966.                         wrapperStyle = {
  967.                             position: position,
  968.                             left: getCompStyle(node, LEFT),
  969.                             top: getCompStyle(node, TOP)
  970.                         };
  971.             
  972.                         Y.mix(wrapperStyle, surrounding.margin);
  973.                         Y.mix(wrapperStyle, surrounding.border);
  974.             
  975.                         wrapper.setStyles(wrapperStyle);
  976.             
  977.                         // remove margin and border from the internal node
  978.                         node.setStyles({ border: 0, margin: 0 });
  979.             
  980.                         wrapper.sizeTo(
  981.                             node.get(OFFSET_WIDTH) + surrounding.totalHBorder,
  982.                             node.get(OFFSET_HEIGHT) + surrounding.totalVBorder
  983.                         );
  984.                     },
  985.             
  986.                     // extract handle name from a string
  987.                     // using Y.cached to memoize the function for performance
  988.                     _extractHandleName: Y.cached(
  989.                         function(node) {
  990.                             var className = node.get(CLASS_NAME),
  991.             
  992.                                 match = className.match(
  993.                                     new RegExp(
  994.                                         getCN(RESIZE, HANDLE, '(\\w{1,2})\\b')
  995.                                     )
  996.                                 );
  997.             
  998.                             return match ? match[1] : null;
  999.                         }
  1000.                     ),
  1001.             
  1002.                     /**
  1003.                      * <p>Generates metadata to the <a href="Resize.html#property_info">info</a>
  1004.                      * and <a href="Resize.html#property_originalInfo">originalInfo</a></p>
  1005.                      * <pre><code>bottom, actXY, left, top, offsetHeight, offsetWidth, right</code></pre>
  1006.                      *
  1007.                      * @method _getInfo
  1008.                      * @param {Node} node
  1009.                      * @param {EventFacade} event
  1010.                      * @private
  1011.                      */
  1012.                     _getInfo: function(node, event) {
  1013.                         var actXY = [0,0],
  1014.                             drag = event.dragEvent.target,
  1015.                             nodeXY = node.getXY(),
  1016.                             nodeX = nodeXY[0],
  1017.                             nodeY = nodeXY[1],
  1018.                             offsetHeight = node.get(OFFSET_HEIGHT),
  1019.                             offsetWidth = node.get(OFFSET_WIDTH);
  1020.             
  1021.                         if (event) {
  1022.                             // the xy that the node will be set to. Changing this will alter the position as it's dragged.
  1023.                             actXY = (drag.actXY.length ? drag.actXY : drag.lastXY);
  1024.                         }
  1025.             
  1026.                         return {
  1027.                             actXY: actXY,
  1028.                             bottom: (nodeY + offsetHeight),
  1029.                             left: nodeX,
  1030.                             offsetHeight: offsetHeight,
  1031.                             offsetWidth: offsetWidth,
  1032.                             right: (nodeX + offsetWidth),
  1033.                             top: nodeY
  1034.                         };
  1035.                     },
  1036.             
  1037.                     /**
  1038.                      * Each box has a content area and optional surrounding margin,
  1039.                      * padding and * border areas. This method get all this information from
  1040.                      * the passed node. For more reference see
  1041.                      * <a href="http://www.w3.org/TR/CSS21/box.html#box-dimensions">
  1042.                      * http://www.w3.org/TR/CSS21/box.html#box-dimensions</a>.
  1043.                      *
  1044.                      * @method _getBoxSurroundingInfo
  1045.                      * @param {Node} node
  1046.                      * @private
  1047.                      * @return {Object}
  1048.                      */
  1049.                     _getBoxSurroundingInfo: function(node) {
  1050.                         var info = {
  1051.                             padding: {},
  1052.                             margin: {},
  1053.                             border: {}
  1054.                         };
  1055.             
  1056.                         if (isNode(node)) {
  1057.                             Y.each([ TOP, RIGHT, BOTTOM, LEFT ], function(dir) {
  1058.                                 var paddingProperty = capitalize(PADDING, dir),
  1059.                                     marginProperty = capitalize(MARGIN, dir),
  1060.                                     borderWidthProperty = capitalize(BORDER, dir, WIDTH),
  1061.                                     borderColorProperty = capitalize(BORDER, dir, COLOR),
  1062.                                     borderStyleProperty = capitalize(BORDER, dir, STYLE);
  1063.             
  1064.                                 info.border[borderColorProperty] = getCompStyle(node, borderColorProperty);
  1065.                                 info.border[borderStyleProperty] = getCompStyle(node, borderStyleProperty);
  1066.                                 info.border[borderWidthProperty] = getCompStyle(node, borderWidthProperty);
  1067.                                 info.margin[marginProperty] = getCompStyle(node, marginProperty);
  1068.                                 info.padding[paddingProperty] = getCompStyle(node, paddingProperty);
  1069.                             });
  1070.                         }
  1071.             
  1072.                         info.totalHBorder = (toRoundNumber(info.border.borderLeftWidth) + toRoundNumber(info.border.borderRightWidth));
  1073.                         info.totalHPadding = (toRoundNumber(info.padding.paddingLeft) + toRoundNumber(info.padding.paddingRight));
  1074.                         info.totalVBorder = (toRoundNumber(info.border.borderBottomWidth) + toRoundNumber(info.border.borderTopWidth));
  1075.                         info.totalVPadding = (toRoundNumber(info.padding.paddingBottom) + toRoundNumber(info.padding.paddingTop));
  1076.             
  1077.                         return info;
  1078.                     },
  1079.             
  1080.                     /**
  1081.                      * Sync the Resize UI with internal values from
  1082.                      * <a href="Resize.html#property_info">info</a>.
  1083.                      *
  1084.                      * @method _syncUI
  1085.                      * @protected
  1086.                      */
  1087.                     _syncUI: function() {
  1088.                         var instance = this,
  1089.                             info = instance.info,
  1090.                             wrapperSurrounding = instance.wrapperSurrounding,
  1091.                             wrapper = instance.get(WRAPPER),
  1092.                             node = instance.get(NODE);
  1093.             
  1094.                         wrapper.sizeTo(info.offsetWidth, info.offsetHeight);
  1095.             
  1096.                         if (instance.changeLeftHandles || instance.changeTopHandles) {
  1097.                             wrapper.setXY([info.left, info.top]);
  1098.                         }
  1099.             
  1100.                         // if a wrap node is being used
  1101.                         if (!wrapper.compareTo(node)) {
  1102.                             // the original internal node borders were copied to the wrapper on
  1103.                             // _copyStyles, to compensate that subtract the borders from the internal node
  1104.                             node.sizeTo(
  1105.                                 info.offsetWidth - wrapperSurrounding.totalHBorder,
  1106.                                 info.offsetHeight - wrapperSurrounding.totalVBorder
  1107.                             );
  1108.                         }
  1109.             
  1110.                         // prevent webkit textarea resize
  1111.                         if (Y.UA.webkit) {
  1112.                             node.setStyle(RESIZE, NONE);
  1113.                         }
  1114.                     },
  1115.             
  1116.                     /**
  1117.                      * Update <code>instance.changeHeightHandles,
  1118.                      * instance.changeLeftHandles, instance.changeTopHandles,
  1119.                      * instance.changeWidthHandles</code> information.
  1120.                      *
  1121.                      * @method _updateChangeHandleInfo
  1122.                      * @private
  1123.                      */
  1124.                     _updateChangeHandleInfo: function(handle) {
  1125.                         var instance = this;
  1126.             
  1127.                         instance.changeHeightHandles = instance.REGEX_CHANGE_HEIGHT.test(handle);
  1128.                         instance.changeLeftHandles = instance.REGEX_CHANGE_LEFT.test(handle);
  1129.                         instance.changeTopHandles = instance.REGEX_CHANGE_TOP.test(handle);
  1130.                         instance.changeWidthHandles = instance.REGEX_CHANGE_WIDTH.test(handle);
  1131.                     },
  1132.             
  1133.                     /**
  1134.                      * Update <a href="Resize.html#property_info">info</a> values (bottom, actXY, left, top, offsetHeight, offsetWidth, right).
  1135.                      *
  1136.                      * @method _updateInfo
  1137.                      * @private
  1138.                      */
  1139.                     _updateInfo: function(event) {
  1140.                         var instance = this;
  1141.             
  1142.                         instance.info = instance._getInfo(instance.get(WRAPPER), event);
  1143.                     },
  1144.             
  1145.                     /**
  1146.                      * Update properties
  1147.                      * <a href="Resize.html#property_nodeSurrounding">nodeSurrounding</a>,
  1148.                      * <a href="Resize.html#property_nodeSurrounding">wrapperSurrounding</a>,
  1149.                      * <a href="Resize.html#property_nodeSurrounding">totalVSurrounding</a>,
  1150.                      * <a href="Resize.html#property_nodeSurrounding">totalHSurrounding</a>.
  1151.                      *
  1152.                      * @method _updateSurroundingInfo
  1153.                      * @private
  1154.                      */
  1155.                     _updateSurroundingInfo: function() {
  1156.                         var instance = this,
  1157.                             node = instance.get(NODE),
  1158.                             wrapper = instance.get(WRAPPER),
  1159.                             nodeSurrounding = instance._getBoxSurroundingInfo(node),
  1160.                             wrapperSurrounding = instance._getBoxSurroundingInfo(wrapper);
  1161.             
  1162.                         instance.nodeSurrounding = nodeSurrounding;
  1163.                         instance.wrapperSurrounding = wrapperSurrounding;
  1164.             
  1165.                         instance.totalVSurrounding = (nodeSurrounding.totalVPadding + wrapperSurrounding.totalVBorder);
  1166.                         instance.totalHSurrounding = (nodeSurrounding.totalHPadding + wrapperSurrounding.totalHBorder);
  1167.                     },
  1168.             
  1169.                     /**
  1170.                      * Set the active state of the handles.
  1171.                      *
  1172.                      * @method _setActiveHandlesUI
  1173.                      * @param {boolean} val True to activate the handles, false to deactivate.
  1174.                      * @protected
  1175.                      */
  1176.                     _setActiveHandlesUI: function(val) {
  1177.                         var instance = this,
  1178.                             activeHandleNode = instance.get(ACTIVE_HANDLE_NODE);
  1179.             
  1180.                         if (activeHandleNode) {
  1181.                             if (val) {
  1182.                                 // remove CSS_RESIZE_HANDLE_ACTIVE from all handles before addClass on the active
  1183.                                 instance.eachHandle(
  1184.                                     function(handleEl) {
  1185.                                         handleEl.removeClass(CSS_RESIZE_HANDLE_ACTIVE);
  1186.                                     }
  1187.                                 );
  1188.             
  1189.                                 activeHandleNode.addClass(CSS_RESIZE_HANDLE_ACTIVE);
  1190.                             }
  1191.                             else {
  1192.                                 activeHandleNode.removeClass(CSS_RESIZE_HANDLE_ACTIVE);
  1193.                             }
  1194.                         }
  1195.                     },
  1196.             
  1197.                     /**
  1198.                      * Setter for the handles attribute
  1199.                      *
  1200.                      * @method _setHandles
  1201.                      * @protected
  1202.                      * @param {String} val
  1203.                      */
  1204.                     _setHandles: function(val) {
  1205.                         var instance = this,
  1206.                             handles = [];
  1207.             
  1208.                         // handles attr accepts both array or string
  1209.                         if (isArray(val)) {
  1210.                             handles = val;
  1211.                         }
  1212.                         else if (isString(val)) {
  1213.                             // if the handles attr passed in is an ALL string...
  1214.                             if (val.toLowerCase() === ALL) {
  1215.                                 handles = instance.ALL_HANDLES;
  1216.                             }
  1217.                             // otherwise, split the string to extract the handles
  1218.                             else {
  1219.                                 Y.each(
  1220.                                     val.split(COMMA),
  1221.                                     function(node) {
  1222.                                         var handle = trim(node);
  1223.             
  1224.                                         // if its a valid handle, add it to the handles output
  1225.                                         if (indexOf(instance.ALL_HANDLES, handle) > -1) {
  1226.                                             handles.push(handle);
  1227.                                         }
  1228.                                     }
  1229.                                 );
  1230.                             }
  1231.                         }
  1232.             
  1233.                         return handles;
  1234.                     },
  1235.             
  1236.                     /**
  1237.                      * Set the visibility of the handles.
  1238.                      *
  1239.                      * @method _setHideHandlesUI
  1240.                      * @param {boolean} val True to hide the handles, false to show.
  1241.                      * @protected
  1242.                      */
  1243.                     _setHideHandlesUI: function(val) {
  1244.                         var instance = this,
  1245.                             wrapper = instance.get(WRAPPER);
  1246.             
  1247.                         if (!instance.get(RESIZING)) {
  1248.                             if (val) {
  1249.                                 wrapper.addClass(CSS_RESIZE_HIDDEN_HANDLES);
  1250.                             }
  1251.                             else {
  1252.                                 wrapper.removeClass(CSS_RESIZE_HIDDEN_HANDLES);
  1253.                             }
  1254.                         }
  1255.                     },
  1256.             
  1257.                     /**
  1258.                      * Setter for the wrap attribute
  1259.                      *
  1260.                      * @method _setWrap
  1261.                      * @protected
  1262.                      * @param {boolean} val
  1263.                      */
  1264.                     _setWrap: function(val) {
  1265.                         var instance = this,
  1266.                             node = instance.get(NODE),
  1267.                             nodeName = node.get(NODE_NAME),
  1268.                             typeRegex = instance.get(WRAP_TYPES);
  1269.             
  1270.                         // if nodeName is listed on WRAP_TYPES force use the wrapper
  1271.                         if (typeRegex.test(nodeName)) {
  1272.                             val = true;
  1273.                         }
  1274.             
  1275.                         return val;
  1276.                     },
  1277.             
  1278.                     /**
  1279.                      * Default resize:mouseUp handler
  1280.                      *
  1281.                      * @method _defMouseUpFn
  1282.                      * @param {EventFacade} event The Event object
  1283.                      * @protected
  1284.                      */
  1285.                     _defMouseUpFn: function() {
  1286.                         var instance = this;
  1287.             
  1288.                         instance.set(RESIZING, false);
  1289.                     },
  1290.             
  1291.                     /**
  1292.                      * Default resize:resize handler
  1293.                      *
  1294.                      * @method _defResizeFn
  1295.                      * @param {EventFacade} event The Event object
  1296.                      * @protected
  1297.                      */
  1298.                     _defResizeFn: function(event) {
  1299.                         var instance = this;
  1300.             
  1301.                         instance._resize(event);
  1302.                     },
  1303.             
  1304.                     /**
  1305.                      * Logic method for _defResizeFn. Allow AOP.
  1306.                      *
  1307.                      * @method _resize
  1308.                      * @param {EventFacade} event The Event object
  1309.                      * @protected
  1310.                      */
  1311.                     _resize: function(event) {
  1312.                         var instance = this;
  1313.             
  1314.                         instance._handleResizeAlignEvent(event.dragEvent);
  1315.             
  1316.                         // _syncUI of the wrapper, not using proxy
  1317.                         instance._syncUI();
  1318.                     },
  1319.             
  1320.                     /**
  1321.                      * Default resize:align handler
  1322.                      *
  1323.                      * @method _defResizeAlignFn
  1324.                      * @param {EventFacade} event The Event object
  1325.                      * @protected
  1326.                      */
  1327.                     _defResizeAlignFn: function(event) {
  1328.                         var instance = this;
  1329.             
  1330.                         instance._resizeAlign(event);
  1331.                     },
  1332.             
  1333.                     /**
  1334.                      * Logic method for _defResizeAlignFn. Allow AOP.
  1335.                      *
  1336.                      * @method _resizeAlign
  1337.                      * @param {EventFacade} event The Event object
  1338.                      * @protected
  1339.                      */
  1340.                     _resizeAlign: function(event) {
  1341.                         var instance = this,
  1342.                             info,
  1343.                             defMinHeight,
  1344.                             defMinWidth;
  1345.             
  1346.                         instance.lastInfo = instance.info;
  1347.             
  1348.                         // update the instance.info values
  1349.                         instance._updateInfo(event);
  1350.             
  1351.                         info = instance.info;
  1352.             
  1353.                         // basic resize calculations
  1354.                         instance._calcResize();
  1355.             
  1356.                         // if Y.Plugin.ResizeConstrained is not plugged, check for min dimension
  1357.                         if (!instance.con) {
  1358.                             defMinHeight = (instance.get(DEF_MIN_HEIGHT) + instance.totalVSurrounding);
  1359.                             defMinWidth = (instance.get(DEF_MIN_WIDTH) + instance.totalHSurrounding);
  1360.             
  1361.                             if (info.offsetHeight <= defMinHeight) {
  1362.                                 instance._checkSize(OFFSET_HEIGHT, defMinHeight);
  1363.                             }
  1364.             
  1365.                             if (info.offsetWidth <= defMinWidth) {
  1366.                                 instance._checkSize(OFFSET_WIDTH, defMinWidth);
  1367.                             }
  1368.                         }
  1369.                     },
  1370.             
  1371.                     /**
  1372.                      * Default resize:end handler
  1373.                      *
  1374.                      * @method _defResizeEndFn
  1375.                      * @param {EventFacade} event The Event object
  1376.                      * @protected
  1377.                      */
  1378.                     _defResizeEndFn: function(event) {
  1379.                         var instance = this;
  1380.             
  1381.                         instance._resizeEnd(event);
  1382.                     },
  1383.             
  1384.                     /**
  1385.                      * Logic method for _defResizeEndFn. Allow AOP.
  1386.                      *
  1387.                      * @method _resizeEnd
  1388.                      * @param {EventFacade} event The Event object
  1389.                      * @protected
  1390.                      */
  1391.                     _resizeEnd: function(event) {
  1392.                         var instance = this,
  1393.                             drag = event.dragEvent.target;
  1394.             
  1395.                         // reseting actXY from drag when drag end
  1396.                         drag.actXY = [];
  1397.             
  1398.                         // syncUI when resize end
  1399.                         instance._syncUI();
  1400.             
  1401.                         instance._setActiveHandlesUI(false);
  1402.             
  1403.                         instance.set(ACTIVE_HANDLE, null);
  1404.                         instance.set(ACTIVE_HANDLE_NODE, null);
  1405.             
  1406.                         instance.handle = null;
  1407.                     },
  1408.             
  1409.                     /**
  1410.                      * Default resize:start handler
  1411.                      *
  1412.                      * @method _defResizeStartFn
  1413.                      * @param {EventFacade} event The Event object
  1414.                      * @protected
  1415.                      */
  1416.                     _defResizeStartFn: function(event) {
  1417.                         var instance = this;
  1418.             
  1419.                         instance._resizeStart(event);
  1420.                     },
  1421.             
  1422.                     /**
  1423.                      * Logic method for _defResizeStartFn. Allow AOP.
  1424.                      *
  1425.                      * @method _resizeStart
  1426.                      * @param {EventFacade} event The Event object
  1427.                      * @protected
  1428.                      */
  1429.                     _resizeStart: function(event) {
  1430.                         var instance = this,
  1431.                             wrapper = instance.get(WRAPPER);
  1432.             
  1433.                         instance.handle = instance.get(ACTIVE_HANDLE);
  1434.             
  1435.                         instance.set(RESIZING, true);
  1436.             
  1437.                         instance._updateSurroundingInfo();
  1438.             
  1439.                         // create an originalInfo information for reference
  1440.                         instance.originalInfo = instance._getInfo(wrapper, event);
  1441.             
  1442.                         instance._updateInfo(event);
  1443.                     },
  1444.             
  1445.                     /**
  1446.                      * Fires the resize:mouseUp event.
  1447.                      *
  1448.                      * @method _handleMouseUpEvent
  1449.                      * @param {EventFacade} event resize:mouseUp event facade
  1450.                      * @protected
  1451.                      */
  1452.                     _handleMouseUpEvent: function(event) {
  1453.                         this.fire(EV_MOUSE_UP, { dragEvent: event, info: this.info });
  1454.                     },
  1455.             
  1456.                     /**
  1457.                      * Fires the resize:resize event.
  1458.                      *
  1459.                      * @method _handleResizeEvent
  1460.                      * @param {EventFacade} event resize:resize event facade
  1461.                      * @protected
  1462.                      */
  1463.                     _handleResizeEvent: function(event) {
  1464.                         this.fire(EV_RESIZE, { dragEvent: event, info: this.info });
  1465.                     },
  1466.             
  1467.                     /**
  1468.                      * Fires the resize:align event.
  1469.                      *
  1470.                      * @method _handleResizeAlignEvent
  1471.                      * @param {EventFacade} event resize:resize event facade
  1472.                      * @protected
  1473.                      */
  1474.                     _handleResizeAlignEvent: function(event) {
  1475.                         this.fire(EV_RESIZE_ALIGN, { dragEvent: event, info: this.info });
  1476.                     },
  1477.             
  1478.                     /**
  1479.                      * Fires the resize:end event.
  1480.                      *
  1481.                      * @method _handleResizeEndEvent
  1482.                      * @param {EventFacade} event resize:end event facade
  1483.                      * @protected
  1484.                      */
  1485.                     _handleResizeEndEvent: function(event) {
  1486.                         this.fire(EV_RESIZE_END, { dragEvent: event, info: this.info });
  1487.                     },
  1488.             
  1489.                     /**
  1490.                      * Fires the resize:start event.
  1491.                      *
  1492.                      * @method _handleResizeStartEvent
  1493.                      * @param {EventFacade} event resize:start event facade
  1494.                      * @protected
  1495.                      */
  1496.                     _handleResizeStartEvent: function(event) {
  1497.                         if (!this.get(ACTIVE_HANDLE)) {
  1498.                             //This handles the "touch" case
  1499.                             this._setHandleFromNode(event.target.get('node'));
  1500.                         }
  1501.                         this.fire(EV_RESIZE_START, { dragEvent: event, info: this.info });
  1502.                     },
  1503.             
  1504.                     /**
  1505.                      * Mouseenter event handler for the <a href="Resize.html#attr_wrapper">wrapper</a>.
  1506.                      *
  1507.                      * @method _onWrapperMouseEnter
  1508.                      * @param {EventFacade} event
  1509.                      * @protected
  1510.                      */
  1511.                     _onWrapperMouseEnter: function() {
  1512.                         var instance = this;
  1513.             
  1514.                         if (instance.get(AUTO_HIDE)) {
  1515.                             instance._setHideHandlesUI(false);
  1516.                         }
  1517.                     },
  1518.             
  1519.                     /**
  1520.                      * Mouseleave event handler for the <a href="Resize.html#attr_wrapper">wrapper</a>.
  1521.                      *
  1522.                      * @method _onWrapperMouseLeave
  1523.                      * @param {EventFacade} event
  1524.                      * @protected
  1525.                      */
  1526.                     _onWrapperMouseLeave: function() {
  1527.                         var instance = this;
  1528.             
  1529.                         if (instance.get(AUTO_HIDE)) {
  1530.                             instance._setHideHandlesUI(true);
  1531.                         }
  1532.                     },
  1533.             
  1534.                     /**
  1535.                      * Handles setting the activeHandle from a node, used from startDrag (for touch) and mouseenter (for mouse).
  1536.                      *
  1537.                      * @method _setHandleFromNode
  1538.                      * @param {Node} node
  1539.                      * @protected
  1540.                      */
  1541.                     _setHandleFromNode: function(node) {
  1542.                         var instance = this,
  1543.                             handle = instance._extractHandleName(node);
  1544.             
  1545.                         if (!instance.get(RESIZING)) {
  1546.                             instance.set(ACTIVE_HANDLE, handle);
  1547.                             instance.set(ACTIVE_HANDLE_NODE, node);
  1548.             
  1549.                             instance._setActiveHandlesUI(true);
  1550.                             instance._updateChangeHandleInfo(handle);
  1551.                         }
  1552.                     },
  1553.             
  1554.                     /**
  1555.                      * Mouseenter event handler for the handles.
  1556.                      *
  1557.                      * @method _onHandleMouseEnter
  1558.                      * @param {EventFacade} event
  1559.                      * @protected
  1560.                      */
  1561.                     _onHandleMouseEnter: function(event) {
  1562.                         this._setHandleFromNode(event.currentTarget);
  1563.                     },
  1564.             
  1565.                     /**
  1566.                      * Mouseout event handler for the handles.
  1567.                      *
  1568.                      * @method _onHandleMouseLeave
  1569.                      * @param {EventFacade} event
  1570.                      * @protected
  1571.                      */
  1572.                     _onHandleMouseLeave: function() {
  1573.                         var instance = this;
  1574.             
  1575.                         if (!instance.get(RESIZING)) {
  1576.                             instance._setActiveHandlesUI(false);
  1577.                         }
  1578.                     },
  1579.             
  1580.                     /**
  1581.                      * Default value for the wrapper handles node attribute
  1582.                      *
  1583.                      * @method _valueHandlesWrapper
  1584.                      * @protected
  1585.                      * @readOnly
  1586.                      */
  1587.                     _valueHandlesWrapper: function() {
  1588.                         return Y.Node.create(this.HANDLES_WRAP_TEMPLATE);
  1589.                     },
  1590.             
  1591.                     /**
  1592.                      * Default value for the wrapper attribute
  1593.                      *
  1594.                      * @method _valueWrapper
  1595.                      * @protected
  1596.                      * @readOnly
  1597.                      */
  1598.                     _valueWrapper: function() {
  1599.                         var instance = this,
  1600.                             node = instance.get(NODE),
  1601.                             pNode = node.get(PARENT_NODE),
  1602.                             // by deafult the wrapper is always the node
  1603.                             wrapper = node;
  1604.             
  1605.                         // if the node is listed on the wrapTypes or wrap is set to true, create another wrapper
  1606.                         if (instance.get(WRAP)) {
  1607.                             wrapper = Y.Node.create(instance.WRAP_TEMPLATE);
  1608.             
  1609.                             if (pNode) {
  1610.                                 pNode.insertBefore(wrapper, node);
  1611.                             }
  1612.             
  1613.                             wrapper.append(node);
  1614.             
  1615.                             instance._copyStyles(node, wrapper);
  1616.             
  1617.                             // remove positioning of wrapped node, the WRAPPER take care about positioning
  1618.                             node.setStyles({
  1619.                                 position: STATIC,
  1620.                                 left: 0,
  1621.                                 top: 0
  1622.                             });
  1623.                         }
  1624.             
  1625.                         return wrapper;
  1626.                     }
  1627.                 }
  1628.             );
  1629.             
  1630.             Y.each(Y.Resize.prototype.ALL_HANDLES, function(handle) {
  1631.                 // creating ATTRS with the handles elements
  1632.                 Y.Resize.ATTRS[handleAttrName(handle)] = {
  1633.                     setter: function() {
  1634.                         return this._buildHandle(handle);
  1635.                     },
  1636.                     value: null,
  1637.                     writeOnce: true
  1638.                 };
  1639.             });
  1640.             
  1641.