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-proxy-debug.js 7.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
  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-proxy', function(Y) {
  9. /**
  10. * Plugin for dd-drag for creating a proxy drag node, instead of dragging the original node.
  11. * @module dd
  12. * @submodule dd-proxy
  13. */
  14. /**
  15. * Plugin for dd-drag for creating a proxy drag node, instead of dragging the original node.
  16. * @class DDProxy
  17. * @extends Base
  18. * @constructor
  19. * @namespace Plugin
  20. */
  21. var DDM = Y.DD.DDM,
  22. NODE = 'node',
  23. DRAG_NODE = 'dragNode',
  24. HOST = 'host',
  25. TRUE = true, proto,
  26. P = function(config) {
  27. P.superclass.constructor.apply(this, arguments);
  28. };
  29. P.NAME = 'DDProxy';
  30. /**
  31. * @property NS
  32. * @default con
  33. * @readonly
  34. * @protected
  35. * @static
  36. * @description The Proxy instance will be placed on the Drag instance under the proxy namespace.
  37. * @type {String}
  38. */
  39. P.NS = 'proxy';
  40. P.ATTRS = {
  41. host: {
  42. },
  43. /**
  44. * @attribute moveOnEnd
  45. * @description Move the original node at the end of the drag. Default: true
  46. * @type Boolean
  47. */
  48. moveOnEnd: {
  49. value: TRUE
  50. },
  51. /**
  52. * @attribute hideOnEnd
  53. * @description Hide the drag node at the end of the drag. Default: true
  54. * @type Boolean
  55. */
  56. hideOnEnd: {
  57. value: TRUE
  58. },
  59. /**
  60. * @attribute resizeFrame
  61. * @description Make the Proxy node assume the size of the original node. Default: true
  62. * @type Boolean
  63. */
  64. resizeFrame: {
  65. value: TRUE
  66. },
  67. /**
  68. * @attribute positionProxy
  69. * @description Make the Proxy node appear in the same place as the original node. Default: true
  70. * @type Boolean
  71. */
  72. positionProxy: {
  73. value: TRUE
  74. },
  75. /**
  76. * @attribute borderStyle
  77. * @description The default border style for the border of the proxy. Default: 1px solid #808080
  78. * @type Boolean
  79. */
  80. borderStyle: {
  81. value: '1px solid #808080'
  82. },
  83. /**
  84. * @attribute cloneNode
  85. * @description Should the node be cloned into the proxy for you. Default: false
  86. * @type Boolean
  87. */
  88. cloneNode: {
  89. value: false
  90. }
  91. };
  92. proto = {
  93. /**
  94. * @private
  95. * @property _hands
  96. * @description Holds the event handles for setting the proxy
  97. */
  98. _hands: null,
  99. /**
  100. * @private
  101. * @method _init
  102. * @description Handler for the proxy config attribute
  103. */
  104. _init: function() {
  105. if (!DDM._proxy) {
  106. DDM._createFrame();
  107. Y.on('domready', Y.bind(this._init, this));
  108. return;
  109. }
  110. if (!this._hands) {
  111. this._hands = [];
  112. }
  113. var h, h1, host = this.get(HOST), dnode = host.get(DRAG_NODE);
  114. if (dnode.compareTo(host.get(NODE))) {
  115. if (DDM._proxy) {
  116. host.set(DRAG_NODE, DDM._proxy);
  117. }
  118. }
  119. Y.each(this._hands, function(v) {
  120. v.detach();
  121. });
  122. h = DDM.on('ddm:start', Y.bind(function() {
  123. if (DDM.activeDrag === host) {
  124. DDM._setFrame(host);
  125. }
  126. }, this));
  127. h1 = DDM.on('ddm:end', Y.bind(function() {
  128. if (host.get('dragging')) {
  129. if (this.get('moveOnEnd')) {
  130. host.get(NODE).setXY(host.lastXY);
  131. }
  132. if (this.get('hideOnEnd')) {
  133. host.get(DRAG_NODE).setStyle('display', 'none');
  134. }
  135. if (this.get('cloneNode')) {
  136. host.get(DRAG_NODE).remove();
  137. host.set(DRAG_NODE, DDM._proxy);
  138. }
  139. }
  140. }, this));
  141. this._hands = [h, h1];
  142. },
  143. initializer: function() {
  144. this._init();
  145. },
  146. destructor: function() {
  147. var host = this.get(HOST);
  148. Y.each(this._hands, function(v) {
  149. v.detach();
  150. });
  151. host.set(DRAG_NODE, host.get(NODE));
  152. },
  153. clone: function() {
  154. var host = this.get(HOST),
  155. n = host.get(NODE),
  156. c = n.cloneNode(true);
  157. delete c._yuid;
  158. c.setAttribute('id', Y.guid());
  159. c.setStyle('position', 'absolute');
  160. n.get('parentNode').appendChild(c);
  161. host.set(DRAG_NODE, c);
  162. return c;
  163. }
  164. };
  165. Y.namespace('Plugin');
  166. Y.extend(P, Y.Base, proto);
  167. Y.Plugin.DDProxy = P;
  168. //Add a couple of methods to the DDM
  169. Y.mix(DDM, {
  170. /**
  171. * @private
  172. * @for DDM
  173. * @namespace DD
  174. * @method _createFrame
  175. * @description Create the proxy element if it doesn't already exist and set the DD.DDM._proxy value
  176. */
  177. _createFrame: function() {
  178. if (!DDM._proxy) {
  179. DDM._proxy = TRUE;
  180. var p = Y.Node.create('<div></div>'),
  181. b = Y.one('body');
  182. p.setStyles({
  183. position: 'absolute',
  184. display: 'none',
  185. zIndex: '999',
  186. top: '-999px',
  187. left: '-999px'
  188. });
  189. b.prepend(p);
  190. p.set('id', Y.guid());
  191. p.addClass(DDM.CSS_PREFIX + '-proxy');
  192. DDM._proxy = p;
  193. }
  194. },
  195. /**
  196. * @private
  197. * @for DDM
  198. * @namespace DD
  199. * @method _setFrame
  200. * @description If resizeProxy is set to true (default) it will resize the proxy element to match the size of the Drag Element.
  201. * If positionProxy is set to true (default) it will position the proxy element in the same location as the Drag Element.
  202. */
  203. _setFrame: function(drag) {
  204. var n = drag.get(NODE), d = drag.get(DRAG_NODE), ah, cur = 'auto';
  205. ah = DDM.activeDrag.get('activeHandle');
  206. if (ah) {
  207. cur = ah.getStyle('cursor');
  208. }
  209. if (cur == 'auto') {
  210. cur = DDM.get('dragCursor');
  211. }
  212. d.setStyles({
  213. visibility: 'hidden',
  214. display: 'block',
  215. cursor: cur,
  216. border: drag.proxy.get('borderStyle')
  217. });
  218. if (drag.proxy.get('cloneNode')) {
  219. d = drag.proxy.clone();
  220. }
  221. if (drag.proxy.get('resizeFrame')) {
  222. d.setStyles({
  223. height: n.get('offsetHeight') + 'px',
  224. width: n.get('offsetWidth') + 'px'
  225. });
  226. }
  227. if (drag.proxy.get('positionProxy')) {
  228. d.setXY(drag.nodeXY);
  229. }
  230. d.setStyle('visibility', 'visible');
  231. }
  232. });
  233. //Create the frame when DOM is ready
  234. //Y.on('domready', Y.bind(DDM._createFrame, DDM));
  235. }, '3.4.0' ,{skinnable:false, requires:['dd-drag']});