fully hide columns when minimized

copyparty/web/browser.css

@@ -584,6 +584,7 @@ input.eq_gain {
 }
 #wrap {
 	margin-top: 2em;
+	min-height: 90vh;
 }
 #tree {
 	display: none;
@@ -694,34 +695,20 @@ input.eq_gain {
 	font-size: 2em;
 	white-space: nowrap;
 }
-#files th:hover .cfg,
+#files th:hover .cfg {
-#files th.min .cfg {
 	display: block;
 	width: 1em;
 	border-radius: .2em;
 	margin: -1.3em auto 0 auto;
 	background: #444;
 }
-#files th.min .cfg {
+#files>thead>tr>th.min,
-	margin: -.6em;
+#files td.min {
-}
+		display: none;
-#files>thead>tr>th.min span {
-	position: absolute;
-	transform: rotate(270deg);
-	background: linear-gradient(90deg, rgba(68,68,68,0), rgba(68,68,68,0.5) 70%, #444);
-	margin-left: -4.6em;
-	padding: .4em;
-	top: 5.4em;
-	width: 8em;
-	text-align: right;
-	letter-spacing: .04em;
 }
 #files td:nth-child(2n) {
 	color: #f5a;
 }
-#files td.min a {
-	display: none;
-}
 #files tr.play td,
 #files tr.play div a {
 	background: #fc4;
@@ -971,13 +958,9 @@ html.light tr.play td {
 html.light tr.play a {
 	color: #406;
 }
-html.light #files th:hover .cfg,
+html.light #files th:hover .cfg {
-html.light #files th.min .cfg {
 	background: #ccc;
 }
-html.light #files > thead > tr > th.min span {
-	background: linear-gradient(90deg, rgba(204,204,204,0), rgba(204,204,204,0.5) 70%, #ccc);
-}
 html.light #blocked {
 	background: #eee;
 }

copyparty/web/browser.html

@@ -50,13 +50,11 @@
             <a id="thumbs" class="tgl btn" href="#">thumbs</a>
         </div>
         {%- if have_zip %}
-        <h3>folder download</h3>
+        <h3>folder download</h3><div id="arc_fmt"></div>
-        <div id="arc_fmt"></div>
         {%- endif %}
-        <h3>key notation</h3>
+        <h3>key notation</h3><div id="key_notation"></div>
-        <div id="key_notation"></div>
+        <h3>audio equalizer</h3><div id="audio_eq"></div>
-        <h3>audio equalizer</h3>
+        <h3>hidden columns</h3><div id="hcols"></div>
-        <div id="audio_eq"></div>
     </div>
     
     <h1 id="path">

copyparty/web/browser.js

@@ -162,8 +162,9 @@ var widget = (function () {
 			m = ck + 'np: ';
 
 		for (var a = 1, aa = th.length; a < aa; a++) {
-			var tk = a == 1 ? '' : th[a].getAttribute('name').split('/').slice(-1)[0];
+			var tv = tr[a].textContent,
-			var tv = tr[a].getAttribute('html') || tr[a].textContent;
+				tk = a == 1 ? '' : th[a].getAttribute('name').split('/').slice(-1)[0];
+
 			m += tk + '(' + cv + tv + ck + ') // ';
 		}
 
@@ -1948,17 +1949,34 @@ var filecols = (function () {
 	var add_btns = function () {
 		var ths = QSA('#files th>span');
 		for (var a = 0, aa = ths.length; a < aa; a++) {
-			var th = ths[a].parentElement,
+			var th = ths[a].parentElement;
-				is_hidden = has(hidden, ths[a].textContent);
+			th.innerHTML = '<div class="cfg"><a href="#">-</a></div>' + ths[a].outerHTML;
-
-			th.innerHTML = '<div class="cfg"><a href="#">' +
-				(is_hidden ? '+' : '-') + '</a></div>' + ths[a].outerHTML;
-
 			th.getElementsByTagName('a')[0].onclick = ev_row_tgl;
 		}
 	};
 
+	function hcols_click(e) {
+		ev(e);
+		var t = e.target;
+		if (t.tagName != 'A')
+			return;
+
+		toggle(t.textContent);
+	}
+
 	var set_style = function () {
+		hidden.sort();
+
+		var html = [],
+			hcols = ebi('hcols');
+
+		for (var a = 0; a < hidden.length; a++) {
+			html.push('<a href="#" class="btn">' + esc(hidden[a]) + '</a>');
+		}
+		hcols.previousSibling.style.display = html.length ? 'block' : 'none';
+		hcols.innerHTML = html.join('\n');
+		hcols.onclick = hcols_click;
+
 		add_btns();
 
 		var ohidden = [],
@@ -1983,22 +2001,8 @@ var filecols = (function () {
 			var cls = has(ohidden, a) ? 'min' : '',
 				tds = QSA('#files>tbody>tr>td:nth-child(' + (a + 1) + ')');
 
-			for (var b = 0, bb = tds.length; b < bb; b++) {
+			for (var b = 0, bb = tds.length; b < bb; b++)
 				tds[b].setAttribute('class', cls);
-				if (a < 2)
-					continue;
-
-				if (cls) {
-					if (!tds[b].hasAttribute('html')) {
-						tds[b].setAttribute('html', tds[b].innerHTML);
-						tds[b].innerHTML = '...';
-					}
-				}
-				else if (tds[b].hasAttribute('html')) {
-					tds[b].innerHTML = tds[b].getAttribute('html');
-					tds[b].removeAttribute('html');
-				}
-			}
 		}
 	};
 	set_style();
@@ -2017,15 +2021,13 @@ var filecols = (function () {
 	try {
 		var ci = find_file_col('dur'),
 			i = ci[0],
-			min = ci[1],
 			rows = ebi('files').tBodies[0].rows;
 
-		if (!min)
+		for (var a = 0, aa = rows.length; a < aa; a++) {
-			for (var a = 0, aa = rows.length; a < aa; a++) {
+			var c = rows[a].cells[i];
-				var c = rows[a].cells[i];
+			if (c && c.textContent)
-				if (c && c.textContent)
+				c.textContent = s2ms(c.textContent);
-					c.textContent = s2ms(c.textContent);
+		}
-			}
 	}
 	catch (ex) { }