Proyectos de Subversion Moodle

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

/**

 * The Resize Utility allows you to make an HTML element resizable.

 * @module resize

 * @main resize

 */

var Lang = Y.Lang,

    isArray = Lang.isArray,

    isBoolean = Lang.isBoolean,

    isNumber = Lang.isNumber,

    isString = Lang.isString,

    yArray  = Y.Array,

    trim = Lang.trim,

    indexOf = yArray.indexOf,

    COMMA = ',',

    DOT = '.',

    EMPTY_STR = '',

    HANDLE_SUB = '{handle}',

    SPACE = ' ',

    ACTIVE = 'active',

    ACTIVE_HANDLE = 'activeHandle',

    ACTIVE_HANDLE_NODE = 'activeHandleNode',

    ALL = 'all',

    AUTO_HIDE = 'autoHide',

    BORDER = 'border',

    BOTTOM = 'bottom',

    CLASS_NAME = 'className',

    COLOR = 'color',

    DEF_MIN_HEIGHT = 'defMinHeight',

    DEF_MIN_WIDTH = 'defMinWidth',

    HANDLE = 'handle',

    HANDLES = 'handles',

    HANDLES_WRAPPER = 'handlesWrapper',

    HIDDEN = 'hidden',

    INNER = 'inner',

    LEFT = 'left',

    MARGIN = 'margin',

    NODE = 'node',

    NODE_NAME = 'nodeName',

    NONE = 'none',

    OFFSET_HEIGHT = 'offsetHeight',

    OFFSET_WIDTH = 'offsetWidth',

    PADDING = 'padding',

    PARENT_NODE = 'parentNode',

    POSITION = 'position',

    RELATIVE = 'relative',

    RESIZE = 'resize',

    RESIZING = 'resizing',

    RIGHT = 'right',

    STATIC = 'static',

    STYLE = 'style',

    TOP = 'top',

    WIDTH = 'width',

    WRAP = 'wrap',

    WRAPPER = 'wrapper',

    WRAP_TYPES = 'wrapTypes',

    EV_MOUSE_UP = 'resize:mouseUp',

    EV_RESIZE = 'resize:resize',

    EV_RESIZE_ALIGN = 'resize:align',

    EV_RESIZE_END = 'resize:end',

    EV_RESIZE_START = 'resize:start',

    T = 't',

    TR = 'tr',

    R = 'r',

    BR = 'br',

    B = 'b',

    BL = 'bl',

    L = 'l',

    TL = 'tl',

    concat = function() {

        return Array.prototype.slice.call(arguments).join(SPACE);

    },

    // round the passed number to get rid of pixel-flickering

    toRoundNumber = function(num) {

        return Math.round(parseFloat(num)) || 0;

    },

    getCompStyle = function(node, val) {

        return node.getComputedStyle(val);

    },

    handleAttrName = function(handle) {

        return HANDLE + handle.toUpperCase();

    },

    isNode = function(v) {

        return (v instanceof Y.Node);

    },

    toInitialCap = Y.cached(

        function(str) {

            return str.substring(0, 1).toUpperCase() + str.substring(1);

        }

    ),

    capitalize = Y.cached(function() {

        var out = [],

            args = yArray(arguments, 0, true);

        yArray.each(args, function(part, i) {

            if (i > 0) {

                part = toInitialCap(part);

            }

            out.push(part);

        });

        return out.join(EMPTY_STR);

    }),

    getCN = Y.ClassNameManager.getClassName,

    CSS_RESIZE = getCN(RESIZE),

    CSS_RESIZE_HANDLE = getCN(RESIZE, HANDLE),

    CSS_RESIZE_HANDLE_ACTIVE = getCN(RESIZE, HANDLE, ACTIVE),

    CSS_RESIZE_HANDLE_INNER = getCN(RESIZE, HANDLE, INNER),

    CSS_RESIZE_HANDLE_INNER_PLACEHOLDER = getCN(RESIZE, HANDLE, INNER, HANDLE_SUB),

    CSS_RESIZE_HANDLE_PLACEHOLDER = getCN(RESIZE, HANDLE, HANDLE_SUB),

    CSS_RESIZE_HIDDEN_HANDLES = getCN(RESIZE, HIDDEN, HANDLES),

    CSS_RESIZE_HANDLES_WRAPPER = getCN(RESIZE, HANDLES, WRAPPER),

    CSS_RESIZE_WRAPPER = getCN(RESIZE, WRAPPER);

/**

A base class for Resize, providing:

   * Basic Lifecycle (initializer, renderUI, bindUI, syncUI, destructor)

   * Applies drag handles to an element to make it resizable

   * Here is the list of valid resize handles:

       `[ 't', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl' ]`. You can

       read this list as top, top-right, right, bottom-right, bottom,

       bottom-left, left, top-left.

   * The drag handles are inserted into the element and positioned

       absolute. Some elements, such as a textarea or image, don't support

       children. To overcome that, set wrap:true in your config and the

       element willbe wrapped for you automatically.

Quick Example:

    var instance = new Y.Resize({

        node: '#resize1',

        preserveRatio: true,

        wrap: true,

        maxHeight: 170,

        maxWidth: 400,

        handles: 't, tr, r, br, b, bl, l, tl'

    });

Check the list of <a href="Resize.html#attrs">Configuration Attributes</a> available for

Resize.

@class Resize

@param config {Object} Object literal specifying widget configuration properties.

@constructor

@extends Base

*/

function Resize() {

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

}

Y.mix(Resize, {

    /**

     * Static property provides a string to identify the class.

     *

     * @property NAME

     * @type String

     * @static

     */

    NAME: RESIZE,

    /**

     * Static property used to define the default attribute

     * configuration for the Resize.

     *

     * @property ATTRS

     * @type Object

     * @static

     */

    ATTRS: {

        /**

         * Stores the active handle during the resize.

         *

         * @attribute activeHandle

         * @default null

         * @private

         * @type String

         */

        activeHandle: {

            value: null,

            validator: function(v) {

                return Y.Lang.isString(v) || Y.Lang.isNull(v);

            }

        },

        /**

         * Stores the active handle element during the resize.

         *

         * @attribute activeHandleNode

         * @default null

         * @private

         * @type Node

         */

        activeHandleNode: {

            value: null,

            validator: isNode

        },

        /**

         * False to ensure that the resize handles are always visible, true to

         * display them only when the user mouses over the resizable borders.

         *

         * @attribute autoHide

         * @default false

         * @type boolean

         */

        autoHide: {

            value: false,

            validator: isBoolean

        },

        /**

         * The default minimum height of the element. Only used when

         * ResizeConstrained is not plugged.

         *

         * @attribute defMinHeight

         * @default 15

         * @type Number

         */

        defMinHeight: {

            value: 15,

            validator: isNumber

        },

        /**

         * The default minimum width of the element. Only used when

         * ResizeConstrained is not plugged.

         *

         * @attribute defMinWidth

         * @default 15

         * @type Number

         */

        defMinWidth: {

            value: 15,

            validator: isNumber

        },

        /**

         * The handles to use (any combination of): 't', 'b', 'r', 'l', 'bl',

         * 'br', 'tl', 'tr'. Can use a shortcut of All.

         *

         * @attribute handles

         * @default all

         * @type Array | String

         */

        handles: {

            setter: '_setHandles',

            value: ALL

        },

        /**

         * Node to wrap the resize handles.

         *

         * @attribute handlesWrapper

         * @type Node

         */

        handlesWrapper: {

            readOnly: true,

            setter: Y.one,

            valueFn: '_valueHandlesWrapper'

        },

        /**

         * The selector or element to resize. Required.

         *

         * @attribute node

         * @type Node

         */

        node: {

            setter: Y.one

        },

        /**

         * True when the element is being Resized.

         *

         * @attribute resizing

         * @default false

         * @type boolean

         */

        resizing: {

            value: false,

            validator: isBoolean

        },

        /**

         * True to wrap an element with a div if needed (required for textareas

         * and images, defaults to false) in favor of the handles config option.

         * The wrapper element type (default div) could be over-riden passing the

         * <code>wrapper</code> attribute.

         *

         * @attribute wrap

         * @default false

         * @type boolean

         */

        wrap: {

            setter: '_setWrap',

            value: false,

            validator: isBoolean

        },

        /**

         * Elements that requires a wrapper by default. Normally are elements

         * which cannot have children elements.

         *

         * @attribute wrapTypes

         * @default /canvas|textarea|input|select|button|img/i

         * @readOnly

         * @type Regex

         */

        wrapTypes: {

            readOnly: true,

            value: /^canvas|textarea|input|select|button|img|iframe|table|embed$/i

        },

        /**

         * Element to wrap the <code>wrapTypes</code>. This element will house

         * the handles elements.

         *

         * @attribute wrapper

         * @default div

         * @type String | Node

         * @writeOnce

         */

        wrapper: {

            readOnly: true,

            valueFn: '_valueWrapper',

            writeOnce: true

        }

    },

    RULES: {

        b: function(instance, dx, dy) {

            var info = instance.info,

                originalInfo = instance.originalInfo;

            info.offsetHeight = originalInfo.offsetHeight + dy;

        },

        l: function(instance, dx) {

            var info = instance.info,

                originalInfo = instance.originalInfo;

            info.left = originalInfo.left + dx;

            info.offsetWidth = originalInfo.offsetWidth - dx;

        },

        r: function(instance, dx) {

            var info = instance.info,

                originalInfo = instance.originalInfo;

            info.offsetWidth = originalInfo.offsetWidth + dx;

        },

        t: function(instance, dx, dy) {

            var info = instance.info,

                originalInfo = instance.originalInfo;

            info.top = originalInfo.top + dy;

            info.offsetHeight = originalInfo.offsetHeight - dy;

        },

        tr: function() {

            this.t.apply(this, arguments);

            this.r.apply(this, arguments);

        },

        bl: function() {

            this.b.apply(this, arguments);

            this.l.apply(this, arguments);

        },

        br: function() {

            this.b.apply(this, arguments);

            this.r.apply(this, arguments);

        },

        tl: function() {

            this.t.apply(this, arguments);

            this.l.apply(this, arguments);

        }

    },

    capitalize: capitalize

});

Y.Resize = Y.extend(

    Resize,

    Y.Base,

    {

        /**

         * Array containing all possible resizable handles.

         *

         * @property ALL_HANDLES

         * @type {String}

         */

        ALL_HANDLES: [ T, TR, R, BR, B, BL, L, TL ],

        /**

         * Regex which matches with the handles that could change the height of

         * the resizable element.

         *

         * @property REGEX_CHANGE_HEIGHT

         * @type {String}

         */

        REGEX_CHANGE_HEIGHT: /^(t|tr|b|bl|br|tl)$/i,

        /**

         * Regex which matches with the handles that could change the left of

         * the resizable element.

         *

         * @property REGEX_CHANGE_LEFT

         * @type {String}

         */

        REGEX_CHANGE_LEFT: /^(tl|l|bl)$/i,

        /**

         * Regex which matches with the handles that could change the top of

         * the resizable element.

         *

         * @property REGEX_CHANGE_TOP

         * @type {String}

         */

        REGEX_CHANGE_TOP: /^(tl|t|tr)$/i,

        /**

         * Regex which matches with the handles that could change the width of

         * the resizable element.

         *

         * @property REGEX_CHANGE_WIDTH

         * @type {String}

         */

        REGEX_CHANGE_WIDTH: /^(bl|br|l|r|tl|tr)$/i,

        /**

         * Template used to create the resize wrapper for the handles.

         *

         * @property HANDLES_WRAP_TEMPLATE

         * @type {String}

         */

        HANDLES_WRAP_TEMPLATE: '<div class="'+CSS_RESIZE_HANDLES_WRAPPER+'"></div>',

        /**

         * Template used to create the resize wrapper node when needed.

         *

         * @property WRAP_TEMPLATE

         * @type {String}

         */

        WRAP_TEMPLATE: '<div class="'+CSS_RESIZE_WRAPPER+'"></div>',

        /**

         * Template used to create each resize handle.

         *

         * @property HANDLE_TEMPLATE

         * @type {String}

         */

        HANDLE_TEMPLATE: '<div class="'+concat(CSS_RESIZE_HANDLE, CSS_RESIZE_HANDLE_PLACEHOLDER)+'">' +

                            '<div class="'+concat(CSS_RESIZE_HANDLE_INNER, CSS_RESIZE_HANDLE_INNER_PLACEHOLDER)+'">&nbsp;</div>' +

                        '</div>',

        /**

         * Each box has a content area and optional surrounding padding and

         * border areas. This property stores the sum of all horizontal

         * surrounding * information needed to adjust the node height.

         *

         * @property totalHSurrounding

         * @default 0

         * @type number

         */

        totalHSurrounding: 0,

        /**

         * Each box has a content area and optional surrounding padding and

         * border areas. This property stores the sum of all vertical

         * surrounding * information needed to adjust the node height.

         *

         * @property totalVSurrounding

         * @default 0

         * @type number

         */

        totalVSurrounding: 0,

        /**

         * Stores the <a href="Resize.html#attr_node">node</a>

         * surrounding information retrieved from

         * <a href="Resize.html#method__getBoxSurroundingInfo">_getBoxSurroundingInfo</a>.

         *

         * @property nodeSurrounding

         * @type Object

         * @default null

         */

        nodeSurrounding: null,

        /**

         * Stores the <a href="Resize.html#attr_wrapper">wrapper</a>

         * surrounding information retrieved from

         * <a href="Resize.html#method__getBoxSurroundingInfo">_getBoxSurroundingInfo</a>.

         *

         * @property wrapperSurrounding

         * @type Object

         * @default null

         */

        wrapperSurrounding: null,

        /**

         * Whether the handle being dragged can change the height.

         *

         * @property changeHeightHandles

         * @default false

         * @type boolean

         */

        changeHeightHandles: false,

        /**

         * Whether the handle being dragged can change the left.

         *

         * @property changeLeftHandles

         * @default false

         * @type boolean

         */

        changeLeftHandles: false,

        /**

         * Whether the handle being dragged can change the top.

         *

         * @property changeTopHandles

         * @default false

         * @type boolean

         */

        changeTopHandles: false,

        /**

         * Whether the handle being dragged can change the width.

         *

         * @property changeWidthHandles

         * @default false

         * @type boolean

         */

        changeWidthHandles: false,

        /**

         * Store DD.Delegate reference for the respective Resize instance.

         *

         * @property delegate

         * @default null

         * @type Object

         */

        delegate: null,

        /**

         * Stores the current values for the height, width, top and left. You are

         * able to manipulate these values on resize in order to change the resize

         * behavior.

         *

         * @property info

         * @type Object

         * @protected

         */

        info: null,

        /**

         * Stores the last values for the height, width, top and left.

         *

         * @property lastInfo

         * @type Object

         * @protected

         */

        lastInfo: null,

        /**

         * Stores the original values for the height, width, top and left, stored

         * on resize start.

         *

         * @property originalInfo

         * @type Object

         * @protected

         */

        originalInfo: null,

        /**

         * Construction logic executed during Resize instantiation. Lifecycle.

         *

         * @method initializer

         * @protected

         */

        initializer: function() {

            this._eventHandles = [];

            this.renderer();

        },

        /**

         * Create the DOM structure for the Resize. Lifecycle.

         *

         * @method renderUI

         * @protected

         */

        renderUI: function() {

            var instance = this;

            instance._renderHandles();

        },

        /**

         * Bind the events on the Resize UI. Lifecycle.

         *

         * @method bindUI

         * @protected

         */

        bindUI: function() {

            var instance = this;

            instance._createEvents();

            instance._bindDD();

            instance._bindHandle();

        },

        /**

         * Sync the Resize UI.

         *

         * @method syncUI

         * @protected

         */

        syncUI: function() {

            var instance = this;

            this.get(NODE).addClass(CSS_RESIZE);

            // hide handles if AUTO_HIDE is true

            instance._setHideHandlesUI(

                instance.get(AUTO_HIDE)

            );

        },

        /**

         * Destructor lifecycle implementation for the Resize class.

         * Detaches all previously attached listeners and removes the Resize handles.

         *

         * @method destructor

         * @protected

         */

        destructor: function() {

            var instance = this,

                node = instance.get(NODE),

                wrapper = instance.get(WRAPPER),

                pNode = wrapper.get(PARENT_NODE);

            Y.each(

                instance._eventHandles,

                function(handle) {

                    handle.detach();

                }

            );

            instance._eventHandles.length = 0;

            // destroy handles dd and remove them from the dom

            instance.eachHandle(function(handleEl) {

                instance.delegate.dd.destroy();

                // remove handle

                handleEl.remove(true);

            });

            instance.delegate.destroy();

            // unwrap node

            if (instance.get(WRAP)) {

                instance._copyStyles(wrapper, node);

                if (pNode) {

                    pNode.insertBefore(node, wrapper);

                }

                wrapper.remove(true);

            }

            node.removeClass(CSS_RESIZE);

            node.removeClass(CSS_RESIZE_HIDDEN_HANDLES);

        },

        /**

         * Creates DOM (or manipulates DOM for progressive enhancement)

         * This method is invoked by initializer(). It's chained automatically for

         * subclasses if required.

         *

         * @method renderer

         * @protected

         */

        renderer: function() {

            this.renderUI();

            this.bindUI();

            this.syncUI();

        },

        /**

         * <p>Loop through each handle which is being used and executes a callback.</p>

         * <p>Example:</p>

         * <pre><code>instance.eachHandle(

         *      function(handleName, index) { ... }

         *  );</code></pre>

         *

         * @method eachHandle

         * @param {function} fn Callback function to be executed for each handle.

         */

        eachHandle: function(fn) {

            var instance = this;

            Y.each(

                instance.get(HANDLES),

                function(handle, i) {

                    var handleEl = instance.get(

                        handleAttrName(handle)

                    );

                    fn.apply(instance, [handleEl, handle, i]);

                }

            );

        },

        /**

         * Bind the handles DragDrop events to the Resize instance.

         *

         * @method _bindDD

         * @private

         */

        _bindDD: function() {

            var instance = this;

            instance.delegate = new Y.DD.Delegate(

                {

                    bubbleTargets: instance,

                    container: instance.get(HANDLES_WRAPPER),

                    dragConfig: {

                        clickPixelThresh: 0,

                        clickTimeThresh: 0,

                        useShim: true,

                        move: false

                    },

                    nodes: DOT+CSS_RESIZE_HANDLE,

                    target: false

                }

            );

            instance._eventHandles.push(

                instance.on('drag:drag', instance._handleResizeEvent),

                instance.on('drag:dropmiss', instance._handleMouseUpEvent),

                instance.on('drag:end', instance._handleResizeEndEvent),

                instance.on('drag:start', instance._handleResizeStartEvent)

            );

        },

        /**

         * Bind the events related to the handles (_onHandleMouseEnter, _onHandleMouseLeave).

         *

         * @method _bindHandle

         * @private

         */

        _bindHandle: function() {

            var instance = this,

                wrapper = instance.get(WRAPPER);

            instance._eventHandles.push(

                wrapper.on('mouseenter', Y.bind(instance._onWrapperMouseEnter, instance)),

                wrapper.on('mouseleave', Y.bind(instance._onWrapperMouseLeave, instance)),

                wrapper.delegate('mouseenter', Y.bind(instance._onHandleMouseEnter, instance), DOT+CSS_RESIZE_HANDLE),

                wrapper.delegate('mouseleave', Y.bind(instance._onHandleMouseLeave, instance), DOT+CSS_RESIZE_HANDLE)

            );

        },

        /**

         * Create the custom events used on the Resize.

         *

         * @method _createEvents

         * @private

         */

        _createEvents: function() {

            var instance = this,

                // create publish function for kweight optimization

                publish = function(name, fn) {

                    instance.publish(name, {

                        defaultFn: fn,

                        queuable: false,

                        emitFacade: true,

                        bubbles: true,

                        prefix: RESIZE

                    });

                };

            /**

             * Handles the resize start event. Fired when a handle starts to be

             * dragged.

             *

             * @event resize:start

             * @preventable _defResizeStartFn

             * @param {EventFacade} event The resize start event.

             * @bubbles Resize

             */

            publish(EV_RESIZE_START, this._defResizeStartFn);

            /**

             * Handles the resize event. Fired on each pixel when the handle is

             * being dragged.

             *

             * @event resize:resize

             * @preventable _defResizeFn

             * @param {EventFacade} event The resize event.

             * @bubbles Resize

             */

            publish(EV_RESIZE, this._defResizeFn);

            /**

             * Handles the resize align event.

             *

             * @event resize:align

             * @preventable _defResizeAlignFn

             * @param {EventFacade} event The resize align event.

             * @bubbles Resize

             */

            publish(EV_RESIZE_ALIGN, this._defResizeAlignFn);

            /**

             * Handles the resize end event. Fired when a handle stop to be

             * dragged.

             *

             * @event resize:end

             * @preventable _defResizeEndFn

             * @param {EventFacade} event The resize end event.

             * @bubbles Resize

             */

            publish(EV_RESIZE_END, this._defResizeEndFn);

            /**

             * Handles the resize mouseUp event. Fired when a mouseUp event happens on a

             * handle.

             *

             * @event resize:mouseUp

             * @preventable _defMouseUpFn

             * @param {EventFacade} event The resize mouseUp event.

             * @bubbles Resize

             */

            publish(EV_MOUSE_UP, this._defMouseUpFn);

        },

        /**

          * Responsible for loop each handle element and append to the wrapper.

          *

          * @method _renderHandles

          * @protected

          */

        _renderHandles: function() {

            var instance = this,

                wrapper = instance.get(WRAPPER),

                handlesWrapper = instance.get(HANDLES_WRAPPER);

            instance.eachHandle(function(handleEl) {

                handlesWrapper.append(handleEl);

            });

            wrapper.append(handlesWrapper);

        },

        /**

         * Creates the handle element based on the handle name and initialize the

         * DragDrop on it.

         *

         * @method _buildHandle

         * @param {String} handle Handle name ('t', 'tr', 'b', ...).

         * @protected

         */

        _buildHandle: function(handle) {

            var instance = this;

            return Y.Node.create(

                Y.Lang.sub(instance.HANDLE_TEMPLATE, {

                    handle: handle

                })

            );

        },

        /**

         * Basic resize calculations.

         *

         * @method _calcResize

         * @protected

         */

        _calcResize: function() {

            var instance = this,

                handle = instance.handle,

                info = instance.info,

                originalInfo = instance.originalInfo,

                dx = info.actXY[0] - originalInfo.actXY[0],

                dy = info.actXY[1] - originalInfo.actXY[1];

            if (handle && Y.Resize.RULES[handle]) {

                Y.Resize.RULES[handle](instance, dx, dy);

            }

            else {

                Y.log('Handle rule not found: ' + handle, 'warn', 'resize');

            }

        },

        /**

         * Helper method to update the current size value on

         * <a href="Resize.html#property_info">info</a> to respect the

         * min/max values and fix the top/left calculations.

         *

         * @method _checkSize

         * @param {String} offset 'offsetHeight' or 'offsetWidth'

         * @param {number} size Size to restrict the offset

         * @protected

         */

        _checkSize: function(offset, size) {

            var instance = this,

                info = instance.info,

                originalInfo = instance.originalInfo,

                axis = (offset === OFFSET_HEIGHT) ? TOP : LEFT;

            // forcing the offsetHeight/offsetWidth to be the passed size

            info[offset] = size;

            // predicting, based on the original information, the last left valid in case of reach the min/max dimension

            // this calculation avoid browser event leaks when user interact very fast

            if (((axis === LEFT) && instance.changeLeftHandles) ||

                ((axis === TOP) && instance.changeTopHandles)) {

                info[axis] = originalInfo[axis] + originalInfo[offset] - size;

            }

        },

        /**

         * Copy relevant styles of the <a href="Resize.html#attr_node">node</a>

         * to the <a href="Resize.html#attr_wrapper">wrapper</a>.

         *

         * @method _copyStyles

         * @param {Node} node Node from.

         * @param {Node} wrapper Node to.

         * @protected

         */

        _copyStyles: function(node, wrapper) {

            var position = node.getStyle(POSITION).toLowerCase(),

                surrounding = this._getBoxSurroundingInfo(node),

                wrapperStyle;

            // resizable wrapper should be positioned

            if (position === STATIC) {

                position = RELATIVE;

            }

            wrapperStyle = {

                position: position,

                left: getCompStyle(node, LEFT),

                top: getCompStyle(node, TOP)

            };

            Y.mix(wrapperStyle, surrounding.margin);

            Y.mix(wrapperStyle, surrounding.border);

            wrapper.setStyles(wrapperStyle);

            // remove margin and border from the internal node

            node.setStyles({ border: 0, margin: 0 });

            wrapper.sizeTo(

                node.get(OFFSET_WIDTH) + surrounding.totalHBorder,

                node.get(OFFSET_HEIGHT) + surrounding.totalVBorder

            );

        },

        // extract handle name from a string

        // using Y.cached to memoize the function for performance

        _extractHandleName: Y.cached(

            function(node) {

                var className = node.get(CLASS_NAME),

                    match = className.match(

                        new RegExp(

                            getCN(RESIZE, HANDLE, '(\\w{1,2})\\b')

                        )

                    );

                return match ? match[1] : null;

            }

        ),