dd-ddm.js revision b329eb7b3f67e8e7635f0b1c88899119470a91ed
812N/AYUI.add('dd-ddm', function(Y) {
1186N/A
1186N/A
812N/A /**
812N/A * 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.
812N/A * It is also required to have Drop Targets enabled, as the viewport shim will contain the shims for the Drop Targets.
812N/A * @module dd
812N/A * @submodule dd-ddm
812N/A * @for DDM
812N/A * @namespace DD
812N/A */
812N/A Y.mix(Y.DD.DDM, {
812N/A /**
812N/A * @private
812N/A * @property _pg
812N/A * @description The shim placed over the screen to track the mousemove event.
812N/A * @type {Node}
812N/A */
812N/A _pg: null,
812N/A /**
812N/A * @private
812N/A * @property _debugShim
812N/A * @description Set this to true to set the shims opacity to .5 for debugging it, default: false.
1186N/A * @type {Boolean}
1186N/A */
1186N/A _debugShim: false,
1186N/A _activateTargets: function() { },
1186N/A _deactivateTargets: function() {},
1186N/A _startDrag: function() {
1186N/A if (this.activeDrag && this.activeDrag.get('useShim')) {
1186N/A this._pg_activate();
1186N/A this._activateTargets();
1186N/A }
1186N/A },
1186N/A _endDrag: function() {
1186N/A this._pg_deactivate();
1186N/A this._deactivateTargets();
1186N/A },
1186N/A /**
1186N/A * @private
1186N/A * @method _pg_deactivate
812N/A * @description Deactivates the shim
1186N/A */
1186N/A _pg_deactivate: function() {
1186N/A this._pg.setStyle('display', 'none');
1186N/A },
1186N/A /**
1186N/A * @private
1186N/A * @method _pg_activate
1186N/A * @description Activates the shim
1186N/A */
905N/A _pg_activate: function() {
1186N/A if (!this._pg) {
1186N/A this._createPG();
1186N/A }
1186N/A var ah = this.activeDrag.get('activeHandle'), cur = 'auto';
1186N/A if (ah) {
1186N/A cur = ah.getStyle('cursor');
1186N/A }
1186N/A if (cur == 'auto') {
1186N/A cur = this.get('dragCursor');
1186N/A }
1186N/A
812N/A this._pg_size();
812N/A this._pg.setStyles({
1186N/A top: 0,
1186N/A left: 0,
1186N/A display: 'block',
1186N/A opacity: ((this._debugShim) ? '.5' : '0'),
1186N/A cursor: cur
1186N/A });
812N/A },
1186N/A /**
1186N/A * @private
1186N/A * @method _pg_size
1186N/A * @description Sizes the shim on: activatation, window:scroll, window:resize
*/
_pg_size: function() {
if (this.activeDrag) {
var b = Y.one('body'),
h = b.get('docHeight'),
w = b.get('docWidth');
this._pg.setStyles({
height: h + 'px',
width: w + 'px'
});
}
},
/**
* @private
* @method _createPG
* @description Creates the shim and adds it's listeners to it.
*/
_createPG: function() {
var pg = Y.Node.create('<div></div>'),
bd = Y.one('body'), win;
pg.setStyles({
top: '0',
left: '0',
position: 'absolute',
zIndex: '9999',
overflow: 'hidden',
backgroundColor: 'red',
display: 'none',
height: '5px',
width: '5px'
});
pg.set('id', Y.stamp(pg));
pg.addClass(Y.DD.DDM.CSS_PREFIX + '-shim');
bd.prepend(pg);
this._pg = pg;
this._pg.on('mousemove', Y.throttle(Y.bind(this._move, this), this.get('throttleTime')));
this._pg.on('mouseup', Y.bind(this._end, this));
win = Y.one('win');
Y.on('window:resize', Y.bind(this._pg_size, this));
win.on('scroll', Y.bind(this._pg_size, this));
}
}, true);
}, '@VERSION@' ,{skinnable:false, requires:['dd-ddm-base', 'event-resize']});