Dashboard sipadu mbip
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

dd-ddm.js 3.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  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.4.0
  6. build: nightly
  7. */
  8. YUI.add('dd-ddm', function(Y) {
  9. /**
  10. * 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.
  11. * It is also required to have Drop Targets enabled, as the viewport shim will contain the shims for the Drop Targets.
  12. * @module dd
  13. * @submodule dd-ddm
  14. * @for DDM
  15. * @namespace DD
  16. */
  17. Y.mix(Y.DD.DDM, {
  18. /**
  19. * @private
  20. * @property _pg
  21. * @description The shim placed over the screen to track the mousemove event.
  22. * @type {Node}
  23. */
  24. _pg: null,
  25. /**
  26. * @private
  27. * @property _debugShim
  28. * @description Set this to true to set the shims opacity to .5 for debugging it, default: false.
  29. * @type {Boolean}
  30. */
  31. _debugShim: false,
  32. _activateTargets: function() { },
  33. _deactivateTargets: function() {},
  34. _startDrag: function() {
  35. if (this.activeDrag && this.activeDrag.get('useShim')) {
  36. this._pg_activate();
  37. this._activateTargets();
  38. }
  39. },
  40. _endDrag: function() {
  41. this._pg_deactivate();
  42. this._deactivateTargets();
  43. },
  44. /**
  45. * @private
  46. * @method _pg_deactivate
  47. * @description Deactivates the shim
  48. */
  49. _pg_deactivate: function() {
  50. this._pg.setStyle('display', 'none');
  51. },
  52. /**
  53. * @private
  54. * @method _pg_activate
  55. * @description Activates the shim
  56. */
  57. _pg_activate: function() {
  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. this._pg_size();
  66. this._pg.setStyles({
  67. top: 0,
  68. left: 0,
  69. display: 'block',
  70. opacity: ((this._debugShim) ? '.5' : '0'),
  71. cursor: cur
  72. });
  73. },
  74. /**
  75. * @private
  76. * @method _pg_size
  77. * @description Sizes the shim on: activatation, window:scroll, window:resize
  78. */
  79. _pg_size: function() {
  80. if (this.activeDrag) {
  81. var b = Y.one('body'),
  82. h = b.get('docHeight'),
  83. w = b.get('docWidth');
  84. this._pg.setStyles({
  85. height: h + 'px',
  86. width: w + 'px'
  87. });
  88. }
  89. },
  90. /**
  91. * @private
  92. * @method _createPG
  93. * @description Creates the shim and adds it's listeners to it.
  94. */
  95. _createPG: function() {
  96. var pg = Y.Node.create('<div></div>'),
  97. bd = Y.one('body'), win;
  98. pg.setStyles({
  99. top: '0',
  100. left: '0',
  101. position: 'absolute',
  102. zIndex: '9999',
  103. overflow: 'hidden',
  104. backgroundColor: 'red',
  105. display: 'none',
  106. height: '5px',
  107. width: '5px'
  108. });
  109. pg.set('id', Y.stamp(pg));
  110. pg.addClass(Y.DD.DDM.CSS_PREFIX + '-shim');
  111. bd.prepend(pg);
  112. this._pg = pg;
  113. this._pg.on('mousemove', Y.throttle(Y.bind(this._move, this), this.get('throttleTime')));
  114. this._pg.on('mouseup', Y.bind(this._end, this));
  115. win = Y.one('win');
  116. Y.on('window:resize', Y.bind(this._pg_size, this));
  117. win.on('scroll', Y.bind(this._pg_size, this));
  118. }
  119. }, true);
  120. }, '3.4.0' ,{skinnable:false, requires:['dd-ddm-base', 'event-resize']});