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

     2 

     3 

     4     /**

     5      * Extends the dd-ddm-base Class to add support for the viewport shim to allow a draggable

     6      * anode to drag to be dragged over an iframe or any other node that traps mousemove events.

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

     8      * @module dd

     9      * @submodule dd-ddm

    10      * @for DDM

    11      * @namespace DD

    12      */

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

    14         /**

    15         * The shim placed over the screen to track the mousemove event.

    16         * @private

    17         * @property _pg

    18         * @type {Node}

    19         */

    20         _pg: null,

    21         /**

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

    23         * @private

    24         * @property _debugShim

    25         * @type {Boolean}

    26         */

    27         _debugShim: false,

    28         _activateTargets: function() { },

    29         _deactivateTargets: function() {},

    30         _startDrag: function() {

    31             if (this.activeDrag && this.activeDrag.get('useShim')) {

    32                 this._shimming = true;

    33                 this._pg_activate();

    34                 this._activateTargets();

    35             }

    36         },

    37         _endDrag: function() {

    38             this._pg_deactivate();

    39             this._deactivateTargets();

    40         },

    41         /**

    42         * Deactivates the shim

    43         * @private

    44         * @method _pg_deactivate

    45         */

    46         _pg_deactivate: function() {

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

    48         },

    49         /**

    50         * Activates the shim

    51         * @private

    52         * @method _pg_activate

    53         */

    54         _pg_activate: function() {

    55             if (!this._pg) {

    56                 this._createPG();

    57             }

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

    59             if (ah) {

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

    61             }

    62             if (cur === 'auto') {

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

    64             }

    65 

    66             this._pg_size();

    67             this._pg.setStyles({

    68                 top: 0,

    69                 left: 0,

    70                 display: 'block',

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

    72                 cursor: cur

    73             });

    74         },

    75         /**

    76         * Sizes the shim on: activatation, window:scroll, window:resize

    77         * @private

    78         * @method _pg_size

    79         */

    80         _pg_size: function() {

    81             if (this.activeDrag) {

    82                 var b = Y.one('body'),

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

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

    85                 this._pg.setStyles({

    86                     height: h + 'px',

    87                     width: w + 'px'

    88                 });

    89             }

    90         },

    91         /**

    92         * Creates the shim and adds it's listeners to it.

    93         * @private

    94         * @method _createPG

    95         */

    96         _createPG: function() {

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

    98             bd = Y.one('body'), win;

    99             pg.setStyles({

   100                 top: '0',

   101                 left: '0',

   102                 position: 'absolute',

   103                 zIndex: '9999',

   104                 overflow: 'hidden',

   105                 backgroundColor: 'red',

   106                 display: 'none',

   107                 height: '5px',

   108                 width: '5px'

   109             });

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

   111             pg.addClass(Y.DD.DDM.CSS_PREFIX + '-shim');

   112             bd.prepend(pg);

   113             this._pg = pg;

   114             this._pg.on('mousemove', Y.throttle(Y.bind(this._move, this), this.get('throttleTime')));

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

   116 

   117             win = Y.one('win');

   118             Y.on('window:resize', Y.bind(this._pg_size, this));

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

   120         }

   121     }, true);

   122 

   123 

   124 

   125 

   126 }, '@VERSION@', {"requires": ["dd-ddm-base", "event-resize"]});