HTML layout redux to use new autoResize possibilities and simplify the main grid

libs/css2/grid.css

+/* main grid: graph + panels & bars
+ * --------------------------------
+ *  html, body
+ *  #topbar
+ *  #toolbar
+ *  #sidebar
+ *  #graph-zone
+ *  #graph-panels
+ *  #graph-div
+ *  #hidden-elements
+ */
+
+#hidden-elements {
+  display: none;
+}
+
+#graph-div {
+  background-color: #22e;
+}
+
+#graph-zone {
+  background-color: #44b;
+}
+
+#right-sidebar {
+  background-color: #2e2;
+}
+
+#toolbar {
+  background-color: #e22;
+}
+
+#topbar {
+  background-color: #c94;
+}
+
+html, body {
+   background-color: #eee;
+}

libs/css2/custom.css → libs/css2/selection-panels.css

-
-#heatgraph {
-    /*border: 1px solid #000;*/
-    width: 700px;
-    height:50px;
-    bottom: 10px;
-    position:absolute;
-    left: 0;
-    right: 0;
-    margin: 0 auto;
-}
-
-.loader{
-    text-align:center;
-    transform: translate(0, 50%) !important;
-    -ms-transform: translate(0, 50%) !important;  /*IE 9*/
-    -webkit-transform: translate(0, 50%) !important;  /*Safari and Chrome */
-}
-
-
-
-.navbar {
-	margin-bottom:1px;
-}
-
-#defaultop{
-    min-height: 5%;
-    max-height: 10%;
-}
-
-#defaultop li{
-    font-family: "Josefin Sans", "Helvetica Neue", Helvetica, Arial, sans-serif ;
-}
-
-/* searchnav gets same padding as bootstrap's .navbar-nav > li > a */
-#defaultop div#searchnav {
-    padding-top: 13px;
-    padding-bottom: 9px;
-}
-
-#defaultop .settingslider {
-    max-width: 85px;
-    display: inline-block ;
-}
-
-#defaultop .nav > li > a {
-    padding-left: 12px;
-    padding-right: 12px;
-}
-
-
-#sigma-contnr {
-    width: 100%;
-    height: 300px;
-    position:absolute;
-    float:left;
-    z-index: 1;
-}
-
-.legend_for_clusters {
-    position:absolute;
-    bottom:1px;
-    left:1px;
-    border:solid 1px red;
-    font-size:xx-small;
-}
 /*  any block over the graph (legend, histogram...) */
 .over-panels {
   z-index: 5 ; /* over the graph */
@@ -76,6 +10,24 @@
   box-shadow: 0px 2px 6px #000;
 }
 
+#unselectbutton {
+  color: #900;
+  font-weight: bold;
+  font-size: 70%;
+  float:right;
+  margin-top:.5em;
+  margin-right:1em
+}
+
+
+/* LEGEND PANEL */
+.legend_for_clusters {
+    position:absolute;
+    bottom:1px;
+    left:1px;
+    border:solid 1px red;
+    font-size:xx-small;
+}
 
 
 /*
@@ -164,148 +116,47 @@
     color:grey;
 }
 
-/*
-#left{
-  display: inline-block;
-}
-
-#right{
-  display: inline-block;
-}
-*/
-
-#credits {
-    text-align: center;
-}
-
-/*.modal-vertical-centered {*/
-
-#selectionsBox{
-    text-align:center;
-    background-color:white;
-    color:#250587;
-    margin: 7px;
-    padding: 3px;
-    border: 1px solid #666;
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    -border-radius: 3px;
-    -moz-box-shadow: 0px 2px 6px #000;
-    -webkit-box-shadow: 0px 2px 6px #000;
-    box-shadow: 0px 2px 6px #000;
-}
-
-
-/*.selection-item{
-    display:inline-block;
-    border:solid 1px;
-    -moz-border-radius: 6px;
-    -webkit-border-radius: 6px;
-    -khtml-border-radius: 6px;'+
-    border-color:#BDBDBD;
-    padding:0px 2px 0px 2px;
-    margin:1px 0px 1px 0px;
-    cursor: pointer;
-}*/
-
-
-#opossitesBox{
-    margin: 7px;
-    padding: 10px;
-    border-style:solid;
-    background-color:white;
-    margin: 7px;
-    border: 1px solid #666;
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    -border-radius: 3px;
-    -moz-box-shadow: 0px 2px 6px #000;
-    -webkit-box-shadow: 0px 2px 6px #000;
-    box-shadow: 0px 2px 6px #000;
-}
 
 
-.tagcloud-item{
-    display:inline-block;
-    border:solid 1px;
-    /*box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.3); */
-    -moz-border-radius: 6px;
-    -webkit-border-radius: 6px;
-    -khtml-border-radius: 6px;'+
-    border-color:#BDBDBD;
-    padding:0px 2px 0px 2px;
-    margin:1px 0px 1px 0px;
-    cursor: pointer;
-}
 
-
-#topPapers{
-    margin: 7px;
-    padding: 10px 0px 10px 10px;
-    border-style:solid;
-    background-color:white;
-    color:black;
-    margin: 7px;
-    border: 1px solid #666;
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    -border-radius: 3px;
-    -moz-box-shadow: 0px 2px 6px #000;
-    -webkit-box-shadow: 0px 2px 6px #000;
-    box-shadow: 0px 2px 6px #000;
-}
-
-
-#topProposals{
-    margin: 7px;
-    padding: 10px 0px 10px 10px;
-    border-style:solid;
-    background-color:white;
-    color:black;
-    margin: 7px;
-    border: 1px solid #666;
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    -border-radius: 3px;
-    -moz-box-shadow: 0px 2px 6px #000;
-    -webkit-box-shadow: 0px 2px 6px #000;
-    box-shadow: 0px 2px 6px #000;
-}
-
-
-.grey {
-    color: #cccccc; font-style: italic;
-}
-
-.gradient {
-    background-color: #f0f0f8;
-    background-image: -webkit-radial-gradient(#ffffff, #d8d8e0); background-image: -moz-radial-gradient(#ffffff, #d8d8e0);
-    /*background-color: #434343;*/
-    /*background-image: linear-gradient(#434343, #282828);*/
-    background-image: linear-gradient(0deg, transparent 24%, rgba(0, 0, 0, .02) 25%, rgba(0, 0, 0, .02) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .02) 75%, rgba(0, 0, 0, .02) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(0, 0, 0, .02) 25%, rgba(0, 0, 0, .02) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .02) 75%, rgba(0, 0, 0, .02) 76%, transparent 77%, transparent);
-    background-size: 50px 50px;
-}
 /* ZOOM IN OUT */
 
 #ctlzoom {
-    position: absolute;
-    right: 300px; bottom: 5px;
+    position: fixed;
+    right: 260px;
+    bottom: 0;
     list-style: none;
     padding: 0;
     margin: 0;
     z-index: 5;
 }
 
+
 #ctlzoom li {
-    padding: 0; margin: 10px 0; width: 36px; text-align: center;
+    padding: 0;
+    margin: 10px 0;
+    width: 36px;
+    text-align: center;
 }
 
 #zoomSliderzone {
-    height: 120px;
+    height: 100px;
+    top: -9px;
+    position: relative;
 }
 
+#edgesButton {
+    display: block;
+    width: 24px;
+    height: 24px;
+    margin: 0 auto;
+}
 #zoomMinusButton, #zoomPlusButton {
-    display: block; width: 24px; height: 24px; background:url("../img2/plusmoins.png");  margin: 0 auto;
+    display: block;
+    width: 24px;
+    height: 24px;
+    background:url("../img2/plusmoins.png");
+    margin: 0 auto;
 }
 
 #zoomMinusButton {
@@ -326,10 +177,19 @@
 
 
 #lensButton {
-    display: block; width: 36px; height: 36px; background:url("../img2/loupe-edges2.png"); margin: 0 auto;
+    display: block;
+    width: 36px;
+    height: 36px;
+    margin: 0 auto;
+    /*background:url("../libs/img2/loupe-edges2.png");*/
 }
 
-#lensButton {
+#lensButton:hover {
+    opacity: .7;
+}
+
+
+/*#lensButton {
     background-position: -72px 0;
 }
 
@@ -343,13 +203,21 @@
 
 #lensButton.off:hover {
     background-position: -108px 0;
-}
+}*/
 
 #edgesButton {
-    display: block; width: 36px; height: 36px; background:url("../img2/loupe-edges.png"); margin: 0 auto;
+    display: block;
+    width: 36px;
+    height: 36px;
+    /*background:url("../libs/img2/loupe-edges.png");*/
+    margin: 0 auto;
 }
 
-#edgesButton {
+.zoombarbuttons:hover {
+    opacity: .7;
+}
+
+/*#edgesButton {
     background-position: -72px -36px;
 }
 
@@ -363,7 +231,7 @@
 
 #edgesButton.off:hover {
     background-position: -108px -36px;
-}
+}*/
 
 #unfold {
     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;
@@ -374,7 +242,7 @@
 }
 /*
 #saveAs {
-    display: block; width: 30px; height: 30px; background:url("../img2/Save.png"); margin: 0 auto;
+    display: block; width: 30px; height: 30px; background:url("../libs/img2/Save.png"); margin: 0 auto;
 }
 */
 
@@ -390,7 +258,7 @@
 }
 
 #aShowChat {
-    float: right; width: 100%; height: 100%; background-image: url("../img2/chat.png");
+    float: right; width: 100%; height: 100%; background-image: url("../libs/img2/chat.png");
 }
 
 
@@ -399,10 +267,12 @@
     position:fixed;
     z-index: 5 ;   /* over the graph */
     left:0 ;
+    top: 125px;
     width:20% ;
 
     /* hauteur ~ 200px (juste assez pour emballer la selection sans couvrir le graphe en dessous) */
     height: auto;
+    min-height: 20px;
     overflow: hidden;
     text-align:center;
     padding: .3em 1em 1em 1em;
@@ -411,61 +281,3 @@
 #current-selection {
     width: 100%;  /* 100% within lefttopbox */
 }
-
-.leftarrow {
-    background-position: -12px 0;
-}
-
-.rightarrow {
-    background-position: 0 0;
-}
-
-.leftarrow:hover {
-    background-position: -12px -12px;
-}
-
-.rightarrow:hover {
-    background-position: 0 -12px;
-}
-
-
-#tips{
-    padding-left: 5%;
-    padding-right: 5%;
-    font-size:80%;
-}
-#tips ul{
-    /*list-style:none;*/
-    padding-left:10%;
-}
-
-
-
-#information {
-    font-size:80%;
-}
-
-#information ul {
-    list-style:none;
-    padding-left:5%;
-}​
-
-/* small messages */
-p.micromessage{
-  font-size: 85%;
-  color: #707070 ;
-}
-
-.btn-sm:hover {
-	font-weight: bold;
-}
-
-/* Example Styles for Demo */
-.etabs { margin: 0; padding: 0; }
-.tab { display: inline-block; zoom:1; *display:inline; background: #eee; border: solid 1px #999; border-bottom: none; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; }
-.tab a { font-size: 12px; line-height: 2em; display: block; padding: 0 10px; outline: none; }
-.tab a:hover { text-decoration: underline; }
-.tab.active { background: #fff; padding-top: 6px; position: relative; top: 1px; border-color: #666; }
-.tab a.active { font-weight: bold; }
-.tab-container .panel-container { background: #fff; border: solid #666 1px; padding: 10px; -moz-border-radius: 0 4px 4px 4px; -webkit-border-radius: 0 4px 4px 4px; }
-.panel-container { margin-bottom: 10px; }

libs/css2/sidebar.css

-#wrapper {
-  /*transition: all 0.1s ease 0s;*/
-}
-
-/*old one*/
-/*#leftcolumn {
-  margin-left: -210px;
-  margin-right: 0px;
-  left: 210px;
-  width: 210px;
-  background: url(../img/climpek.png) repeat;
-  position: fixed;
-  height: 100%;
-  border: 1px #888888 solid;
--moz-box-shadow: 0px 0px 3px 0px #888888;
--webkit-box-shadow: 0px 0px 3px 0px #888888;
-box-shadow: 0px 0px 3px 0px #888888;
-  overflow-y: auto;
-  z-index: 1000;
-  transition: all 0.4s ease 0s;
-}*/
-
-
-#rightcolumn {
-  overflow-y: scroll;
-  margin-right: -300px;
-  margin-left: 0px;
-  padding-bottom: 10px;
-  padding-left: 5px;
-  right: 300px;
-  width: 300px;
-  position: fixed;
-  height: 100%;
-  border: 1px #888888 solid;
-  background: #fff url(../img2/bg.jpg) repeat top right;
-  -webkit-border-radius: 0px 11px 11px 0px;-moz-border-radius: 0px 11px 11px 0px; border-radius: 0px 11px 11px 0px;-webkit-box-shadow: #B3B3B3 4px 4px 4px;-moz-box-shadow: #B3B3B3 4px 4px 4px; box-shadow: #B3B3B3 4px 4px 4px;
-  /*-webkit-border-radius: 11px 0px 0px 11px;-moz-border-radius: 11px 0px 0px 11px;border-radius: 11px 0px 0px 11px;-webkit-box-shadow: #B3B3B3 4px 4px 4px;-moz-box-shadow: #B3B3B3 4px 4px 4px; box-shadow: #B3B3B3 4px 4px 4px;*/
-  /*transition: all 0.1s ease 0s;*/
-}
-
-#page-content-wrapper {
-  width: 100%;
-}
-
-

libs/css2/twjs.css

+/* fixed TWJS grid: graph + bars
+ * -----------------------------
+ *  html, body
+ *  #topbar
+ *  #toolbar
+ *  #sidebar
+ *  #sigma-contnr (graph zone)
+ */
+
+html, body {
+  height: 100%;
+  width: 100%;
+  background-color: #eee;
+}
+
+#sigma-contnr {
+  position: fixed;
+  top: 105px;
+  bottom: 0;
+  left: 0;
+  right: 250px;
+  z-index: 1;
+}
+
+#sidebar {
+  position: fixed;
+  top: 105px;
+  bottom: 0;
+  right: 0;
+  width: 250px;
+  z-index: 2;
+  border-left: 1px #222 solid;
+  overflow-y: scroll;
+}
+
+#toolbar {
+  position: fixed;
+  top: 35px;
+  left: 0;
+  z-index: 2;
+  height: 70px;
+  width: 100%;
+  border-bottom: 1px #222 solid;
+  font-size: 9px;
+  line-height: 10px;
+}
+
+#topbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  height: 35px;
+  width: 100%;
+  border-bottom: 1px #222 solid;
+}
+
+
+/* toolbar contents */
+
+/* searchnav gets same padding as bootstrap's .navbar-nav > li > a */
+
+#defaultop {
+  padding-top: 8px;
+}
+
+.navbar-higher {
+  padding-top: 5px !important;
+}
+.navbar-lower {
+  padding-top: 15px !important;
+}
+
+#defaultop .nav {
+  margin-left: 15px !important;
+}
+
+#defaultop div#searchnav {
+  padding-top: 13px;
+  padding-bottom: 9px;
+}
+
+#defaultop .weight-selectors {
+  width: 135px !important;
+  padding-top: 15px;
+  margin: 0 25px !important;
+}
+
+#defaultop .weight-selectors td {
+  width: 135px !important;
+  padding: 0 0 10px 0 !important;
+}
+
+#defaultop .slider-legend {
+    margin: 10px 0 0 0 ;
+}
+#defaultop .settingslider {
+    max-width: 120px !important;
+    display: inline-block ;
+}
+
+#graph-panels {
+  display: none; /*not shown at init*/
+}
+
+
+/* VARIAE */
+
+#selectionsBox{
+    text-align:center;
+    background-color:white;
+    color:#250587;
+    margin: 7px;
+    padding: 3px;
+    border: 1px solid #666;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    -border-radius: 3px;
+    -moz-box-shadow: 0px 2px 6px #000;
+    -webkit-box-shadow: 0px 2px 6px #000;
+    box-shadow: 0px 2px 6px #000;
+}
+
+#opossitesBox{
+    display: none;
+    margin: 7px;
+    padding: 10px;
+    border-style:solid;
+    background-color:white;
+    margin: 7px;
+    border: 1px solid #666;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    -border-radius: 3px;
+    -moz-box-shadow: 0px 2px 6px #000;
+    -webkit-box-shadow: 0px 2px 6px #000;
+    box-shadow: 0px 2px 6px #000;
+}
+
+
+.tagcloud-item{
+    display:inline-block;
+    border:solid 1px;
+    /*box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.3); */
+    -moz-border-radius: 6px;
+    -webkit-border-radius: 6px;
+    -khtml-border-radius: 6px;'+
+    border-color:#BDBDBD;
+    padding:0px 2px 0px 2px;
+    margin:1px 0px 1px 0px;
+    cursor: pointer;
+}
+
+
+#topPapers{
+    display: none;
+    margin: 7px;
+    padding: 10px 0px 10px 10px;
+    border-style:solid;
+    background-color:white;
+    color:black;
+    margin: 7px;
+    border: 1px solid #666;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    -border-radius: 3px;
+    -moz-box-shadow: 0px 2px 6px #000;
+    -webkit-box-shadow: 0px 2px 6px #000;
+    box-shadow: 0px 2px 6px #000;
+}
+
+
+#topProposals{
+    display: none;
+    margin: 7px;
+    padding: 10px 0px 10px 10px;
+    border-style:solid;
+    background-color:white;
+    color:black;
+    margin: 7px;
+    border: 1px solid #666;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    -border-radius: 3px;
+    -moz-box-shadow: 0px 2px 6px #000;
+    -webkit-box-shadow: 0px 2px 6px #000;
+    box-shadow: 0px 2px 6px #000;
+}
+
+
+.grey {
+    color: #cccccc; font-style: italic;
+}
+
+/* small messages */
+p.micromessage{
+  font-size: 85%;
+  color: #707070 ;
+}
+
+.btn-sm:hover {
+	font-weight: bold;
+}
+
+/* Example Styles for Demo */
+.etabs { margin: 0; padding: 0; }
+.tab { display: inline-block; zoom:1; *display:inline; background: #eee; border: solid 1px #999; border-bottom: none; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; }
+.tab a { font-size: 12px; line-height: 2em; display: block; padding: 0 10px; outline: none; }
+.tab a:hover { text-decoration: underline; }
+.tab.active { background: #fff; padding-top: 6px; position: relative; top: 1px; border-color: #666; }
+.tab a.active { font-weight: bold; }
+.tab-container .panel-container { background: #fff; border: solid #666 1px; padding: 10px; -moz-border-radius: 0 4px 4px 4px; -webkit-border-radius: 0 4px 4px 4px; }
+.panel-container { margin-bottom: 10px; }
+
+
+
+/* SIDEBAR CONTENT */
+
+#sidebar {
+  padding: 0 5px;
+}
+
+#tips{
+    padding-left: 5%;
+    padding-right: 5%;
+    font-size:80%;
+}
+#tips ul{
+    /*list-style:none;*/
+    padding-left:10%;
+}
+
+#information {
+    font-size:80%;
+}
+
+#information ul {
+    list-style:none;
+    padding-left:5%;
+}​

settings_explorerjs.js

@@ -53,6 +53,9 @@ var TW = {}
     TW.catSoc = "Document";
     TW.catSem = "NGram";
 
+    // to get ajax topPapers via info_div.php
+    TW.getAdditionalInfo = false;
+
     TW.strSearchBar = "Select or suggest topics";
 
 var ParseCustom = function () {};

tinawebJS/Tinaweb.js

 
-// for new SigmaUtils
-// new sigma.js: POSS to use autoResize global setting
-function sigmaLimits( sigmacanvas ) {
-    pw=$( sigmacanvas ).width();
-    ph=$( sigmacanvas ).height();
-
-    sidebar=$('#rightcolumn').width();
-    anchototal=$('#fixedtop').width();
-    altototal=$('#rightcolumn').height();
-    altofixtop=$('#fixedtop').height()
-    altodeftop=$('#defaultop').height()
-    $( sigmacanvas ).width(anchototal-sidebar);
-    $( sigmacanvas ).height(altototal-altofixtop-altodeftop-4);
-
-
-    // todo take into account leftcolumn
-        //sidebar_left=$('#leftcolumn').width();
-        //sidebar_right=$('#rightcolumn').width();
-        //$( sigmacanvas ).width(anchototal-sidebar_right-sidebar_left);
-
-
-    pw=$( sigmacanvas ).width();
-    ph=$( sigmacanvas ).height();
-    return "new canvas! w:"+pw+" , h:"+ph;
-}
-
-
-
-
 
 // will be instanciated as SelInst
 SelectionEngine = function() {
@@ -413,18 +384,6 @@ TinaWebJS = function ( sigmacanvas ) {
         console.log("hola mundo")
     }
 
-    this.getSigmaCanvas = function () {
-        return this.sigmacanvas;
-    }
-
-    this.AdjustSigmaCanvas = function ( sigmacanvas ) {
-        var canvasdiv = "";
-        if( sigmacanvas ) canvasdiv = sigmacanvas;
-        else canvasdiv = this.sigmacanvas;
-
-        return sigmaLimits( canvasdiv );
-    }
-
     this.SearchListeners = function () {
 
         // REFA tempo expose

tinawebJS/main.js

@@ -115,8 +115,6 @@ if(RES["OK"]) {
             the_file = first_path+"/"+getUrlParam.file
         }
 
-        TW.getAdditionalInfo = true;
-
         fileparam = the_file;
 
         var files_selector = '<select onchange="jsActionOnGexfSelector(this.value , true);">'
@@ -197,13 +195,7 @@ if(RES["OK"]) {
 
     // [ Initiating Sigma-Canvas ]
     var twjs_ = new TinaWebJS('#sigma-contnr');
-    console.log( twjs_.AdjustSigmaCanvas() );
-
-
-
-    // new sigma.js REFA TODO uncomment and optimize
-    // $( window ).resize(function() { console.log(twjs_.AdjustSigmaCanvas()) });
-    // [ / Initiating Sigma-Canvas ]
+    // NB new sigma.js: autoResize (no need for AdjustSigmaCanvas + sigmaLimits)
 
     console.log("categories: "+categories)
     console.log("initial state: "+initialState)
@@ -222,11 +214,15 @@ if(RES["OK"]) {
             drawEdges: true,   // fixme edgetype curve
             drawNodes: true,
             drawLabels: true,
-            // nodesPowRatio: .5,
+            // nodesPowRatio: 1,
             labelSize: "proportional",
             font: "Ubuntu Condensed",
             // labelColor: "node",
-            fontStyle: "bold"
+            fontStyle: "bold",
+
+            autoResize: true,
+            mouseEnabled: true,
+            touchEnabled: false
         },
         sigmaJsDrawingProperties,
         sigmaJsGraphProperties,
@@ -437,6 +433,9 @@ if(RES["OK"]) {
 // load optional modules
 ProcessDivsFlags() ;
 
+// show any already existing panel
+document.getElementById("graph-panels").style.display = "block"
+
 // grey message in the search bar from settings
 $("#searchinput").attr('placeholder', TW.strSearchBar) ;