jssource/src_files/include/javascript/yui3/build/dd/dd-proxy.js

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