From ebbbbf3d82909962af282cdfcb620ba21bb0ff8a Mon Sep 17 00:00:00 2001 From: ed Date: Mon, 16 Aug 2021 07:37:41 +0200 Subject: [PATCH] misc old-browser support --- README.md | 43 ++++++++++++++++++++---------------- copyparty/web/baguettebox.js | 20 +++++++++++------ copyparty/web/browser.css | 16 +++++--------- copyparty/web/browser.js | 36 +++++++++++++++++++----------- copyparty/web/md2.js | 6 ++--- copyparty/web/mde.js | 16 +++++--------- copyparty/web/up2k.js | 5 ++--- copyparty/web/util.js | 31 ++++++++++++++++++++++---- 8 files changed, 104 insertions(+), 69 deletions(-) diff --git a/README.md b/README.md index 4bd43713..c5a2c1f0 100644 --- a/README.md +++ b/README.md @@ -580,28 +580,32 @@ 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 | -| basic uploader | yep | yep | yep | yep | 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 | -| up2k | - | - | 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 | -| thumbnail view | - | - | - | - | yep | yep | yep | yep | -| image viewer | - | - | - | - | yep | yep | yep | yep | -| **= feature =** | ie6 | ie9 | ie10 | ie11 | ff 52 | c 49 | iOS | Andr | +| 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 | +| file rename | - | yep | 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 | `*3` | 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 -* `*2` using a wasm decoder which can sometimes get stuck and consumes a bit more power +* `*1` causes a full-page refresh on each navigation +* `*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 | diff --git a/copyparty/web/baguettebox.js b/copyparty/web/baguettebox.js index d4a59e77..845cadf8 100644 --- a/copyparty/web/baguettebox.js +++ b/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) { diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css index b57d352b..8bcdd52f 100644 --- a/copyparty/web/browser.css +++ b/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 { - animation: fcut1 .5s ease-out; +#files tbody tr.fcut td { + animation: fcut .5s ease-out; } -#files tbody tr.c2 td { - animation: fcut2 .5s ease-out; -} -@keyframes fcut1 { - 0% {opacity:0} - 100% {opacity:1} -} -@keyframes fcut2 { +@keyframes fcut { 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; diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js index 07e2bbe1..ea6bb6fc 100644 --- a/copyparty/web/browser.js +++ b/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) - for (var a = 0; a < sel.length; a++) { - vps.push(sel[a].vp); - var cl = ebi(sel[a].id).closest('tr').classList, - inv = cl.contains('c1'); - - cl.remove(inv ? 'c1' : 'c2'); - cl.add(inv ? 'c2' : 'c1'); + var els = []; + for (var a = 0; a < sel.length; a++) { + vps.push(sel[a].vp); + if (sel.length < 100) { + els.push(ebi(sel[a].id).closest('tr')); + clmod(els[a], 'fcut'); } + } - 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(''); html = html.join('\n'); - ebi('files').innerHTML = html; + 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); diff --git a/copyparty/web/md2.js b/copyparty/web/md2.js index b2110a08..ab6aba83 100644 --- a/copyparty/web/md2.js +++ b/copyparty/web/md2.js @@ -370,8 +370,8 @@ function save_cb() { } if (!r.ok) { - if (!this.btn.classList.contains('force-save')) { - this.btn.classList.add('force-save'); + if (!clgot(this.btn, '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); diff --git a/copyparty/web/mde.js b/copyparty/web/mde.js index 5a2dc98a..6629ab05 100644 --- a/copyparty/web/mde.js +++ b/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) - save_btn.classList.add('disabled'); - else - save_btn.classList.remove('disabled'); - + clmod(save_btn, 'disabled', md_now == window.md_saved); 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')) { - this.btn.classList.add('force-save'); + if (!clgot(this.btn, '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 diff --git a/copyparty/web/up2k.js b/copyparty/web/up2k.js index 57f3ad0d..444ed9ad 100644 --- a/copyparty/web/up2k.js +++ b/copyparty/web/up2k.js @@ -1703,11 +1703,10 @@ function up2k_init(subtle) { catch (ex) { } try { - var fun = fsearch ? 'add' : 'remove', - ico = fsearch ? '🔎' : '🚀', + var ico = fsearch ? '🔎' : '🚀', desc = fsearch ? 'Search' : 'Upload'; - ebi('op_up2k').classList[fun]('srch'); + clmod(ebi('op_up2k'), 'srch', fsearch); ebi('u2bm').innerHTML = ico + ' ' + desc + ''; } catch (ex) { } diff --git a/copyparty/web/util.js b/copyparty/web/util.js index 85f6595a..44ff15cd 100644 --- a/copyparty/web/util.js +++ b/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); }