dd/js/proxy.js

	proxy.js revision 3603f91160ffcd6fe9834ae62761af309f251153
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav GlassYUI.add('dd-proxy', function(Y) {
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass    /**
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass     * The Drag & Drop Utility allows you to create a draggable interface efficiently, buffering you from browser-level abnormalities and enabling you to focus on the interesting logic surrounding your particular implementation. This component enables you to create a variety of standard draggable objects with just a few lines of code and then, using its extensive API, add your own specific implementation logic.
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass     * @module dd
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass     * @submodule dd-proxy
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass     */
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass    /**
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass     * This plugin for dd-drag is for creating a proxy drag node, instead of dragging the original node.
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass     * @class DDProxy
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass     * @extends Base
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass     * @constructor
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass     * @namespace plugin
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass     */
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass    var DDM = Y.DD.DDM,
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass        NODE = 'node',
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass        DRAG_NODE = 'dragNode',
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass        PROXY = 'proxy',
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass        OWNER = 'owner';
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass    var Proxy = function(config) {
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass        Proxy.superclass.constructor.apply(this, arguments);
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass    };
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass    Proxy.NAME = 'DDProxy';
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass    /**
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass    * @property proxy
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass    * @description The Proxy instance will be placed on the Drag instance under the proxy namespace.
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass    * @type {String}
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass    */
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass    Proxy.NS = 'proxy';
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass    Proxy.ATTRS = {
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass        /**
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass        * @attribute moveOnEnd
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass        * @description Move the original node at the end of the drag. Default: true
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass        * @type Boolean
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass        */
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass        moveOnEnd: {
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass            value: true
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass        },
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass        /**
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass        * @attribute resizeFrame
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass        * @description Make the Proxy node assume the size of the original node. Default: true
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass        * @type Boolean
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass        */
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass        resizeFrame: {
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass            value: true
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass        },
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass        /**
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass        * @attribute positionProxy
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass        * @description Make the Proxy node appear in the same place as the original node. Default: true
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass        * @type Boolean
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass        */
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass        positionProxy: {
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass            value: true
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass        },
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass        /**
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass        * @attribute borderStyle
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass        * @description The default border style for the border of the proxy. Default: 1px solid #808080
        * @type Boolean
        */
        borderStyle: {
            value: '1px solid #808080'
        },
        /**
        * @attribute owner
        * @description The object that this was plugged into.
        * @type Object
        */
        owner: {
            writeOnce: true,
            value: false
        }
    };

    var proto = {
        /**
        * @private
        * @property _proxyHandles
        * @description Holds the event handles for setting the proxy
        */
        _proxyHandles: null,
        /**
        * @private
        * @method _setProxy
        * @description Handler for the proxy config attribute
        */
        _setProxy: function() {
            if (!DDM._proxy) {
                Y.on('event:ready', Y.bind(this._setProxy, this));
                return;
            }
            if (!this._proxyHandles) {
                this._proxyHandles = [];
            }
            var i, h, h1, owner = this.get(OWNER), dnode = owner.get(DRAG_NODE);
            if (dnode.compareTo(owner.get(NODE))) {
                if (DDM._proxy) {
                    owner.set(DRAG_NODE, DDM._proxy);
                }
            }
            for (i in this._proxyHandles) {
                this._proxyHandles[i].detach();
            }
            h = DDM.on('ddm:start', Y.bind(function() {
                if (DDM.activeDrag === owner) {
                    DDM._setFrame(owner);
                }
            }, this));
            h1 = DDM.on('ddm:end', Y.bind(function() {
                if (owner.get('dragging')) {
                    if (this.get('moveOnEnd')) {
                        owner.get(NODE).setXY(owner.lastXY);
                    }
                    owner.get(DRAG_NODE).setStyle('display', 'none');
                }
            }, this));
            this._proxyHandles = [h, h1];
        },
        initializer: function() {
            this._setProxy();
        },
        destructor: function() {
            var owner = this.get(OWNER);
            for (var i in this._proxyHandles) {
                this._proxyHandles[i].detach();
            }
            owner.set(DRAG_NODE, owner.get(NODE));
        }
    };

    Y.namespace('plugin');
    Y.extend(Proxy, Y.Base, proto);
    Y.plugin.DDProxy = Proxy;

    //Add a couple of methods to the DDM
    Y.mix(DDM, {
        /**
        * @private
        * @for DDM
        * @method _createFrame
        * @description Create the proxy element if it doesn't already exist and set the DD.DDM._proxy value
        */
        _createFrame: function() {
            if (!Y.DD.DDM._proxy) {
                Y.DD.DDM._proxy = true;

                var p = Y.Node.create('<div></div>'),
                b = Y.Node.get('body');

                p.setStyles({
                    position: 'absolute',
                    display: 'none',
                    zIndex: '999',
                    top: '-999px',
                    left: '-999px'
                });

                b.insertBefore(p, b.get('firstChild'));
                p.set('id', Y.stamp(p));
                p.addClass(Y.DD.DDM.CSS_PREFIX + '-proxy');
                Y.DD.DDM._proxy = p;
            }
        },
        /**
        * @private
        * @for DDM
        * @method _setFrame
        * @description If resizeProxy is set to true (default) it will resize the proxy element to match the size of the Drag Element.
        * If positionProxy is set to true (default) it will position the proxy element in the same location as the Drag Element.
        */
        _setFrame: function(drag) {
            var n = drag.get(NODE), d = drag.get(DRAG_NODE), ah, cur = 'auto';
            if (drag.proxy.get('resizeFrame')) {
                DDM._proxy.setStyles({
                    height: n.get('offsetHeight') + 'px',
                    width: n.get('offsetWidth') + 'px'
                });
            }

            ah = DDM.activeDrag.get('activeHandle');
            if (ah) {
                cur = ah.getStyle('cursor');
            }
            if (cur == 'auto') {
                cur = DDM.get('dragCursor');
            }


            d.setStyles({
                visibility: 'hidden',
                display: 'block',
                cursor: cur,
                border: drag.proxy.get('borderStyle')
            });


            if (drag.proxy.get('positionProxy')) {
                d.setXY(drag.nodeXY);
            }
            d.setStyle('visibility', 'visible');
        }
    });

    //Create the frame when DOM is ready
    Y.on('event:ready', Y.bind(Y.DD.DDM._createFrame, Y.DD.DDM));

}, '@VERSION@' ,{requires:['dd-ddm', 'dd-drag'], skinnable:false});