resize/js/resize-proxy.js

	resize-proxy.js revision 99a0f1980cb492371b8d8ce039c7d14b93f115f4
3649N/Avar ACTIVE_HANDLE_NODE = 'activeHandleNode',
5564N/A    CURSOR = 'cursor',
5564N/A    DRAG_CURSOR = 'dragCursor',
3649N/A    HOST = 'host',
3649N/A    PARENT_NODE = 'parentNode',
3649N/A    PROXY = 'proxy',
3649N/A    PROXY_NODE = 'proxyNode',
3649N/A    RESIZE = 'resize',
3649N/A    RESIZE_PROXY = 'resize-proxy',
3649N/A    WRAPPER = 'wrapper',
3649N/A
3649N/A    getCN = Y.ClassNameManager.getClassName,
3649N/A
3649N/A    CSS_RESIZE_PROXY = getCN(RESIZE, PROXY);
5564N/A
3649N/A
3649N/A/**
3649N/AAdds a `proxyNode` attribute and resizes it instead of the actual node. __very similar to DDProxy__
3649N/A
3649N/A    var resize = new Y.Resize({
3649N/A        //Selector of the node to resize
3649N/A        node: '#demo'
3649N/A    });
3649N/A    resize.plug(Y.Plugin.ResizeProxy);
3649N/A
3649N/A
3649N/A@class ResizeProxy
3649N/A@module resize
3649N/A@submodule resize-proxy
3649N/A@constructor
3649N/A@extends Plugin.Base
3649N/A@namespace Plugin
3649N/A*/
3649N/A
3649N/A
3649N/Afunction ResizeProxy() {
3649N/A    ResizeProxy.superclass.constructor.apply(this, arguments);
3649N/A}
3649N/A
3649N/AY.mix(ResizeProxy, {
3649N/A    NAME: RESIZE_PROXY,
3649N/A
3649N/A    NS: PROXY,
3649N/A
3649N/A    ATTRS: {
3649N/A        /**
3649N/A         * The Resize proxy element.
3649N/A         *
3649N/A         * @attribute proxyNode
3649N/A         * @default Generated using an internal HTML markup
3649N/A         * @type String|Node
3649N/A         */
3649N/A        proxyNode: {
3649N/A            setter: Y.one,
3649N/A            valueFn: function() {
3649N/A                return Y.Node.create(this.PROXY_TEMPLATE);
3649N/A            }
3649N/A        }
3649N/A    }
3649N/A});
3649N/A
3649N/AY.extend(ResizeProxy, Y.Plugin.Base, {
3649N/A    /**
3649N/A     * Template used to create the resize proxy.
3649N/A     *
3649N/A     * @property PROXY_TEMPLATE
3649N/A     * @type {String}
3649N/A     */
3649N/A    PROXY_TEMPLATE: '<div class="'+CSS_RESIZE_PROXY+'"></div>',
3649N/A
3649N/A    initializer: function() {
3649N/A        var instance = this;
3649N/A
5564N/A        instance.afterHostEvent('resize:start', instance._afterResizeStart);
3649N/A        instance.beforeHostMethod('_resize', instance._beforeHostResize);
3649N/A        instance.afterHostMethod('_resizeEnd', instance._afterHostResizeEnd);
3649N/A    },
3649N/A
3649N/A    destructor: function() {
3649N/A        var instance = this;
3649N/A
3649N/A        instance.get(PROXY_NODE).remove(true);
3649N/A    },
3649N/A
3649N/A    _afterHostResizeEnd: function(event) {
3649N/A        var instance = this,
3649N/A            drag = event.dragEvent.target;
3649N/A
3649N/A        // reseting actXY from drag when drag end
3649N/A        drag.actXY = [];
3649N/A
3649N/A        // if proxy is true, hide it on resize end
5564N/A        instance._syncProxyUI();

        instance.get(PROXY_NODE).hide();
    },

    _afterResizeStart: function(event) {
        var instance = this;

        instance._renderProxy();
    },

    _beforeHostResize: function(event) {
        var instance = this,
            host = this.get(HOST);

        host._handleResizeAlignEvent(event.dragEvent);

        // if proxy is true _syncProxyUI instead of _syncUI
        instance._syncProxyUI();

        return new Y.Do.Prevent();
    },

    /**
      * Render the <a href="ResizeProxy.html#config_proxyNode">proxyNode</a> element and
      * make it sibling of the <a href="Resize.html#config_node">node</a>.
      *
      * @method _renderProxy
      * @protected
      */
    _renderProxy: function() {
        var instance = this,
            host = this.get(HOST),
            proxyNode = instance.get(PROXY_NODE);

        if (!proxyNode.inDoc()) {
            host.get(WRAPPER).get(PARENT_NODE).append(
                proxyNode.hide()
            );
        }
    },

    /**
     * Sync the proxy UI with internal values from
     * <a href="ResizeProxy.html#property_info">info</a>.
     *
     * @method _syncProxyUI
     * @protected
     */
    _syncProxyUI: function() {
        var instance = this,
            host = this.get(HOST),
            info = host.info,
            activeHandleNode = host.get(ACTIVE_HANDLE_NODE),
            proxyNode = instance.get(PROXY_NODE),
            cursor = activeHandleNode.getStyle(CURSOR);

        proxyNode.show().setStyle(CURSOR, cursor);

        host.delegate.dd.set(DRAG_CURSOR, cursor);

        proxyNode.sizeTo(info.offsetWidth, info.offsetHeight);

        proxyNode.setXY([ info.left, info.top ]);
    }
});

Y.namespace('Plugin');
Y.Plugin.ResizeProxy = ResizeProxy;