skills.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298
  1. /* For licensing terms, see /license.txt */
  2. var debug = 1;
  3. var skills = []; //current window divs
  4. var parents = []; //list of parents normally there should be only 2
  5. var first_parent = '';
  6. var duration_value = 500;
  7. //Setting the parent by default
  8. var parents = ['block_1'];
  9. function clean_values() {
  10. skills = []; //current window divs
  11. parents = ['block_1'];
  12. first_parent = '';
  13. //Reseting jsplumb
  14. jsPlumb.reset();
  15. //Deletes all windows
  16. $('.skill_root').remove();
  17. $('.skill_child').remove();
  18. open_block('block_1', 0, 1);
  19. }
  20. //Admin/normal arrows
  21. var editEndpointOptions = {
  22. isTarget:true,
  23. maxConnections:100,
  24. endpoint:"Rectangle",
  25. paintStyle:{
  26. fillStyle:"yellow" },
  27. detachable:false,
  28. connector:"Straight"
  29. };
  30. //Student arrows
  31. // If user completed the skill
  32. var done_arrow_color = '#73982C'; //green
  33. var doneEndpointOptions = {
  34. //connector:[ "Flowchart", { stub:28 } ], like a chart
  35. //anchors: ['BottomCenter','TopCenter'],
  36. endpoint:"Rectangle",
  37. paintStyle:{ width:1, height:1, fillStyle:done_arrow_color},
  38. isSource:false,
  39. scope:'blue rectangle',
  40. maxConnections:10,
  41. connectorStyle : {
  42. gradient:{ stops:[[0, done_arrow_color], [0.5, done_arrow_color], [1, done_arrow_color]] },
  43. lineWidth:5,
  44. strokeStyle:done_arrow_color
  45. },
  46. isTarget:false,
  47. setDraggableByDefault : false,
  48. connector:"Straight"
  49. };
  50. //Functions
  51. /* Clean window block classes*/
  52. function cleanclass(obj) {
  53. obj.removeClass('first_window');
  54. obj.removeClass('second_window');
  55. obj.removeClass('third_window');
  56. }
  57. /* When clicking the red block */
  58. function open_parent(parent_id, id) {
  59. console.log("open_parent call : id " + id + " parent_id:" + parent_id);
  60. var numeric_parent_id = parent_id.split('_')[1];
  61. var numeric_id = id.split('_')[1];
  62. $('#'+id).css('top', '0px');
  63. load_parent(numeric_parent_id, numeric_id);
  64. }
  65. /*
  66. * When clicking a children block
  67. @param string block id i.e "block_1"
  68. @param int load user data or not
  69. */
  70. function open_block(id, load_user_data, create_root) {
  71. if (debug) console.log("open_block id : " + id+" load_user_data: " +load_user_data + ', create_root ' + create_root);
  72. var numeric_id = id.split('_')[1];
  73. for (var i = 0; i < skills.length; i++) {ranc
  74. //Remove everything except parents
  75. if (jQuery.inArray(skills[i].element, parents) == -1) {
  76. //if (debug) console.log('deleting this skill '+ skills[i].element + " id: " + i);
  77. jsPlumb.detachAllConnections(skills[i].element);
  78. jsPlumb.removeAllEndpoints(skills[i].element);
  79. $("#"+skills[i].element).remove();
  80. }
  81. }
  82. load_children(numeric_id, 0, load_user_data, create_root);
  83. }
  84. function load_children(my_id, top_value, load_user_data, create_root) {
  85. if (debug) console.log("load_children : my_id " + my_id + ", top_value:" + top_value +", load_user_data: "+load_user_data+", create_root: "+create_root);
  86. //Fix the block vertical position
  87. my_top_root = 150;
  88. my_top_children = 250;
  89. console.log('Loading root info by ajax '+my_id);
  90. var skill = null;
  91. $.ajax({
  92. async: false,//very important other wise it would not work
  93. url: url+'&a=get_skill_info&id='+my_id,
  94. success: function(json) {
  95. skill = jQuery.parseJSON(json);
  96. }
  97. });
  98. //Creating the root
  99. if (create_root == 1) {
  100. //Loading children for the first time
  101. my_top_root = 0;
  102. my_top_children = 150;
  103. if (my_id == 1) {
  104. $('#skill_tree').append('<div id="block_'+my_id+'" class="skill_root first_window" >Root </div>');
  105. } else {
  106. $('#skill_tree').append('<div id="block_'+my_id+'" class="skill_root open_block first_window" >' +skill.name+'</div>');
  107. }
  108. //Adding to the skill list
  109. skills.push({
  110. element: "block_" + my_id
  111. });
  112. // jsPlumb.animate('block_'+my_id, { left: 500, top:50 }, { duration: 100 });
  113. /*
  114. var root_end_point_options = {
  115. // anchor:"Continuous",
  116. maxConnections:100,
  117. endpoint:"Dot",
  118. paintStyle:{ fillStyle:"gray" },
  119. };
  120. //The root is the source
  121. jsPlumb.makeSource("block_" + my_id, root_end_point_options);*/
  122. }
  123. //Loading children
  124. $.ajax({
  125. url: url+'&a=load_children&load_user_data='+load_user_data+'&id='+my_id,
  126. dataType: 'json',
  127. async: false,
  128. success: function(result) {
  129. if (result.success) {
  130. json = result.data;
  131. console.log('getJSON result: ' + result.success);
  132. //console.log('getJSON json: ' + json);
  133. //Fixing the root position in the organigram
  134. var final_left =0;
  135. var normal_width = 0;
  136. $('.skill_child').each( function(){
  137. normal_width = $(this).width();
  138. return true;
  139. });
  140. //normal_width = $('.skill_child :first').width();
  141. final_left = $('body').width() / 2 - normal_width/2;
  142. console.log('normal_width -----> '+normal_width);
  143. console.log('body.width -----> '+$('body').width());
  144. console.log('final_left -----> '+final_left);
  145. $('#block_'+my_id).css('left', final_left+'px');
  146. $.each(json,function(i, item) {
  147. //if (debug) console.log('Loading children: #' + item.id + " " +item.name);
  148. //item.name = '<a href="#" class="edit_block" id="edit_block_'+item.id+'">'+item.name+'</a>';
  149. item.name = '<a href="#" class="edit_block" id="edit_block_'+item.id+'">'+item.name+'</a>';
  150. var status_class = ' ';
  151. my_edit_point_options = editEndpointOptions;
  152. if (item.passed == 1) {
  153. my_edit_point_options = doneEndpointOptions;
  154. status_class = 'done_window';
  155. }
  156. $('#skill_tree').append('<div id="block_'+item.id+ '" class="skill_child open_block '+status_class+'" >'+item.name+'</div>');
  157. //Fix the block vertical position
  158. $('#block_'+item.id).css('top', my_top_children+'px');
  159. if (create_root == 0) {
  160. }
  161. //if (debug) console.log('Append block: '+item.id);
  162. endpoint = jsPlumb.makeTarget("block_" + item.id, my_edit_point_options);
  163. jsPlumb.connect({source: "block_" + my_id, target:"block_" + item.id});
  164. skills.push({
  165. element: "block_" + item.id, endp:endpoint
  166. });
  167. //console.log('added to array skills id: ' + item.id+" - name: "+item.name);
  168. });
  169. jsPlumb.draggable(jsPlumb.getSelector(".skill_child"));
  170. //jsPlumb.draggable(jsPlumb.getSelector(".skill_root"));
  171. console.log('draggable');
  172. console.log('setting animate for block_'+my_id);
  173. console.log('final parents '+parents);
  174. } //result
  175. }
  176. });
  177. }
  178. /* Loads parent blocks */
  179. function load_parent(parent_id, id) {
  180. if (debug) console.log("load_parent call : id " + id + " parent_id:" + parent_id);
  181. $.ajax({
  182. url: url+'&a=load_direct_parents&id='+id,
  183. async: false,
  184. success: function(json) {
  185. var json = jQuery.parseJSON(json);
  186. $.each(json,function(i,item) {
  187. if (item.parent_id == 0) {
  188. $('#skill_tree').append('<div id="block_'+item.id+ '" class="skill_root first_window ">'+item.name+'</div>');
  189. jsPlumb.connect({
  190. source: 'block_'+parent_id, target:'block_'+id
  191. });
  192. if (debug) console.log('setting NO--- first_parent ');
  193. first_parent = '';
  194. } else {
  195. $('#skill_tree').append('<div id="block_'+item.id+ '" class="open_block skill_child ">'+item.name+'</div>');
  196. jsPlumb.connect({
  197. source: 'block_'+parent_id, target:'block_'+id
  198. });
  199. if (debug) console.log('setting first_parent '+item.parent_id);
  200. first_parent = "block_" + item.parent_id;
  201. jsPlumb.draggable(jsPlumb.getSelector(".skill_root"));
  202. }
  203. my_top_root = 0;
  204. var normal_width = 0;
  205. $('.skill_child').each( function(){
  206. normal_width = $(this).width();
  207. return true;
  208. });
  209. final_left = $('body').width() / 2 - normal_width/2;
  210. console.log('normal_width -----> '+normal_width);
  211. console.log('body.width -----> '+$('body').width());
  212. console.log('final_left -----> '+final_left);
  213. $('#block_'+item.id).css('left', final_left+'px');
  214. jsPlumb.repaint('block_'+item.id);
  215. //jsPlumb.animate(id, { left: final_left, top:my_top_root }, { duration: 100 });
  216. //jsPlumb.animate(parent_id, { left: final_left, top:my_top_root }, { duration: 100 });
  217. });
  218. }
  219. });
  220. }
  221. function checkLength( o, n, min, max ) {
  222. if ( o.val().length > max || o.val().length < min ) {
  223. o.addClass( "ui-state-error" );
  224. updateTips( "Length of " + n + " must be between " +min + " and " + max + "." );
  225. return false;
  226. } else {
  227. return true;
  228. }
  229. }
  230. function updateTips( t ) {
  231. tips = $( ".validateTips" )
  232. tips
  233. .text( t )
  234. .addClass( "ui-state-highlight" );
  235. setTimeout(function() {
  236. tips.removeClass( "ui-state-highlight", 1500 );
  237. }, 500 );
  238. }