[FEAT] graphExplorer sidebar hide/show button and actions

static/lib/graphExplorer/libs/css2/custom.css

@@ -30,10 +30,10 @@
 
 #defaultop li.basicitem{
     /*font-family: "Helvetica Neue", Helvetica, Arial, sans-serif ;*/
-    padding-left: .4em;
-    padding-right: .4em;
+    padding-left: .2em;
+    padding-right: .2em;
     padding-bottom: 0;
-    font-size: 90% ;
+    font-size: 75% ;
 }
 
 #defaultop > div {
@@ -338,7 +338,11 @@
 }
 
 #aUnfold {
-    display: block; width: 12px; height: 12px; background-image: url("../img2/fleches-horiz.png");  margin: 0 auto;
+    display: block;
+    width: 12px;
+    height: 12px;
+    background-image: url("../img2/fleches-horiz.png");
+    /*margin: 0 auto;*/
 }
 /*
 #saveAs {

static/lib/graphExplorer/tinawebJS/Tinaweb.js

@@ -24,12 +24,20 @@
 
 // on window resize
 // @param canvasdiv: id of the div (without '#')
-function sigmaLimits( canvasdiv ) {
-    console.log('FUN t.TinawebJS:sigmaLimits') ;
+function sigmaLimits( canvasdiv, SidecolumnIsInvisible ) {
+    console.log('FUN t.TinawebJS:sigmaLimits (div=' + canvasdiv + ')') ;
     var canvas = document.getElementById(canvasdiv) ;
     var sidecolumn = document.getElementById('sidecolumn') ;
-    var ancho_total = window.innerWidth - sidecolumn.offsetWidth ;
+
     var alto_total =  window.innerHeight - sidecolumn.offsetTop ;
+    var ancho_total = -1
+    if (SidecolumnIsInvisible) {
+        ancho_total = window.innerWidth
+    }
+    else {
+        // normal case
+        ancho_total = window.innerWidth - sidecolumn.offsetWidth ;
+    }
 
     // setting new size
     canvas.style.width = ancho_total - 5 ;
@@ -549,29 +557,40 @@ TinaWebJS = function ( sigmacanvas ) {
 
         //  ===  un/hide leftpanel  === //
         $("#aUnfold").click(function(e) {
+            // TODO unify with/without jquery
             //SHOW sidecolumn
             sidebar = $("#sidecolumn");
-            fullwidth=$('#fixedtop').width();
+            fullwidth=window.innerWidth
             e.preventDefault();
             // $("#wrapper").toggleClass("active");
             if(parseFloat(sidebar.css("right"))<0){
+                sidebar.show()
                 $("#aUnfold").attr("class","rightarrow");
+                // apply width from settings on sidecolumn
+                document.getElementById('sidecolumn').style.width = sidecolumnSize ;
                 sidebar.animate({
-                    "right" : sidebar.width()+"px"
-                }, { duration: 400, queue: false });
-
-                $("#ctlzoom").animate({
-                        "right": (sidebar.width()+10)+"px"
+                    "right" : "0px"
                 }, { duration: 400, queue: false });
 
                 // $('#sigma-example').width(fullwidth-sidebar.width());
-                $('#sigma-example').animate({
-                        "width": fullwidth-sidebar.width()+"px"
-                }, { duration: 400, queue: false });
+                // $('#sigma-example').animate({
+                //         "width": fullwidth-sidecolumnSize+"px"
+                // }, { duration: 400, queue: false });
+
                 setTimeout(function() {
+                    // reposition the button inside the column
+                    var btn = document.getElementById('unfold')
+                    btn.style.position = 'initial' ;
+                    btn.style.top = undefined ;
+                    btn.style.right = 0 ;
+                    $('#unfold').insertBefore('#tips');
+
+                      sigmaLimits( "sigma-example")
                       partialGraph.resize();
                       partialGraph.refresh();
                 }, 400);
+
+                console.log('ok')
             }
             else {
                 //HIDE sidecolumn
@@ -580,18 +599,32 @@ TinaWebJS = function ( sigmacanvas ) {
                     "right" : "-" + sidebar.width() + "px"
                 }, { duration: 400, queue: false });
 
-                $("#ctlzoom").animate({
-                        "right": "0px"
-                }, { duration: 400, queue: false });
-
                 // $('#sigma-example').width(fullwidth);
-                $('#sigma-example').animate({
-                        "width": fullwidth+"px"
-                },{ duration: 400, queue: false });
+                // $('#sigma-example').animate({
+                //         "width": fullwidth+"px"
+                // },{ duration: 400, queue: false });
+
                 setTimeout(function() {
+                    // position #aUnfold out of sidecolumn so it remains visible
+                    // var graph = document.getElementById("sigma-example")
+                    var gtop = document.getElementById("sidecolumn").offsetTop + 10
+                    $('#unfold').insertAfter('#sigma-example');
+
+                    var btn = document.getElementById('unfold') ;
+                    btn.style.position = 'fixed' ;
+                    btn.style.right = '20px' ;
+                    btn.style.top = gtop ;
+                    console.log('ok')
+
+                    //   partialGraph.resize();
+                    sigmaLimits( "sigma-example", true)
                     partialGraph.resize();
                     partialGraph.refresh();
+                    sidebar.hide()
                 }, 400);
+
+
+
             }
         });
 

templates/graphExplorer/explorer.html

@@ -208,11 +208,7 @@
                 <!-- <div class="content-header">
                         <button id="menu-toggle">X</button>
                 </div> -->
-                   <li>
-                      <div id="unfold">
-                          <a href="#" id="aUnfold" class="rightarrow"></a>
-                      </div>
-                  </li> 
+
                   <!--
                    <li>
                       <a href="#" id="geomapicon" onclick="$('#geomapmodal').modal('show'); callGeomap();">
@@ -221,7 +217,6 @@
                   </li>
                   -->
 
-
                    <li>
                       <a href="#" id="snapicon" onclick="saveGraphIMG();" >
                         <img title="Take a photo!" width="34px" src="{% static "img/camera.png" %}" ></img>
@@ -259,6 +254,10 @@
 
       <!-- Sidebar -->
       <div id="sidecolumn">
+         <div id="unfold">
+             <!-- button to be replaced by handle when sidecolumn is hidden -->
+             <a href="#" id="aUnfold" class="rightarrow"></a>
+         </div>
         <div id="tips"></div>
         <div id="names"></div>
         <div id="ngrams_actions"></div>