123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226 |
- // Arrow settings
- var exampleDropOptions = {
- tolerance:'touch',
- hoverClass:'dropHover',
- activeClass:'dragActive'
- };
- var connectorPaintStyle = {
- lineWidth:5,
- strokeStyle:"#deea18",
- joinstyle:"round"
- };
- // .. and this is the hover style.
- var connectorHoverStyle = {
- lineWidth:7,
- strokeStyle:"#2e2aF8"
- };
-
-
- //Admin arrows
- var edit_arrow_color = '#ccc';
-
- var editEndpoint = {
- //connectorStyle:connectorPaintStyle,
- connector:[ "Flowchart", { stub:28 } ],
- hoverPaintStyle:connectorHoverStyle,
- connectorHoverStyle:connectorHoverStyle,
- anchors: ['BottomCenter','TopCenter'],
- endpoint:"Rectangle",
- paintStyle:{ width:10, height:10, fillStyle:edit_arrow_color },
- isSource:true,
- scope:'blue rectangle',
- maxConnections:10,
- connectorStyle : {
- gradient:{
- stops:[[0, edit_arrow_color], [0.5, edit_arrow_color], [1, edit_arrow_color]]
- }, //gradient stuff
- lineWidth:2,
- strokeStyle: edit_arrow_color
- },
- isTarget:true,
- dropOptions : exampleDropOptions
- };
-
-
- //Student arrows
-
- //If user does not completed the skill
- var default_arrow_color = '#ccc'; //gray
- var defaultEndpoint = {
- connector:[ "Flowchart", { stub:28 } ],
- anchors: ['BottomCenter','TopCenter'],
- endpoint:"Rectangle",
- paintStyle:{ width:1, height:1, fillStyle:default_arrow_color },
- isSource:false,
- scope:'blue rectangle',
- maxConnections:10,
- connectorStyle : {
- gradient:{ stops:[[0, default_arrow_color], [0.5, default_arrow_color], [1, default_arrow_color]] },
- lineWidth:5,
- strokeStyle:default_arrow_color
- },
- isTarget:false,
- setDraggableByDefault : false,
- };
-
- // If user completed the skill
- var done_arrow_color = '#73982C'; //green
- var doneEndpoint = {
- connector:[ "Flowchart", { stub:28 } ],
- anchors: ['BottomCenter','TopCenter'],
- endpoint:"Rectangle",
- paintStyle:{ width:1, height:1, fillStyle:done_arrow_color},
- isSource:false,
- scope:'blue rectangle',
- maxConnections:10,
- connectorStyle : {
- gradient:{ stops:[[0, done_arrow_color], [0.5, done_arrow_color], [1, done_arrow_color]] },
- lineWidth:5,
- strokeStyle:done_arrow_color
- },
- isTarget:false,
- setDraggableByDefault : false,
- };
-
-
-
-
- //Functions
-
- /* Clean window block classes*/
- function cleanclass(obj) {
- obj.removeClass('first_window');
- obj.removeClass('second_window');
- obj.removeClass('third_window');
- }
-
- /* When clicking the red block */
- function open_parent(parent_id, id) {
- console.log("open_parent call : id " + id + " parent_id:" + parent_id);
- var numeric_parent_id = parent_id.split('_')[1];
- var numeric_id = id.split('_')[1];
- load_parent(numeric_parent_id, numeric_id);
- }
-
- /* When clicking a children block */
-
- function open_block(id) {
- console.log("open_block id : " + id);
- var numeric_id = id.split('_')[1];
- for (var i = 0; i < skills.length; i++) {
- //Remove everything except parents
- if (jQuery.inArray(skills[i].element, parents) == -1) {
- //console.log('deleting this'+ skills[i].element);
- jsPlumb.deleteEndpoint(skills[i].endp);
- $("#"+skills[i].element).remove();
- //skills.splice(i,1);
- //console.log('Removing '+skills[i].element);
- }
- }
- /*if ($('#'+id).length == 0) {
- $('body').append('<div id="'+id+'" class="open_block window " >'+id+'</div>');
- }*/
-
- //Modifying current block position
- pos = $('#'+id).position();
- left_value = center_x;
-
- if (parents.length == 2) {
- top_value = space_between_blocks_y + offset_y;
- } else {
- top_value = pos.left;
- }
- jsPlumb.animate(id, { left: left_value, top:top_value }, { duration:duration_value });
-
- //Modifying root block position
- pos_parent = $('#'+parents[0]).position();
- jsPlumb.animate(parents[0], { left: center_x, top:offset_y }, { duration:duration_value });
-
- top_value = 2*space_between_blocks_y +offset_y ;
- load_children(numeric_id, top_value);
- }
-
- /* Loads parent blocks */
- function load_parent(parent_id, id) {
- console.log("load_parent call : id " + id + " parent_id:" + parent_id);
- var ix= 0;
- $.ajax({
- url: url+'&a=load_direct_parents&id='+id,
- async: false,
- success: function(json) {
- var json = jQuery.parseJSON(json);
-
- $.each(json,function(i,item) {
- left_value = center_x + space_between_blocks_x * ix;
- top_value = offset_y;
-
- $('body').append('<div id="block_'+item.id+ '" class="open_block window " >'+item.name+'</div>');
- var es = prepare("block_" + item.id, editEndpoint);
- var es2 = prepare("block_" + id, editEndpoint);
-
- jsPlumb.connect({
- source: es, target:es2
- });
- jsPlumb.animate("block_" + item.id, { left: left_value, top : top_value }, { duration : duration_value});
-
- if (item.parent_id) {
- console.log('setting hidden_parent '+item.parent_id);
- hidden_parent = "block_" + item.parent_id;
- } else {
- console.log('setting NO--- hidden_parent ');
- }
- ix++;
- });
- }
- });
- }
-
- function load_children(my_id, top_value) {
- console.log("load_children call : my_id " + my_id + " top_value:" + top_value);
- //Loading children
- var ix = 0;
- $.getJSON(url+'&a=load_children&id='+my_id, {},
- function(json) {
- $.each(json,function(i,item) {
- left_value = ix*space_between_blocks_x + center_x/2 - block_size / 2;
- //top_value = 300;
- //Display::url($skill['name'], '#', array('id'=>'edit_block_'.$block_id, 'class'=>'edit_block'))
- item.name = '<a href="#" class="edit_block" id="edit_block_'+item.id+'">'+item.name+'</a>';
-
-
- var status_class = ' ';
- my_edit_point = editEndpoint;
-
- if (item.passed == 1) {
- my_edit_point = doneEndpoint;
- status_class = 'done_window';
- }
-
- $('body').append('<div id="block_'+item.id+ '" class="third_window open_block window '+status_class+'" >'+item.name+'</div>');
-
- var es = prepare("block_" + item.id, my_edit_point);
- var e2 = prepare("block_" + my_id, my_edit_point);
-
- jsPlumb.connect({source: es, target:e2});
- jsPlumb.animate("block_" + item.id, {
- left: left_value, top : top_value
- }, { duration:duration_value});
- ix++;
- });
- }
- );
- }
-
- function checkLength( o, n, min, max ) {
- if ( o.val().length > max || o.val().length < min ) {
- o.addClass( "ui-state-error" );
- updateTips( "Length of " + n + " must be between " +
- min + " and " + max + "." );
- return false;
- } else {
- return true;
- }
- }
|