mirrors/copyparty
1
0
Fork 0
mirror of https://github.com/9001/copyparty.git synced 2025-08-17 09:02:15 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

separate dropzones for upload/search

Browse source
This commit is contained in:
ed 2021-09-07 20:52:06 +02:00
parent 21662c9f3f
commit d288467cb7
3 changed files with 172 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
copyparty/web/browser.css
View file

@ -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;

9
copyparty/web/browser.js
View file

@ -129,7 +129,14 @@ ebi('op_up2k').innerHTML = (
'<p id="u2flagblock"><b>the files were added to the queue</b><br />however there is a busy up2k in another browser tab,<br />so waiting for that to finish first</p>\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>'
'<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>\n' +
'<div id="drops">\n' +
' <div class="dropdesc" id="up_zd"><div>🚀 Upload<br /><span></span></div></div>\n' +
' <div class="dropdesc" id="srch_zd"><div>🔎 Search<br /><span></span></div></div>\n' +
' <div class="dropzone" id="up_dz" v="up_zd"></div>\n' +
' <div class="dropzone" id="srch_dz" v="srch_zd"></div>\n' +
'</div>'
);

94
copyparty/web/up2k.js
View file

@ -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 = '<input id="file{0}" type="file" name="file{0}[]" multiple="multiple" />'.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);