API Docs for: 3.17.2
Show:

File: dd/js/proxy.js

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