From 2fa2744fe4bdcb7a617da29254634be3f9ef9ffe Mon Sep 17 00:00:00 2001
From: Julio Montoya <gugli100@gmail.com>
Date: Thu, 5 Apr 2012 16:12:39 +0200
Subject: [PATCH] Fixes in the skill_tree student

---
 main/inc/lib/javascript/skills.js             |  52 ++-------
 main/social/skills_tree.php                   |   6 -
 main/template/default/skill/skill_tree.tpl    |  18 +--
 .../default/skill/skill_tree_student.tpl      | 104 +++---------------
 4 files changed, 26 insertions(+), 154 deletions(-)

diff --git a/main/inc/lib/javascript/skills.js b/main/inc/lib/javascript/skills.js
index 3acbed0524..e8f28175de 100644
--- a/main/inc/lib/javascript/skills.js
+++ b/main/inc/lib/javascript/skills.js
@@ -1,28 +1,8 @@
-// Arrow settings
+/* For licensing terms, see /license.txt */
 
 var debug = 1;
 
-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
-  
-
+//Admin/normal arrows
 var editEndpointOptions = {  
     isTarget:true, 
     maxConnections:100,
@@ -30,36 +10,17 @@ var editEndpointOptions = {
     paintStyle:{ 
        fillStyle:"yellow" },
     detachable:false,
-    connector:"Straight"
+    connector:"Straight"    
 };
 
 
 //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 doneEndpointOptions = {                
-    connector:[ "Flowchart", { stub:28 } ],
-    anchors: ['BottomCenter','TopCenter'],    
+    //connector:[ "Flowchart", { stub:28 } ], like a chart
+    //anchors: ['BottomCenter','TopCenter'],    
     endpoint:"Rectangle",
     paintStyle:{ width:1, height:1, fillStyle:done_arrow_color},
     isSource:false,
@@ -71,7 +32,8 @@ var doneEndpointOptions = {
         strokeStyle:done_arrow_color
     },
     isTarget:false,
-    setDraggableByDefault : false,                         
+    setDraggableByDefault : false,     
+    connector:"Straight"
 };
 
 //Functions   
diff --git a/main/social/skills_tree.php b/main/social/skills_tree.php
index b1dbe3ad6d..03405ab641 100644
--- a/main/social/skills_tree.php
+++ b/main/social/skills_tree.php
@@ -27,17 +27,11 @@ $type   = 'read'; //edit
 
 $tree   = $skill->get_skills_tree(api_get_user_id(), true);
 $skill_visualizer = new SkillVisualizer($tree, $type);
-
-$html = $skill_visualizer->return_html();
 $url  = api_get_path(WEB_AJAX_PATH).'skill.ajax.php?1=1';
-
 $tpl = new Template(null, false, false);
 
 $tpl->assign('url', $url);
-$tpl->assign('html', $html);
 $tpl->assign('skill_visualizer', $skill_visualizer);
-$tpl->assign('js', $skill_visualizer->return_js());
-
 
 $content = $tpl->fetch('default/skill/skill_tree_student.tpl');
 $tpl->assign('content', $content);
diff --git a/main/template/default/skill/skill_tree.tpl b/main/template/default/skill/skill_tree.tpl
index 174bcfb1dd..e571789720 100644
--- a/main/template/default/skill/skill_tree.tpl
+++ b/main/template/default/skill/skill_tree.tpl
@@ -53,18 +53,13 @@ function clean_values() {
 }
 
 
-$(window).resize(function() {
-    
+$(window).resize(function() {    
     jsPlumb.repaintEverything();    
-    /*jsPlumb.repaint(".skill_root");
-    
+    /*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() {
@@ -132,9 +127,8 @@ jsPlumb.ready(function() {
         }
     );
     
-    //Add button on click
-    
-    $("#add_item_link").click(function() {        
+    //Add button on click    
+    $("#add_item_link").click(function() {     
         $("#name").attr('value', '');
         $("#description").attr('value', '');        
         $("#parent_id option:selected").removeAttr('selected');
@@ -451,9 +445,7 @@ $(document).ready(function() {
     </div>
 </div>
            
-<div id="skill_tree">
-</div>
-{# $html #}
+<div id="skill_tree"></div>
 
 <div id="dialog-form" style="display:none; z-index:9001;">    
     <p class="validateTips"></p>
diff --git a/main/template/default/skill/skill_tree_student.tpl b/main/template/default/skill/skill_tree_student.tpl
index b01b956fd2..ebabfd6fc0 100644
--- a/main/template/default/skill/skill_tree_student.tpl
+++ b/main/template/default/skill/skill_tree_student.tpl
@@ -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'];
@@ -152,97 +152,19 @@ jsPlumb.bind("ready", function() {
 });
         
             
-;(function() {         
-    prepare = function(div, endpointOptions) {
-        //jsPlumbDemo.initHover(elId);
-        //jsPlumbDemo.initAnimation(elId);        
-        var endpoint = jsPlumb.addEndpoint(div, endpointOptions);
-        //jsPlumbDemo.initjulio(e);    
-        skills.push({
-            element:div, endp:endpoint
-        });        
-        return endpoint;
-    },
-    
-    window.jsPlumbDemo = {    
-        initjulio :function(e) {
-        },      
-        initHover :function(elId) {            
-            
-           /* $("#" + elId).click(function() {
-                var  all = jsPlumb.getConnections({
-                    source:elId
-                });               
-            });*/
-            
-            /*$("#" + elId).hover(
-                function() { $(this).addClass("bigdot-hover"); },
-                function() { $(this).removeClass("bigdot-hover"); }
-            );*/
-        },        
+;(function() {    
+    window.jsPlumbDemo = {  	   
         init : function() {
-        
-            jsPlumb.Defaults.DragOptions    = { cursor: 'pointer', zIndex:2000 };
-            jsPlumb.Defaults.PaintStyle     = { strokeStyle:'#666' };
-            jsPlumb.Defaults.EndpointStyle  = { width:20, height:16, strokeStyle:'#666' };
-            jsPlumb.Defaults.Endpoint       = "Rectangle";
-            jsPlumb.Defaults.Anchors        = ["TopCenter", "TopCenter"];
-
-              
-            jsPlumb.Defaults.Overlays = [
-                //[ "Arrow", { location:0.5 } ],  if you want to add an arrow in the connection          
-            ];
-                           
-            jsPlumb.setMouseEventsEnabled(true);            
-            
-            {$js}
-  
-            var divsWithWindowClass = jsPlumbDemo.getSelector(".window");
-            jsPlumb.draggable(divsWithWindowClass);
+            console.log('Import defaults');            
+            jsPlumb.Defaults.Anchors = [ "BottomCenter", "TopCenter" ];            
+            jsPlumb.Defaults.Container = "skill_tree";
             
-            jsPlumbDemo.attachBehaviour();          
+            open_block('block_1', 1, 1);            
         }
     };
 })();
 
 
-;(function() {
-    
-    jsPlumbDemo.showConnectionInfo = function(s) {
-        $("#list").html(s);
-        $("#list").fadeIn({ complete:function() { jsPlumb.repaintEverything(); }});
-    };
-    
-    jsPlumbDemo.hideConnectionInfo = function() {
-        $("#list").fadeOut({ complete:function() { jsPlumb.repaintEverything(); }});
-    };
-    
-    jsPlumbDemo.getSelector = function(spec) {
-        return $(spec);
-    };
-    
-    jsPlumbDemo.attachBehaviour = function() {
-        $(".hide").click(function() {
-            jsPlumb.toggle($(this).attr("rel"));
-        });
-
-        $(".drag").click(function() {
-            var s = jsPlumb.toggleDraggable($(this).attr("rel"));
-            $(this).html(s ? 'disable dragging' : 'enable dragging');
-            if (!s) $("#" + $(this).attr("rel")).addClass('drag-locked'); else $("#" + $(this).attr("rel")).removeClass('drag-locked');
-            $("#" + $(this).attr("rel")).css("cursor", s ? "pointer" : "default");
-        });
-
-        $(".detach").click(function() {
-            jsPlumb.detachAll($(this).attr("rel"));
-        });
-
-        $("#clear").click(function() { 
-            jsPlumb.detachEverything(); showConnections(); 
-        });
-    };
-})();
-
 
 $(document).ready( function() {     
     //When creating a connection see
@@ -254,6 +176,8 @@ $(document).ready( function() {
 });
 </script>
 
+<div id="skill_tree"></div>
+
 <div id="dialog-form" style="display:none;">    
     <form id="add_item" class="form-horizontal"  name="form">
         <fieldset>