Save/UI/gantt changes

save now asks you if you're sure if you've build an unsaved graph
small changes to UI recommended by  Yael
took out zooming bug in gantt

5 files changed, 58 insertions, 20 deletions

diff --git a/index.html b/index.html
index 5680f2ef..f63ff8c1 100644
--- a/index.html
+++ b/index.html
@@ -8,13 +8,14 @@
 
     <link rel="shortcut icon" href="images/favicon2.ico" />
 
+
+
     <script src="d3/d3.v3.min.js"></script>
     <script src="scripts/jquery.js"></script>
 
     <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
     <script src="scripts/caret.js"></script>
     <script src="scripts/autocomplete.js"></script>
-    <script type="text/javascript" src="http://static.mentful.com/gantt-chart-d3v2.js"></script>
     
 
 </head>
@@ -98,6 +99,7 @@
     </label>
     </div>
 
+
     <script src="scripts/rhizicore.js"></script>
     <script src="scripts/textanalysis.js"></script>
     <script src="scripts/buttons.js"></script>
diff --git a/scripts/buttons.js b/scripts/buttons.js
index 472b58ff..980a51d9 100644
--- a/scripts/buttons.js
+++ b/scripts/buttons.js
@@ -40,17 +40,22 @@ $('.save').click(function(){
     if(j!==links.length-1)jsonsave+=",";
   }
   jsonsave+=']}';
-  console.log(jsonsave);
+  console.log(JSON.stringify(jsonsave));
   localStorage.setItem(key, JSON.stringify(jsonsave));
 
 });
 
 $('.load').click(function(){ 
-  if (confirm('All unsaved changes will be deleted, are you sure?')) {
+  var acceptLoad=true;
+  if (nodes.length>0){
+    acceptLoad = confirm('All unsaved changes will be deleted, are you sure?');
+  }
+
+  if(acceptLoad){
     links=[];
-  nodes=[];
-  var data = JSON.parse(JSON.parse(localStorage.getItem(key)));
-  console.log(data);
+    nodes=[];
+    var data = JSON.parse(JSON.parse(localStorage.getItem(key)));
+    console.log(data);
     for(var i=0; i<data["nodes"].length; i++){
       var node=data.nodes[i];
       graph.addNodeComplete(node.id,node.type,"perm",new Date(node.start),new Date(node.end));
diff --git a/scripts/gant.js b/scripts/gant.js
index 4fe1d856..6747a244 100644
--- a/scripts/gant.js
+++ b/scripts/gant.js
@@ -6,6 +6,9 @@ function checkSwitch(checkswitch) {
     if (checkswitch.checked) {
     	vis.selectAll(".gantt").remove();
         $('.missingdates').fadeOut(300);
+        scrollValue = $('body').scrollLeft();
+        console.log(scrollValue);
+        
         $('body').scrollLeft(0);
         graphstate = "GRAPH";
         var fake_e = {};
@@ -16,6 +19,7 @@ function checkSwitch(checkswitch) {
 
     } else {
         $('.missingdates').fadeIn(300);
+        $('body').scrollLeft(scrollValue);
 
         graphstate = "GANTT";
         var fake_e = {};
@@ -37,8 +41,6 @@ $('body').bind('DOMMouseScroll', function(e){
          $('.overlay').hide();
      }else{
         $('.overlay').show();
-        var left = $('body').offset().left;
-        $('.overlay').scrollLeft(left);
      }
     }else{
         return false;
@@ -52,6 +54,8 @@ $('body').bind('DOMMouseScroll', function(e){
            $('.overlay').hide();
      }else{
         $('.overlay').show();
+        var left = $('body').offset().left;
+        $('.overlay').scrollLeft(left);
      }
     }else{
         return false;
diff --git a/scripts/rhizicore.js b/scripts/rhizicore.js
index a9e87b94..dbf74c24 100644
--- a/scripts/rhizicore.js
+++ b/scripts/rhizicore.js
@@ -12,7 +12,7 @@ var deliverables = [];
 
 var boxedin, nodetext, linktext, link, links, node, nodes, circle;
 
-var scrollValue = 0, zoomX , zoomY;
+var scrollValue = 0, zoomLevel=0, zoomObject;
 
 
 function myGraph(el) {
@@ -231,12 +231,16 @@ function myGraph(el) {
 
     var color = d3.scale.category20();
 
+    //Zoom scale behavior in zoom.js
+    zoomObject=d3.behavior.zoom().scaleExtent([0.5, 10]).on("zoom", zoom);
+
     vis = this.vis = d3.select(el).append("svg:svg")
         .attr("width", w*5)
         .attr("height", h)
         .attr("pointer-events", "all")
         .append("g")
-        .call(d3.behavior.zoom().center([w / 2, h / 2]).scaleExtent([0.5, 10]).on("zoom", zoom))
+        .call(zoomObject)
+        .on("mousedown.zoom", null)
         .append("g");
 
         vis.on("mousedown.zoom", null);
@@ -245,6 +249,28 @@ function myGraph(el) {
     function zoom() {
       if(graphstate==="GRAPH")vis.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
       if(graphstate==="GANTT")vis.attr("transform", "translate(0,0)scale(1)");
+      /*var threashhold=0;
+      if(zoomObject.scale()>1.7){
+        threashhold=1;
+      }else{
+        threashhold=2;
+      }
+
+      if(zoomLevel!==threashhold){
+        zoomLevel=threashhold;
+
+        if(zoomLevel===1){
+            $('.linklabel').fadeIn(200);
+        }
+        if(zoomLevel===2){
+            $('.linklabel').fadeOut(200);
+        }
+      }*/
+
+
+      
+      
+
     }
 
    
@@ -269,7 +295,7 @@ function myGraph(el) {
 
         vis.append("rect")
         .attr("class", "overlay")
-        .attr("width", w)
+        .attr("width", w*5)
         .attr("height", h);
         $('.overlay').click(mousedown);
 
@@ -280,8 +306,8 @@ function myGraph(el) {
             .attr("viewBox", "0 -5 10 10")
             .attr("refX", 23)
             .attr("refY", -1.8)
-            .attr("markerWidth", 2.5)
-            .attr("markerHeight", 2.5)
+            .attr("markerWidth", 5)
+            .attr("markerHeight", 5)
             .attr("orient", "auto")
             .attr("class","graph")
             .style("fill", "#aaa")
@@ -299,7 +325,7 @@ function myGraph(el) {
             })
             .attr("marker-end", "url(#end)")
             .on("click", function (d, i) {
-                $('#textanalyser').val("node("+d.source.id+") -> "+d.name+" -> node("+d.target.id+")");
+                //$('#textanalyser').val("node("+d.source.id+") -> "+d.name+" -> node("+d.target.id+")");
             });;
 
 
@@ -591,9 +617,10 @@ function showInfo(d, i) {
         $('.info').html('Name: '+d.id+'<br/><form id="editbox"><label>description:</label><input id="editdescription"/><label>URL:</label><input id="editurl"/><label>Start date:</label><input id="editstartdate"/><label>End date:</label><input id="editenddate"/><button>Save</button></form><div id="deletenode"><button>Delete</button></div>');
     } else {
         $('.info').html('Name: '+d.id+'<br/><form id="editbox"><label>description:</label><input id="editdescription"/><label>URL:</label><input id="editurl"/><button>Save</button></form><div id="deletenode"><button>Delete</button></div>');
+    }
 
+    $('.info').css("border-color",customColor(d.type));
 
-    }
     $("#editenddate").datepicker({
         inline: true,
         showOtherMonths: true,
diff --git a/style.css b/style.css
index 0ca60d12..fdb7ac77 100644
--- a/style.css
+++ b/style.css
@@ -130,14 +130,14 @@ input:focus {
 .link {
   fill: none;
   stroke: #404040;
-  stroke-width: 4px;
+  stroke-width: 2px;
   z-index:1;
 }
 
 .highlightlink {
   fill: none;
   stroke: #EDE275;
-  stroke-width: 4px;
+  stroke-width: 2px;
   z-index:1;
   pointer-events: none;
 }
@@ -145,7 +145,7 @@ input:focus {
 .enterlink {
   fill: none;
   stroke: #EDE275;
-  stroke-width: 5px;
+  stroke-width: 2px;
   z-index:1;
   pointer-events: none;
 }
@@ -153,7 +153,7 @@ input:focus {
 .exitlink {
   fill: none;
   stroke: #EDE275;
-  stroke-width: 4px;
+  stroke-width: 2px;
   z-index:1;
   pointer-events: none;
 }
@@ -254,7 +254,7 @@ input:focus {
   top:5px;
   left:10px;
   margin-left:12px;
-  font-size: 18px;
+  font-size: 20px;
 }
 
 .overlay {