// 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('