chamilo
/
chamilo-lms
mirror of https://github.com/chamilo/chamilo-lms/tree/1.11.x
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Skills: connections and add button are working but it's still disordered + cleaning files

Browse Source
skala
Julio Montoya 14 years ago
parent fc8fd3048f
commit 643dac1a59
5 changed files with 92 additions and 212 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      main/admin/skills.php
  2. 3
      main/css/base.css
  3. 104
      main/inc/lib/javascript/skills.js
  4. 3
      main/inc/lib/skill.visualizer.lib.php
  5. 193
      main/template/default/skill/skill_tree.tpl

1
main/admin/skills.php
Unescape View File

@ -18,7 +18,6 @@ $this_section = SECTION_PLATFORM_ADMIN;
api_protect_admin_script();
//Adds the JS needed to use the jqgrid
$htmlHeadXtra[] = api_get_jqgrid_js();
$htmlHeadXtra[] = api_get_js('jquery.jsPlumb.all.js');
$htmlHeadXtra[] = api_get_js('skills.js');

3
main/css/base.css
Unescape View File

@ -2941,8 +2941,7 @@ form .formw .freeze {
}
.second_window {
border: 1px solid black;
border: 1px solid blue;
}
.third_window {

104
main/inc/lib/javascript/skills.js
Unescape View File

@ -134,13 +134,16 @@ function open_block(id, load_user_data, create_root) {
function load_children(my_id, top_value, load_user_data, create_root) {
if (debug) console.log("load_children : my_id " + my_id + ", top_value:" + top_value +", load_user_data: "+load_user_data);
//Loading children
var ix = 0;
if (debug) console.log("load_children : my_id " + my_id + ", top_value:" + top_value +", load_user_data: "+load_user_data+", create_root: "+create_root);
//Fix the block vertical position
//$('#block_'+my_id).css('top', '150px');
my_top = 50;
//Creating the root
if (create_root == 1) {
my_top = 0;
if (my_id == 1) {
$('#skill_tree').append('<div id="block_'+my_id+'" class="skill_root first_window" >Root </div>');
} else {
@ -150,52 +153,47 @@ function load_children(my_id, top_value, load_user_data, create_root) {
url: url+'&a=get_skill_info&id='+my_id,
success: function(json) {
var skill = jQuery.parseJSON(json);
$('#skill_tree').append('<div id="block_'+my_id+'" class="skill_root open_block first_window" >' +skill.name+'</div>');
console.log('Adding block: '+my_id);
$('#skill_tree').append('<div id="block_'+my_id+'" class="skill_root open_block first_window" >' +skill.name+'</div>');
console.log('Adding root block: '+my_id);
}
});
}
//Adding to the skill list
skills.push({
element: "block_" + my_id
});
// jsPlumb.animate('block_'+my_id, { left: 500, top:50 }, { duration: 100 });
/*
var root_end_point_options = {
// anchor:"Continuous",
// anchor:"Continuous",
maxConnections:100,
endpoint:"Dot",
paintStyle:{ fillStyle:"gray" },
};
//The root is the source
//jsPlumb.makeSource("block_" + my_id, root_end_point_options);
/*$('#block_'+my_id).css({
position: 'absolute',
zIndex: 5000,
left: '100px',
top: '100px'
});*/
//The root is the source
jsPlumb.makeSource("block_" + my_id, root_end_point_options);*/
}
$.getJSON(url+'&a=load_children&load_user_data='+load_user_data+'&id='+my_id, {},
function (result) {
//Loading children
$.ajax({
url: url+'&a=load_children&load_user_data='+load_user_data+'&id='+my_id,
dataType: 'json',
async: false,
success: function(result) {
if (result.success) {
json = result.data;
console.log('getJSON result: ' + result.success);
console.log('getJSON json: ' + json);
//console.log('getJSON json: ' + json);
$.each(json,function(i, item) {
if (debug) console.log('Loading children: #' + item.id + " " +item.name);
//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>';
//item.name = '<a href="#" class="edit_block" id="edit_block_'+item.id+'">'+item.name+'</a>';
item.name = '<a href="#" class="edit_block" id="edit_block_'+item.id+'">'+item.name+'</a>';
var status_class = ' ';
@ -207,21 +205,12 @@ function load_children(my_id, top_value, load_user_data, create_root) {
}
$('#skill_tree').append('<div id="block_'+item.id+ '" class="skill_child open_block '+status_class+'" >'+item.name+'</div>');
$('#block_'+item.id).css('top', '100px');
//Fix the block vertical position
$('#block_'+item.id).css('top', '150px');
if (debug) console.log('Append block: '+item.id);
/*$('#block_'+item.id).css({
position: 'absolute',
zIndex: 5000,
left: '10',
top: '10'
});*/
//var es = prepare("block_" + item.id, my_edit_point_options);
//var e2 = prepare("block_" + my_id, my_edit_point_options);
endpoint = jsPlumb.makeTarget("block_" + item.id, my_edit_point_options);
jsPlumb.connect({source: "block_" + my_id, target:"block_" + item.id});
@ -231,43 +220,34 @@ function load_children(my_id, top_value, load_user_data, create_root) {
});
console.log('added to array skills id: ' + item.id+" - name: "+item.name);
//console.log('connect sources');
/*jsPlumb.animate("block_" + item.id, {
left: left_value, top : top_value
}, { duration : duration_value });
ix++; */
});
jsPlumb.draggable(jsPlumb.getSelector(".skill_child"));
jsPlumb.draggable(jsPlumb.getSelector(".skill_root"));
//jsPlumb.draggable(jsPlumb.getSelector(".skill_root"));
console.log('draggable');
//Creating the organigram
//Fixing the root position in the organigram
var sum=0;
var normal_weight = 0;
$('.skill_child').each( function(){
//sum += $(this).width();
sum += $(this).outerWidth(true);
normal_weight = $(this).width();
q = $(this).css('margin-left').replace("px", "");
var normal_width = 0;
$('.skill_child').each( function(){
normal_width = $(this).width();
return true;
});
sum = $('body').width() / 2 - normal_weight/2 - q/2;
jsPlumb.animate('block_'+my_id, { left: sum, top:0 }, { duration: 100 });
//console.log('--> changing top of .skill_child'+ $('.skill_child').css('top') + 50);
//$('.skill_child').css('top', $('.skill_child').css('top') + 50);
//normal_width = $('.skill_child :first').width();
sum = $('body').width() / 2 - normal_width/2;
console.log('normal_width -----> '+normal_width);
console.log('body.width -----> '+$('body').width());
console.log('setting animate for block_'+my_id);
//$('#block_'+my_id).css('margin-bottom', "20px");
jsPlumb.animate('block_'+my_id, { left: sum, top:my_top }, { duration: 100 });
console.log('setting animate for block_'+my_id);
console.log('final parents '+parents);
} //result
}
);
});
}
/* Loads parent blocks */

3
main/inc/lib/skill.visualizer.lib.php
Unescape View File

@ -2,7 +2,8 @@
/* For licensing terms, see /license.txt */
/**
* @package chamilo.admin
* @package chamilo.admin
* @todo lib not use. Only the class variables not the functions
*/
class SkillVisualizer {

193
main/template/default/skill/skill_tree.tpl
Unescape View File

@ -38,10 +38,6 @@ var block_size = {{skill_visualizer.block_size}};
//Setting the parent by default
var parents = ['block_1'];
function clean_values() {
skills = []; //current window divs
parents = ['block_1'];
@ -58,14 +54,22 @@ function clean_values() {
$(window).resize(function() {
// Top bar scroll effect
//console.log($('body').width());
jsPlumb.repaintEverything();
jsPlumb.repaintEverything();
/*jsPlumb.repaint(".skill_root");
// When resize repaint everything + fix the root position
normal_weight = $('.skill_child :first-child').width();
sum = $('body').width() / 2 - normal_weight/2;
$('.skill_root').animate({ left: sum, top:0 }, { duration: 100 });*/
});
jsPlumb.ready(function() {
var loading = $( "#dialog-loading" );
//Setting the loading dialog
var loading = $( "#dialog-loading" );
loading.dialog( "destroy" );
loading.dialog({
autoOpen:false,
@ -76,7 +80,7 @@ jsPlumb.ready(function() {
closeOnEscape : false,
disabled: true,
open: function(event, ui) { $(this).parent().children().children('.ui-dialog-titlebar-close').hide(); }
});
});
jQuery.ajaxSetup({
beforeSend: function() {
@ -90,10 +94,10 @@ jsPlumb.ready(function() {
success: function() {}
});
//Return to root button
$('#return_to_root').live('click', function(){
clean_values();
console.log('Clean values');
console.log('Reopen the root ');
});
@ -126,7 +130,7 @@ jsPlumb.ready(function() {
}
);
//Add button
//Add button on click
$("#add_item_link").click(function() {
$("#name").attr('value', '');
@ -155,12 +159,12 @@ jsPlumb.ready(function() {
);
});
//Add button process
var name = $( "#name" ),
description = $( "#description" ),
allFields = $( [] ).add( name ).add( description ), tips = $(".validateTips");
//Add button process
$("#dialog-form").css('z-index', '9001');
$("#dialog-form").dialog({
@ -176,7 +180,7 @@ jsPlumb.ready(function() {
async: false,
url: url+'&a=add&'+params,
success:function(my_id) {
//new window
//Setting the selected id from the form
parent_id = $("#parent_id option:selected").attr('value');
//Reseting jsplumb
@ -188,26 +192,21 @@ jsPlumb.ready(function() {
//cleaning skills
skills = [];
//cleaninig parents
/*parents = ['block_'+parent_id]; //list of parents normally there should be only 2
//cleaning
first_parent = '';*/
//Setting the first parent
first_parent = parents[0];
//Deleting the first parent
console.log('beofr '+parents);
console.log('parents before '+parents);
parents.splice(0,1);
console.log('now '+parents);
console.log('parents now '+parents);
//Remove parent
//Remove parent block
$('#block_'+parent_id).remove();
//Great stuff
//Open the block
open_block('block_'+parent_id, 0, 1);
//Close dialog
$("#dialog-form").dialog("close");
}
});
@ -221,7 +220,7 @@ jsPlumb.ready(function() {
});
//Clicking in a box skill (we use live instead of bind because we're creating divs on the fly )
$(".open_block").live('click', function() {
$(".open_block").live('click', function() {
var id = $(this).attr('id');
console.log('click.open_block id: ' + id);
@ -235,6 +234,7 @@ jsPlumb.ready(function() {
if (parents[1] != id) {
console.log('parents.length ' +parents.length);
//If there are 2 parents in the skill_tree
if (parents.length == 2 ) {
first_parent = parents[0];
//console.log('deleting: '+parents[0]);
@ -265,31 +265,35 @@ jsPlumb.ready(function() {
open_parent(first_parent, id);
//}
}
if (jQuery.inArray(id, parents) == -1) {
parents.push(id);
console.log('parents push' + parents);
console.log('parents push: ' + parents);
}
open_block(id, 0, 0);
open_block(id, 0, 0);
}
//Setting class
cleanclass($(this));
$(this).addClass('second_window');
cleanclass($(this));
$(this).addClass('second_window');
parent_div = $("#"+parents[0]);
cleanclass(parent_div);
parent_div.addClass('first_window');
parent_div.addClass('skill_root');
parent_div = $("#"+parents[1]);
cleanclass(parent_div);
parent_div.addClass('second_window');
console.log(parents);
//console.log(parents);
// console.log(skills);
console.log('first_parent : ' + first_parent);
console.log('first_parent : ' + first_parent);
//redraw
jsPlumb.repaintEverything();
jsPlumb.repaint('#'+id);
});
//Skill title click
@ -327,8 +331,7 @@ jsPlumb.ready(function() {
//Clicking in a box
$(".window").bind('click', function() {
var id = $(this).attr('id');
id = id.split('_')[1];
//$("#dialog-form").dialog("open");
id = id.split('_')[1];
});
// chrome fix.
@ -348,9 +351,8 @@ jsPlumb.ready(function() {
console.log('preparing = '+div);
console.log('endpointOptions = '+endpointOptions);
//jsPlumbDemo.initHover(elId);
//jsPlumbDemo.initAnimation(elId);
var endPoint = jsPlumb.addEndpoint(div, endpointOptions);
//jsPlumbDemo.initjulio(e);
var endPoint = jsPlumb.addEndpoint(div, endpointOptions);
skills.push({
element: div, endp:endPoint
});
@ -358,115 +360,12 @@ jsPlumb.ready(function() {
},
window.jsPlumbDemo = {
init : function() {
console.log('Import defaults');
jsPlumb.Defaults.Anchors = [ "BottomCenter", "TopCenter" ];
//jsPlumb.DefaultDragOptions = { cursor: "crosshair", zIndex:2000 };
console.log('Import defaults');
jsPlumb.Defaults.Anchors = [ "BottomCenter", "TopCenter" ];
jsPlumb.Defaults.Container = "skill_tree";
/*jsPlumb.Defaults.PaintStyle = { strokeStyle:'#666' };
jsPlumb.Defaults.EndpointStyle = { width:20, height:16, strokeStyle:'#666' };
jsPlumb.Defaults.Endpoint = "Rectangle";
jsPlumb.Defaults.Anchors = ["TopCenter", "TopCenter"];*/
/*
// this is the paint style for the connecting lines..
var connectorPaintStyle = {
lineWidth:5,
strokeStyle:"#deea18",
joinstyle:"round"
},
// .. and this is the hover style.
connectorHoverStyle = {
lineWidth:7,
strokeStyle:"#2e2aF8"
},
// the definition of source endpoints (the small blue ones)
sourceEndpoint = {
endpoint:"Dot",
paintStyle:{ fillStyle:"#225588",radius:7 },
isSource:true,
connector:[ "Flowchart", { stub:40 } ],
connectorStyle:connectorPaintStyle,
hoverPaintStyle:connectorHoverStyle,
connectorHoverStyle:connectorHoverStyle,
dragOptions:{
},
overlays:[
[ "Label", {
location:[0.5, 1.5],
label:"Drag",
cssClass:"endpointSourceLabel"
} ]
]
},
// a source endpoint that sits at BottomCenter
bottomSource = jsPlumb.extend( { anchor:"BottomCenter" }, sourceEndpoint),
// the definition of target endpoints (will appear when the user drags a connection)
targetEndpoint = {
endpoint:"Dot",
paintStyle:{ fillStyle:"#558822",radius:11 },
hoverPaintStyle:connectorHoverStyle,
maxConnections:-1,
dropOptions:{ hoverClass:"hover", activeClass:"active" },
isTarget:true,
overlays:[
[ "Label", { location:[0.5, -0.5], label:"Drop", cssClass:"endpointTargetLabel" } ]
]
},
init = function(connection) {
connection.getOverlay("label").setLabel(connection.sourceId.substring(6) + "-" + connection.targetId.substring(6));
};
var allSourceEndpoints = [], allTargetEndpoints = [];
_addEndpoints = function(toId, sourceAnchors, targetAnchors) {
for (var i = 0; i < sourceAnchors.length; i++) {
var sourceUUID = toId + sourceAnchors[i];
allSourceEndpoints.push(jsPlumb.addEndpoint(toId, sourceEndpoint, { anchor:sourceAnchors[i], uuid:sourceUUID }));
}
for (var j = 0; j < targetAnchors.length; j++) {
var targetUUID = toId + targetAnchors[j];
allTargetEndpoints.push(jsPlumb.addEndpoint(toId, targetEndpoint, { anchor:targetAnchors[j], uuid:targetUUID }));
}
};
console.log('addEndpoints');
_addEndpoints("window4", ["TopCenter", "BottomCenter"], ["LeftMiddle", "RightMiddle"]);
_addEndpoints("window2", ["LeftMiddle", "BottomCenter"], ["TopCenter", "RightMiddle"]);
_addEndpoints("window3", ["RightMiddle", "BottomCenter"], ["LeftMiddle", "TopCenter"]);
_addEndpoints("window1", ["LeftMiddle", "RightMiddle"], ["TopCenter", "BottomCenter"]);
// listen for new connections; initialise them the same way we initialise the connections at startup.
jsPlumb.bind("jsPlumbConnection", function(connInfo, originalEvent) {
init(connInfo.connection);
});
// make all the window divs draggable
jsPlumb.draggable(jsPlumb.getSelector(".window"));
// connect a few up
jsPlumb.connect({
uuids:["window2BottomCenter", "window3TopCenter"]});
jsPlumb.connect({
uuids:["window2LeftMiddle", "window4LeftMiddle"]});
jsPlumb.connect({
uuids:["window4TopCenter", "window4RightMiddle"]});
jsPlumb.connect({
uuids:["window3RightMiddle", "window2RightMiddle"]});
jsPlumb.connect({
uuids:["window4BottomCenter", "window1TopCenter"]});
jsPlumb.connect({
uuids:["window3BottomCenter", "window1BottomCenter"]});
*/
//jsPlumb.setMouseEventsEnabled(true);
open_block('block_1', 0, 1);
{# $js #}
// listen for clicks on connections, and offer to delete connections on click.
jsPlumb.bind("click", function(conn, originalEvent) {
/*if (confirm("Delete connection from " + conn.sourceId + " to " + conn.targetId + "?"))
@ -529,6 +428,7 @@ $(document).ready(function() {
})();
</script>
<div id="dialog-loading">
<div class="modal-body">
<p style="text-align:center">
@ -537,7 +437,8 @@ $(document).ready(function() {
</p>
</div>
</div>
<div id="menu" class="well" style="top:20px; left:20px; width:300px; z-index: 9000; opacity: 0.9;">
<div id="menu" class="well" style="top:20px; left:20px; width:380px; z-index: 9000; opacity: 0.9;">
<h3>{{'Skills'|get_lang}}</h3>
<div class="btn-group">
<a style="z-index: 1000" class="btn" id="add_item_link" href="#">{{'AddSkill'|get_lang}}</a>

Write Preview
Loading…
Cancel
Save