skill_tree.tpl 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432
  1. <script type="text/javascript">
  2. //js settings
  3. var url = '{$url}';
  4. var skills = []; //current window divs
  5. var parents = []; //list of parents normally there should be only 2
  6. var hidden_parent = '';
  7. var duration_value = 500;
  8. //Block settings see the SkillVisualizer Class
  9. var offset_x = {$skill_visualizer->offset_x};
  10. var offset_y = {$skill_visualizer->offset_y};
  11. var space_between_blocks_x = {$skill_visualizer->space_between_blocks_x};
  12. var space_between_blocks_y = {$skill_visualizer->space_between_blocks_y};
  13. var center_x = {$skill_visualizer->center_x};
  14. var block_size = {$skill_visualizer->block_size};
  15. //Setting the parent by default
  16. var parents = ['block_1'];
  17. jsPlumb.bind("ready", function() {
  18. //Open dialog
  19. $("#dialog-form").dialog({
  20. autoOpen: false,
  21. modal : true,
  22. width : 550,
  23. height : 480,
  24. });
  25. //Filling skills select
  26. $.getJSON( "{$url}&a=get_skills", {},
  27. function(data) {
  28. $.each(data, function(n, parent) {
  29. // add a new option with the JSON-specified value and text
  30. $("<option />").attr("value", parent.id).text(parent.name).appendTo("#parent_id");
  31. });
  32. }
  33. );
  34. //Filling gradebook select
  35. $.getJSON( "{$url}&a=get_gradebooks", {},
  36. function(data) {
  37. $.each(data, function(n, gradebook) {
  38. // add a new option with the JSON-specified value and text
  39. $("<option />").attr("value", gradebook.id).text(gradebook.name).appendTo("#gradebook_id");
  40. });
  41. }
  42. );
  43. //On box click -(we use live instead of bind because we're creating divs on the fly )
  44. $(".open_block").live('click', function() {
  45. var id = $(this).attr('id');
  46. //if is root
  47. if (parents[0] == id) {
  48. parents = [id];
  49. }
  50. if (parents[1] != id) {
  51. if (parents.length == 2 ) {
  52. hidden_parent = parents[0];
  53. //console.log('deleting: '+parents[0]);
  54. //removing father
  55. for (var i = 0; i < skills.length; i++) {
  56. if ( skills[i].element == parents[0] ) {
  57. //console.log('deleting :'+ skills[i].element + ' here ');
  58. jsPlumb.deleteEndpoint(skills[i].endp);
  59. $("#"+skills[i].element).remove();
  60. //skills.splice(i,1)
  61. }
  62. }
  63. parents.splice(0,1);
  64. parents.push(id);
  65. }
  66. if ($(this).hasClass('first_window')) {
  67. //show the hidden_parent
  68. //if (hidden_parent != '') {
  69. parents = [hidden_parent, id];
  70. // console.log(parents);
  71. open_parent(hidden_parent, id);
  72. //}
  73. }
  74. if (jQuery.inArray(id, parents) == -1) {
  75. parents.push(id);
  76. }
  77. open_block(id);
  78. }
  79. //Setting class
  80. cleanclass($(this));
  81. $(this).addClass('second_window');
  82. parent_div = $("#"+parents[0]);
  83. cleanclass(parent_div);
  84. parent_div.addClass('first_window');
  85. parent_div = $("#"+parents[1]);
  86. cleanclass(parent_div);
  87. parent_div.addClass('second_window');
  88. console.log(parents);
  89. // console.log(skills);
  90. console.log('hidden_parent : ' + hidden_parent);
  91. });
  92. $(".edit_block").live('click',function() {
  93. var my_id = $(this).attr('id');
  94. my_id = my_id.split('_')[2];
  95. //Cleaning selected
  96. $("#parent_id option:selected").removeAttr('selected');
  97. $("#gradebook_id option:selected").removeAttr('selected');
  98. $.ajax({
  99. url: url+'&a=get_skill_info&id='+my_id,
  100. success: function(json) {
  101. var skill = jQuery.parseJSON(json);
  102. $("#name").attr('value', skill.name);
  103. $("#id").attr('value', skill.id);
  104. $("#description").attr('value', skill.description);
  105. //filling parent_id
  106. $("#parent_id option[value='"+skill.extra.parent_id+"']").attr('selected', 'selected');
  107. //filling the gradebook_id
  108. jQuery.each(skill.gradebooks, function(index, data) {
  109. $("#gradebook_id option[value='"+data.id+"']").attr('selected', 'selected');
  110. });
  111. },
  112. });
  113. $("#gradebook_id").trigger("liszt:updated");
  114. $("#parent_id").trigger("liszt:updated");
  115. $("#dialog-form").dialog("open");
  116. return false;
  117. });
  118. //Filling select
  119. $("#add_item_link").click(function() {
  120. $("#name").attr('value', '');
  121. $("#description").attr('value', '');
  122. $("#parent_id option:selected").removeAttr('selected');
  123. $("#gradebook_id option:selected").removeAttr('selected');
  124. $("#dialog-form").dialog("open");
  125. });
  126. var name = $( "#name" ),
  127. description = $( "#description" ),
  128. allFields = $( [] ).add( name ).add( description ), tips = $(".validateTips");
  129. $("#dialog-form").dialog({
  130. buttons: {
  131. "Add" : function() {
  132. var bValid = true;
  133. bValid = bValid && checkLength( name, "name", 1, 255 );
  134. var params = $("#add_item").serialize();
  135. $.ajax({
  136. url: url+'&a=add&'+params,
  137. success:function(data) {
  138. /*jsPlumb.connect({
  139. source : "block_2",
  140. target : "block_1",
  141. overlays : overlays
  142. });*/
  143. /*
  144. calEvent.title = $("#name").val();
  145. calEvent.start = calEvent.start;
  146. calEvent.end = calEvent.end;
  147. calEvent.allDay = calEvent.allDay;
  148. calEvent.description = $("#content").val();
  149. calendar.fullCalendar('updateEvent',
  150. calEvent,
  151. true // make the event "stick"
  152. );*/
  153. $("#dialog-form").dialog("close");
  154. }
  155. });
  156. },
  157. },
  158. close: function() {
  159. $("#name").attr('value', '');
  160. $("#description").attr('value', '');
  161. }
  162. });
  163. $(".window").bind('click', function() {
  164. var id = $(this).attr('id');
  165. id = id.split('_')[1];
  166. //$("#dialog-form").dialog("open");
  167. });
  168. // chrome fix.
  169. document.onselectstart = function () { return false; };
  170. // render mode
  171. var resetRenderMode = function(desiredMode) {
  172. var newMode = jsPlumb.setRenderMode(desiredMode);
  173. jsPlumbDemo.init();
  174. };
  175. resetRenderMode(jsPlumb.CANVAS);
  176. });
  177. ;(function() {
  178. prepare = function(elId, endpoint) {
  179. jsPlumbDemo.initHover(elId);
  180. //jsPlumbDemo.initAnimation(elId);
  181. var e = jsPlumb.addEndpoint(elId, endpoint);
  182. jsPlumbDemo.initjulio(e);
  183. skills.push({
  184. element:elId, endp:e
  185. });
  186. return e;
  187. },
  188. window.jsPlumbDemo = {
  189. initjulio :function(e) {
  190. },
  191. initHover :function(elId) {
  192. $("#" + elId).click(function() {
  193. var all = jsPlumb.getConnections({
  194. source:elId
  195. });
  196. });
  197. /*$("#" + elId).hover(
  198. function() { $(this).addClass("bigdot-hover"); },
  199. function() { $(this).removeClass("bigdot-hover"); }
  200. );*/
  201. },
  202. init : function() {
  203. jsPlumb.Defaults.DragOptions = { cursor: 'pointer', zIndex:2000 };
  204. jsPlumb.Defaults.PaintStyle = { strokeStyle:'#666' };
  205. jsPlumb.Defaults.EndpointStyle = { width:20, height:16, strokeStyle:'#666' };
  206. jsPlumb.Defaults.Endpoint = "Rectangle";
  207. jsPlumb.Defaults.Anchors = ["TopCenter", "TopCenter"];
  208. var connections = [];
  209. var updateConnections = function(conn, remove) {
  210. if (!remove) connections.push(conn);
  211. else {
  212. var idx = -1;
  213. for (var i = 0; i < connections.length; i++) {
  214. if (connections[i] == conn) {
  215. idx = i; break;
  216. }
  217. }
  218. if (idx != -1) connections.splice(idx, 1);
  219. }
  220. if (connections.length > 0) {
  221. var s = "<span>current connections</span><br/><br/><table><tr><th>scope</th><th>source</th><th>target</th></tr>";
  222. for (var j = 0; j < connections.length; j++) {
  223. s = s + "<tr><td>" + connections[j].scope + "</td>" + "<td>" + connections[j].sourceId + "</td><td>" + connections[j].targetId + "</td></tr>";
  224. }
  225. jsPlumbDemo.showConnectionInfo(s);
  226. } else
  227. jsPlumbDemo.hideConnectionInfo();
  228. };
  229. jsPlumb.bind("jsPlumbConnection", function(e) {
  230. updateConnections(e.connection);
  231. });
  232. jsPlumb.bind("jsPlumbConnectionDetached", function(e) {
  233. updateConnections(e.connection, true);
  234. });
  235. /**
  236. first example endpoint. it's a 25x21 rectangle (the size is provided in the 'style' arg to the Endpoint), and it's both a source
  237. and target. the 'scope' of this Endpoint is 'exampleConnection', meaning any connection starting from this Endpoint is of type
  238. 'exampleConnection' and can only be dropped on an Endpoint target that declares 'exampleEndpoint' as its drop scope, and also that
  239. only 'exampleConnection' types can be dropped here.
  240. the connection style for this endpoint is a Bezier curve (we didn't provide one, so we use the default), with a lineWidth of
  241. 5 pixels, and a gradient.
  242. note the use of the '$.extend' function to setup generic connection types. this will save you a lot of typing, and probably
  243. errors.
  244. */
  245. // this is the paint style for the connecting lines..
  246. jsPlumb.Defaults.Overlays = [
  247. //[ "Arrow", { location:0.5 } ], if you want to add an arrow in the connection
  248. ];
  249. jsPlumb.setMouseEventsEnabled(true);
  250. {$js}
  251. // three ways to do this - an id, a list of ids, or a selector (note the two different types of selectors shown here...anything that is valid jquery will work of course)
  252. //jsPlumb.draggable("window1");
  253. //jsPlumb.draggable(["window1", "window2"]);
  254. //jsPlumb.draggable($("#window1"));
  255. var divsWithWindowClass = jsPlumbDemo.getSelector(".window");
  256. jsPlumb.draggable(divsWithWindowClass);
  257. // add the third example using the '.window' class.
  258. //jsPlumb.addEndpoint(divsWithWindowClass, exampleEndpoint3);
  259. // each library uses different syntax for event stuff, so it is handed off
  260. // to the draggableConnectorsDemo-<library>.js files.
  261. jsPlumbDemo.attachBehaviour();
  262. }
  263. };
  264. })();
  265. $(document).ready( function() {
  266. //When creating a connection see
  267. //http://jsplumb.org/apidocs/files/jsPlumb-1-3-2-all-js.html#bind
  268. jsPlumb.bind("jsPlumbConnection", function(conn) {
  269. //alert("Connection created " + conn.sourceId + " to " + conn.targetId + " ");
  270. //jsPlumb.detach(conn);
  271. });
  272. //When double clicking a connection
  273. jsPlumb.bind("click", function(conn) {
  274. if (confirm("Delete connection from " + conn.sourceId + " to " + conn.targetId + "?"))
  275. jsPlumb.detach(conn);
  276. });
  277. //When double clicking a connection
  278. jsPlumb.bind("click", function(endpoint) {
  279. if (confirm("Delete connection from " + conn.sourceId + " to " + conn.targetId + "?"))
  280. jsPlumb.detach(conn);
  281. });
  282. $(".chzn-select").chosen();
  283. });
  284. ;(function() {
  285. jsPlumbDemo.showConnectionInfo = function(s) {
  286. $("#list").html(s);
  287. $("#list").fadeIn({ complete:function() { jsPlumb.repaintEverything(); }});
  288. };
  289. jsPlumbDemo.hideConnectionInfo = function() {
  290. $("#list").fadeOut({ complete:function() { jsPlumb.repaintEverything(); }});
  291. };
  292. jsPlumbDemo.getSelector = function(spec) {
  293. return $(spec);
  294. };
  295. jsPlumbDemo.attachBehaviour = function() {
  296. $(".hide").click(function() {
  297. jsPlumb.toggle($(this).attr("rel"));
  298. });
  299. $(".drag").click(function() {
  300. var s = jsPlumb.toggleDraggable($(this).attr("rel"));
  301. $(this).html(s ? 'disable dragging' : 'enable dragging');
  302. if (!s) $("#" + $(this).attr("rel")).addClass('drag-locked'); else $("#" + $(this).attr("rel")).removeClass('drag-locked');
  303. $("#" + $(this).attr("rel")).css("cursor", s ? "pointer" : "default");
  304. });
  305. $(".detach").click(function() {
  306. jsPlumb.detachAll($(this).attr("rel"));
  307. });
  308. $("#clear").click(function() {
  309. jsPlumb.detachEverything(); showConnections();
  310. });
  311. };
  312. })();
  313. </script>
  314. <a class="a_button gray" id="add_item_link" href="#">Add item</a>
  315. {$html}
  316. <div id="dialog-form" style="display:none;">
  317. <form id="add_item" name="form">
  318. <input type="hidden" name="id" id="id"/>
  319. <div class="row">
  320. <div class="label">
  321. <label for="name">Name</label>
  322. </div>
  323. <div class="formw">
  324. <input type="text" name="name" id="name" size="40" />
  325. </div>
  326. </div>
  327. <div class="row">
  328. <div class="label">
  329. <label for="name">Parent</label>
  330. </div>
  331. <div class="formw">
  332. <select id="parent_id" name="parent_id" />
  333. </select>
  334. </div>
  335. </div>
  336. <div class="row">
  337. <div class="label">
  338. <label for="name">Gradebook</label>
  339. </div>
  340. <div class="formw">
  341. <select id="gradebook_id" name="gradebook_id[]" multiple="multiple"/>
  342. </select>
  343. <span class="help-block">
  344. Gradebook Description
  345. </span>
  346. </div>
  347. </div>
  348. <div class="row">
  349. <div class="label">
  350. <label for="name">Description</label>
  351. </div>
  352. <div class="formw">
  353. <textarea name="description" id="description" cols="40" rows="7"></textarea>
  354. </div>
  355. </div>
  356. </form>
  357. </div>