/* Copyright (c) 2010, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.com/yui/license.html version: 3.3.0 build: 3167 */ YUI.add('dd-proxy', function(Y) { /** * Plugin for dd-drag for creating a proxy drag node, instead of dragging the original node. * @module dd * @submodule dd-proxy */ /** * Plugin for dd-drag for creating a proxy drag node, instead of dragging the original node. * @class DDProxy * @extends Base * @constructor * @namespace Plugin */ var DDM = Y.DD.DDM, NODE = 'node', DRAG_NODE = 'dragNode', HOST = 'host', TRUE = true, proto, P = function(config) { P.superclass.constructor.apply(this, arguments); }; P.NAME = 'DDProxy'; /** * @property NS * @default con * @readonly * @protected * @static * @description The Proxy instance will be placed on the Drag instance under the proxy namespace. * @type {String} */ P.NS = 'proxy'; P.ATTRS = { host: { }, /** * @attribute moveOnEnd * @description Move the original node at the end of the drag. Default: true * @type Boolean */ moveOnEnd: { value: TRUE }, /** * @attribute hideOnEnd * @description Hide the drag node at the end of the drag. Default: true * @type Boolean */ hideOnEnd: { value: TRUE }, /** * @attribute resizeFrame * @description Make the Proxy node assume the size of the original node. Default: true * @type Boolean */ resizeFrame: { value: TRUE }, /** * @attribute positionProxy * @description Make the Proxy node appear in the same place as the original node. Default: true * @type Boolean */ positionProxy: { value: TRUE }, /** * @attribute borderStyle * @description The default border style for the border of the proxy. Default: 1px solid #808080 * @type Boolean */ borderStyle: { value: '1px solid #808080' }, /** * @attribute cloneNode * @description Should the node be cloned into the proxy for you. Default: false * @type Boolean */ cloneNode: { value: false } }; proto = { /** * @private * @property _hands * @description Holds the event handles for setting the proxy */ _hands: null, /** * @private * @method _init * @description Handler for the proxy config attribute */ _init: function() { if (!DDM._proxy) { DDM._createFrame(); Y.on('domready', Y.bind(this._init, this)); return; } if (!this._hands) { this._hands = []; } var h, h1, host = this.get(HOST), dnode = host.get(DRAG_NODE); if (dnode.compareTo(host.get(NODE))) { if (DDM._proxy) { host.set(DRAG_NODE, DDM._proxy); } } Y.each(this._hands, function(v) { v.detach(); }); h = DDM.on('ddm:start', Y.bind(function() { if (DDM.activeDrag === host) { DDM._setFrame(host); } }, this)); h1 = DDM.on('ddm:end', Y.bind(function() { if (host.get('dragging')) { if (this.get('moveOnEnd')) { host.get(NODE).setXY(host.lastXY); } if (this.get('hideOnEnd')) { host.get(DRAG_NODE).setStyle('display', 'none'); } if (this.get('cloneNode')) { host.get(DRAG_NODE).remove(); host.set(DRAG_NODE, DDM._proxy); } } }, this)); this._hands = [h, h1]; }, initializer: function() { this._init(); }, destructor: function() { var host = this.get(HOST); Y.each(this._hands, function(v) { v.detach(); }); host.set(DRAG_NODE, host.get(NODE)); }, clone: function() { var host = this.get(HOST), n = host.get(NODE), c = n.cloneNode(true); delete c._yuid; c.setAttribute('id', Y.guid()); c.setStyle('position', 'absolute'); n.get('parentNode').appendChild(c); host.set(DRAG_NODE, c); return c; } }; Y.namespace('Plugin'); Y.extend(P, Y.Base, proto); Y.Plugin.DDProxy = P; //Add a couple of methods to the DDM Y.mix(DDM, { /** * @private * @for DDM * @namespace DD * @method _createFrame * @description Create the proxy element if it doesn't already exist and set the DD.DDM._proxy value */ _createFrame: function() { if (!DDM._proxy) { DDM._proxy = TRUE; var p = Y.Node.create('
'), b = Y.one('body'); p.setStyles({ position: 'absolute', display: 'none', zIndex: '999', top: '-999px', left: '-999px' }); b.prepend(p); p.set('id', Y.guid()); p.addClass(DDM.CSS_PREFIX + '-proxy'); DDM._proxy = p; } }, /** * @private * @for DDM * @namespace DD * @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'; 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('cloneNode')) { d = drag.proxy.clone(); } if (drag.proxy.get('resizeFrame')) { d.setStyles({ height: n.get('offsetHeight') + 'px', width: n.get('offsetWidth') + 'px' }); } if (drag.proxy.get('positionProxy')) { d.setXY(drag.nodeXY); } d.setStyle('visibility', 'visible'); } }); //Create the frame when DOM is ready //Y.on('domready', Y.bind(DDM._createFrame, DDM)); }, '3.3.0' ,{requires:['dd-ddm', 'dd-drag'], skinnable:false});