skills.js 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  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. @param string block id i.e "block_1"
  93. * */
  94. function open_block(id) {
  95. console.log("open_block id : " + id);
  96. var numeric_id = id.split('_')[1];
  97. for (var i = 0; i < skills.length; i++) {
  98. //Remove everything except parents
  99. if (jQuery.inArray(skills[i].element, parents) == -1) {
  100. //console.log('deleting this'+ skills[i].element);
  101. jsPlumb.deleteEndpoint(skills[i].endp);
  102. $("#"+skills[i].element).remove();
  103. //skills.splice(i,1);
  104. //console.log('Removing '+skills[i].element);
  105. }
  106. }
  107. /*if ($('#'+id).length == 0) {
  108. $('body').append('<div id="'+id+'" class="open_block window " >'+id+'</div>');
  109. }*/
  110. //Modifying current block position
  111. pos = $('#'+id).position();
  112. left_value = center_x;
  113. if (parents.length == 2) {
  114. top_value = space_between_blocks_y + offset_y;
  115. } else {
  116. top_value = pos.left;
  117. }
  118. jsPlumb.animate(id, { left: left_value, top:top_value }, { duration:duration_value });
  119. //Modifying root block position
  120. pos_parent = $('#'+parents[0]).position();
  121. jsPlumb.animate(parents[0], { left: center_x, top:offset_y }, { duration:duration_value });
  122. top_value = 2*space_between_blocks_y +offset_y ;
  123. load_children(numeric_id, top_value);
  124. }
  125. /* Loads parent blocks */
  126. function load_parent(parent_id, id) {
  127. console.log("load_parent call : id " + id + " parent_id:" + parent_id);
  128. var ix= 0;
  129. $.ajax({
  130. url: url+'&a=load_direct_parents&id='+id,
  131. async: false,
  132. success: function(json) {
  133. var json = jQuery.parseJSON(json);
  134. $.each(json,function(i,item) {
  135. left_value = center_x + space_between_blocks_x * ix;
  136. top_value = offset_y;
  137. $('body').append('<div id="block_'+item.id+ '" class="open_block window " >'+item.name+'</div>');
  138. var es = prepare("block_" + item.id, editEndpoint);
  139. var es2 = prepare("block_" + id, editEndpoint);
  140. jsPlumb.connect({
  141. source: es, target:es2
  142. });
  143. jsPlumb.animate("block_" + item.id, { left: left_value, top : top_value }, { duration : duration_value});
  144. if (item.parent_id) {
  145. console.log('setting hidden_parent '+item.parent_id);
  146. hidden_parent = "block_" + item.parent_id;
  147. } else {
  148. console.log('setting NO--- hidden_parent ');
  149. }
  150. ix++;
  151. });
  152. }
  153. });
  154. }
  155. function load_children(my_id, top_value) {
  156. console.log("load_children call : my_id " + my_id + " top_value:" + top_value);
  157. //Loading children
  158. var ix = 0;
  159. $.getJSON(url+'&a=load_children&id='+my_id, {},
  160. function(json) {
  161. $.each(json,function(i,item) {
  162. left_value = ix*space_between_blocks_x + center_x/2 - block_size / 2;
  163. //top_value = 300;
  164. //Display::url($skill['name'], '#', array('id'=>'edit_block_'.$block_id, 'class'=>'edit_block'))
  165. item.name = '<a href="#" class="edit_block" id="edit_block_'+item.id+'">'+item.name+'</a>';
  166. var status_class = ' ';
  167. my_edit_point = editEndpoint;
  168. if (item.passed == 1) {
  169. my_edit_point = doneEndpoint;
  170. status_class = 'done_window';
  171. }
  172. $('body').append('<div id="block_'+item.id+ '" class="third_window open_block window '+status_class+'" >'+item.name+'</div>');
  173. var es = prepare("block_" + item.id, my_edit_point);
  174. var e2 = prepare("block_" + my_id, my_edit_point);
  175. jsPlumb.connect({source: es, target:e2});
  176. jsPlumb.animate("block_" + item.id, {
  177. left: left_value, top : top_value
  178. }, { duration:duration_value});
  179. ix++;
  180. });
  181. }
  182. );
  183. }
  184. function checkLength( o, n, min, max ) {
  185. if ( o.val().length > max || o.val().length < min ) {
  186. o.addClass( "ui-state-error" );
  187. updateTips( "Length of " + n + " must be between " +min + " and " + max + "." );
  188. return false;
  189. } else {
  190. return true;
  191. }
  192. }
  193. function updateTips( t ) {
  194. tips = $( ".validateTips" )
  195. tips
  196. .text( t )
  197. .addClass( "ui-state-highlight" );
  198. setTimeout(function() {
  199. tips.removeClass( "ui-state-highlight", 1500 );
  200. }, 500 );
  201. }