From 093e955100dc98e3473999b5a3a4cf6e5a62cca4 Mon Sep 17 00:00:00 2001
From: ed <s@ocv.me>
Date: Sat, 19 Jun 2021 01:10:40 +0200
Subject: [PATCH] move stuff that needs javascript out of the html

---
 copyparty/web/browser.html |  88 +++++++++---------
 copyparty/web/browser.js   | 181 ++++++++++++++++++++++++++++++++++++-
 copyparty/web/up2k.js      |   2 +
 copyparty/web/upload.html  | 101 ---------------------
 copyparty/web/util.js      |  74 ++-------------
 5 files changed, 232 insertions(+), 214 deletions(-)
 delete mode 100644 copyparty/web/upload.html
diff --git a/copyparty/web/browser.html b/copyparty/web/browser.html
index 67ddf599..7c98a20f 100644
--- a/copyparty/web/browser.html
+++ b/copyparty/web/browser.html
@@ -14,22 +14,7 @@
 </head>
 
 <body>
-    <div id="ops">
-        <a href="#" data-dest="" tt="close submenu">---</a>
-        {%- if have_up2k_idx %}
-        <a href="#" data-perm="read" data-dest="search" tt="search for files by attributes, path/name, music tags, or any combination of those.$N$N&lt;code&gt;foo bar&lt;/code&gt; = must contain both foo and bar,$N&lt;code&gt;foo -bar&lt;/code&gt; = must contain foo but not bar,$N&lt;code&gt;^yana .opus$&lt;/code&gt; = must start with yana and have the opus extension">🔎</a>
-        <a href="#" data-dest="up2k" tt="up2k: upload files (if you have write-access) or toggle into the search-mode and drag files onto the search button to see if they exist somewhere on the server">🚀</a>
-        {%- else %}
-        <a href="#" data-perm="write" data-dest="up2k" tt="up2k: upload files with resume support (close your browser and drop the same files in later)">🚀</a>
-        {%- endif %}
-        <a href="#" data-perm="write" data-dest="bup" tt="bup: basic uploader, even supports netscape 4.0">🎈</a>
-        <a href="#" data-perm="write" data-dest="mkdir" tt="mkdir: create a new directory">📂</a>
-        <a href="#" data-perm="read write" data-dest="new_md" tt="new-md: create a new markdown document">📝</a>
-        <a href="#" data-perm="write" data-dest="msg" tt="msg: send a message to the server log">📟</a>
-        <a href="#" data-dest="player" tt="media player options">🎺</a>
-        <a href="#" data-dest="cfg" tt="configuration options">⚙️</a>
-        <div id="opdesc"></div>
-    </div>
+    <div id="ops"></div>
 
     <div id="op_search" class="opview">
         {%- if have_tags_idx %}
@@ -42,24 +27,41 @@
 
     <div id="op_player" class="opview opbox opwide"></div>
 
-    {%- include 'upload.html' %}
-
-    <div id="op_cfg" class="opview opbox opwide">
-        <div>
-            <h3>switches</h3>
-            <div>
-                <a id="tooltips" class="tgl btn" href="#" tt="◔ ◡ ◔">ℹ️ tooltips</a>
-                <a id="lightmode" class="tgl btn" href="#">☀️ lightmode</a>
-                <a id="griden" class="tgl btn" href="#" tt="toggle icons or list-view$NHotkey: G">田 the grid</a>
-                <a id="thumbs" class="tgl btn" href="#" tt="in icon view, toggle icons or thumbnails$NHotkey: T">🖼️ thumbs</a>
-            </div>
-        </div>
-        {%- if have_zip %}
-        <div><h3>folder download</h3><div id="arc_fmt"></div></div>
-        {%- endif %}
-        <div><h3>key notation</h3><div id="key_notation"></div></div>
-        <div class="fill"><h3>hidden columns</h3><div id="hcols"></div></div>
+    <div id="op_bup" class="opview opbox act">
+        <div id="u2err"></div>
+        <form method="post" enctype="multipart/form-data" accept-charset="utf-8" action="{{ url_suf }}">
+            <input type="hidden" name="act" value="bput" />
+            <input type="file" name="f" multiple><br />
+            <input type="submit" value="start upload">
+        </form>
     </div>
+
+    <div id="op_mkdir" class="opview opbox act">
+        <form method="post" enctype="multipart/form-data" accept-charset="utf-8" action="{{ url_suf }}">
+            <input type="hidden" name="act" value="mkdir" />
+            <input type="text" name="name" size="30">
+            <input type="submit" value="mkdir">
+        </form>
+    </div>
+
+    <div id="op_new_md" class="opview opbox">
+        <form method="post" enctype="multipart/form-data" accept-charset="utf-8" action="{{ url_suf }}">
+            <input type="hidden" name="act" value="new_md" />
+            <input type="text" name="name" size="30">
+            <input type="submit" value="create doc">
+        </form>
+    </div>
+
+    <div id="op_msg" class="opview opbox act">
+        <form method="post" enctype="application/x-www-form-urlencoded" accept-charset="utf-8" action="{{ url_suf }}">
+            <input type="text" name="msg" size="30">
+            <input type="submit" value="send msg">
+        </form>
+    </div>
+
+    <div id="op_up2k" class="opview"></div>
+
+    <div id="op_cfg" class="opview opbox opwide"></div>
     
     <h1 id="path">
         <a href="#" id="entree" tt="show directory tree$NHotkey: B">🌲</a>
@@ -68,16 +70,7 @@
         {%- endfor %}
     </h1>
     
-    <div id="tree">
-        <div id="treeh">
-            <a href="#" id="detree" tt="show breadcrumbs$NHotkey: B">🍞...</a>
-            <a href="#" class="btn" step="2" id="twobytwo">+</a>
-            <a href="#" class="btn" step="-2" id="twig">&ndash;</a>
-            <a href="#" class="tgl btn" id="dyntree" tt="autogrow as tree expands">a</a>
-        </div>
-        <ul id="treeul"></ul>
-        <div id="thx_ff">&nbsp;</div>
-    </div>
+    <div id="tree"></div>
 
 <div id="wrap">
 
@@ -128,14 +121,15 @@
     <div id="widget"></div>
 
     <script>
-        var tag_order_cfg = {{ tag_order }};
+        var perms = {{ perms }},
+            tag_order_cfg = {{ tag_order }},
+            have_up2k_idx = {{ have_up2k_idx|tojson }},
+            have_tags_idx = {{ have_tags_idx|tojson }},
+            have_zip = {{ have_zip|tojson }};
     </script>
     <script src="/.cpr/util.js{{ ts }}"></script>
     <script src="/.cpr/browser.js{{ ts }}"></script>
     <script src="/.cpr/up2k.js{{ ts }}"></script>
-    <script>
-        apply_perms({{ perms }});
-    </script>
 </body>
 
 </html>
diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js
index 8009ea3e..f81bcbf3 100644
--- a/copyparty/web/browser.js
+++ b/copyparty/web/browser.js
@@ -7,7 +7,26 @@ function dbg(msg) {
 }
 
 
-// add widget buttons
+// toolbar
+ebi('ops').innerHTML = (
+	'<a href="#" data-dest="" tt="close submenu">---</a>\n' +
+	(have_up2k_idx ? (
+		'<a href="#" data-perm="read" data-dest="search" tt="search for files by attributes, path/name, music tags, or any combination of those.$N$N&lt;code&gt;foo bar&lt;/code&gt; = must contain both foo and bar,$N&lt;code&gt;foo -bar&lt;/code&gt; = must contain foo but not bar,$N&lt;code&gt;^yana .opus$&lt;/code&gt; = must start with yana and have the opus extension">🔎</a>\n' +
+		'<a href="#" data-dest="up2k" tt="up2k: upload files (if you have write-access) or toggle into the search-mode and drag files onto the search button to see if they exist somewhere on the server">🚀</a>\n'
+	) : (
+		'<a href="#" data-perm="write" data-dest="up2k" tt="up2k: upload files with resume support (close your browser and drop the same files in later)">🚀</a>\n'
+	)) +
+	'<a href="#" data-perm="write" data-dest="bup" tt="bup: basic uploader, even supports netscape 4.0">🎈</a>\n' +
+	'<a href="#" data-perm="write" data-dest="mkdir" tt="mkdir: create a new directory">📂</a>\n' +
+	'<a href="#" data-perm="read write" data-dest="new_md" tt="new-md: create a new markdown document">📝</a>\n' +
+	'<a href="#" data-perm="write" data-dest="msg" tt="msg: send a message to the server log">📟</a>\n' +
+	'<a href="#" data-dest="player" tt="media player options">🎺</a>\n' +
+	'<a href="#" data-dest="cfg" tt="configuration options">⚙️</a>\n' +
+	'<div id="opdesc"></div>'
+);
+
+
+// media player
 ebi('widget').innerHTML = (
 	'<div id="wtoggle">' +
 	'<span id="wzip"><a' +
@@ -29,6 +48,166 @@ ebi('widget').innerHTML = (
 );
 
 
+// up2k ui
+ebi('op_up2k').innerHTML = (
+	'<form id="u2form" method="post" enctype="multipart/form-data" onsubmit="return false;"></form>\n' +
+
+	'<table id="u2conf">\n' +
+	'	<tr>\n' +
+	'		<td><br />parallel uploads:</td>\n' +
+	'		<td rowspan="2">\n' +
+	'			<input type="checkbox" id="multitask" />\n' +
+	'			<label for="multitask" tt="continue hashing other files while uploading">🏃</label>\n' +
+	'		</td>\n' +
+	'		<td rowspan="2">\n' +
+	'			<input type="checkbox" id="ask_up" />\n' +
+	'			<label for="ask_up" tt="ask for confirmation befofre upload starts">💭</label>\n' +
+	'		</td>\n' +
+	'		<td rowspan="2">\n' +
+	'			<input type="checkbox" id="flag_en" />\n' +
+	'			<label for="flag_en" tt="ensure only one tab is uploading at a time $N (other tabs must have this enabled too)">💤</label>\n' +
+	'		</td>\n' +
+	(have_up2k_idx ? (
+		'		<td data-perm="read" rowspan="2">\n' +
+		'			<input type="checkbox" id="fsearch" />\n' +
+		'			<label for="fsearch" tt="don\'t actually upload, instead check if the files already $N exist on the server (will scan all folders you can read)">🔎</label>\n' +
+		'		</td>\n'
+	) : '') +
+	'		<td data-perm="read" rowspan="2" id="u2btn_cw"></td>\n' +
+	'	</tr>\n' +
+	'	<tr>\n' +
+	'		<td>\n' +
+	'			<a href="#" id="nthread_sub">&ndash;</a><input\n' +
+	'				class="txtbox" id="nthread" value="2"/><a\n' +
+	'				href="#" id="nthread_add">+</a><br />&nbsp;\n' +
+	'		</td>\n' +
+	'	</tr>\n' +
+	'</table>\n' +
+
+	'<div id="u2notbtn"></div>\n' +
+
+	'<div id="u2btn_ct">\n' +
+	'	<div id="u2btn">\n' +
+	'		<span id="u2bm"></span><br />\n' +
+	'		drag/drop files<br />\n' +
+	'		and folders here<br />\n' +
+	'		(or click me)\n' +
+	'	</div>\n' +
+	'</div>\n' +
+
+	'<div id="u2cards">\n' +
+	'	<a href="#" act="ok" tt="completed successfully">ok <span>0</span></a><a\n' +
+	'	href="#" act="ng" tt="failed / rejected / not-found">ng <span>0</span></a><a\n' +
+	'	href="#" act="done" tt="ok and ng combined">done <span>0</span></a><a\n' +
+	'	href="#" act="bz" tt="hashing or uploading" class="act">busy <span>0</span></a><a\n' +
+	'	href="#" act="q" tt="idle, pending">que <span>0</span></a>\n' +
+	'</div>\n' +
+
+	'<table id="u2tab">\n' +
+	'	<thead>\n' +
+	'		<tr>\n' +
+	'			<td>filename</td>\n' +
+	'			<td>status</td>\n' +
+	'			<td>progress<a href="#" id="u2cleanup" tt="remove completed uploads$N(makes it possible to upload a file after searching for it)">cleanup</a></td>\n' +
+	'		</tr>\n' +
+	'	</thead>\n' +
+	'	<tbody></tbody>\n' +
+	'</table>\n' +
+
+	'<p id="u2foot"></p>\n' +
+	'<p id="u2footfoot" data-perm="write">( you can use the <a href="#" id="u2nope">basic uploader</a> if you don\'t need lastmod timestamps, resumable uploads, or progress bars )</p>'
+);
+
+
+// config panel
+ebi('op_cfg').innerHTML = (
+	'<div>\n' +
+	'	<h3>switches</h3>\n' +
+	'	<div>\n' +
+	'		<a id="tooltips" class="tgl btn" href="#" tt="◔ ◡ ◔">ℹ️ tooltips</a>\n' +
+	'		<a id="lightmode" class="tgl btn" href="#">☀️ lightmode</a>\n' +
+	'		<a id="griden" class="tgl btn" href="#" tt="toggle icons or list-view$NHotkey: G">田 the grid</a>\n' +
+	'		<a id="thumbs" class="tgl btn" href="#" tt="in icon view, toggle icons or thumbnails$NHotkey: T">🖼️ thumbs</a>\n' +
+	'	</div>\n' +
+	'</div>\n' +
+	(have_zip ? (
+		'<div><h3>folder download</h3><div id="arc_fmt"></div></div>\n'
+	) : '') +
+	'<div><h3>key notation</h3><div id="key_notation"></div></div>\n' +
+	'<div class="fill"><h3>hidden columns</h3><div id="hcols"></div></div>'
+);
+
+
+// tree sidebar
+ebi('tree').innerHTML = (
+	'<div id="treeh">\n' +
+	'	<a href="#" id="detree" tt="show breadcrumbs$NHotkey: B">🍞...</a>\n' +
+	'	<a href="#" class="btn" step="2" id="twobytwo">+</a>\n' +
+	'	<a href="#" class="btn" step="-2" id="twig">&ndash;</a>\n' +
+	'	<a href="#" class="tgl btn" id="dyntree" tt="autogrow as tree expands">a</a>\n' +
+	'</div>\n' +
+	'<ul id="treeul"></ul>\n' +
+	'<div id="thx_ff">&nbsp;</div>'
+);
+
+
+(function () {
+	var ops = QSA('#ops>a');
+	for (var a = 0; a < ops.length; a++) {
+		ops[a].onclick = opclick;
+	}
+})();
+
+
+function opclick(e) {
+	ev(e);
+
+	var dest = this.getAttribute('data-dest');
+	goto(dest);
+
+	swrite('opmode', dest || null);
+
+	var input = QS('.opview.act input:not([type="hidden"])')
+	if (input && !is_touch)
+		input.focus();
+}
+
+
+function goto(dest) {
+	var obj = QSA('.opview.act');
+	for (var a = obj.length - 1; a >= 0; a--)
+		clmod(obj[a], 'act');
+
+	obj = QSA('#ops>a');
+	for (var a = obj.length - 1; a >= 0; a--)
+		clmod(obj[a], 'act');
+
+	if (dest) {
+		var ui = ebi('op_' + dest);
+		clmod(ui, 'act', true);
+		QS('#ops>a[data-dest=' + dest + ']').className += " act";
+
+		var fn = window['goto_' + dest];
+		if (fn)
+			fn();
+	}
+
+	if (window['treectl'])
+		treectl.onscroll();
+}
+
+
+(function () {
+	goto();
+	var op = sread('opmode');
+	if (op !== null && op !== '.')
+		try {
+			goto(op);
+		}
+		catch (ex) { }
+})();
+
+
 var have_webp = null;
 (function () {
 	var img = new Image();
diff --git a/copyparty/web/up2k.js b/copyparty/web/up2k.js
index ec8377ae..707b16d9 100644
--- a/copyparty/web/up2k.js
+++ b/copyparty/web/up2k.js
@@ -1440,3 +1440,5 @@ tt.init();
 
 if (QS('#op_up2k.act'))
     goto_up2k();
+
+apply_perms(perms);
diff --git a/copyparty/web/upload.html b/copyparty/web/upload.html
deleted file mode 100644
index 7d215973..00000000
--- a/copyparty/web/upload.html
+++ /dev/null
@@ -1,101 +0,0 @@
-
-    <div id="op_bup" class="opview opbox act">
-        <div id="u2err"></div>
-        <form method="post" enctype="multipart/form-data" accept-charset="utf-8" action="{{ url_suf }}">
-            <input type="hidden" name="act" value="bput" />
-            <input type="file" name="f" multiple><br />
-            <input type="submit" value="start upload">
-        </form>
-    </div>
-
-    <div id="op_mkdir" class="opview opbox act">
-        <form method="post" enctype="multipart/form-data" accept-charset="utf-8" action="{{ url_suf }}">
-            <input type="hidden" name="act" value="mkdir" />
-            <input type="text" name="name" size="30">
-            <input type="submit" value="mkdir">
-        </form>
-    </div>
-
-    <div id="op_new_md" class="opview opbox">
-        <form method="post" enctype="multipart/form-data" accept-charset="utf-8" action="{{ url_suf }}">
-            <input type="hidden" name="act" value="new_md" />
-            <input type="text" name="name" size="30">
-            <input type="submit" value="create doc">
-        </form>
-    </div>
-
-    <div id="op_msg" class="opview opbox act">
-        <form method="post" enctype="application/x-www-form-urlencoded" accept-charset="utf-8" action="{{ url_suf }}">
-            <input type="text" name="msg" size="30">
-            <input type="submit" value="send msg">
-        </form>
-    </div>
-
-    <div id="op_up2k" class="opview">
-        <form id="u2form" method="post" enctype="multipart/form-data" onsubmit="return false;"></form>
-
-            <table id="u2conf">
-                <tr>
-                    <td><br />parallel uploads:</td>
-                    <td rowspan="2">
-                        <input type="checkbox" id="multitask" />
-                        <label for="multitask" tt="continue hashing other files while uploading">🏃</label>
-                    </td>
-                    <td rowspan="2">
-                        <input type="checkbox" id="ask_up" />
-                        <label for="ask_up" tt="ask for confirmation befofre upload starts">💭</label>
-                    </td>
-                    <td rowspan="2">
-                        <input type="checkbox" id="flag_en" />
-                        <label for="flag_en" tt="ensure only one tab is uploading at a time $N (other tabs must have this enabled too)">💤</label>
-                    </td>
-                {%- if have_up2k_idx %}
-                    <td data-perm="read" rowspan="2">
-                        <input type="checkbox" id="fsearch" />
-                        <label for="fsearch" tt="don't actually upload, instead check if the files already $N exist on the server (will scan all folders you can read)">🔎</label>
-                    </td>
-                {%- endif %}
-                    <td data-perm="read" rowspan="2" id="u2btn_cw"></td>
-                </tr>
-                <tr>
-                    <td>
-                        <a href="#" id="nthread_sub">&ndash;</a><input
-                            class="txtbox" id="nthread" value="2"/><a
-                            href="#" id="nthread_add">+</a><br />&nbsp;
-                    </td>
-                </tr>
-            </table>
-
-            <div id="u2notbtn"></div>
-
-            <div id="u2btn_ct">
-                <div id="u2btn">
-                    <span id="u2bm"></span><br />
-                    drag/drop files<br />
-                    and folders here<br />
-                    (or click me)
-                </div>
-            </div>
-
-            <div id="u2cards">
-                <a href="#" act="ok" tt="completed successfully">ok <span>0</span></a><a
-                href="#" act="ng" tt="failed / rejected / not-found">ng <span>0</span></a><a
-                href="#" act="done" tt="ok and ng combined">done <span>0</span></a><a
-                href="#" act="bz" tt="hashing or uploading" class="act">busy <span>0</span></a><a
-                href="#" act="q" tt="idle, pending">que <span>0</span></a>
-            </div>
-
-            <table id="u2tab">
-                <thead>
-                    <tr>
-                        <td>filename</td>
-                        <td>status</td>
-                        <td>progress<a href="#" id="u2cleanup" tt="remove completed uploads$N(makes it possible to upload a file after searching for it)">cleanup</a></td>
-                    </tr>
-                </thead>
-                <tbody></tbody>
-            </table>
-
-            <p id="u2foot"></p>
-            <p id="u2footfoot" data-perm="write">( you can use the <a href="#" id="u2nope">basic uploader</a> if you don't need lastmod timestamps, resumable uploads, or progress bars )</p>
-    </div>
diff --git a/copyparty/web/util.js b/copyparty/web/util.js
index 2a2c5339..f5a842bc 100644
--- a/copyparty/web/util.js
+++ b/copyparty/web/util.js
@@ -6,8 +6,7 @@ if (!window['console'])
     };
 
 
-var perms = [],
-    is_touch = 'ontouchstart' in window,
+var is_touch = 'ontouchstart' in window,
     ANDROID = /(android)/i.test(navigator.userAgent);
 
 
@@ -286,63 +285,6 @@ function makeSortable(table, cb) {
 }
 
 
-(function () {
-    var ops = QSA('#ops>a');
-    for (var a = 0; a < ops.length; a++) {
-        ops[a].onclick = opclick;
-    }
-})();
-
-
-function opclick(e) {
-    ev(e);
-
-    var dest = this.getAttribute('data-dest');
-    goto(dest);
-
-    swrite('opmode', dest || null);
-
-    var input = QS('.opview.act input:not([type="hidden"])')
-    if (input && !is_touch)
-        input.focus();
-}
-
-
-function goto(dest) {
-    var obj = QSA('.opview.act');
-    for (var a = obj.length - 1; a >= 0; a--)
-        clmod(obj[a], 'act');
-
-    obj = QSA('#ops>a');
-    for (var a = obj.length - 1; a >= 0; a--)
-        clmod(obj[a], 'act');
-
-    if (dest) {
-        var ui = ebi('op_' + dest);
-        clmod(ui, 'act', true);
-        QS('#ops>a[data-dest=' + dest + ']').className += " act";
-
-        var fn = window['goto_' + dest];
-        if (fn)
-            fn();
-    }
-
-    if (window['treectl'])
-        treectl.onscroll();
-}
-
-
-(function () {
-    goto();
-    var op = sread('opmode');
-    if (op !== null && op !== '.')
-        try {
-            goto(op);
-        }
-        catch (ex) { }
-})();
-
-
 function linksplit(rp) {
     var ret = [];
     var apath = '/';
@@ -578,13 +520,15 @@ var tt = (function () {
             o[a].onmouseleave = _hide;
         }
         hide();
-    };
 
-    ebi('tooltips').onclick = function (e) {
-        ev(e);
-        r.en = !r.en;
-        bcfg_set('tooltips', r.en);
-        r.init();
+        var ttb = ebi('tooltips');
+        if (ttb)
+            ttb.onclick = function (e) {
+                ev(e);
+                r.en = !r.en;
+                bcfg_set('tooltips', r.en);
+                r.init();
+            };
     };
 
     return r;

parallel uploads:	\n' + + ' \n' + + ' 🏃\n' + + '	\n' + + ' \n' + + ' 💭\n' + + '	\n' + + ' \n' + + ' 💤\n' + + '	\n' + + ' \n' + + ' 🔎\n' + + '
\n' + + ' –+ \n' + + '
parallel uploads:	- - 🏃 -	- - 💭 -	- - 💤 -	- - 🔎 -
- –+ -