s4

changeset 894:1dc4007d7c20

Shrink columns
author HIROSE Yuuji <yuuji@gentei.org>
date Sat, 26 Dec 2020 16:57:20 +0900
parents c1a5d137740d
children c01b13db3bd3
files s4-main.js
diffstat 1 files changed, 35 insertions(+), 2 deletions(-) [+]
line diff
     1.1 --- a/s4-main.js	Sat Dec 26 15:17:56 2020 +0900
     1.2 +++ b/s4-main.js	Sat Dec 26 16:57:20 2020 +0900
     1.3 @@ -322,8 +322,7 @@
     1.4      }
     1.5      function initGrphome() {
     1.6  	console.log("initGrphome");
     1.7 -	let btn = document.querySelectorAll("button.toggle-frozen");
     1.8 -	if (!btn) return;
     1.9 +	// (1)Setup Frozen State Changing Button
    1.10  	let url = document.URL,
    1.11  	    mypath = url.substring(url.lastIndexOf("/"));
    1.12  	if (mypath.match(/(.*)\/(.*)/)) {
    1.13 @@ -363,6 +362,7 @@
    1.14  		dispInfoMomentary(info, td);
    1.15  	    });
    1.16  	}
    1.17 +	let btn = document.querySelectorAll("button.toggle-frozen");
    1.18  	for (let b of btn) {
    1.19  	    let rowid = null;
    1.20  	    let td=b.parentNode, tr = td.parentNode, fr, ru;
    1.21 @@ -385,6 +385,39 @@
    1.22  Toggle Running/Frozen ("+rowid+")");
    1.23  	    }
    1.24  	}
    1.25 +	// (2)Setup Column Collapse Button
    1.26 +	// INCOMPLETE: Cannot restore original state, but it's enough...
    1.27 +	function toggleColmnWidth(th) {
    1.28 +	    let tbl = document.querySelector("table.dumpblogs");
    1.29 +	    let colname = th.textContent, newwidth;
    1.30 +	    if (th.style.width) {
    1.31 +		newwidth = null
    1.32 +		// https://developer.mozilla.org/ja/docs/Web/CSS/table-layout
    1.33 +		tbl.style.tableLayout = 'auto';
    1.34 +		tbl.style.width = null;
    1.35 +	    } else {
    1.36 +		newwidth = "2em";
    1.37 +		tbl.style.tableLayout = 'fixed';
    1.38 +		tbl.style.width = '100%';
    1.39 +	    }
    1.40 +	    th.style.width = newwidth;
    1.41 +	    th.style.overflow = "hidden";
    1.42 +	    for (let td of document.querySelectorAll("td."+colname)) {
    1.43 +		console.log(td.tagName);
    1.44 +		td.style.width = newwidth;
    1.45 +		console.log(td.style.width);
    1.46 +	    }
    1.47 +	}
    1.48 +	let row1 = document.querySelector("table.dumpblogs tr:first-child");
    1.49 +	if (row1) {
    1.50 +	    let heads = row1.querySelectorAll("th");
    1.51 +	    for (let h of heads) {
    1.52 +		h.addEventListener("click", function(e) {
    1.53 +		    toggleColmnWidth(h);
    1.54 +		}, false);
    1.55 +		h.setAttribute("title", "Click to shrink these columns");
    1.56 +	    }
    1.57 +	}
    1.58      }
    1.59      function init() {
    1.60  	initGrpAction();