# Yahoo! UI Library

### resize 3.3.0

Yahoo! UI Library > resize > resize-proxy.js (source view)
Search:
Filters Show Private Show Protected Show Deprecated

    var ACTIVE_HANDLE_NODE = 'activeHandleNode',
    	CURSOR = 'cursor',
    	DRAG_CURSOR = 'dragCursor',
    	HOST = 'host',
    	PARENT_NODE = 'parentNode',
    	PROXY = 'proxy',
    	PROXY_NODE = 'proxyNode',
    	RESIZE = 'resize',
    	RESIZE_PROXY = 'resize-proxy',
    	WRAPPER = 'wrapper',

    	getCN = Y.ClassNameManager.getClassName,

    	CSS_RESIZE_PROXY = getCN(RESIZE, PROXY);

    function ResizeProxy() {
    	ResizeProxy.superclass.constructor.apply(this, arguments);
    }

    Y.mix(ResizeProxy, {
    	NAME: RESIZE_PROXY,

    	NS: PROXY,

    	ATTRS: {
    		/**
             * The Resize proxy element.
             *
             * @attribute proxyNode
             * @default Generated using an internal HTML markup
             * @type String | Node
             */
    		proxyNode: {
    			setter: Y.one,
    			valueFn: function() {
    				return Y.Node.create(this.PROXY_TEMPLATE);
    			}
    		}
    	}
    });

    Y.extend(ResizeProxy, Y.Plugin.Base, {
    	/**
         * Template used to create the resize proxy.
         *
         * @property PROXY_TEMPLATE
         * @type {String}
         */
    	PROXY_TEMPLATE: '<div class="'+CSS_RESIZE_PROXY+'"></div>',

    	initializer: function() {
    		var instance = this;

    		instance.afterHostEvent('resize:start', instance._afterResizeStart);
    		instance.beforeHostMethod('_resize', instance._beforeHostResize);
    		instance.afterHostMethod('_resizeEnd', instance._afterHostResizeEnd);
    	},

    	destructor: function() {
    		var instance = this;

    		instance.get(PROXY_NODE).remove(true);
    	},

    	_afterHostResizeEnd: function(event) {
    		var instance = this,
    			drag = event.dragEvent.target;

    		// reseting actXY from drag when drag end
    		drag.actXY = [];

    		// if proxy is true, hide it on resize end
    		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;

Copyright © 2011 Yahoo! Inc. All rights reserved.