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-delegate-debug.js 10KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346
  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-delegate', function(Y) {
  9. /**
  10. * Provides the ability to drag multiple nodes under a container element using only one Y.DD.Drag instance as a delegate.
  11. * @module dd
  12. * @submodule dd-delegate
  13. */
  14. /**
  15. * Provides the ability to drag multiple nodes under a container element using only one Y.DD.Drag instance as a delegate.
  16. * @class Delegate
  17. * @extends Base
  18. * @constructor
  19. * @namespace DD
  20. */
  21. var Delegate = function(o) {
  22. Delegate.superclass.constructor.apply(this, arguments);
  23. },
  24. CONT = 'container',
  25. NODES = 'nodes',
  26. _tmpNode = Y.Node.create('<div>Temp Node</div>');
  27. Y.extend(Delegate, Y.Base, {
  28. /**
  29. * @private
  30. * @property _bubbleTargets
  31. * @description The default bubbleTarget for this object. Default: Y.DD.DDM
  32. */
  33. _bubbleTargets: Y.DD.DDM,
  34. /**
  35. * @property dd
  36. * @description A reference to the temporary dd instance used under the hood.
  37. */
  38. dd: null,
  39. /**
  40. * @property _shimState
  41. * @private
  42. * @description The state of the Y.DD.DDM._noShim property to it can be reset.
  43. */
  44. _shimState: null,
  45. /**
  46. * @private
  47. * @property _handles
  48. * @description Array of event handles to be destroyed
  49. */
  50. _handles: null,
  51. /**
  52. * @private
  53. * @method _onNodeChange
  54. * @description Listens to the nodeChange event and sets the dragNode on the temp dd instance.
  55. * @param {Event} e The Event.
  56. */
  57. _onNodeChange: function(e) {
  58. this.set('dragNode', e.newVal);
  59. },
  60. /**
  61. * @private
  62. * @method _afterDragEnd
  63. * @description Listens for the drag:end event and updates the temp dd instance.
  64. * @param {Event} e The Event.
  65. */
  66. _afterDragEnd: function(e) {
  67. Y.DD.DDM._noShim = this._shimState;
  68. this.set('lastNode', this.dd.get('node'));
  69. this.get('lastNode').removeClass(Y.DD.DDM.CSS_PREFIX + '-dragging');
  70. this.dd._unprep();
  71. this.dd.set('node', _tmpNode);
  72. },
  73. /**
  74. * @private
  75. * @method _delMouseDown
  76. * @description The callback for the Y.DD.Delegate instance used
  77. * @param {Event} e The MouseDown Event.
  78. */
  79. _delMouseDown: function(e) {
  80. var tar = e.currentTarget,
  81. dd = this.dd,
  82. node = dd.get('node');
  83. if (tar.test(this.get(NODES)) && !tar.test(this.get('invalid'))) {
  84. this._shimState = Y.DD.DDM._noShim;
  85. Y.DD.DDM._noShim = true;
  86. this.set('currentNode', tar);
  87. if (node.inDoc()) {
  88. dd._unprep();
  89. }
  90. dd.set('node', tar);
  91. if (dd.proxy) {
  92. dd.set('dragNode', Y.DD.DDM._proxy);
  93. } else {
  94. dd.set('dragNode', tar);
  95. }
  96. dd._prep();
  97. dd.fire('drag:mouseDown', { ev: e });
  98. }
  99. },
  100. /**
  101. * @private
  102. * @method _onMouseEnter
  103. * @description Sets the target shim state
  104. * @param {Event} e The MouseEnter Event
  105. */
  106. _onMouseEnter: function(e) {
  107. this._shimState = Y.DD.DDM._noShim;
  108. Y.DD.DDM._noShim = true;
  109. },
  110. /**
  111. * @private
  112. * @method _onMouseLeave
  113. * @description Resets the target shim state
  114. * @param {Event} e The MouseLeave Event
  115. */
  116. _onMouseLeave: function(e) {
  117. Y.DD.DDM._noShim = this._shimState;
  118. },
  119. initializer: function(cfg) {
  120. this._handles = [];
  121. //Create a tmp DD instance under the hood.
  122. //var conf = Y.clone(this.get('dragConfig') || {}),
  123. var conf = this.get('dragConfig') || {},
  124. cont = this.get(CONT);
  125. conf.node = _tmpNode.cloneNode(true);
  126. conf.bubbleTargets = this;
  127. if (this.get('handles')) {
  128. conf.handles = this.get('handles');
  129. }
  130. this.dd = new Y.DD.Drag(conf);
  131. //On end drag, detach the listeners
  132. this.dd.after('drag:end', Y.bind(this._afterDragEnd, this));
  133. this.dd.on('dragNodeChange', Y.bind(this._onNodeChange, this));
  134. this.dd.after('drag:mouseup', function() {
  135. this._unprep();
  136. });
  137. //Attach the delegate to the container
  138. this._handles.push(Y.delegate(Y.DD.Drag.START_EVENT, Y.bind(this._delMouseDown, this), cont, this.get(NODES)));
  139. this._handles.push(Y.on('mouseenter', Y.bind(this._onMouseEnter, this), cont));
  140. this._handles.push(Y.on('mouseleave', Y.bind(this._onMouseLeave, this), cont));
  141. Y.later(50, this, this.syncTargets);
  142. Y.DD.DDM.regDelegate(this);
  143. },
  144. /**
  145. * @method syncTargets
  146. * @description Applies the Y.Plugin.Drop to all nodes matching the cont + nodes selector query.
  147. * @return {Self}
  148. * @chainable
  149. */
  150. syncTargets: function() {
  151. if (!Y.Plugin.Drop || this.get('destroyed')) {
  152. return;
  153. }
  154. var items, groups, config;
  155. if (this.get('target')) {
  156. items = Y.one(this.get(CONT)).all(this.get(NODES));
  157. groups = this.dd.get('groups');
  158. config = this.get('dragConfig');
  159. if (config && 'groups' in config) {
  160. groups = config.groups;
  161. }
  162. items.each(function(i) {
  163. this.createDrop(i, groups);
  164. }, this);
  165. }
  166. return this;
  167. },
  168. /**
  169. * @method createDrop
  170. * @description Apply the Drop plugin to this node
  171. * @param {Node} node The Node to apply the plugin to
  172. * @param {Array} groups The default groups to assign this target to.
  173. * @return Node
  174. */
  175. createDrop: function(node, groups) {
  176. var config = {
  177. useShim: false,
  178. bubbleTargets: this
  179. };
  180. if (!node.drop) {
  181. node.plug(Y.Plugin.Drop, config);
  182. }
  183. node.drop.set('groups', groups);
  184. return node;
  185. },
  186. destructor: function() {
  187. if (this.dd) {
  188. this.dd.destroy();
  189. }
  190. if (Y.Plugin.Drop) {
  191. var targets = Y.one(this.get(CONT)).all(this.get(NODES));
  192. targets.unplug(Y.Plugin.Drop);
  193. }
  194. Y.each(this._handles, function(v) {
  195. v.detach();
  196. });
  197. }
  198. }, {
  199. NAME: 'delegate',
  200. ATTRS: {
  201. /**
  202. * @attribute container
  203. * @description A selector query to get the container to listen for mousedown events on. All "nodes" should be a child of this container.
  204. * @type String
  205. */
  206. container: {
  207. value: 'body'
  208. },
  209. /**
  210. * @attribute nodes
  211. * @description A selector query to get the children of the "container" to make draggable elements from.
  212. * @type String
  213. */
  214. nodes: {
  215. value: '.dd-draggable'
  216. },
  217. /**
  218. * @attribute invalid
  219. * @description A selector query to test a node to see if it's an invalid item.
  220. * @type String
  221. */
  222. invalid: {
  223. value: 'input, select, button, a, textarea'
  224. },
  225. /**
  226. * @attribute lastNode
  227. * @description Y.Node instance of the last item dragged.
  228. * @type Node
  229. */
  230. lastNode: {
  231. value: _tmpNode
  232. },
  233. /**
  234. * @attribute currentNode
  235. * @description Y.Node instance of the dd node.
  236. * @type Node
  237. */
  238. currentNode: {
  239. value: _tmpNode
  240. },
  241. /**
  242. * @attribute dragNode
  243. * @description Y.Node instance of the dd dragNode.
  244. * @type Node
  245. */
  246. dragNode: {
  247. value: _tmpNode
  248. },
  249. /**
  250. * @attribute over
  251. * @description Is the mouse currently over the container
  252. * @type Boolean
  253. */
  254. over: {
  255. value: false
  256. },
  257. /**
  258. * @attribute target
  259. * @description Should the items also be a drop target.
  260. * @type Boolean
  261. */
  262. target: {
  263. value: false
  264. },
  265. /**
  266. * @attribute dragConfig
  267. * @description The default config to be used when creating the DD instance.
  268. * @type Object
  269. */
  270. dragConfig: {
  271. value: null
  272. },
  273. /**
  274. * @attribute handles
  275. * @description The handles config option added to the temp DD instance.
  276. * @type Array
  277. */
  278. handles: {
  279. value: null
  280. }
  281. }
  282. });
  283. Y.mix(Y.DD.DDM, {
  284. /**
  285. * @private
  286. * @for DDM
  287. * @property _delegates
  288. * @description Holder for all Y.DD.Delegate instances
  289. * @type Array
  290. */
  291. _delegates: [],
  292. /**
  293. * @for DDM
  294. * @method regDelegate
  295. * @description Register a Delegate with the DDM
  296. */
  297. regDelegate: function(del) {
  298. this._delegates.push(del);
  299. },
  300. /**
  301. * @for DDM
  302. * @method getDelegate
  303. * @description Get a delegate instance from a container node
  304. * @return Y.DD.Delegate
  305. */
  306. getDelegate: function(node) {
  307. var del = null;
  308. node = Y.one(node);
  309. Y.each(this._delegates, function(v) {
  310. if (node.test(v.get(CONT))) {
  311. del = v;
  312. }
  313. }, this);
  314. return del;
  315. }
  316. });
  317. Y.namespace('DD');
  318. Y.DD.Delegate = Delegate;
  319. }, '3.4.0' ,{requires:['dd-drag', 'event-mouseenter', 'dd-drop-plugin'], skinnable:false});