yui.jsPlumb-1.2.5-RC1.js 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287
  1. /*
  2. * yui.jsPlumb 1.2.5-RC1
  3. *
  4. * YUI3 specific functionality for jsPlumb.
  5. *
  6. * http://morrisonpitt.com/jsPlumb/demo.html
  7. * http://code.google.com/p/jsPlumb
  8. *
  9. * NOTE: for production usage you should use yui-all-x.x.x-min.js, which contains the main jsPlumb script and this script together,
  10. * in a minified file.
  11. *
  12. * Dual licensed under MIT and GPL2.
  13. *
  14. */
  15. /**
  16. * addClass adds a class to the given element
  17. * animate calls the underlying library's animate functionality
  18. * appendElement appends a child element to a parent element.
  19. * bind binds some event to an element
  20. * dragEvents a dictionary of event names
  21. * extend extend some js object with another. probably not overly necessary; jsPlumb could just do this internally.
  22. * getAttribute gets some attribute from an element
  23. * getDragObject gets the object that is being dragged, by extracting it from the arguments passed to a drag callback
  24. * getElementObject turns an id or dom element into an element object of the underlying library's type.
  25. * getOffset gets an element's offset
  26. * getScrollLeft gets an element's scroll left. TODO: is this actually used? will it be?
  27. * getScrollTop gets an element's scroll top. TODO: is this actually used? will it be?
  28. * getSize gets an element's size.
  29. * getUIPosition gets the position of some element that is currently being dragged, by extracting it from the arguments passed to a drag callback.
  30. * initDraggable initializes an element to be draggable
  31. * initDroppable initializes an element to be droppable
  32. * isDragSupported returns whether or not drag is supported for some element.
  33. * isDropSupported returns whether or not drop is supported for some element.
  34. * removeClass removes a class from a given element.
  35. * removeElement removes some element completely from the DOM.
  36. * setAttribute sets an attribute on some element.
  37. * setDraggable sets whether or not some element should be draggable.
  38. * setOffset sets the offset of some element.
  39. */
  40. (function() {
  41. var Y;
  42. YUI().use('node', 'dd', 'anim', function(_Y) {
  43. Y = _Y;
  44. });
  45. /**
  46. * adds the given value to the given list, with the given scope. creates the scoped list
  47. * if necessary.
  48. * used by initDraggable and initDroppable.
  49. */
  50. var _add = function(list, scope, value) {
  51. var l = list[scope];
  52. if (!l) {
  53. l = [];
  54. list[scope] = l;
  55. }
  56. l.push(value);
  57. };
  58. var ddEvents = [ "drag:mouseDown", "drag:afterMouseDown", "drag:mouseup",
  59. "drag:align", "drag:removeHandle", "drag:addHandle", "drag:removeInvalid", "drag:addInvalid",
  60. "drag:start", "drag:end", "drag:drag", "drag:over", "drag:enter",
  61. "drag:exit", "drag:drophit", "drag:dropmiss", "drop:over", "drop:enter", "drop:exit", "drop:hit"
  62. ];
  63. var animEvents = [ "tween" ];
  64. /**
  65. * helper function to curry callbacks for some element.
  66. */
  67. var _wrapper = function(fn) {
  68. return function() { fn.apply(this, arguments); };
  69. };
  70. /**
  71. * extracts options from the given options object, leaving out event handlers.
  72. */
  73. var _getDDOptions = function(options) {
  74. var o = {};
  75. for (var i in options) if (ddEvents.indexOf(i) == -1) o[i] = options[i];
  76. return o;
  77. };
  78. /**
  79. * attaches all event handlers found in options to the given dragdrop object, and registering
  80. * the given el as the element of interest.
  81. */
  82. var _attachListeners = function(dd, options, eventList) {
  83. for (var ev in options) {
  84. if (eventList.indexOf(ev) != -1) {
  85. var w = _wrapper(options[ev]);
  86. dd.on(ev, w);
  87. }
  88. }
  89. };
  90. var _droppables = {};
  91. var _droppableOptions = {};
  92. var _draggablesByScope = {};
  93. var _draggablesById = {};
  94. var _checkHover = function(el, entering) {
  95. if (el) {
  96. var id = el.get("id");
  97. if (id) {
  98. var options = _droppableOptions[id];
  99. if (options) {
  100. if (options['hoverClass']) {
  101. if (entering) el.addClass(options['hoverClass']);
  102. else el.removeClass(options['hoverClass']);
  103. }
  104. }
  105. }
  106. }
  107. };
  108. var _lastDragObject = null;
  109. var _extend = function(o1, o2) {
  110. for (var i in o2)
  111. o1[i] = o2[i];
  112. return o1;
  113. };
  114. var _getAttribute = function(el, attributeId) {
  115. return el.getAttribute(attributeId);
  116. };
  117. var _getElementObject = function(el) {
  118. return typeof el == 'string' ? Y.one('#' + el) : Y.one(el);
  119. };
  120. jsPlumb.CurrentLibrary = {
  121. addClass : function(el, clazz) {
  122. el.addClass(clazz);
  123. },
  124. /**
  125. * animates the given element.
  126. */
  127. animate : function(el, properties, options) {
  128. var o = _extend({node:el, to:properties}, options);
  129. var id = _getAttribute(el, "id");
  130. o["tween"] = jsPlumb.wrap(properties["tween"], function() {
  131. jsPlumb.repaint(id);
  132. });
  133. var a = new Y.Anim(o);
  134. _attachListeners(a, o, animEvents);
  135. a.run();
  136. },
  137. appendElement : function(child, parent) {
  138. _getElementObject (parent).append(child);
  139. },
  140. /**
  141. * event binding wrapper.
  142. */
  143. bind : function(el, event, callback) {
  144. _getElementObject(el).on(event, callback);
  145. },
  146. dragEvents : {
  147. 'start':'drag:start', 'stop':'drag:end', 'drag':'drag:drag', 'step':'step',
  148. 'over':'drop:enter', 'out':'drop:exit', 'drop':'drop:hit'
  149. },
  150. extend : _extend,
  151. getAttribute : _getAttribute,
  152. /**
  153. * takes the args passed to an event function and returns you an object representing that which is being dragged.
  154. */
  155. getDragObject : function(eventArgs) {
  156. // this is a workaround for the unfortunate fact that in YUI3, the 'drop:exit' event does
  157. // not contain a reference to the drag that just exited. single-threaded js to the
  158. // rescue: we'll just keep it for ourselves.
  159. if (eventArgs[0].drag) _lastDragObject = eventArgs[0].drag.el;
  160. return _lastDragObject;
  161. },
  162. getElementObject : _getElementObject,
  163. getOffset : function(el) {
  164. var bcr = el._node.getBoundingClientRect();
  165. return { left:bcr.left, top:bcr.top };
  166. },
  167. getScrollLeft : function(el) {
  168. alert("YUI getScrollLeft not implemented yet");
  169. },
  170. getScrollTop : function(el) {
  171. alert("YUI getScrollTop not implemented yet");
  172. },
  173. getSize : function(el) {
  174. //TODO must be a better way to get this?
  175. var bcr = _getElementObject(el)._node.getBoundingClientRect();
  176. return [ bcr.width, bcr.height ];
  177. },
  178. getUIPosition : function(args) {
  179. //TODO must be a better way to get this? args was passed through from the drag function
  180. // in initDraggable above - args[0] here is the element that was inited.
  181. var bcr = _getElementObject(args[0].currentTarget.el)._node.getBoundingClientRect();
  182. return { left:bcr.left, top:bcr.top };
  183. },
  184. initDraggable : function(el, options) {
  185. var _opts = _getDDOptions(options);
  186. var id = jsPlumb.getId(el);
  187. _opts.node = "#" + id;
  188. var dd = new Y.DD.Drag(_opts);
  189. dd.el = el;
  190. var scope = options['scope'] || jsPlumb.Defaults.Scope;
  191. dd.scope = scope;
  192. _draggablesById[id] = dd;
  193. _add(_draggablesByScope, scope, dd);
  194. _attachListeners(dd, options, ddEvents);
  195. },
  196. initDroppable : function(el, options) {
  197. var _opts = _getDDOptions(options);
  198. var id = jsPlumb.getId(el);
  199. _opts.node = "#" + id;
  200. var dd = new Y.DD.Drop(_opts);
  201. _droppableOptions[id] = options;
  202. options = _extend({}, options);
  203. var scope = options['scope'] || jsPlumb.Defaults.Scope;
  204. options["drop:enter"] = jsPlumb.wrap(options["drop:enter"], function(e) {
  205. if (e.drag.scope !== scope) return true;
  206. _checkHover(el, true);
  207. }, true);
  208. options["drop:exit"] = jsPlumb.wrap(options["drop:exit"], function(e) {
  209. _checkHover(el, false);
  210. });
  211. options["drop:hit"] = jsPlumb.wrap(options["drop:hit"], function(e) {
  212. if (e.drag.scope !== scope) return true;
  213. _checkHover(el, false);
  214. }, true);
  215. _attachListeners(dd, options, ddEvents);
  216. },
  217. isAlreadyDraggable : function(el) {
  218. el = _getElementObject(el);
  219. return el.hasClass("yui3-dd-draggable");
  220. },
  221. isDragSupported : function(el) { return true; },
  222. isDropSupported : function(el) { return true; },
  223. removeClass : function(el, clazz) { el.removeClass(clazz); },
  224. removeElement : function(el) { _getElementObject(el).remove(); },
  225. setAttribute : function(el, attributeName, attributeValue) {
  226. el.setAttribute(attributeName, attributeValue);
  227. },
  228. /**
  229. * sets the draggable state for the given element
  230. */
  231. setDraggable : function(el, draggable) {
  232. var id = jsPlumb.getId(el);
  233. var dd = _draggablesById[id];
  234. if (dd) dd.set("lock", !draggable);
  235. },
  236. setOffset : function(el, o) {
  237. el = _getElementObject(el);
  238. el.set("top", o.top);
  239. el.set("left", o.left);
  240. }
  241. };
  242. })();