misc old-browser support

README.md

@@ -581,27 +581,31 @@ copyparty can invoke external programs to collect additional metadata for files
 `ie` = internet-explorer, `ff` = firefox, `c` = chrome, `iOS` = iPhone/iPad, `Andr` = Android
 
 | feature         | ie6 | ie9  | ie10 | ie11 | ff 52 | c 49 | iOS | Andr |
-| --------------- | --- | --- | ---- | ---- | ----- | ---- | --- | ---- |
+| --------------- | --- | --- -| ---- | ---- | ----- | ---- | --- | ---- |
 | browse files    | yep | yep  | yep  | yep  |  yep  | yep  | yep | yep  |
+| thumbnail view  |  -  | yep  | yep  | yep  |  yep  | yep  | yep | yep  |
 | basic uploader  | yep | yep  | yep  | yep  |  yep  | yep  | yep | yep  |
+| up2k            |  -  |  -   |  -   |  -   |  yep  | yep  | yep | yep  |
 | make directory  | yep | yep  | yep  | yep  |  yep  | yep  | yep | yep  |
 | send message    | yep | yep  | yep  | yep  |  yep  | yep  | yep | yep  |
 | set sort order  |  -  | yep  | yep  | yep  |  yep  | yep  | yep | yep  |
 | zip selection   |  -  | yep  | yep  | yep  |  yep  | yep  | yep | yep  |
-| navpane         |  -  |  -  | `*1` | yep  | yep   | yep  | yep | yep  |
+| file rename     |  -  | yep  | yep  | yep  |  yep  | yep  | yep | yep  |
-| up2k            |  -  |  -  | yep  | yep  | yep   | yep  | yep | yep  |
+| file cut/paste  |  -  | yep  | yep  | yep  |  yep  | yep  | yep | yep  |
+| navpane         |  -  | `*1` | `*2` | yep  |  yep  | yep  | yep | yep  |
+| image viewer    |  -  | yep  | yep  | yep  |  yep  | yep  | yep | yep  |
+| video player    |  -  | yep  | yep  | yep  |  yep  | yep  | yep | yep  |
 | markdown editor |  -  |  -   | yep  | yep  |  yep  | yep  | yep | yep  |
 | markdown viewer |  -  |  -   | yep  | yep  |  yep  | yep  | yep | yep  |
 | play mp3/m4a    |  -  | yep  | yep  | yep  |  yep  | yep  | yep | yep  |
-| play ogg/opus   |  -  |  -  |  -   |  -   | yep   | yep  | `*2` | yep |
+| play ogg/opus   |  -  |  -   |  -   |  -   |  yep  | yep  | `*3` | yep |
-| thumbnail view  |  -  |  -  | -    | -    | yep   | yep  | yep | yep  |
-| image viewer    |  -  |  -  | -    | -    | yep   | yep  | yep | yep  |
 | **= feature =** | ie6 | ie9  | ie10 | ie11 | ff 52 | c 49 | iOS | Andr |
 
 * internet explorer 6 to 8 behave the same
 * firefox 52 and chrome 49 are the last winxp versions
-* `*1` only public folders (login session is dropped) and no history / back-button
+* `*1` causes a full-page refresh on each navigation
-* `*2` using a wasm decoder which can sometimes get stuck and consumes a bit more power
+* `*2` only public folders (login session is dropped) and no history / back-button
+* `*3` using a wasm decoder which can sometimes get stuck and consumes a bit more power
 
 quick summary of more eccentric web-browsers trying to view a directory index:
 
@@ -613,6 +617,7 @@ quick summary of more eccentric web-browsers trying to view a directory index:
 | **lynx** (2.8.9/macports) | can browse, login, upload/mkdir/msg |
 | **w3m** (0.5.3/macports)  | can browse, login, upload at 100kB/s, mkdir/msg |
 | **netsurf** (3.10/arch)   | is basically ie6 with much better css (javascript has almost no effect) | 
+| **opera** (11.60/winxp)   | OK: thumbnails, image-viewer, zip-selection, rename/cut/paste. NG: up2k, navpane, markdown, audio |
 | **ie4** and **netscape** 4.0  | can browse (text is yellow on white), upload with `?b=u` |
 | **SerenityOS** (7e98457)  | hits a page fault, works with `?b=u`, file upload not-impl |
 

copyparty/web/baguettebox.js

@@ -742,11 +742,11 @@ window.baguetteBox = (function () {
         if (rot || orot === null)
             return;
 
-        el.classList.add('nt');
+        clmod(el, 'nt', 1);
         el.removeAttribute('rot');
         el.removeAttribute("style");
         rot = el.offsetHeight;
-        el.classList.remove('nt');
+        clmod(el, 'nt');
         timer.rm(rotn);
     }
 
@@ -799,15 +799,21 @@ window.baguetteBox = (function () {
     }
 
     function updateOffset() {
-        var offset = -currentIndex * 100 + '%';
+        var offset = -currentIndex * 100 + '%',
+            xform = slider.style.perspective !== undefined;
+
         if (options.animation === 'fadeIn') {
             slider.style.opacity = 0;
             setTimeout(function () {
-                slider.style.transform = 'translate3d(' + offset + ',0,0)';
+                xform ?
+                    slider.style.transform = 'translate3d(' + offset + ',0,0)' :
+                    slider.style.left = offset;
                 slider.style.opacity = 1;
             }, 400);
         } else {
-            slider.style.transform = 'translate3d(' + offset + ',0,0)';
+            xform ?
+                slider.style.transform = 'translate3d(' + offset + ',0,0)' :
+                slider.style.left = offset;
         }
         playvid(false);
         var v = vid();
@@ -828,9 +834,9 @@ window.baguetteBox = (function () {
 
         var prev = QS('.full-image.vis');
         if (prev)
-            prev.classList.remove('vis');
+            clmod(prev, 'vis');
 
-        el.closest('div').classList.add('vis');
+        clmod(el.closest('div'), 'vis', 1);
     }
 
     function preloadNext(index) {

copyparty/web/browser.css

@@ -417,17 +417,10 @@ html.light #ggrid a.sel {
 html.light #wfm a:not(.en) {
 	color: #c4a;
 }
-#files tbody tr.c1 td {
+#files tbody tr.fcut td {
-	animation: fcut1 .5s ease-out;
+	animation: fcut .5s ease-out;
 }
-#files tbody tr.c2 td {
+@keyframes fcut {
-	animation: fcut2 .5s ease-out;
-}
-@keyframes fcut1 {
-	0% {opacity:0}
-	100% {opacity:1}
-}
-@keyframes fcut2 {
 	0% {opacity:0}
 	100% {opacity:1}
 }
@@ -900,6 +893,7 @@ html.light #ghead {
 }
 #ggrid a {
 	display: inline-block;
+	width: 10em;
 	width: var(--grid-sz);
 	vertical-align: top;
 	overflow-wrap: break-word;
@@ -913,7 +907,9 @@ html.light #ghead {
 }
 #ggrid a img {
 	border-radius: .2em;
+	max-width: 10em;
 	max-width: var(--grid-sz);
+	max-height: 8em;
 	max-height: calc(var(--grid-sz)/1.25);
 	margin: 0 auto;
 	display: block;

copyparty/web/browser.js

@@ -1658,7 +1658,7 @@ var fileman = (function () {
 			r.clip = jread('fman_clip', []);
 
 		var nsel = msel.getsel().length;
-		clmod(bren, 'en', nsel == 1);
+		clmod(bren, 'en', nsel);
 		clmod(bdel, 'en', nsel);
 		clmod(bcut, 'en', nsel);
 		clmod(bpst, 'en', r.clip && r.clip.length);
@@ -2019,17 +2019,21 @@ var fileman = (function () {
 		if (!sel.length)
 			return toast.err(3, 'select at least 1 item to cut');
 
-		if (sel.length < 100)
+		var els = [];
 		for (var a = 0; a < sel.length; a++) {
 			vps.push(sel[a].vp);
-				var cl = ebi(sel[a].id).closest('tr').classList,
+			if (sel.length < 100) {
-					inv = cl.contains('c1');
+				els.push(ebi(sel[a].id).closest('tr'));
-
+				clmod(els[a], 'fcut');
-				cl.remove(inv ? 'c1' : 'c2');
+			}
-				cl.add(inv ? 'c2' : 'c1');
 		}
 
-		toast.inf(1, 'cut ' + sel.length + ' items');
+		setTimeout(function () {
+			for (var a = 0; a < els.length; a++)
+				clmod(els[a], 'fcut', 1);
+		}, 1);
+
+		toast.inf(1.5, 'cut ' + sel.length + ' items');
 		jwrite('fman_clip', vps);
 		r.tx(1);
 	};
@@ -3157,7 +3161,13 @@ var treectl = (function () {
 		}
 		html.push('</tbody>');
 		html = html.join('\n');
+		try {
 			ebi('files').innerHTML = html;
+		}
+		catch (ex) { //ie9
+			window.location.href = this.top;
+			return;
+		}
 
 		if (this.hpush)
 			hist_push(this.top);
@@ -3778,7 +3788,7 @@ var msel = (function () {
 		if (r.all && r.all.length) {
 			for (var a = 0; a < r.all.length; a++) {
 				var ao = r.all[a];
-				ao.sel = ebi(ao.id).closest('tr').classList.contains('sel');
+				ao.sel = clgot(ebi(ao.id).closest('tr'), 'sel');
 				if (ao.sel)
 					r.sel.push(ao);
 			}
@@ -3794,7 +3804,7 @@ var msel = (function () {
 				item = {};
 
 			item.id = links[a].getAttribute('id');
-			item.sel = links[a].closest('tr').classList.contains('sel');
+			item.sel = clgot(links[a].closest('tr'), 'sel');
 			item.vp = href.indexOf('/') !== -1 ? href : vbase + href;
 
 			r.all.push(item);

copyparty/web/md2.js

@@ -370,8 +370,8 @@ function save_cb() {
     }
 
     if (!r.ok) {
-        if (!this.btn.classList.contains('force-save')) {
+        if (!clgot(this.btn, 'force-save')) {
-            this.btn.classList.add('force-save');
+            clmod(this.btn, 'force-save', 1);
             var msg = [
                 'This file has been modified since you started editing it!\n',
                 'if you really want to overwrite, press save again.\n',
@@ -387,7 +387,7 @@ function save_cb() {
             return toast.err(0, 'Error! Save failed.  Maybe this JSON explains why:\n\n' + this.responseText);
     }
 
-    this.btn.classList.remove('force-save');
+    clmod(this.btn, 'force-save');
     //alert('save OK -- wrote ' + r.size + ' bytes.\n\nsha512: ' + r.sha512);
 
     run_savechk(r.lastmod, this.txt, this.btn, 0);

copyparty/web/mde.js

@@ -96,20 +96,16 @@ function md_changed(mde, on_srv) {
     var md_now = mde.value();
     var save_btn = QS('.editor-toolbar button.save');
 
-    if (md_now == window.md_saved)
+    clmod(save_btn, 'disabled', md_now == window.md_saved);
-        save_btn.classList.add('disabled');
-    else
-        save_btn.classList.remove('disabled');
-
     set_jumpto();
 }
 
 function save(mde) {
     var save_btn = QS('.editor-toolbar button.save');
-    if (save_btn.classList.contains('disabled'))
+    if (clgot(save_btn, 'disabled'))
         return toast.inf(2, 'no changes');
 
-    var force = save_btn.classList.contains('force-save');
+    var force = clgot(save_btn, 'force-save');
     function save2() {
         var txt = mde.value();
 
@@ -153,8 +149,8 @@ function save_cb() {
     }
 
     if (!r.ok) {
-        if (!this.btn.classList.contains('force-save')) {
+        if (!clgot(this.btn, 'force-save')) {
-            this.btn.classList.add('force-save');
+            clmod(this.btn, 'force-save', 1);
             var msg = [
                 'This file has been modified since you started editing it!\n',
                 'if you really want to overwrite, press save again.\n',
@@ -170,7 +166,7 @@ function save_cb() {
             return toast.err(0, 'Error! Save failed.  Maybe this JSON explains why:\n\n' + this.responseText);
     }
 
-    this.btn.classList.remove('force-save');
+    clmod(this.btn, 'force-save');
     //alert('save OK -- wrote ' + r.size + ' bytes.\n\nsha512: ' + r.sha512);
 
     // download the saved doc from the server and compare

copyparty/web/up2k.js

@@ -1703,11 +1703,10 @@ function up2k_init(subtle) {
         catch (ex) { }
 
         try {
-            var fun = fsearch ? 'add' : 'remove',
+            var ico = fsearch ? '🔎' : '🚀',
-                ico = fsearch ? '🔎' : '🚀',
                 desc = fsearch ? 'Search' : 'Upload';
 
-            ebi('op_up2k').classList[fun]('srch');
+            clmod(ebi('op_up2k'), 'srch', fsearch);
             ebi('u2bm').innerHTML = ico + ' <sup>' + desc + '</sup>';
         }
         catch (ex) { }

copyparty/web/util.js

@@ -123,11 +123,18 @@ if (!String.startsWith) {
         return this.substring(i, i + s.length) === s;
     };
 }
+if (!Element.prototype.matches) {
+    Element.prototype.matches =
+        Element.prototype.oMatchesSelector ||
+        Element.prototype.msMatchesSelector ||
+        Element.prototype.mozMatchesSelector ||
+        Element.prototype.webkitMatchesSelector;
+}
 if (!Element.prototype.closest) {
     Element.prototype.closest = function (s) {
         var el = this;
         do {
-            if (el.msMatchesSelector(s)) return el;
+            if (el.matches(s)) return el;
             el = el.parentElement || el.parentNode;
         } while (el !== null && el.nodeType === 1);
     }
@@ -170,12 +177,28 @@ function crc32(str) {
 }
 
 
-function clmod(obj, cls, add) {
+function clmod(el, cls, add) {
+    if (el.classList) {
+        if (add == 't')
+            add = el.classList.contains(cls) ? 0 : 1;
+
+        return el.classList[add ? 'add' : 'remove'](cls);
+    }
+
     var re = new RegExp('\\s*\\b' + cls + '\\s*\\b', 'g');
     if (add == 't')
-        add = !re.test(obj.className);
+        add = !re.test(el.className);
 
-    obj.className = obj.className.replace(re, ' ') + (add ? ' ' + cls : '');
+    el.className = el.className.replace(re, ' ') + (add ? ' ' + cls : '');
+}
+
+
+function clgot(el, cls) {
+    if (el.classList)
+        return el.classList.contains(cls);
+
+    var lst = (el.getAttribute('class') + '').split(/ /g);
+    return has(lst, cls);
 }