Add a setting for the width of the sidecolumn + simplify resize handler...

Add a setting for the width of the sidecolumn + simplify resize handler sigmaLimits() (remove jquery, simplify visible height tests)

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

@@ -23,10 +23,7 @@
 	margin-bottom:1px;
 }
 
-#defaultop{	
-    min-height: 5%;
-    max-height: 10%;
-}
+#defaultop{ }
 
 #sigma-example {
     width: 100%;

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

@@ -23,12 +23,13 @@ box-shadow: 0px 0px 3px 0px #888888;
 
 #leftcolumn {
   overflow-y: scroll;
-  margin-right: -300px;
-  margin-left: 0px;
   padding-bottom: 10px;
   padding-left: 5px;
-  right: 300px;
-  width: 300px;
+  right: 0px;
+  /* this width one is just a first guess... 
+  /* (it will be changed in main.js to sidecolumnSize param)
+   */
+  width: 25em;
   position: fixed;
   height: 100%;
   border: 1px #888888 solid;

static/lib/graphExplorer/settings_explorerjs.js

@@ -32,6 +32,9 @@ var mainfile = ["db.json"];
 
 var tagcloud_limit = 50;
 
+// for the css of leftcolumn and canvasLimits size
+var sidecolumnSize = "24em"
+
 var current_url = window.location.origin+window.location.pathname+window.location.search
 getUrlParam.file = current_url.replace(/projects/g, "api/projects")
 

static/lib/graphExplorer/tinawebJS/Tinaweb.js

@@ -22,45 +22,27 @@
   /[$\w]+/g
 );
 
-$.fn.visibleHeight = function() {
-    console.log('FUN t.TinawebJS:visibleHeight')
-    var elBottom, elTop, scrollBot, scrollTop, visibleBottom, visibleTop;
-    scrollTop = $(window).scrollTop();
-    scrollBot = scrollTop + $(window).height();
-    elTop = this.offset().top;
-    elBottom = elTop + this.outerHeight();
-    visibleTop = elTop < scrollTop ? scrollTop : elTop;
-    visibleBottom = elBottom > scrollBot ? scrollBot : elBottom;
-    return visibleBottom - visibleTop
-}
-
-// for new SigmaUtils
-function sigmaLimits( sigmacanvas ) {
-    console.log('FUN t.TinawebJS:sigmaLimits')
-    pw=$( sigmacanvas ).width();
-    ph=$( sigmacanvas ).height();
-    // $("body").css("padding-top",0)
-    // var footer = ( $("footer").length>0) ? ($('#leftcolumn').position().top -$("footer").height()) : $('#leftcolumn').position().top*2;
-    var ancho_total = $( window ).width() - $('#leftcolumn').width() ;
-    var alto_total = $('#leftcolumn').visibleHeight() ;
-    // console.log("")
-    // console.log(footer)
-    // console.log(ancho_total)
-    // console.log(alto_total)
-    // console.log("")
-
-    sidebar=$('#leftcolumn').width();
-    anchototal=$('#dafixedtop').width();
-
-    $( sigmacanvas ).width(ancho_total);
-    $( sigmacanvas ).height( alto_total );
-    pw=$( sigmacanvas ).width();
-    ph=$( sigmacanvas ).height();
-    return "new canvas! w:"+pw+" , h:"+ph;
+// on window resize
+// @param canvasdiv: id of the div (without '#')
+function sigmaLimits( canvasdiv ) {
+    console.log('FUN t.TinawebJS:sigmaLimits') ;
+    var canvas = document.getElementById(canvasdiv) ;
+    var sidecolumn = document.getElementById('leftcolumn') ;
+    var ancho_total = window.innerWidth - sidecolumn.offsetWidth ;
+    var alto_total =  window.innerHeight - sidecolumn.offsetTop ;
+
+    // setting new size
+    canvas.style.width = ancho_total - 5 ;
+    canvas.style.height = alto_total - 5 ;
+    
+    // fyi result
+    var pw=canvas.offsetWidth;
+    var ph=canvas.offsetHeight;
+
+    console.log("new canvas! w:"+pw+" , h:"+ph) ;
 }
 
 
-
 SelectionEngine = function() {
     console.log('FUN t.TinawebJS:SelectionEngine:new')
     // Selection Engine!! finally...
@@ -381,6 +363,8 @@ SelectionEngine = function() {
 
 TinaWebJS = function ( sigmacanvas ) {
     console.log('FUN t.TinawebJS:TinaWebJS:new')
+
+    // '#canvasid'
     this.sigmacanvas = sigmacanvas;
 
     this.init = function () {
@@ -392,11 +376,11 @@ TinaWebJS = function ( sigmacanvas ) {
         return this.sigmacanvas;
     }
 
-    this.AdjustSigmaCanvas = function ( sigmacanvas ) {
+    this.AdjustSigmaCanvas = function ( canvasdiv ) {
         console.log('FUN t.TinawebJS:AdjustSigmaCanvas')
-        var canvasdiv = "";
-        if( sigmacanvas ) canvasdiv = sigmacanvas;
-        else canvasdiv = this.sigmacanvas;
+        if (! canvasdiv)
+            // '#canvasid' => 'canvasid'
+            canvasdiv = sigmacanvas.substring(1);
 
         return sigmaLimits( canvasdiv );
     }

static/lib/graphExplorer/tinawebJS/main.js

@@ -178,7 +178,7 @@ function MainFunction( RES ) {
     // [ Initiating Sigma-Canvas ]
     var twjs_ = new TinaWebJS('#sigma-example');
     print( twjs_.AdjustSigmaCanvas() );
-    $( window ).resize(function() { print(twjs_.AdjustSigmaCanvas()) });
+    window.onresize = function(){twjs_.AdjustSigmaCanvas()} // TODO: debounce?
     // [ / Initiating Sigma-Canvas ]
 
     print("categories: "+categories)
@@ -357,6 +357,9 @@ function MainFunction( RES ) {
         partialGraph.stopForceAtlas2();
     }, fa2seconds*1000);
 
+    // apply width from settings on left column
+    document.getElementById('leftcolumn').style.width = sidecolumnSize ;
+
 }