// 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 @param string block id i.e "block_1" * */ 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('
'+id+'
'); }*/ //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('
'+item.name+'
'); 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 = ''+item.name+''; var status_class = ' '; my_edit_point = editEndpoint; if (item.passed == 1) { my_edit_point = doneEndpoint; status_class = 'done_window'; } $('body').append('
'+item.name+'
'); 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; } } function updateTips( t ) { tips = $( ".validateTips" ) tips .text( t ) .addClass( "ui-state-highlight" ); setTimeout(function() { tips.removeClass( "ui-state-highlight", 1500 ); }, 500 ); }