dd/js/proxy.js

	proxy.js revision 3603f91160ffcd6fe9834ae62761af309f251153
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass    /**
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav 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.
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass     * @module dd
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass     * @submodule dd-proxy
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass     */
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass    /**
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass     * This plugin for dd-drag is for creating a proxy drag node, instead of dragging the original node.
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass     * @class DDProxy
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass     * @extends Base
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass     * @constructor
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass     * @namespace plugin
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass     */
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass    var DDM = Y.DD.DDM,
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        NODE = 'node',
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        DRAG_NODE = 'dragNode',
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        PROXY = 'proxy',
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        OWNER = 'owner';
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass    var Proxy = function(config) {
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        Proxy.superclass.constructor.apply(this, arguments);
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass    };
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass    Proxy.NAME = 'DDProxy';
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass    /**
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass    * @property proxy
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass    * @description The Proxy instance will be placed on the Drag instance under the proxy namespace.
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass    * @type {String}
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass    */
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass    Proxy.NS = 'proxy';
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass    Proxy.ATTRS = {
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        /**
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @attribute moveOnEnd
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @description Move the original node at the end of the drag. Default: true
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @type Boolean
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        */
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        moveOnEnd: {
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass            value: true
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        },
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        /**
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @attribute resizeFrame
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass        * @description Make the Proxy node assume the size of the original node. Default: true
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass        * @type Boolean
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass        */
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass        resizeFrame: {
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass            value: true
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass        },
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass        /**
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass        * @attribute positionProxy
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass        * @description Make the Proxy node appear in the same place as the original node. Default: true
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass        * @type Boolean
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass        */
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass        positionProxy: {
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass            value: true
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass        },
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass        /**
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass        * @attribute borderStyle
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass        * @description The default border style for the border of the proxy. Default: 1px solid #808080
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass        * @type Boolean
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass        */
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass        borderStyle: {
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass            value: '1px solid #808080'
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        },
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        /**
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @attribute owner
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @description The object that this was plugged into.
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @type Object
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        */
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        owner: {
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass            writeOnce: true,
0523d0a8daaa474f0214203f8cbb0bc4a88e2964Dav Glass            value: false
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        }
0523d0a8daaa474f0214203f8cbb0bc4a88e2964Dav Glass    };
aa2ac226ad6e45232f8416eecc99d2165ce74d03Dav Glass
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass    var proto = {
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        /**
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @private
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @property _proxyHandles
0523d0a8daaa474f0214203f8cbb0bc4a88e2964Dav Glass        * @description Holds the event handles for setting the proxy
0523d0a8daaa474f0214203f8cbb0bc4a88e2964Dav Glass        */
0523d0a8daaa474f0214203f8cbb0bc4a88e2964Dav Glass        _proxyHandles: null,
0523d0a8daaa474f0214203f8cbb0bc4a88e2964Dav Glass        /**
0523d0a8daaa474f0214203f8cbb0bc4a88e2964Dav Glass        * @private
5432371fbb6d790a76159481f0dd16e806812153Dav Glass        * @method _setProxy
5432371fbb6d790a76159481f0dd16e806812153Dav Glass        * @description Handler for the proxy config attribute
216633e2ad28e9568a902f3763c3bef052c5f908Dav Glass        */
aa2ac226ad6e45232f8416eecc99d2165ce74d03Dav Glass        _setProxy: function() {
5432371fbb6d790a76159481f0dd16e806812153Dav Glass            if (!DDM._proxy) {
aa2ac226ad6e45232f8416eecc99d2165ce74d03Dav Glass                Y.on('event:ready', Y.bind(this._setProxy, this));
5432371fbb6d790a76159481f0dd16e806812153Dav Glass                return;
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass            }
5432371fbb6d790a76159481f0dd16e806812153Dav Glass            if (!this._proxyHandles) {
5432371fbb6d790a76159481f0dd16e806812153Dav Glass                this._proxyHandles = [];
5432371fbb6d790a76159481f0dd16e806812153Dav Glass            }
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass            var i, h, h1, owner = this.get(OWNER), dnode = owner.get(DRAG_NODE);
5432371fbb6d790a76159481f0dd16e806812153Dav Glass            if (dnode.compareTo(owner.get(NODE))) {
5432371fbb6d790a76159481f0dd16e806812153Dav Glass                if (DDM._proxy) {
5432371fbb6d790a76159481f0dd16e806812153Dav Glass                    owner.set(DRAG_NODE, DDM._proxy);
5432371fbb6d790a76159481f0dd16e806812153Dav Glass                }
5432371fbb6d790a76159481f0dd16e806812153Dav Glass            }
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass            for (i in this._proxyHandles) {
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass                this._proxyHandles[i].detach();
5432371fbb6d790a76159481f0dd16e806812153Dav Glass            }
5432371fbb6d790a76159481f0dd16e806812153Dav Glass            h = DDM.on('ddm:start', Y.bind(function() {
96c1e6aab172b57cf3566abee931c26676990044Dav Glass                if (DDM.activeDrag === owner) {
f7aa62ea2e8cf43fbb9d83db5060db540ff1893fDav Glass                    DDM._setFrame(owner);
5432371fbb6d790a76159481f0dd16e806812153Dav Glass                }
5432371fbb6d790a76159481f0dd16e806812153Dav Glass            }, this));
5432371fbb6d790a76159481f0dd16e806812153Dav Glass            h1 = DDM.on('ddm:end', Y.bind(function() {
5432371fbb6d790a76159481f0dd16e806812153Dav Glass                if (owner.get('dragging')) {
f7aa62ea2e8cf43fbb9d83db5060db540ff1893fDav Glass                    if (this.get('moveOnEnd')) {
f7aa62ea2e8cf43fbb9d83db5060db540ff1893fDav Glass                        owner.get(NODE).setXY(owner.lastXY);
f7aa62ea2e8cf43fbb9d83db5060db540ff1893fDav Glass                    }
f7aa62ea2e8cf43fbb9d83db5060db540ff1893fDav Glass                    owner.get(DRAG_NODE).setStyle('display', 'none');
f7aa62ea2e8cf43fbb9d83db5060db540ff1893fDav Glass                }
f7aa62ea2e8cf43fbb9d83db5060db540ff1893fDav Glass            }, this));
f7aa62ea2e8cf43fbb9d83db5060db540ff1893fDav Glass            this._proxyHandles = [h, h1];
f7aa62ea2e8cf43fbb9d83db5060db540ff1893fDav Glass        },
f7aa62ea2e8cf43fbb9d83db5060db540ff1893fDav Glass        initializer: function() {
f7aa62ea2e8cf43fbb9d83db5060db540ff1893fDav Glass            this._setProxy();
f7aa62ea2e8cf43fbb9d83db5060db540ff1893fDav Glass        },
f7aa62ea2e8cf43fbb9d83db5060db540ff1893fDav Glass        destructor: function() {
f7aa62ea2e8cf43fbb9d83db5060db540ff1893fDav Glass            var owner = this.get(OWNER);
f7aa62ea2e8cf43fbb9d83db5060db540ff1893fDav Glass            for (var i in this._proxyHandles) {
f7aa62ea2e8cf43fbb9d83db5060db540ff1893fDav Glass                this._proxyHandles[i].detach();
f7aa62ea2e8cf43fbb9d83db5060db540ff1893fDav Glass            }
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass            owner.set(DRAG_NODE, owner.get(NODE));
96c1e6aab172b57cf3566abee931c26676990044Dav Glass        }
96c1e6aab172b57cf3566abee931c26676990044Dav Glass    };
96c1e6aab172b57cf3566abee931c26676990044Dav Glass
96c1e6aab172b57cf3566abee931c26676990044Dav Glass    Y.namespace('plugin');
96c1e6aab172b57cf3566abee931c26676990044Dav Glass    Y.extend(Proxy, Y.Base, proto);
96c1e6aab172b57cf3566abee931c26676990044Dav Glass    Y.plugin.DDProxy = Proxy;
96c1e6aab172b57cf3566abee931c26676990044Dav Glass
96c1e6aab172b57cf3566abee931c26676990044Dav Glass    //Add a couple of methods to the DDM
96c1e6aab172b57cf3566abee931c26676990044Dav Glass    Y.mix(DDM, {
96c1e6aab172b57cf3566abee931c26676990044Dav Glass        /**
96c1e6aab172b57cf3566abee931c26676990044Dav Glass        * @private
96c1e6aab172b57cf3566abee931c26676990044Dav Glass        * @for DDM
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @method _createFrame
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @description Create the proxy element if it doesn't already exist and set the DD.DDM._proxy value
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        */
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        _createFrame: function() {
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass            if (!Y.DD.DDM._proxy) {
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass                Y.DD.DDM._proxy = true;
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass                var p = Y.Node.create('<div></div>'),
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass                b = Y.Node.get('body');
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass                p.setStyles({
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass                    position: 'absolute',
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass                    display: 'none',
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass                    zIndex: '999',
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass                    top: '-999px',
162527ab925c04aa8d6bbf78d0484a133a8076f1Dav Glass                    left: '-999px'
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass                });
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass                b.insertBefore(p, b.get('firstChild'));
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass                p.set('id', Y.stamp(p));
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass                p.addClass(Y.DD.DDM.CSS_PREFIX + '-proxy');
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass                Y.DD.DDM._proxy = p;
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass            }
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        },
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        /**
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @private
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @for DDM
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @method _setFrame
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * @description If resizeProxy is set to true (default) it will resize the proxy element to match the size of the Drag Element.
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        * If positionProxy is set to true (default) it will position the proxy element in the same location as the Drag Element.
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        */
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        _setFrame: function(drag) {
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass            var n = drag.get(NODE), d = drag.get(DRAG_NODE), ah, cur = 'auto';
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass            if (drag.proxy.get('resizeFrame')) {
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass                DDM._proxy.setStyles({
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass                    height: n.get('offsetHeight') + 'px',
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass                    width: n.get('offsetWidth') + 'px'
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass                });
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass            }
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass            ah = DDM.activeDrag.get('activeHandle');
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass            if (ah) {
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass                cur = ah.getStyle('cursor');
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass            }
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass            if (cur == 'auto') {
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass                cur = DDM.get('dragCursor');
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass            }
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass
d0bccce76452becc96b65acaaa684aa6fabaf386Dav Glass            d.setStyles({
d0bccce76452becc96b65acaaa684aa6fabaf386Dav Glass                visibility: 'hidden',
d0bccce76452becc96b65acaaa684aa6fabaf386Dav Glass                display: 'block',
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass                cursor: cur,
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass                border: drag.proxy.get('borderStyle')
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass            });
d0bccce76452becc96b65acaaa684aa6fabaf386Dav Glass
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass            if (drag.proxy.get('positionProxy')) {
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass                d.setXY(drag.nodeXY);
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass            }
d0bccce76452becc96b65acaaa684aa6fabaf386Dav Glass            d.setStyle('visibility', 'visible');
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass        }
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass    });
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass    //Create the frame when DOM is ready
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass    Y.on('event:ready', Y.bind(Y.DD.DDM._createFrame, Y.DD.DDM));
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass
d2a5a45ff58ab15a8ee0339edcd03f0243373d59Dav Glass