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

   1 /*
   2 Copyright (c) 2010, Yahoo! Inc. All rights reserved.
   3 Code licensed under the BSD License:
   4 http://developer.yahoo.com/yui/license.html
   5 version: 3.3.0
   6 build: 3167
   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 && 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.one('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.one('body'), win;
 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(Y.DD.DDM.CSS_PREFIX + '-shim');
 114             bd.prepend(pg);
 115             this._pg = pg;
 116             this._pg.on('mousemove', Y.throttle(Y.bind(this._move, this), this.get('throttleTime')));
 117             this._pg.on('mouseup', Y.bind(this._end, this));
 118
 119             win = Y.one('win');
 120             Y.on('window:resize', Y.bind(this._pg_size, this));
 121             win.on('scroll', Y.bind(this._pg_size, this));
 122         }
 123     }, true);
 124
 125
 126
 127
 128 }, '3.3.0' ,{requires:['dd-ddm-base', 'event-resize'], skinnable:false});