skills.js 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  1. // Arrow settings
  2. var exampleDropOptions = {
  3. tolerance:'touch',
  4. hoverClass:'dropHover',
  5. activeClass:'dragActive'
  6. };
  7. var connectorPaintStyle = {
  8. lineWidth:5,
  9. strokeStyle:"#deea18",
  10. joinstyle:"round"
  11. };
  12. // .. and this is the hover style.
  13. var connectorHoverStyle = {
  14. lineWidth:7,
  15. strokeStyle:"#2e2aF8"
  16. };
  17. //Admin arrows
  18. var edit_arrow_color = '#ccc';
  19. var editEndpoint = {
  20. //connectorStyle:connectorPaintStyle,
  21. connector:[ "Flowchart", { stub:28 } ],
  22. hoverPaintStyle:connectorHoverStyle,
  23. connectorHoverStyle:connectorHoverStyle,
  24. anchors: ['BottomCenter','TopCenter'],
  25. endpoint:"Rectangle",
  26. paintStyle:{ width:10, height:10, fillStyle:edit_arrow_color },
  27. isSource:true,
  28. scope:'blue rectangle',
  29. maxConnections:10,
  30. connectorStyle : {
  31. gradient:{
  32. stops:[[0, edit_arrow_color], [0.5, edit_arrow_color], [1, edit_arrow_color]]
  33. }, //gradient stuff
  34. lineWidth:2,
  35. strokeStyle: edit_arrow_color
  36. },
  37. isTarget:true,
  38. dropOptions : exampleDropOptions
  39. };
  40. //Student arrows
  41. //If user does not completed the skill
  42. var default_arrow_color = '#ccc'; //gray
  43. var defaultEndpoint = {
  44. connector:[ "Flowchart", { stub:28 } ],
  45. anchors: ['BottomCenter','TopCenter'],
  46. endpoint:"Rectangle",
  47. paintStyle:{ width:1, height:1, fillStyle:default_arrow_color },
  48. isSource:false,
  49. scope:'blue rectangle',
  50. maxConnections:10,
  51. connectorStyle : {
  52. gradient:{ stops:[[0, default_arrow_color], [0.5, default_arrow_color], [1, default_arrow_color]] },
  53. lineWidth:5,
  54. strokeStyle:default_arrow_color
  55. },
  56. isTarget:false,
  57. setDraggableByDefault : false,
  58. };
  59. // If user completed the skill
  60. var done_arrow_color = '#73982C'; //green
  61. var doneEndpoint = {
  62. connector:[ "Flowchart", { stub:28 } ],
  63. anchors: ['BottomCenter','TopCenter'],
  64. endpoint:"Rectangle",
  65. paintStyle:{ width:1, height:1, fillStyle:done_arrow_color},
  66. isSource:false,
  67. scope:'blue rectangle',
  68. maxConnections:10,
  69. connectorStyle : {
  70. gradient:{ stops:[[0, done_arrow_color], [0.5, done_arrow_color], [1, done_arrow_color]] },
  71. lineWidth:5,
  72. strokeStyle:done_arrow_color
  73. },
  74. isTarget:false,
  75. setDraggableByDefault : false,
  76. };
  77. //Functions
  78. /* Clean window block classes*/
  79. function cleanclass(obj) {
  80. obj.removeClass('first_window');
  81. obj.removeClass('second_window');
  82. obj.removeClass('third_window');
  83. }
  84. /* When clicking the red block */
  85. function open_parent(parent_id, id) {
  86. console.log("open_parent call : id " + id + " parent_id:" + parent_id);
  87. var numeric_parent_id = parent_id.split('_')[1];
  88. var numeric_id = id.split('_')[1];
  89. load_parent(numeric_parent_id, numeric_id);
  90. }
  91. /* When clicking a children block */
  92. function open_block(id) {
  93. console.log("open_block id : " + id);
  94. var numeric_id = id.split('_')[1];
  95. for (var i = 0; i < skills.length; i++) {
  96. //Remove everything except parents
  97. if (jQuery.inArray(skills[i].element, parents) == -1) {
  98. //console.log('deleting this'+ skills[i].element);
  99. jsPlumb.deleteEndpoint(skills[i].endp);
  100. $("#"+skills[i].element).remove();
  101. //skills.splice(i,1);
  102. //console.log('Removing '+skills[i].element);
  103. }
  104. }
  105. /*if ($('#'+id).length == 0) {
  106. $('body').append('<div id="'+id+'" class="open_block window " >'+id+'</div>');
  107. }*/
  108. //Modifying current block position
  109. pos = $('#'+id).position();
  110. left_value = center_x;
  111. if (parents.length == 2) {
  112. top_value = space_between_blocks_y + offset_y;
  113. } else {
  114. top_value = pos.left;
  115. }
  116. jsPlumb.animate(id, { left: left_value, top:top_value }, { duration:duration_value });
  117. //Modifying root block position
  118. pos_parent = $('#'+parents[0]).position();
  119. jsPlumb.animate(parents[0], { left: center_x, top:offset_y }, { duration:duration_value });
  120. top_value = 2*space_between_blocks_y +offset_y ;
  121. load_children(numeric_id, top_value);
  122. }
  123. /* Loads parent blocks */
  124. function load_parent(parent_id, id) {
  125. console.log("load_parent call : id " + id + " parent_id:" + parent_id);
  126. var ix= 0;
  127. $.ajax({
  128. url: url+'&a=load_direct_parents&id='+id,
  129. async: false,
  130. success: function(json) {
  131. var json = jQuery.parseJSON(json);
  132. $.each(json,function(i,item) {
  133. left_value = center_x + space_between_blocks_x * ix;
  134. top_value = offset_y;
  135. $('body').append('<div id="block_'+item.id+ '" class="open_block window " >'+item.name+'</div>');
  136. var es = prepare("block_" + item.id, editEndpoint);
  137. var es2 = prepare("block_" + id, editEndpoint);
  138. jsPlumb.connect({
  139. source: es, target:es2
  140. });
  141. jsPlumb.animate("block_" + item.id, { left: left_value, top : top_value }, { duration : duration_value});
  142. if (item.parent_id) {
  143. console.log('setting hidden_parent '+item.parent_id);
  144. hidden_parent = "block_" + item.parent_id;
  145. } else {
  146. console.log('setting NO--- hidden_parent ');
  147. }
  148. ix++;
  149. });
  150. }
  151. });
  152. }
  153. function load_children(my_id, top_value) {
  154. console.log("load_children call : my_id " + my_id + " top_value:" + top_value);
  155. //Loading children
  156. var ix = 0;
  157. $.getJSON(url+'&a=load_children&id='+my_id, {},
  158. function(json) {
  159. $.each(json,function(i,item) {
  160. left_value = ix*space_between_blocks_x + center_x/2 - block_size / 2;
  161. //top_value = 300;
  162. //Display::url($skill['name'], '#', array('id'=>'edit_block_'.$block_id, 'class'=>'edit_block'))
  163. item.name = '<a href="#" class="edit_block" id="edit_block_'+item.id+'">'+item.name+'</a>';
  164. var status_class = ' ';
  165. my_edit_point = editEndpoint;
  166. if (item.passed == 1) {
  167. my_edit_point = doneEndpoint;
  168. status_class = 'done_window';
  169. }
  170. $('body').append('<div id="block_'+item.id+ '" class="third_window open_block window '+status_class+'" >'+item.name+'</div>');
  171. var es = prepare("block_" + item.id, my_edit_point);
  172. var e2 = prepare("block_" + my_id, my_edit_point);
  173. jsPlumb.connect({source: es, target:e2});
  174. jsPlumb.animate("block_" + item.id, {
  175. left: left_value, top : top_value
  176. }, { duration:duration_value});
  177. ix++;
  178. });
  179. }
  180. );
  181. }
  182. function checkLength( o, n, min, max ) {
  183. if ( o.val().length > max || o.val().length < min ) {
  184. o.addClass( "ui-state-error" );
  185. updateTips( "Length of " + n + " must be between " +
  186. min + " and " + max + "." );
  187. return false;
  188. } else {
  189. return true;
  190. }
  191. }