jmontoyaa
8 years ago
parent
5df6b770b8
commit
ae5c871ecf
File diff suppressed because it is too large
Load Diff
@ -1,15 +1,16 @@ |
||||
<p>{{ "ToGetToLearnXYouWillNeedToTakeOneOfTheFollowingCourses" | get_lang | format( "<em>" ~ skill.name ~ "</em>") }}</p> |
||||
|
||||
<ul> |
||||
{% for course in courses %} |
||||
<li> |
||||
<a href="#" class="course_description_popup" rel="{{ course.code }}">{{ "SkillXWithCourseX" | get_lang | format(skill.name, course.title) }}</a> |
||||
</li> |
||||
{% endfor %} |
||||
{% for course in courses %} |
||||
<li> |
||||
<a href="#" class="course_description_popup" rel="{{ course.code }}"> |
||||
{{ "SkillXWithCourseX" | get_lang | format(skill.name, course.title) }} |
||||
</a> |
||||
</li> |
||||
{% endfor %} |
||||
|
||||
{% for session in sessions %} |
||||
<li> |
||||
{{ "SkillXWithCourseX" | get_lang | format(skill.name, session.name) }} |
||||
</li> |
||||
{% endfor %} |
||||
{% for session in sessions %} |
||||
<li> |
||||
{{ "SkillXWithCourseX" | get_lang | format(skill.name, session.name) }} |
||||
</li> |
||||
{% endfor %} |
||||
</ul> |
||||
|
||||
@ -1,216 +1,216 @@ |
||||
<style> |
||||
/* just because */ |
||||
body { |
||||
/* fallback */ |
||||
background-color: #eee; |
||||
background-image: url(images/radial_bg.png); |
||||
background-position: center center; |
||||
background-repeat: no-repeat; |
||||
|
||||
/* Safari 4-5, Chrome 1-9 */ /* Can't specify a percentage size? Laaaaaame. */ |
||||
background: -webkit-gradient(radial, center center, 0, center center, 460, from(#eee), to(#666)); |
||||
/* Safari 5.1+, Chrome 10+ */ |
||||
background: -webkit-radial-gradient(circle, #eee, #666); |
||||
/* Firefox 3.6+ */ |
||||
background: -moz-radial-gradient(circle, #eee, #666); |
||||
/* IE 10 */ |
||||
body { |
||||
/* fallback */ |
||||
background-color: #eee; |
||||
background-image: url(images/radial_bg.png); |
||||
background-position: center center; |
||||
background-repeat: no-repeat; |
||||
|
||||
/* Safari 4-5, Chrome 1-9 */ /* Can't specify a percentage size? Laaaaaame. */ |
||||
background: -webkit-gradient(radial, center center, 0, center center, 460, from(#eee), to(#666)); |
||||
/* Safari 5.1+, Chrome 10+ */ |
||||
background: -webkit-radial-gradient(circle, #eee, #666); |
||||
/* Firefox 3.6+ */ |
||||
background: -moz-radial-gradient(circle, #eee, #666); |
||||
/* IE 10 */ |
||||
background: -ms-radial-gradient(circle, #eee, #666); |
||||
} |
||||
</style> |
||||
<script type="text/javascript"> |
||||
<script> |
||||
|
||||
//js settings |
||||
var url = '{{url}}'; |
||||
var url = '{{ url }}'; |
||||
|
||||
//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 }}; |
||||
|
||||
jsPlumb.bind("ready", function() { |
||||
|
||||
|
||||
//Open dialog |
||||
$("#dialog-form").dialog({ |
||||
autoOpen: false, |
||||
modal : true, |
||||
width : 550, |
||||
modal : true, |
||||
width : 550, |
||||
height : 350, |
||||
}); |
||||
|
||||
|
||||
//Clicking in a box skill (we use live instead of bind because we're creating divs on the fly ) |
||||
$(".open_block").click(function() { |
||||
var id = $(this).attr('id'); |
||||
|
||||
|
||||
console.log('click.open_block id: ' + id); |
||||
console.log('parents: ' + parents); |
||||
|
||||
|
||||
//if is root |
||||
if (parents[0] == id) { |
||||
parents = [id]; |
||||
} |
||||
|
||||
} |
||||
|
||||
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]; |
||||
first_parent = parents[0]; |
||||
$('#'+parents[1]).css('top', '0px'); |
||||
//console.log('deleting: '+parents[0]); |
||||
//console.log('deleting: '+parents[0]); |
||||
//removing father |
||||
console.log("first_parent " + first_parent); |
||||
|
||||
for (var i = 0; i < skills.length; i++) { |
||||
|
||||
for (var i = 0; i < skills.length; i++) { |
||||
//console.log('looping '+skills[i].element + ' '); |
||||
if (skills[i].element == parents[0] ) { |
||||
console.log('deleting parent:'+ skills[i].element + ' here '); |
||||
console.log('deleting parent:'+ skills[i].element + ' here '); |
||||
jsPlumb.deleteEndpoint(skills[i].element); |
||||
jsPlumb.detachAllConnections(skills[i].element); |
||||
jsPlumb.removeAllEndpoints(skills[i].element); |
||||
jsPlumb.removeAllEndpoints(skills[i].element); |
||||
$("#"+skills[i].element).remove(); |
||||
} |
||||
} |
||||
parents.splice(0,1); |
||||
} |
||||
parents.splice(0,1); |
||||
parents.push(id); |
||||
console.log('parents after slice/push: ' + parents); |
||||
} |
||||
|
||||
if ($(this).hasClass('first_window')) { |
||||
} |
||||
|
||||
if ($(this).hasClass('first_window')) { |
||||
console.log('im in a first_window (root)'); |
||||
$('#'+first_parent).css('top', '0px'); |
||||
//show the first_parent |
||||
//if (first_parent != '') { |
||||
parents = [first_parent, id]; |
||||
parents = [first_parent, id]; |
||||
open_parent(first_parent, id); |
||||
//} |
||||
} |
||||
|
||||
if (jQuery.inArray(id, parents) == -1) { |
||||
|
||||
if (jQuery.inArray(id, parents) == -1) { |
||||
parents.push(id); |
||||
console.log('parents push: ' + parents); |
||||
} |
||||
open_block(id, 0, 0); |
||||
open_block(id, 0, 0); |
||||
} |
||||
|
||||
//Setting class |
||||
cleanclass($(this)); |
||||
|
||||
//Setting class |
||||
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]); |
||||
|
||||
parent_div = $("#"+parents[1]); |
||||
cleanclass(parent_div); |
||||
parent_div.addClass('second_window'); |
||||
|
||||
|
||||
//console.log(parents); |
||||
// console.log(skills); |
||||
console.log('first_parent : ' + first_parent); |
||||
|
||||
// console.log(skills); |
||||
console.log('first_parent : ' + first_parent); |
||||
|
||||
//redraw |
||||
jsPlumb.repaintEverything(); |
||||
jsPlumb.repaint(id); |
||||
|
||||
|
||||
}); |
||||
|
||||
|
||||
|
||||
|
||||
$(".edit_block").click(function() { |
||||
var my_id = $(this).attr('id'); |
||||
my_id = my_id.split('_')[2]; |
||||
|
||||
|
||||
$.ajax({ |
||||
url: url+'&a=get_skill_info&id='+my_id, |
||||
url: url+'&a=get_skill_info&id='+my_id, |
||||
success: function(json) { |
||||
var skill = jQuery.parseJSON(json); |
||||
$("#name").html(skill.name); |
||||
$("#id").attr('value', skill.id); |
||||
$("#description").html(skill.description); |
||||
$("#id").attr('value', skill.id); |
||||
$("#description").html(skill.description); |
||||
//filling parent_id |
||||
$("#parent_id option[value='"+skill.extra.parent_id+"']").attr('selected', 'selected'); |
||||
//filling the gradebook_id |
||||
//filling the gradebook_id |
||||
$("#gradebook_id").html(''); |
||||
jQuery.each(skill.gradebooks, function(index, data) { |
||||
jQuery.each(skill.gradebooks, function(index, data) { |
||||
$("#gradebook_id").append('<span class="label_tag gradebook">'+data.name+'</div>'); |
||||
}); |
||||
}, |
||||
}); |
||||
|
||||
|
||||
$("#dialog-form").dialog("open"); |
||||
return false; |
||||
}); |
||||
|
||||
|
||||
$("#dialog-form").dialog({ |
||||
close: function() { |
||||
close: function() { |
||||
$("#name").html(''); |
||||
$("#description").html(''); |
||||
$("#description").html(''); |
||||
} |
||||
}); |
||||
|
||||
}); |
||||
|
||||
// chrome fix. |
||||
document.onselectstart = function () { return false; }; |
||||
document.onselectstart = function () { return false; }; |
||||
|
||||
// render mode |
||||
var resetRenderMode = function(desiredMode) { |
||||
var newMode = jsPlumb.setRenderMode(desiredMode); |
||||
var newMode = jsPlumb.setRenderMode(desiredMode); |
||||
jsPlumbDemo.init(); |
||||
}; |
||||
resetRenderMode(jsPlumb.CANVAS); |
||||
}; |
||||
resetRenderMode(jsPlumb.CANVAS); |
||||
}); |
||||
|
||||
|
||||
;(function() { |
||||
window.jsPlumbDemo = { |
||||
|
||||
|
||||
;(function() { |
||||
window.jsPlumbDemo = { |
||||
init : function() { |
||||
console.log('Import defaults'); |
||||
jsPlumb.Defaults.Anchors = [ "BottomCenter", "TopCenter" ]; |
||||
console.log('Import defaults'); |
||||
jsPlumb.Defaults.Anchors = [ "BottomCenter", "TopCenter" ]; |
||||
jsPlumb.Defaults.Container = "skill_tree"; |
||||
|
||||
open_block('block_1', 1, 1); |
||||
|
||||
open_block('block_1', 1, 1); |
||||
} |
||||
}; |
||||
})(); |
||||
|
||||
|
||||
|
||||
$(document).ready( function() { |
||||
$(document).ready( function() { |
||||
//When creating a connection see |
||||
//http://jsplumb.org/apidocs/files/jsPlumb-1-3-2-all-js.html#bind |
||||
//http://jsplumb.org/apidocs/files/jsPlumb-1-3-2-all-js.html#bind |
||||
jsPlumb.bind("jsPlumbConnection", function(conn) { |
||||
//alert("Connection created " + conn.sourceId + " to " + conn.targetId + " "); |
||||
//jsPlumb.detach(conn); |
||||
//jsPlumb.detach(conn); |
||||
}); |
||||
}); |
||||
</script> |
||||
|
||||
<div id="skill_tree"></div> |
||||
|
||||
<div id="dialog-form" style="display:none;"> |
||||
<div id="dialog-form" style="display:none;"> |
||||
<form id="add_item" class="form-horizontal" name="form"> |
||||
<fieldset> |
||||
<input type="hidden" name="id" id="id"/> |
||||
<div class="control-group"> |
||||
<label class="control-label" for="name">Name</label> |
||||
<div class="controls"> |
||||
<span id="name"></span> |
||||
<div class="control-group"> |
||||
<label class="control-label" for="name">Name</label> |
||||
<div class="controls"> |
||||
<span id="name"></span> |
||||
</div> |
||||
</div> |
||||
<div class="control-group"> |
||||
<label class="control-label" for="name">Description</label> |
||||
<div class="control-group"> |
||||
<label class="control-label" for="name">Description</label> |
||||
<div class="controls"> |
||||
<span id="description"></span> |
||||
<span id="description"></span> |
||||
</div> |
||||
</div> |
||||
<div class="control-group"> |
||||
<label class="control-label" for="name">Gradebook</label> |
||||
</div> |
||||
<div class="control-group"> |
||||
<label class="control-label" for="name">Gradebook</label> |
||||
<div class="controls"> |
||||
<div id="gradebook_id"></div> |
||||
<div id="gradebook_id"></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</fieldset> |
||||
</form> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
|
||||
Loading…
Reference in new issue