add buttons to adjust tree width

copyparty/web/browser.css

@@ -73,11 +73,12 @@ a,
 	color: #999;
 	font-weight: normal;
 }
-#files tr:hover {
+#files tr+tr:hover {
 	background: #1c1c1c;
 }
 #files thead th {
 	padding: .5em 1.3em .3em 1.3em;
+	cursor: pointer;
 }
 #files thead th:last-child {
 	background: #444;
@@ -310,7 +311,7 @@ a,
 	#barpos,
 	#barbuf {
 		width: calc(100% - 24em);
-		left: 10em;
+		left: 9.8em;
 		top: .7em;
 		height: 1.6em;
 		bottom: auto;
@@ -449,12 +450,27 @@ input[type="checkbox"]:checked+label {
 #tree {
 	padding-top: 2em;
 }
+#tree>a+a {
+	padding: .2em .4em;
+	font-size: 1.2em;
+	background: #2a2a2a;
+	box-shadow: 0 .1em .2em #222 inset;
+	border-radius: .3em;
+	margin: .2em;
+	position: relative;
+	top: -.2em;
+}
+#tree>a+a:hover {
+	background: #805;
+}
+#tree>a+a.on {
+	background: #fc4;
+	color: #400;
+	text-shadow: none;
+}
 #detree {
 	padding: .3em .5em;
 	font-size: 1.5em;
-	display: inline-block;
-	min-width: 12em;
-	width: 100%;
 }
 #treefiles #files tbody {
 	border-radius: 0 .7em 0 .7em;
@@ -475,20 +491,20 @@ input[type="checkbox"]:checked+label {
 	list-style: none;
 	white-space: nowrap;
 }
-#tree a.hl {
+#treeul a.hl {
 	color: #400;
 	background: #fc4;
 	border-radius: .3em;
 	text-shadow: none;
 }
-#tree a {
+#treeul a {
 	display: inline-block;
 }
-#tree a+a {
+#treeul a+a {
 	width: calc(100% - 2em);
 	background: #333;
 }
-#tree a+a:hover {
+#treeul a+a:hover {
 	background: #222;
 	color: #fff;
 }

copyparty/web/browser.html

@@ -48,6 +48,9 @@
         <tr>
             <td id="tree">
                 <a href="#" id="detree">🍞...</a>
+                <a href="#" step="2" id="twobytwo">+</a>
+                <a href="#" step="-2" id="twig">&ndash;</a>
+                <a href="#" id="dyntree">a</a>
                 <ul id="treeul"></ul>
             </td>
             <td id="treefiles"></td>

copyparty/web/browser.js

@@ -721,6 +721,10 @@ function autoplay_blocked() {
 // tree
 (function () {
 	var treedata = null;
+	var dyn = bcfg_get('dyntree', true);
+	var treesz = icfg_get('treesz', 16);
+	treesz = isNaN(treesz) ? 16 : Math.min(Math.max(treesz, 4), 50);
+	console.log('treesz [' + treesz + ']');
 
 	function entree(e) {
 		ev(e);
@@ -779,7 +783,7 @@ function autoplay_blocked() {
 				esc(top) + '">' + esc(name) +
 				"</a>\n<ul>\n" + html + "</ul>";
 
-			var links = document.querySelectorAll('#tree a+a');
+			var links = document.querySelectorAll('#treeul a+a');
 			for (var a = 0, aa = links.length; a < aa; a++) {
 				if (links[a].getAttribute('href') == top) {
 					var o = links[a].parentNode;
@@ -793,7 +797,10 @@ function autoplay_blocked() {
 		document.querySelector('#treeul>li>a+a').textContent = '[root]';
 		despin('#tree');
 		reload_tree();
+		rescale_tree();
+	}
 
+	function rescale_tree() {
 		var q = '#tree';
 		var nq = 0;
 		while (true) {
@@ -802,18 +809,19 @@ function autoplay_blocked() {
 			if (!document.querySelector(q))
 				break;
 		}
-		ebi('treeul').style.width = (24 + nq) + 'em';
+		var w = treesz + (dyn ? nq : 0);
+		ebi('treeul').style.width = w + 'em';
 	}
 
 	function reload_tree() {
 		var cdir = get_vpath();
-		var links = document.querySelectorAll('#tree a+a');
+		var links = document.querySelectorAll('#treeul a+a');
 		for (var a = 0, aa = links.length; a < aa; a++) {
 			var href = links[a].getAttribute('href');
 			links[a].setAttribute('class', href == cdir ? 'hl' : '');
 			links[a].onclick = treego;
 		}
-		links = document.querySelectorAll('#tree li>a:first-child');
+		links = document.querySelectorAll('#treeul li>a:first-child');
 		for (var a = 0, aa = links.length; a < aa; a++) {
 			links[a].setAttribute('dst', links[a].nextSibling.getAttribute('href'));
 			links[a].onclick = treegrow;
@@ -844,6 +852,7 @@ function autoplay_blocked() {
 				rm.parentNode.removeChild(rm);
 			}
 			this.textContent = '+';
+			rescale_tree();
 			return;
 		}
 		var dst = this.getAttribute('dst');
@@ -953,8 +962,28 @@ function autoplay_blocked() {
 		swrite('entreed', 'na');
 	}
 
+	function dyntree(e) {
+		ev(e);
+		dyn = !dyn;
+		bcfg_set('dyntree', dyn);
+		rescale_tree();
+	}
+
+	function scaletree(e) {
+		ev(e);
+		treesz += parseInt(this.getAttribute("step"));
+		if (isNaN(treesz))
+			treesz = 16;
+
+		swrite('treesz', treesz);
+		rescale_tree();
+	}
+
 	ebi('entree').onclick = entree;
 	ebi('detree').onclick = detree;
+	ebi('dyntree').onclick = dyntree;
+	ebi('twig').onclick = scaletree;
+	ebi('twobytwo').onclick = scaletree;
 	if (sread('entreed') == 'tree')
 		entree();
 

copyparty/web/up2k.js

@@ -209,41 +209,7 @@ function up2k_init(have_crypto) {
         };
     }
 
-    function cfg_get(name) {
+    var parallel_uploads = icfg_get('nthread');
-        var val = sread(name);
-        if (val === null)
-            return parseInt(ebi(name).value);
-
-        ebi(name).value = val;
-        return val;
-    }
-
-    function bcfg_get(name, defval) {
-        var o = ebi(name);
-        if (!o)
-            return defval;
-
-        var val = sread(name);
-        if (val === null)
-            val = defval;
-        else
-            val = (val == '1');
-
-        o.checked = val;
-        return val;
-    }
-
-    function bcfg_set(name, val) {
-        swrite(name, val ? '1' : '0');
-
-        var o = ebi(name);
-        if (o)
-            o.checked = val;
-
-        return val;
-    }
-
-    var parallel_uploads = cfg_get('nthread');
     var multitask = bcfg_get('multitask', true);
     var ask_up = bcfg_get('ask_up', true);
     var flag_en = bcfg_get('flag_en', false);

copyparty/web/util.js

@@ -293,6 +293,51 @@ function jwrite(key, val) {
         swrite(key, JSON.stringify(val));
 }
 
+function icfg_get(name, defval) {
+    var o = ebi(name);
+
+    var val = parseInt(sread(name));
+    if (val === null)
+        return parseInt(o ? o.value : defval);
+
+    if (o)
+        o.value = val;
+
+    return val;
+}
+
+function bcfg_get(name, defval) {
+    var o = ebi(name);
+    if (!o)
+        return defval;
+
+    var val = sread(name);
+    if (val === null)
+        val = defval;
+    else
+        val = (val == '1');
+
+    bcfg_upd_ui(name, val);
+    return val;
+}
+
+function bcfg_set(name, val) {
+    swrite(name, val ? '1' : '0');
+    bcfg_upd_ui(name, val);
+    return val;
+}
+
+function bcfg_upd_ui(name, val) {
+    var o = ebi(name);
+    if (!o)
+        return;
+
+    if (o.getAttribute('type') == 'checkbox')
+        o.checked = val;
+    else if (o)
+        o.setAttribute('class', val ? 'on' : '');
+}
+
 
 function hist_push(html, url) {
     var key = new Date().getTime();