From 5e760e35dcb8690970b916c5c3897c4e61797d32 Mon Sep 17 00:00:00 2001
From: ed <s@ocv.me>
Date: Sun, 21 Mar 2021 02:33:53 +0100
Subject: [PATCH] togglebutton for tooltips to save iphone users

---
 copyparty/web/browser.css  |  8 +++++++-
 copyparty/web/browser.html |  6 +++++-
 copyparty/web/browser.js   | 13 ++++++++++++-
 copyparty/web/util.js      |  6 ++++--
 4 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css
index 0235c85a..f74fac66 100644
--- a/copyparty/web/browser.css
+++ b/copyparty/web/browser.css
@@ -493,6 +493,7 @@ input[type="checkbox"]:checked+label {
 	left: -1.7em;
 	width: calc(100% + 1.3em);
 }
+.tglbtn,
 #tree>a+a {
 	padding: .2em .4em;
 	font-size: 1.2em;
@@ -503,9 +504,11 @@ input[type="checkbox"]:checked+label {
 	position: relative;
 	top: -.2em;
 }
+.tglbtn:hover,
 #tree>a+a:hover {
 	background: #805;
 }
+.tglbtn.on,
 #tree>a+a.on {
 	background: #fc4;
 	color: #400;
@@ -612,7 +615,7 @@ input[type="checkbox"]:checked+label {
 	max-width: none;
 	margin-right: 1.5em;
 }
-#key_notation>span {
+#op_cfg>div>span {
 	display: inline-block;
 	padding: .2em .4em;
 }
@@ -635,6 +638,9 @@ input[type="checkbox"]:checked+label {
 	top: 6em;
 	right: 1.5em;
 }
+#ops:hover #opdesc.off {
+	display: none;
+}
 #opdesc code {
 	background: #3c3c3c;
 	padding: .2em .3em;
diff --git a/copyparty/web/browser.html b/copyparty/web/browser.html
index 32025d96..4f5114de 100644
--- a/copyparty/web/browser.html
+++ b/copyparty/web/browser.html
@@ -41,6 +41,10 @@
     <div id="op_cfg" class="opview opbox">
         <h3>key notation</h3>
         <div id="key_notation"></div>
+        <h3>tooltips</h3>
+        <div>
+            <a id="tooltips" class="tglbtn" href="#">enable</a>
+        </div>
     </div>
     
     <h1 id="path">
@@ -54,7 +58,7 @@
         <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>
+        <a href="#" class="tglbtn" id="dyntree">a</a>
         <ul id="treeul"></ul>
         <div id="thx_ff">&nbsp;</div>
     </div>
diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js
index 39ce25ee..3df804d6 100644
--- a/copyparty/web/browser.js
+++ b/copyparty/web/browser.js
@@ -1469,14 +1469,25 @@ function addcrc() {
 
 
 (function () {
+	var tt = bcfg_get('tooltips', true);
+
 	function set_tooltip(e) {
 		ev(e);
-		ebi('opdesc').innerHTML = this.getAttribute('data-desc');
+		var o = ebi('opdesc');
+		o.innerHTML = this.getAttribute('data-desc');
+		o.setAttribute('class', tt ? '' : 'off');
 	}
+
 	var btns = document.querySelectorAll('#ops, #ops>a');
 	for (var a = 0; a < btns.length; a++) {
 		btns[a].onmouseenter = set_tooltip;
 	}
+
+	ebi('tooltips').onclick = function (e) {
+		ev(e);
+		tt = !tt;
+		bcfg_set('tooltips', tt);
+	};
 })();
 
 
diff --git a/copyparty/web/util.js b/copyparty/web/util.js
index afeace9f..50685283 100644
--- a/copyparty/web/util.js
+++ b/copyparty/web/util.js
@@ -403,8 +403,10 @@ function bcfg_upd_ui(name, val) {
 
     if (o.getAttribute('type') == 'checkbox')
         o.checked = val;
-    else if (o)
-        o.setAttribute('class', val ? 'on' : '');
+    else if (o) {
+        var fun = val ? 'add' : 'remove';
+        o.classList[fun]('on');
+    }
 }