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 fixes (not working yet)

Browse Source
skala
Julio Montoya 13 years ago
parent 8f59cc6c58
commit 92d9ae9c29
4 changed files with 103 additions and 116 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. 37
      main/css/base.css
  2. 124
      main/inc/lib/javascript/skills.js
  3. 42
      main/template/default/skill/skill_tree.tpl
  4. 16
      main/template/default/skill/skill_tree_student.tpl

37
main/css/base.css
Unescape View File

@ -2868,12 +2868,33 @@ form .formw .freeze {
color:#999;
}
/* jsPlumb */
.skill_root {
box-shadow: 2px 2px 19px #aaa;
-o-box-shadow: 2px 2px 19px #aaa;
-webkit-box-shadow: 2px 2px 19px #aaa;
-moz-box-shadow: 2px 2px 19px #aaa;
-webkit-border-radius: 6px;
-opera-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background-color: #ccc;
border: 0.1em dotted #D4E06B;
color: black;
font-size: 0.9em;
height: 4em;
opacity: 0.8;
padding-top: 0.9em;
text-align: center;
width: 120px;
z-index: 40;
position:relative;
}
/* jsPlumb */
.window {
.skill_child {
box-shadow: 2px 2px 19px #aaa;
-o-box-shadow: 2px 2px 19px #aaa;
-webkit-box-shadow: 2px 2px 19px #aaa;
@ -2882,13 +2903,12 @@ form .formw .freeze {
-webkit-border-radius: 6px;
-opera-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
border-radius: 6px;
background-color: white;
border: 0.1em dotted #D4E06B;
color: black;
font-family: helvetica,sans;
font-size: 0.9em;
height: 4em;
opacity: 0.8;
@ -2897,6 +2917,11 @@ form .formw .freeze {
text-align: center;
width: 120px;
z-index: 40;
float:left;
margin-left:20px;
margin-bottom:20px;
margin-top:10px;
position:relative;
}
.done_window {

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

@ -24,43 +24,10 @@ var connectorHoverStyle = {
var edit_arrow_color = '#ccc';
var editEndpointOptions = {
//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,
// default to blue at one end and green at the other
EndpointStyles : [{ fillStyle:'#225588' }, { fillStyle:'#558822' }],
// blue endpoints 7 px; green endpoints 11.
Endpoints : [ [ "Dot", { radius:7} ],
[ "Dot", { radius:11 } ]
],
// the overlays to decorate each connection with. note that the label overlay uses a function to generate the label text; in this
// case it returns the 'labelText' member that we set on each connection in the 'init' method below.
ConnectionOverlays : [
[ "Arrow", { location:0.9 } ],
[ "Label", {
location:0.1,
id:"label",
cssClass:"aLabel"
}]
]
isTarget:true,
maxConnections:100,
endpoint:"Rectangle",
paintStyle:{ fillStyle:"yellow" },
};
@ -128,21 +95,21 @@ function open_parent(parent_id, id) {
@param int load user data or not
*/
function open_block(id, load_user_data) {
if (debug) console.log("open_block id : " + id+" load_user_data: " +load_user_data);
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) {
if (debug) console.log('deleting this skill '+ skills[i].element + " id: " + i);
jsPlumb.deleteEndpoint(skills[i].endp);
jsPlumb.removeEveryEndpoint(skills[i].endp);
$("#"+skills[i].element).remove();
}
}
//Modifying current block position
/*/Modifying current block position
pos = $('#'+id).position();
left_value = center_x;
@ -156,10 +123,9 @@ function open_block(id, load_user_data) {
//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, load_user_data);
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, 0, load_user_data);
}
function open_block_student(id) {
@ -172,35 +138,22 @@ function load_children(my_id, top_value, load_user_data) {
//Loading children
var ix = 0;
$('body').append('<div id="block_'+my_id+ '" class=" window " >Root </div>');
$('#skill_tree').append('<div id="block_'+my_id+ '" class=" skill_root " >Root </div>');
// jsPlumb.animate('block_'+my_id, { left: 500, top:50 }, { duration: 100 });
jsPlumb.AnchorPositionFinders.MyFinder = function(dp, ep, es, params) {
console.log('MyFinder');
console.log('dp: ' +dp);
return [100, 200];
var root_end_point_options = {
// anchor:"Continuous",
maxConnections:100,
endpoint:"Dot",
paintStyle:{ fillStyle:"gray" },
};
var endpointOptions2 = {
isTarget:true,
maxConnections:5,
endpoint:"Rectangle",
paintStyle:{ fillStyle:"gray" },
anchor:[ "Assign", {
position:"MyFinder",
myCustomParameter:"foo",
anInteger:5
}]
};
//The root is the source
jsPlumb.makeSource("block_" + my_id, root_end_point_options);
jsPlumb.makeSource("block_" + my_id, {
anchor:"Continuous",
endpoint:["Rectangle", { width:200, height:50 }]
});
/*$('#block_'+my_id).css({
position: 'absolute',
zIndex: 5000,
@ -208,16 +161,15 @@ function load_children(my_id, top_value, load_user_data) {
top: '100px'
});*/
$.getJSON(url+'&a=load_children&load_user_data='+load_user_data+'&id='+my_id, {},
function(json) {
function(json) {
console.log('getJSON reponse: ' + 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>';
var status_class = ' ';
@ -228,7 +180,7 @@ function load_children(my_id, top_value, load_user_data) {
status_class = 'done_window';
}
$('body').append('<div id="block_'+item.id+ '" class="third_window open_block window '+status_class+'" >'+item.name+'</div>');
$('#skill_tree').append('<div id="block_'+item.id+ '" class="skill_child open_block '+status_class+'" >'+item.name+'</div>');
if (debug) console.log('Append block: '+item.id);
/*$('#block_'+item.id).css({
@ -242,10 +194,16 @@ function load_children(my_id, top_value, load_user_data) {
//var es = prepare("block_" + item.id, my_edit_point_options);
//var e2 = prepare("block_" + my_id, my_edit_point_options);
jsPlumb.makeTarget("block_" + item.id, endpointOptions2);
endpoint = jsPlumb.makeTarget("block_" + item.id, my_edit_point_options);
jsPlumb.connect({source: "block_" + my_id, target:"block_" + item.id, anchor:"Continuous"});
jsPlumb.connect({source: "block_" + my_id, target:"block_" + item.id});
skills.push({
element: "block_" + item.id, endp:endpoint
});
console.log('added to array skills' + item.id);
//console.log('connect sources');
/*jsPlumb.animate("block_" + item.id, {
@ -253,6 +211,20 @@ function load_children(my_id, top_value, load_user_data) {
}, { duration : duration_value });
ix++; */
});
jsPlumb.draggable(jsPlumb.getSelector(".skill_child"));
//Creating 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", "");
});
sum = sum / 2 - normal_weight/2 + q/2;
//console.log(sum);
jsPlumb.animate('block_'+my_id, { left: sum, top:10 }, { duration: 100 });
}
);
}

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

@ -218,8 +218,7 @@ jsPlumb.ready(function() {
});
$("#gradebook_id").trigger("liszt:updated");
$("#parent_id").trigger("liszt:updated");
$("#parent_id").trigger("liszt:updated");
$("#dialog-form").dialog("open");
return false;
});
@ -254,19 +253,17 @@ jsPlumb.ready(function() {
//jsPlumbDemo.initjulio(e);
skills.push({
element: div, endp:endPoint
});
});
return endPoint;
},
window.jsPlumbDemo = {
init : function() {
console.log('Import defaults');
jsPlumb.Defaults.Anchors = [ "LeftMiddle", "BottomRight" ];
jsPlumb.Defaults.Anchors = [ "BottomCenter", "TopCenter" ];
// jsPlumb.DefaultDragOptions = { cursor: "pointer", zIndex:2000 };
jsPlumb.Defaults.Container = "skill_tree";
/*jsPlumb.Defaults.PaintStyle = { strokeStyle:'#666' };
jsPlumb.Defaults.EndpointStyle = { width:20, height:16, strokeStyle:'#666' };
@ -366,23 +363,20 @@ jsPlumb.ready(function() {
open_block('block_1', 0);
// make all the window divs draggable
jsPlumb.draggable($(".window"));
{* $js *}
{# $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 + "?"))
jsPlumb.detach(conn);
});
});
}
};
})();
$(document).ready( function() {
$(document).ready(function() {
/*
//When creating a connection see
//http://jsplumb.org/apidocs/files/jsPlumb-1-3-2-all-js.html#bind
@ -404,10 +398,6 @@ $(document).ready( function() {
$(".chzn-select").chosen();
$("#menu").draggable();
});
;(function() {
@ -447,6 +437,8 @@ $(document).ready( function() {
</div>
</div>
<div id="skill_tree">
</div>
{# $html #}
<div id="dialog-form" style="display:none; z-index:9001;">
@ -455,30 +447,30 @@ $(document).ready( function() {
<fieldset>
<input type="hidden" name="id" id="id"/>
<div class="control-group">
<label class="control-label" for="name">{'Name'|get_lang}}</label>
<label class="control-label" for="name">{{'Name'|get_lang}}</label>
<div class="controls">
<input type="text" name="name" id="name" size="40" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="name">{'Parent'|get_lang}}</label>
<label class="control-label" for="name">{{'Parent'|get_lang}}</label>
<div class="controls">
<select id="parent_id" name="parent_id" />
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="name">{'Gradebook'|get_lang}}</label>
<label class="control-label" for="name">{{'Gradebook'|get_lang}}</label>
<div class="controls">
<select id="gradebook_id" name="gradebook_id[]" multiple="multiple"/>
</select>
<span class="help-block">
{'WithCertificate'|get_lang}}
{{'WithCertificate'|get_lang}}
</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="name">{'Description'|get_lang}}</label>
<label class="control-label" for="name">{{'Description'|get_lang}}</label>
<div class="controls">
<textarea name="description" id="description" class="span3" rows="7"></textarea>
</div>

16
main/template/default/skill/skill_tree_student.tpl
Unescape View File

@ -20,7 +20,7 @@ body {
<script type="text/javascript">
//js settings
var url = '{$url}';
var url = '{{url}}';
var skills = []; //current window divs
var parents = []; //list of parents normally there should be only 2
var hidden_parent = '';
@ -28,12 +28,12 @@ var duration_value = 500;
//Block settings see the SkillVisualizer Class
var offset_x = {$skill_visualizer->offset_x};
var offset_y = {$skill_visualizer->offset_y};
var space_between_blocks_x = {$skill_visualizer->space_between_blocks_x};
var space_between_blocks_y = {$skill_visualizer->space_between_blocks_y};
var center_x = {$skill_visualizer->center_x};
var block_size = {$skill_visualizer->block_size};
var offset_x = {{skill_visualizer->offset_x}};
var offset_y = {{skill_visualizer->offset_y}};
var space_between_blocks_x = {{skill_visualizer->space_between_blocks_x}};
var space_between_blocks_y = {{skill_visualizer->space_between_blocks_y}};
var center_x = {{skill_visualizer->center_x}};
var block_size = {{skill_visualizer->block_size}};
//Setting the parent by default
var parents = ['block_1'];
@ -254,8 +254,6 @@ $(document).ready( function() {
});
</script>
{$html}
<div id="dialog-form" style="display:none;">
<form id="add_item" class="form-horizontal" name="form">
<fieldset>

Write Preview
Loading…
Cancel
Save