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.0b1

     6 build: 1163

     7 */

     8 YUI.add('dd-ddm', function(Y) {

     9 

    10 

    11     /**

    12      * Extends the dd-ddm-base Class to add support for the viewport shim to allow a draggable node to drag to be dragged over an iframe or any other node that traps mousemove events.

    13      * It is also required to have Drop Targets enabled, as the viewport shim will contain the shims for the Drop Targets.

    14      * @module dd

    15      * @submodule dd-ddm

    16      * @for DDM

    17      * @namespace DD

    18      */

    19     Y.mix(Y.DD.DDM, {

    20         /**

    21         * @private

    22         * @property _pg

    23         * @description The shim placed over the screen to track the mousemove event.

    24         * @type {Node}

    25         */

    26         _pg: null,

    27         /**

    28         * @private

    29         * @property _debugShim

    30         * @description Set this to true to set the shims opacity to .5 for debugging it, default: false.

    31         * @type {Boolean}

    32         */

    33         _debugShim: false,

    34         _activateTargets: function() {},

    35         _deactivateTargets: function() {},

    36         _startDrag: function() {

    37             if (this.activeDrag.get('useShim')) {

    38                 this._pg_activate();

    39                 this._activateTargets();

    40             }

    41         },

    42         _endDrag: function() {

    43             this._pg_deactivate();

    44             this._deactivateTargets();

    45         },

    46         /**

    47         * @private

    48         * @method _pg_deactivate

    49         * @description Deactivates the shim

    50         */

    51         _pg_deactivate: function() {

    52             this._pg.setStyle('display', 'none');

    53         },

    54         /**

    55         * @private

    56         * @method _pg_activate

    57         * @description Activates the shim

    58         */

    59         _pg_activate: function() {

    60             var ah = this.activeDrag.get('activeHandle'), cur = 'auto';

    61             if (ah) {

    62                 cur = ah.getStyle('cursor');

    63             }

    64             if (cur == 'auto') {

    65                 cur = this.get('dragCursor');

    66             }

    67             

    68             this._pg_size();

    69             this._pg.setStyles({

    70                 top: 0,

    71                 left: 0,

    72                 display: 'block',

    73                 opacity: ((this._debugShim) ? '.5' : '0'),

    74                 cursor: cur

    75             });

    76         },

    77         /**

    78         * @private

    79         * @method _pg_size

    80         * @description Sizes the shim on: activatation, window:scroll, window:resize

    81         */

    82         _pg_size: function() {

    83             if (this.activeDrag) {

    84                 var b = Y.get('body'),

    85                 h = b.get('docHeight'),

    86                 w = b.get('docWidth');

    87                 this._pg.setStyles({

    88                     height: h + 'px',

    89                     width: w + 'px'

    90                 });

    91             }

    92         },

    93         /**

    94         * @private

    95         * @method _createPG

    96         * @description Creates the shim and adds it's listeners to it.

    97         */

    98         _createPG: function() {

    99             var pg = Y.Node.create('<div></div>'),

   100             bd = Y.get('body');

   101             pg.setStyles({

   102                 top: '0',

   103                 left: '0',

   104                 position: 'absolute',

   105                 zIndex: '9999',

   106                 overflow: 'hidden',

   107                 backgroundColor: 'red',

   108                 display: 'none',

   109                 height: '5px',

   110                 width: '5px'

   111             });

   112             pg.set('id', Y.stamp(pg));

   113             pg.addClass('yui-dd-shim');

   114             if (bd.get('firstChild')) {

   115                 bd.insertBefore(pg, bd.get('firstChild'));

   116             } else {

   117                 bd.appendChild(pg);

   118             }

   119             this._pg = pg;

   120             this._pg.on('mouseup', Y.bind(this._end, this));

   121             this._pg.on('mousemove', Y.bind(this._move, this));

   122             

   123             var win = Y.get(window);

   124             win.on('resize', Y.bind(this._pg_size, this));

   125             win.on('scroll', Y.bind(this._pg_size, this));

   126         }   

   127     }, true);

   128 

   129     Y.on('domready', Y.bind(Y.DD.DDM._createPG, Y.DD.DDM));

   130 

   131 

   132 

   133 

   134 

   135 }, '3.0.0b1' ,{requires:['dd-ddm-base'], skinnable:false});