From d288467cb7e4bfa8b5a8603e28549038cd3c602a Mon Sep 17 00:00:00 2001 From: ed Date: Tue, 7 Sep 2021 20:52:06 +0200 Subject: [PATCH] separate dropzones for upload/search --- copyparty/web/browser.css | 80 +++++++++++++++++++++++++++++++++ copyparty/web/browser.js | 9 +++- copyparty/web/up2k.js | 94 ++++++++++++++++++++++++++++++++++----- 3 files changed, 172 insertions(+), 11 deletions(-) diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css index f47590b5..a91166b2 100644 --- a/copyparty/web/browser.css +++ b/copyparty/web/browser.css @@ -1546,6 +1546,86 @@ html.light #bbox-overlay figcaption a { min-height: 0; transition: min-height .2s; } +#drops { + display: none; + z-index: 3; + background: rgba(48, 48, 48, 0.7); +} +#drops.vis, +#drops .dropzone { + display: block; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; +} +#drops .dropdesc { + position: fixed; + display: table; + left: 10%; + width: 78%; + height: 30%; + margin: 0; + font-size: 3em; + font-weight: bold; + text-shadow: .05em .05em .1em #000; + background: rgba(224, 224, 224, 0.2); + box-shadow: 0 0 0 #999; + border: .5em solid #999; + border-radius: .5em; + border-width: 1vw; + color: #fff; + transition: all 0.2s; +} +#drops .dropdesc.hl.ok { + border-color: #fff; + box-shadow: 0 0 1em #cf5; + background: rgba(24, 24, 24, 0.7); + left: 8%; + width: 82%; + height: 32%; + margin: -1vh 0; +} +#drops .dropdesc.hl.err { + background: rgba(224, 32, 65, 0.2); + box-shadow: 0 0 1em #f26; + border-color: #fab; +} +#drops .dropdesc>div { + display: table-cell; + vertical-align: middle; + text-align: center; +} +#drops .dropzone { + z-index: 80386; + height: 50%; +} +#drops #up_dz { + bottom: 50%; +} +#drops #srch_dz { + top: 50%; +} +#up_zd { + top: 12%; +} +#srch_zd { + bottom: 12%; +} +.dropdesc span { + color: #fff; + background: #490; + border-bottom: .3em solid #6d2; + text-shadow: 1px 1px 1px #000; + border-radius: .3em; + padding: .4em .8em; + font-size: .4em; +} +.dropdesc.err span { + background: #904; + border-color: #d26; +} #u2form { position: absolute; top: 0; diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js index e9d25c90..a6c72f2d 100644 --- a/copyparty/web/browser.js +++ b/copyparty/web/browser.js @@ -129,7 +129,14 @@ ebi('op_up2k').innerHTML = ( '

the files were added to the queue
however there is a busy up2k in another browser tab,
so waiting for that to finish first

\n' + '

\n' + - '

( you can use the basic uploader if you don\'t need lastmod timestamps, resumable uploads, or progress bars )

' + '

( you can use the basic uploader if you don\'t need lastmod timestamps, resumable uploads, or progress bars )

\n' + + + '
\n' + + '
🚀 Upload
\n' + + '
🔎 Search
\n' + + '
\n' + + '
\n' + + '
' ); diff --git a/copyparty/web/up2k.js b/copyparty/web/up2k.js index d73d60b0..d439353f 100644 --- a/copyparty/web/up2k.js +++ b/copyparty/web/up2k.js @@ -633,20 +633,95 @@ function up2k_init(subtle) { function nav() { ebi('file' + fdom_ctr).click(); } - ebi('u2btn').addEventListener('click', nav, false); + ebi('u2btn').onclick = nav; + var nenters = 0; function ondrag(e) { - e.stopPropagation(); - e.preventDefault(); + if (++nenters <= 0) + nenters = 1; + + //console.log(nenters, Date.now(), 'enter', this, e.target); + if (onover.bind(this)(e)) + return true; + + var mup, up = QS('#up_zd'); + var msr, sr = QS('#srch_zd'); + if (!has(perms, 'write')) + mup = 'you do not have write-access to this folder'; + if (!has(perms, 'read')) + msr = 'you do not have read-access to this folder'; + if (!have_up2k_idx) + msr = 'file-search is not enabled in server config'; + + up.querySelector('span').textContent = mup || 'drop it here'; + sr.querySelector('span').textContent = msr || 'drop it here'; + clmod(up, 'err', mup); + clmod(sr, 'err', msr); + clmod(up, 'ok', !mup); + clmod(sr, 'ok', !msr); + ebi('up_dz').setAttribute('err', mup || ''); + ebi('srch_dz').setAttribute('err', msr || ''); + } + function onover(e) { + try { + var ok = false, dt = e.dataTransfer.types; + for (var a = 0; a < dt.length; a++) + if (dt[a] == 'Files') + ok = true; + + if (!ok) + return true; + } + catch (ex) { } + + ev(e); e.dataTransfer.dropEffect = 'copy'; e.dataTransfer.effectAllowed = 'copy'; + clmod(ebi('drops'), 'vis', 1); + var v = this.getAttribute('v'); + if (v) + clmod(ebi(v), 'hl', 1); } - ebi('u2btn').addEventListener('dragover', ondrag, false); - ebi('u2btn').addEventListener('dragenter', ondrag, false); + function offdrag(e) { + ev(e); + + var v = this.getAttribute('v'); + if (v) + clmod(ebi(v), 'hl'); + + if (--nenters <= 0) { + clmod(ebi('drops'), 'vis'); + clmod(ebi('up_dz'), 'hl'); + clmod(ebi('srch_dz'), 'hl'); + } + + //console.log(nenters, Date.now(), 'leave', this, e && e.target); + } + document.body.ondragenter = ondrag; + document.body.ondragleave = offdrag; + + var drops = [ebi('up_dz'), ebi('srch_dz')]; + for (var a = 0; a < 2; a++) { + drops[a].ondragenter = ondrag; + drops[a].ondragover = onover; + drops[a].ondragleave = offdrag; + drops[a].ondrop = gotfile; + } + ebi('drops').onclick = offdrag; // old ff function gotfile(e) { - e.stopPropagation(); - e.preventDefault(); + ev(e); + nenters = 0; + offdrag.bind(this)(); + var dz = (this && this.getAttribute('id')); + + if ((dz == 'up_dz' && fsearch) || (dz == 'srch_dz' && !fsearch)) { + var err = this.getAttribute('err'); + if (err) + return modal.alert('sorry, ' + err); + + tgl_fsearch(); + } var files, is_itemlist = false; @@ -877,14 +952,13 @@ function up2k_init(subtle) { pvis.changecard(pvis.act); } } - ebi('u2btn').addEventListener('drop', gotfile, false); function more_one_file() { fdom_ctr++; var elm = mknod('div'); elm.innerHTML = ''.format(fdom_ctr); ebi('u2form').appendChild(elm); - ebi('file' + fdom_ctr).addEventListener('change', gotfile, false); + ebi('file' + fdom_ctr).onchange = gotfile; } more_one_file(); @@ -1905,7 +1979,7 @@ function up2k_init(subtle) { ebi('u2tdate').onclick = tgl_datechk; var o = ebi('fsearch'); if (o) - o.addEventListener('click', tgl_fsearch, false); + o.onclick = tgl_fsearch; ebi('u2etas').onclick = function (e) { ev(e);