yui.jsPlumb-1.3.0-RC1.js 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324
  1. /*
  2. * yui.jsPlumb 1.3.0-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. * getDragScope gets the drag scope for a given element.
  25. * getElementObject turns an id or dom element into an element object of the underlying library's type.
  26. * getOffset gets an element's offset
  27. * getScrollLeft gets an element's scroll left. TODO: is this actually used? will it be?
  28. * getScrollTop gets an element's scroll top. TODO: is this actually used? will it be?
  29. * getSize gets an element's size.
  30. * getUIPosition gets the position of some element that is currently being dragged, by extracting it from the arguments passed to a drag callback.
  31. * initDraggable initializes an element to be draggable
  32. * initDroppable initializes an element to be droppable
  33. * isDragSupported returns whether or not drag is supported for some element.
  34. * isDropSupported returns whether or not drop is supported for some element.
  35. * removeClass removes a class from a given element.
  36. * removeElement removes some element completely from the DOM.
  37. * setAttribute sets an attribute on some element.
  38. * setDraggable sets whether or not some element should be draggable.
  39. * setDragScope sets the drag scope for a given element.
  40. * setOffset sets the offset of some element.
  41. */
  42. (function() {
  43. if (!Array.prototype.indexOf) {
  44. Array.prototype.indexOf = function( v, b, s ) {
  45. for( var i = +b || 0, l = this.length; i < l; i++ ) {
  46. if( this[i]===v || s && this[i]==v ) { return i; }
  47. }
  48. return -1;
  49. };
  50. }
  51. var Y;
  52. YUI().use('node', 'dd', 'anim', function(_Y) {
  53. Y = _Y;
  54. Y.on("domready", function() { jsPlumb.init(); });
  55. });
  56. /**
  57. * adds the given value to the given list, with the given scope. creates the scoped list
  58. * if necessary.
  59. * used by initDraggable and initDroppable.
  60. */
  61. var _add = function(list, scope, value) {
  62. var l = list[scope];
  63. if (!l) {
  64. l = [];
  65. list[scope] = l;
  66. }
  67. l.push(value);
  68. },
  69. ddEvents = [ "drag:mouseDown", "drag:afterMouseDown", "drag:mouseup",
  70. "drag:align", "drag:removeHandle", "drag:addHandle", "drag:removeInvalid", "drag:addInvalid",
  71. "drag:start", "drag:end", "drag:drag", "drag:over", "drag:enter",
  72. "drag:exit", "drag:drophit", "drag:dropmiss", "drop:over", "drop:enter", "drop:exit", "drop:hit"
  73. ],
  74. animEvents = [ "tween" ],
  75. /**
  76. * helper function to curry callbacks for some element.
  77. */
  78. _wrapper = function(fn) {
  79. return function() {
  80. try {
  81. fn.apply(this, arguments);
  82. }
  83. catch (e) {
  84. console.log("wrap fail", e);
  85. }
  86. };
  87. },
  88. /**
  89. * extracts options from the given options object, leaving out event handlers.
  90. */
  91. _getDDOptions = function(options) {
  92. var o = {};
  93. for (var i in options) if (ddEvents.indexOf(i) == -1) o[i] = options[i];
  94. return o;
  95. },
  96. /**
  97. * attaches all event handlers found in options to the given dragdrop object, and registering
  98. * the given el as the element of interest.
  99. */
  100. _attachListeners = function(dd, options, eventList) {
  101. for (var ev in options) {
  102. if (eventList.indexOf(ev) != -1) {
  103. var w = _wrapper(options[ev]);
  104. dd.on(ev, w);
  105. }
  106. }
  107. },
  108. _droppables = {},
  109. _droppableOptions = {},
  110. _draggablesByScope = {},
  111. _draggablesById = {},
  112. _checkHover = function(el, entering) {
  113. if (el) {
  114. var id = el.get("id");
  115. if (id) {
  116. var options = _droppableOptions[id];
  117. if (options) {
  118. if (options['hoverClass']) {
  119. if (entering) el.addClass(options['hoverClass']);
  120. else el.removeClass(options['hoverClass']);
  121. }
  122. }
  123. }
  124. }
  125. },
  126. _lastDragObject = null,
  127. _extend = function(o1, o2) {
  128. for (var i in o2)
  129. o1[i] = o2[i];
  130. return o1;
  131. },
  132. _getAttribute = function(el, attributeId) {
  133. return el.getAttribute(attributeId);
  134. },
  135. _getElementObject = function(el) {
  136. return typeof el == 'string' ? Y.one('#' + el) : Y.one(el);
  137. };
  138. jsPlumb.CurrentLibrary = {
  139. addClass : function(el, clazz) {
  140. el.addClass(clazz);
  141. },
  142. /**
  143. * animates the given element.
  144. */
  145. animate : function(el, properties, options) {
  146. var o = _extend({node:el, to:properties}, options);
  147. var id = _getAttribute(el, "id");
  148. o["tween"] = jsPlumb.wrap(properties["tween"], function() {
  149. jsPlumb.repaint(id);
  150. });
  151. var a = new Y.Anim(o);
  152. _attachListeners(a, o, animEvents);
  153. a.run();
  154. },
  155. appendElement : function(child, parent) {
  156. _getElementObject (parent).append(child);
  157. },
  158. /**
  159. * event binding wrapper.
  160. */
  161. bind : function(el, event, callback) {
  162. _getElementObject(el).on(event, callback);
  163. },
  164. dragEvents : {
  165. "start":"drag:start", "stop":"drag:end", "drag":"drag:drag", "step":"step",
  166. "over":"drop:enter", "out":"drop:exit", "drop":"drop:hit"
  167. },
  168. extend : _extend,
  169. getAttribute : _getAttribute,
  170. getClientXY : function(eventObject) {
  171. return [eventObject.clientX, eventObject.clientY];
  172. },
  173. /**
  174. * takes the args passed to an event function and returns you an object representing that which is being dragged.
  175. */
  176. getDragObject : function(eventArgs) {
  177. // this is a workaround for the unfortunate fact that in YUI3, the 'drop:exit' event does
  178. // not contain a reference to the drag that just exited. single-threaded js to the
  179. // rescue: we'll just keep it for ourselves.
  180. if (eventArgs[0].drag) _lastDragObject = eventArgs[0].drag.el;
  181. return _lastDragObject;
  182. },
  183. getDragScope : function(el) {
  184. var id = jsPlumb.getId(el);
  185. var dd = _draggablesById[id];
  186. return dd.scope;
  187. },
  188. getElementObject : _getElementObject,
  189. getOffset : function(el) {
  190. var o = Y.DOM.getXY(el._node);
  191. return {left:o[0], top:o[1]};
  192. },
  193. getPageXY : function(eventObject) {
  194. return [eventObject.pageX, eventObject.pageY];
  195. },
  196. getParent : function(el) {
  197. return jsPlumb.CurrentLibrary.getElementObject(el).get("parentNode");
  198. },
  199. getScrollLeft : function(el) {
  200. return 0;
  201. },
  202. getScrollTop : function(el) {
  203. return 0;
  204. },
  205. getSize : function(el) {
  206. //TODO must be a better way to get this?
  207. //console.log("getSize");
  208. /*var bcr = _getElementObject(el)._node.getBoundingClientRect();
  209. return [ bcr.right - bcr.left, bcr.bottom - bcr.top]; // for some reason, in IE, the bounding rect does not always have width,height precomputed.*/
  210. return [ el._node.offsetWidth, el._node.offsetHeight ];
  211. },
  212. getUIPosition : function(args) {
  213. var n = args[0].currentTarget.el._node,
  214. o = Y.DOM.getXY(n);
  215. return {left:o[0], top:o[1]};
  216. },
  217. hasClass : function(el, clazz) {
  218. return el.hasClass(clazz);
  219. },
  220. initDraggable : function(el, options) {
  221. var _opts = _getDDOptions(options);
  222. var id = jsPlumb.getId(el);
  223. _opts.node = "#" + id;
  224. var dd = new Y.DD.Drag(_opts);
  225. dd.el = el;
  226. var scope = options['scope'] || jsPlumb.Defaults.Scope;
  227. dd.scope = scope;
  228. _draggablesById[id] = dd;
  229. _add(_draggablesByScope, scope, dd);
  230. _attachListeners(dd, options, ddEvents);
  231. },
  232. initDroppable : function(el, options) {
  233. var _opts = _getDDOptions(options);
  234. var id = jsPlumb.getId(el);
  235. _opts.node = "#" + id;
  236. var dd = new Y.DD.Drop(_opts);
  237. _droppableOptions[id] = options;
  238. options = _extend({}, options);
  239. var scope = options['scope'] || jsPlumb.Defaults.Scope;
  240. options["drop:enter"] = jsPlumb.wrap(options["drop:enter"], function(e) {
  241. if (e.drag.scope !== scope) return true;
  242. _checkHover(el, true);
  243. }, true);
  244. options["drop:exit"] = jsPlumb.wrap(options["drop:exit"], function(e) {
  245. _checkHover(el, false);
  246. });
  247. options["drop:hit"] = jsPlumb.wrap(options["drop:hit"], function(e) {
  248. if (e.drag.scope !== scope) return true;
  249. _checkHover(el, false);
  250. }, true);
  251. _attachListeners(dd, options, ddEvents);
  252. },
  253. isAlreadyDraggable : function(el) {
  254. el = _getElementObject(el);
  255. return el.hasClass("yui3-dd-draggable");
  256. },
  257. isDragSupported : function(el) { return true; },
  258. isDropSupported : function(el) { return true; },
  259. removeClass : function(el, clazz) { el.removeClass(clazz); },
  260. removeElement : function(el) { _getElementObject(el).remove(); },
  261. setAttribute : function(el, attributeName, attributeValue) {
  262. el.setAttribute(attributeName, attributeValue);
  263. },
  264. /**
  265. * sets the draggable state for the given element
  266. */
  267. setDraggable : function(el, draggable) {
  268. var id = jsPlumb.getId(el);
  269. var dd = _draggablesById[id];
  270. if (dd) dd.set("lock", !draggable);
  271. },
  272. setDragScope : function(el, scope) {
  273. var id = jsPlumb.getId(el);
  274. var dd = _draggablesById[id];
  275. if (dd) dd.scope = scope;
  276. },
  277. setOffset : function(el, o) {
  278. el = _getElementObject(el);
  279. el.set("top", o.top);
  280. el.set("left", o.left);
  281. }
  282. };
  283. })();