restore folding/unfolding of side panel

+ new flag TW.gui.smallView for monitoring if current width < 768

explorerjs.html

@@ -311,14 +311,6 @@
 
       <ul id="ctlzoom">
 
-            <!-- <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'); callGeomapADEME();">
@@ -426,6 +418,11 @@
       <!-- class="my-legend" (absolute position bottom left) -->
       <div id="legend-for-clusters" class="over-panels"></div>
 
+      <!-- to reopen the panel -->
+      <div id="sideunfold">
+        <img title="Open sidepanel" src="libs/img2/unfold2.png"></img>
+      </div>
+
     </div>
   </div>
   <div id="sidebar">
@@ -531,6 +528,9 @@
     </div>
 
     <br><br>
+    <div id="sidefold">
+      <img title="Close sidepanel" src="libs/img2/fold2.png"></img>
+    </div>
   </div>
   <div id="hidden-elements">
     <div id="savemodal" class="modal fade">

libs/css2/selection-panels-mobile.css

@@ -11,6 +11,12 @@
     font-size: 10px;
   }
 
+  /* sidepanel folding deactivated (+ in js: foldingReset fun)*/
+  #sidefold, #sideunfold {
+    display: none;
+  }
+
+
   /* zoombar re-positioned */
   #ctlzoom {
     right: 5px ;

libs/css2/selection-panels.css

@@ -149,12 +149,28 @@
 
 /* ----------- */
 
-#unfold {
-    display:none; width: 12px; height: 12px; background: rgb(250, 250, 252); padding: 2px 2px 2px 0; border-top-right-radius: 5px; border-bottom-right-radius: 5px; box-shadow: 1px 1px 2px #808090;
-}
 
-#aUnfold {
-    display: none; width: 12px; height: 12px; background-image: url("../img2/fleches-horiz.png");  margin: 0 auto;
+#sidefold {
+  position: absolute;
+  left: 0;
+  top: 35%;
+  opacity: .4;
+}
+
+#sideunfold {
+    display: none;
+    position: absolute;
+    right:0;
+    top: 35%;
+    opacity: .4;
+    display: none;
+    z-index: 5;
+}
+#sidefold:hover, #sideunfold:hover {
+  opacity: 1;
+}
+#sidefold img, #sideunfold img {
+  height: 14px;
 }
 
 #zoomSlider {

tinawebJS/Tinaweb.js

@@ -670,45 +670,45 @@ var TinaWebJS = function ( sigmacanvas ) {
             console.log("")
         });
 
-        //  ===  un/hide leftpanel  === //
-        $("#aUnfold").click(function(e) {
-            //SHOW rightcolumn
-            sidebar = $("#rightcolumn");
-            fullwidth=$('#fixedtop').width();
-            e.preventDefault();
-            // $("#wrapper").toggleClass("active");
-            if(parseFloat(sidebar.css("right"))<0){
-                $("#aUnfold").attr("class","rightarrow");
-                sidebar.animate({
-                    "right" : sidebar.width()+"px"
-                }, { duration: 400, queue: false });
-
-                $("#ctlzoom").animate({
-                        "right": (sidebar.width()+10)+"px"
-                }, { duration: 400, queue: false });
-
-                // $('#sigma-contnr').width(fullwidth-sidebar.width());
-                $('#sigma-contnr').animate({
-                        "width": fullwidth-sidebar.width()+"px"
-                }, { duration: 400, queue: false });
-            }
-            else {
-                //HIDE rightcolumn
-                $("#aUnfold").attr("class","leftarrow");
-                sidebar.animate({
-                    "right" : "-" + sidebar.width() + "px"
-                }, { duration: 400, queue: false });
-
-                $("#ctlzoom").animate({
-                        "right": "0px"
-                }, { duration: 400, queue: false });
-
-                    // $('#sigma-contnr').width(fullwidth);
-                $('#sigma-contnr').animate({
-                        "width": fullwidth+"px"
-                },{ duration: 400, queue: false });
-            }
-        });
+        // sidepanel folding
+        $('#sidefold').click(function(){
+          if (window.innerWidth >= 768) {
+            let width = TW.conf.sidePanelSize || '400px'
+            // $("#ctlzoom").css('right','10px')
+            $("#ctlzoom").animate(
+              {"right": "10px"}, "slow"
+            )
+            $("#sidebar").animate(
+              {"right":`-${width}`}, "slow",
+              function(){
+                $("#sigma-contnr").css('right',0)
+                $("#sidebar").hide()
+                TW.partialGraph.refresh()
+                $("#sidefold").hide()
+                $("#sideunfold").show()
+              }
+            );
+            TW.gui.foldedSide = true
+          }
+        })
+
+        $('#sideunfold').click(function(){
+          if (window.innerWidth >= 768) {
+            let width = TW.conf.sidePanelSize || '400px'
+            $("#sidebar").show()
+            $("#sidebar").animate(
+              {"right": 0}, "slow",
+              function(){
+                $("#sigma-contnr").css('right', width)
+                TW.partialGraph.refresh()
+                $("#sideunfold").hide()
+                $("#sidefold").show()
+                $("#ctlzoom").css('right',`calc(${width} + 10px)`)
+              }
+            );
+            TW.gui.foldedSide = false
+          }
+        })
 
         if (TW.conf.getRelatedDocs && document.getElementById('reldocs-type')) {
           document.getElementById('reldocs-type').value = TW.conf.relatedDocsType
@@ -794,25 +794,38 @@ var TinaWebJS = function ( sigmacanvas ) {
             TW.gui.circleSlider.setValue(0)
         });
 
-
         // costly entire refresh (~400ms) only after stopped resizing for 3s
         // NB: rescale middleware already reacted and, except for large win size changes, it handles the resize fine
         //     (so this fragment is only to accomodate the large changes)
         var winResizeTimeout = null
-        window.addEventListener('resize', function(){
+        window.addEventListener('resize', function(ev){
           if (winResizeTimeout) {
             clearTimeout(winResizeTimeout)
           }
           winResizeTimeout = setTimeout(function() {
-            console.log('did refresh')
 
             if (window.TW.partialGraph && window.TW.partialGraph.refresh) {
               window.TW.partialGraph.refresh()
+              // console.log('did refresh')
             }
             if (TW.gui.elHtml.classList) {
               TW.gui.elHtml.classList.remove('waiting');
             }
-          }, 3000)
+
+
+            // monitor passing out of or into smaller width
+            // (along with twjs-mobile.css and selection-panels.mobile.css)
+            if (ev.target.innerWidth < 768 && !TW.gui.smallView) {
+              TW.gui.smallView = true
+              cssReset()
+              $('#sideunfold,#sidefold').hide()
+            }
+            else if (ev.target.innerWidth >= 768 && TW.gui.smallView) {
+              TW.gui.smallView = false
+              foldingReset()
+            }
+
+          }, 1000)
         }, true)
 
 

tinawebJS/enviroment.js

@@ -15,10 +15,12 @@ for (var i in document.styleSheets) {
 
 // GUI vars
 TW.gui.selectionActive = false  // <== changes rendering mode
+TW.gui.smallView=false;         // tracks if small width
 TW.gui.circleSize = 0;
 TW.gui.circleSlider = null
 TW.gui.checkBox=false;
 TW.gui.shiftKey=false;
+TW.gui.foldedSide=false;
 TW.gui.manuallyChecked = false;
 TW.gui.handpickedcolor = false;     // <= changes edge rendering strategy
 TW.gui.lastFilters = {}
@@ -155,6 +157,28 @@ function writeLabel (aMapLabel) {
 }
 
 
+// some actions handled by js overrides the CSS from our stylesheets
+// => this function removes all these changes to restore stylesheet rules
+function cssReset() {
+  $("#sigma-contnr").css('right', '')
+  $("#ctlzoom").css('right','')
+  $("#sidebar").css('right','')
+  $("#sidebar").show()
+  TW.gui.foldedSide = false
+}
+
+
+function foldingReset() {
+  if (TW.gui.foldedSide) {
+    $("#sideunfold").show()
+    $("#sidefold").hide()
+  }
+  else {
+    $("#sideunfold").hide()
+    $("#sidefold").show()
+  }
+}
+
 function alertCheckBox(eventCheck){
     // NB: we use 2 booleans to adapt to SHIFT checking
     //      - var TW.gui.checkBox  ---------> has the real box state