File: resize/js/resize-proxy.js

            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);
            
            
            /**
            Adds a `proxyNode` attribute and resizes it instead of the actual node. __very similar to DDProxy__
            
                var resize = new Y.Resize({
                    //Selector of the node to resize
                    node: '#demo'
                });
                resize.plug(Y.Plugin.ResizeProxy);
            
            
            @class ResizeProxy
            @module resize
            @submodule resize-proxy
            @constructor
            @extends Plugin.Base
            @namespace Plugin
            */
            
            
            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() {
                    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#attr_proxyNode">proxyNode</a> element and
                  * make it sibling of the <a href="Resize.html#attr_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;