lib/yuilib/3.13.0/dd-proxy/dd-proxy.js

   1 /*
   2 YUI 3.13.0 (build 508226d)
   3 Copyright 2013 Yahoo! Inc. All rights reserved.
   4 Licensed under the BSD License.
   5 http://yuilibrary.com/license/
   6 */
   7
   8 YUI.add('dd-proxy', function (Y, NAME) {
   9
  10
  11     /**
  12      * Plugin for dd-drag for creating a proxy drag node, instead of dragging the original node.
  13      * @module dd
  14      * @submodule dd-proxy
  15      */
  16     /**
  17      * Plugin for dd-drag for creating a proxy drag node, instead of dragging the original node.
  18      * @class DDProxy
  19      * @extends Base
  20      * @constructor
  21      * @namespace Plugin
  22      */
  23     var DDM = Y.DD.DDM,
  24         NODE = 'node',
  25         DRAG_NODE = 'dragNode',
  26         HOST = 'host',
  27         TRUE = true, proto,
  28         P = function() {
  29             P.superclass.constructor.apply(this, arguments);
  30         };
  31
  32     P.NAME = 'DDProxy';
  33     /**
  34     * The Proxy instance will be placed on the Drag instance under the proxy namespace.
  35     * @property NS
  36     * @default con
  37     * @readonly
  38     * @protected
  39     * @static
  40     * @type {String}
  41     */
  42     P.NS = 'proxy';
  43
  44     P.ATTRS = {
  45         host: {
  46         },
  47         /**
  48         * Move the original node at the end of the drag. Default: true
  49         * @attribute moveOnEnd
  50         * @type Boolean
  51         */
  52         moveOnEnd: {
  53             value: TRUE
  54         },
  55         /**
  56         * Hide the drag node at the end of the drag. Default: true
  57         * @attribute hideOnEnd
  58         * @type Boolean
  59         */
  60         hideOnEnd: {
  61             value: TRUE
  62         },
  63         /**
  64         * Make the Proxy node assume the size of the original node. Default: true
  65         * @attribute resizeFrame
  66         * @type Boolean
  67         */
  68         resizeFrame: {
  69             value: TRUE
  70         },
  71         /**
  72         * Make the Proxy node appear in the same place as the original node. Default: true
  73         * @attribute positionProxy
  74         * @type Boolean
  75         */
  76         positionProxy: {
  77             value: TRUE
  78         },
  79         /**
  80         * The default border style for the border of the proxy. Default: 1px solid #808080
  81         * @attribute borderStyle
  82         * @type Boolean
  83         */
  84         borderStyle: {
  85             value: '1px solid #808080'
  86         },
  87         /**
  88         * Should the node be cloned into the proxy for you. Default: false
  89         * @attribute cloneNode
  90         * @type Boolean
  91         */
  92         cloneNode: {
  93             value: false
  94         }
  95     };
  96
  97     proto = {
  98         /**
  99         * Holds the event handles for setting the proxy
 100         * @private
 101         * @property _hands
 102         */
 103         _hands: null,
 104         /**
 105         * Handler for the proxy config attribute
 106         * @private
 107         * @method _init
 108         */
 109         _init: function() {
 110             if (!DDM._proxy) {
 111                 DDM._createFrame();
 112                 Y.on('domready', Y.bind(this._init, this));
 113                 return;
 114             }
 115             if (!this._hands) {
 116                 this._hands = [];
 117             }
 118             var h, h1, host = this.get(HOST), dnode = host.get(DRAG_NODE);
 119             if (dnode.compareTo(host.get(NODE))) {
 120                 if (DDM._proxy) {
 121                     host.set(DRAG_NODE, DDM._proxy);
 122                 }
 123             }
 124             Y.Array.each(this._hands, function(v) {
 125                 v.detach();
 126             });
 127             h = DDM.on('ddm:start', Y.bind(function() {
 128                 if (DDM.activeDrag === host) {
 129                     DDM._setFrame(host);
 130                 }
 131             }, this));
 132             h1 = DDM.on('ddm:end', Y.bind(function() {
 133                 if (host.get('dragging')) {
 134                     if (this.get('moveOnEnd')) {
 135                         host.get(NODE).setXY(host.lastXY);
 136                     }
 137                     if (this.get('hideOnEnd')) {
 138                         host.get(DRAG_NODE).setStyle('display', 'none');
 139                     }
 140                     if (this.get('cloneNode')) {
 141                         host.get(DRAG_NODE).remove();
 142                         host.set(DRAG_NODE, DDM._proxy);
 143                     }
 144                 }
 145             }, this));
 146             this._hands = [h, h1];
 147         },
 148         initializer: function() {
 149             this._init();
 150         },
 151         destructor: function() {
 152             var host = this.get(HOST);
 153             Y.Array.each(this._hands, function(v) {
 154                 v.detach();
 155             });
 156             host.set(DRAG_NODE, host.get(NODE));
 157         },
 158         clone: function() {
 159             var host = this.get(HOST),
 160                 n = host.get(NODE),
 161                 c = n.cloneNode(true);
 162
 163             delete c._yuid;
 164             c.setAttribute('id', Y.guid());
 165             c.setStyle('position', 'absolute');
 166             n.get('parentNode').appendChild(c);
 167             host.set(DRAG_NODE, c);
 168             return c;
 169         }
 170     };
 171
 172     Y.namespace('Plugin');
 173     Y.extend(P, Y.Base, proto);
 174     Y.Plugin.DDProxy = P;
 175
 176     //Add a couple of methods to the DDM
 177     Y.mix(DDM, {
 178         /**
 179         * Create the proxy element if it doesn't already exist and set the DD.DDM._proxy value
 180         * @private
 181         * @for DDM
 182         * @namespace DD
 183         * @method _createFrame
 184         */
 185         _createFrame: function() {
 186             if (!DDM._proxy) {
 187                 DDM._proxy = TRUE;
 188
 189                 var p = Y.Node.create('<div></div>'),
 190                 b = Y.one('body');
 191
 192                 p.setStyles({
 193                     position: 'absolute',
 194                     display: 'none',
 195                     zIndex: '999',
 196                     top: '-999px',
 197                     left: '-999px'
 198                 });
 199
 200                 b.prepend(p);
 201                 p.set('id', Y.guid());
 202                 p.addClass(DDM.CSS_PREFIX + '-proxy');
 203                 DDM._proxy = p;
 204             }
 205         },
 206         /**
 207         * If resizeProxy is set to true (default) it will resize the proxy element to match the size of the Drag Element.
 208         * If positionProxy is set to true (default) it will position the proxy element in the same location as the Drag Element.
 209         * @private
 210         * @for DDM
 211         * @namespace DD
 212         * @method _setFrame
 213         */
 214         _setFrame: function(drag) {
 215             var n = drag.get(NODE), d = drag.get(DRAG_NODE), ah, cur = 'auto';
 216
 217             ah = DDM.activeDrag.get('activeHandle');
 218             if (ah) {
 219                 cur = ah.getStyle('cursor');
 220             }
 221             if (cur === 'auto') {
 222                 cur = DDM.get('dragCursor');
 223             }
 224
 225             d.setStyles({
 226                 visibility: 'hidden',
 227                 display: 'block',
 228                 cursor: cur,
 229                 border: drag.proxy.get('borderStyle')
 230             });
 231
 232             if (drag.proxy.get('cloneNode')) {
 233                 d = drag.proxy.clone();
 234             }
 235
 236             if (drag.proxy.get('resizeFrame')) {
 237                 d.setStyles({
 238                     height: n.get('offsetHeight') + 'px',
 239                     width: n.get('offsetWidth') + 'px'
 240                 });
 241             }
 242
 243             if (drag.proxy.get('positionProxy')) {
 244                 d.setXY(drag.nodeXY);
 245             }
 246             d.setStyle('visibility', 'visible');
 247         }
 248     });
 249
 250     //Create the frame when DOM is ready
 251     //Y.on('domready', Y.bind(DDM._createFrame, DDM));
 252
 253
 254
 255
 256 }, '3.13.0', {"requires": ["dd-drag"]});