Commit 46991dfd authored by Romain Loth's avatar Romain Loth

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)
parent 4822b693
......@@ -23,10 +23,7 @@
margin-bottom:1px;
}
#defaultop{
min-height: 5%;
max-height: 10%;
}
#defaultop{ }
#sigma-example {
width: 100%;
......
......@@ -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;
......
......@@ -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")
......
......@@ -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 );
}
......
......@@ -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 ;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment