techwire/copyparty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

separate tree scrollbar

Browse Source
This commit is contained in:
ed 2021-03-07 18:26:57 +01:00
parent ffcee6d390
commit c62ebadda8
6 changed files with 161 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
copyparty/web/browser.css
View File

@ -42,12 +42,8 @@ body {
#path #entree { #path #entree {
margin-left: -.7em; margin-left: -.7em;
} }
#treetab {
display: none;
}
#files { #files {
border-spacing: 0; border-spacing: 0;
margin-top: 2em;
z-index: 1; z-index: 1;
position: relative; position: relative;
} }
@ -157,6 +153,15 @@ a, #files tbody div a:last-child {
.logue { .logue {
padding: .2em 1.5em; padding: .2em 1.5em;
} }
.logue:empty {
display: none;
}
#pro.logue {
margin-bottom: .8em;
}
#epi.logue {
margin: .8em 0;
}
#srv_info { #srv_info {
opacity: .5; opacity: .5;
font-size: .8em; font-size: .8em;
@ -442,12 +447,40 @@ input[type="checkbox"]:checked+label {
#files td div a:last-child { #files td div a:last-child {
width: 100%; width: 100%;
} }
#tree, #wrap {
#treefiles { margin-top: 2em;
vertical-align: top;
} }
#tree { #tree {
padding-top: 2em; display: none;
position: fixed;
left: 0;
bottom: 0;
top: 7em;
padding-top: .2em;
overflow-y: auto;
-ms-scroll-chaining: none;
overscroll-behavior-y: none;
scrollbar-color: #eb0 #333;
}
#thx_ff {
padding: 5em 0;
}
#tree::-webkit-scrollbar-track {
background: #333;
}
#tree::-webkit-scrollbar {
background: #333;
}
#tree::-webkit-scrollbar-thumb {
background: #eb0;
}
#tree:hover {
z-index: 2;
}
#treeul {
position: relative;
left: -1.7em;
width: calc(100% + 1.3em);
} }
#tree>a+a { #tree>a+a {
padding: .2em .4em; padding: .2em .4em;
@ -471,12 +504,6 @@ input[type="checkbox"]:checked+label {
padding: .3em .5em; padding: .3em .5em;
font-size: 1.5em; font-size: 1.5em;
} }
#treefiles #files tbody {
border-radius: 0 .7em 0 .7em;
}
#treefiles #files thead th:nth-child(1) {
border-radius: .7em 0 0 0;
}
#tree ul, #tree ul,
#tree li { #tree li {
padding: 0; padding: 0;
@ -488,7 +515,11 @@ input[type="checkbox"]:checked+label {
#tree li { #tree li {
margin-left: 1em; margin-left: 1em;
list-style: none; list-style: none;
white-space: nowrap; border-top: 1px solid #4c4c4c;
border-bottom: 1px solid #111;
}
#tree li:last-child {
border-bottom: none;
} }
#treeul a.hl { #treeul a.hl {
color: #400; color: #400;
@ -502,24 +533,12 @@ input[type="checkbox"]:checked+label {
#treeul a+a { #treeul a+a {
width: calc(100% - 2em); width: calc(100% - 2em);
background: #333; background: #333;
line-height: 1em;
} }
#treeul a+a:hover { #treeul a+a:hover {
background: #222; background: #222;
color: #fff; color: #fff;
} }
#treeul {
position: relative;
overflow: hidden;
left: -1.7em;
}
#treeul:hover {
z-index: 2;
overflow: visible;
}
#treeul:hover a+a {
width: auto;
min-width: calc(100% - 2em);
}
#treeul a:first-child { #treeul a:first-child {
font-family: monospace, monospace; font-family: monospace, monospace;
} }

26
copyparty/web/browser.html
View File

@ -50,20 +50,18 @@
{%- endfor %} {%- endfor %}
</h1> </h1>
<div id="pro" class="logue">{{ logues[0] }}</div> <div id="tree">
<a href="#" id="detree">🍞...</a>
<a href="#" step="2" id="twobytwo">+</a>
<a href="#" step="-2" id="twig">&ndash;</a>
<a href="#" id="dyntree">a</a>
<ul id="treeul"></ul>
<div id="thx_ff">&nbsp;</div>
</div>
<table id="treetab"> <div id="wrap">
<tr>
<td id="tree"> <div id="pro" class="logue">{{ logues[0] }}</div>
<a href="#" id="detree">🍞...</a>
<a href="#" step="2" id="twobytwo">+</a>
<a href="#" step="-2" id="twig">&ndash;</a>
<a href="#" id="dyntree">a</a>
<ul id="treeul"></ul>
</td>
<td id="treefiles"></td>
</tr>
</table>
<table id="files"> <table id="files">
<thead> <thead>
@ -101,6 +99,8 @@
<h2><a href="?h">control-panel</a></h2> <h2><a href="?h">control-panel</a></h2>
</div>
{%- if srv_info %} {%- if srv_info %}
<div id="srv_info"><span>{{ srv_info }}</span></div> <div id="srv_info"><span>{{ srv_info }}</span></div>
{%- endif %} {%- endif %}

108
copyparty/web/browser.js
View File

@ -586,6 +586,7 @@ function autoplay_blocked() {
["name", "name", "name contains &nbsp; (negate with -nope)", "46"] ["name", "name", "name contains &nbsp; (negate with -nope)", "46"]
] ]
]; ];
var oldcfg = [];
if (document.querySelector('#srch_form.tags')) if (document.querySelector('#srch_form.tags'))
sconf.push(["tags", sconf.push(["tags",
@ -664,8 +665,16 @@ function autoplay_blocked() {
if (ofiles.getAttribute('ts') > this.ts) if (ofiles.getAttribute('ts') > this.ts)
return; return;
ebi('path').style.display = 'none'; if (!oldcfg.length) {
ebi('tree').style.display = 'none'; oldcfg = [
ebi('path').style.display,
ebi('tree').style.display,
ebi('wrap').style.marginLeft
];
ebi('path').style.display = 'none';
ebi('tree').style.display = 'none';
ebi('wrap').style.marginLeft = '0';
}
var html = mk_files_header(tagord); var html = mk_files_header(tagord);
html.push('<tbody>'); html.push('<tbody>');
@ -714,8 +723,10 @@ function autoplay_blocked() {
function unsearch(e) { function unsearch(e) {
ev(e); ev(e);
ebi('path').style.display = 'inline-block'; ebi('path').style.display = oldcfg[0];
ebi('tree').style.display = 'block'; ebi('tree').style.display = oldcfg[1];
ebi('wrap').style.marginLeft = oldcfg[2];
oldcfg = [];
ebi('files').innerHTML = orig_html; ebi('files').innerHTML = orig_html;
orig_html = null; orig_html = null;
reload_browser(); reload_browser();
@ -723,8 +734,7 @@ function autoplay_blocked() {
})(); })();
// tree var treectl = (function () {
(function () {
var dyn = bcfg_get('dyntree', true); var dyn = bcfg_get('dyntree', true);
var treesz = icfg_get('treesz', 16); var treesz = icfg_get('treesz', 16);
treesz = Math.min(Math.max(treesz, 4), 50); treesz = Math.min(Math.max(treesz, 4), 50);
@ -734,19 +744,50 @@ function autoplay_blocked() {
ev(e); ev(e);
ebi('path').style.display = 'none'; ebi('path').style.display = 'none';
var treetab = ebi('treetab'); var tree = ebi('tree');
var treefiles = ebi('treefiles'); tree.style.display = 'block';
treetab.style.display = 'table';
treefiles.appendChild(ebi('pro'));
treefiles.appendChild(ebi('files'));
treefiles.appendChild(ebi('epi'));
swrite('entreed', 'tree'); swrite('entreed', 'tree');
get_tree("", get_evpath(), true); get_tree("", get_evpath(), true);
onresize();
} }
function detree(e) {
ev(e);
ebi('tree').style.display = 'none';
ebi('path').style.display = 'inline-block';
ebi('wrap').style.marginLeft = '0';
swrite('entreed', 'na');
}
function onscroll() {
var top = ebi('wrap').getBoundingClientRect().top;
ebi('tree').style.top = Math.max(0, parseInt(top)) + 'px';
}
window.addEventListener('scroll', onscroll);
function periodic() {
onscroll();
setTimeout(periodic, document.visibilityState ? 200 : 5000);
}
periodic();
function onresize(e) {
var q = '#tree';
var nq = 0;
while (dyn) {
nq++;
q += '>ul>li';
if (!document.querySelector(q))
break;
}
var w = treesz + nq;
ebi('tree').style.width = w + 'em';
ebi('wrap').style.marginLeft = w + 'em';
onscroll();
}
window.addEventListener('resize', onresize);
function get_tree(top, dst, rst) { function get_tree(top, dst, rst) {
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.top = top; xhr.top = top;
@ -810,20 +851,7 @@ function autoplay_blocked() {
document.querySelector('#treeul>li>a+a').textContent = '[root]'; document.querySelector('#treeul>li>a+a').textContent = '[root]';
despin('#tree'); despin('#tree');
reload_tree(); reload_tree();
rescale_tree(); onresize();
}
function rescale_tree() {
var q = '#tree';
var nq = 0;
while (true) {
nq++;
q += '>ul>li';
if (!document.querySelector(q))
break;
}
var w = treesz + (dyn ? nq : 0);
ebi('treeul').style.width = w + 'em';
} }
function reload_tree() { function reload_tree() {
@ -873,7 +901,7 @@ function autoplay_blocked() {
rm.parentNode.removeChild(rm); rm.parentNode.removeChild(rm);
} }
this.textContent = '+'; this.textContent = '+';
rescale_tree(); onresize();
return; return;
} }
var dst = this.getAttribute('dst'); var dst = this.getAttribute('dst');
@ -981,25 +1009,11 @@ function autoplay_blocked() {
return ret; return ret;
} }
function detree(e) {
ev(e);
var treetab = ebi('treetab');
treetab.parentNode.insertBefore(ebi('pro'), treetab);
treetab.parentNode.insertBefore(ebi('files'), treetab.nextSibling);
treetab.parentNode.insertBefore(ebi('epi'), ebi('files').nextSibling);
ebi('path').style.display = 'inline-block';
treetab.style.display = 'none';
swrite('entreed', 'na');
}
function dyntree(e) { function dyntree(e) {
ev(e); ev(e);
dyn = !dyn; dyn = !dyn;
bcfg_set('dyntree', dyn); bcfg_set('dyntree', dyn);
rescale_tree(); onresize();
} }
function scaletree(e) { function scaletree(e) {
@ -1009,7 +1023,7 @@ function autoplay_blocked() {
treesz = 16; treesz = 16;
swrite('treesz', treesz); swrite('treesz', treesz);
rescale_tree(); onresize();
} }
ebi('entree').onclick = entree; ebi('entree').onclick = entree;
@ -1034,6 +1048,10 @@ function autoplay_blocked() {
if (window.history && history.pushState) { if (window.history && history.pushState) {
hist_replace(get_evpath() + window.location.hash); hist_replace(get_evpath() + window.location.hash);
} }
return {
"onscroll": onscroll
}
})(); })();

66
copyparty/web/up2k.js
View File

@ -46,9 +46,9 @@ function up2k_flagbus() {
var dbg = function (who, msg) { var dbg = function (who, msg) {
console.log('flagbus(' + flag.id + '): [' + who + '] ' + msg); console.log('flagbus(' + flag.id + '): [' + who + '] ' + msg);
}; };
flag.ch.onmessage = function (ev) { flag.ch.onmessage = function (e) {
var who = ev.data[0], var who = e.data[0],
what = ev.data[1]; what = e.data[1];
if (who == flag.id) { if (who == flag.id) {
dbg(who, 'hi me (??)'); dbg(who, 'hi me (??)');
@ -83,7 +83,7 @@ function up2k_flagbus() {
flag.ch.postMessage([flag.id, "hey"]); flag.ch.postMessage([flag.id, "hey"]);
} }
else { else {
dbg('?', ev.data); dbg('?', e.data);
} }
}; };
var tx = function (now, msg) { var tx = function (now, msg) {
@ -194,7 +194,7 @@ function up2k_init(have_crypto) {
// handle user intent to use the basic uploader instead // handle user intent to use the basic uploader instead
ebi('u2nope').onclick = function (e) { ebi('u2nope').onclick = function (e) {
e.preventDefault(); ev(e);
setmsg(); setmsg();
goto('bup'); goto('bup');
}; };
@ -254,29 +254,29 @@ function up2k_init(have_crypto) {
} }
ebi('u2btn').addEventListener('click', nav, false); ebi('u2btn').addEventListener('click', nav, false);
function ondrag(ev) { function ondrag(e) {
ev.stopPropagation(); e.stopPropagation();
ev.preventDefault(); e.preventDefault();
ev.dataTransfer.dropEffect = 'copy'; e.dataTransfer.dropEffect = 'copy';
ev.dataTransfer.effectAllowed = 'copy'; e.dataTransfer.effectAllowed = 'copy';
} }
ebi('u2btn').addEventListener('dragover', ondrag, false); ebi('u2btn').addEventListener('dragover', ondrag, false);
ebi('u2btn').addEventListener('dragenter', ondrag, false); ebi('u2btn').addEventListener('dragenter', ondrag, false);
function gotfile(ev) { function gotfile(e) {
ev.stopPropagation(); e.stopPropagation();
ev.preventDefault(); e.preventDefault();
var files; var files;
var is_itemlist = false; var is_itemlist = false;
if (ev.dataTransfer) { if (e.dataTransfer) {
if (ev.dataTransfer.items) { if (e.dataTransfer.items) {
files = ev.dataTransfer.items; // DataTransferItemList files = e.dataTransfer.items; // DataTransferItemList
is_itemlist = true; is_itemlist = true;
} }
else files = ev.dataTransfer.files; // FileList else files = e.dataTransfer.files; // FileList
} }
else files = ev.target.files; else files = e.target.files;
if (files.length == 0) if (files.length == 0)
return alert('no files selected??'); return alert('no files selected??');
@ -655,8 +655,8 @@ function up2k_init(have_crypto) {
prog(t.n, nchunk, col_hashing); prog(t.n, nchunk, col_hashing);
}; };
var segm_load = function (ev) { var segm_load = function (e) {
cache_buf = ev.target.result; cache_buf = e.target.result;
cache_ofs = 0; cache_ofs = 0;
hash_calc(); hash_calc();
}; };
@ -730,7 +730,7 @@ function up2k_init(have_crypto) {
st.busy.handshake.push(t); st.busy.handshake.push(t);
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.onload = function (ev) { xhr.onload = function (e) {
if (xhr.status == 200) { if (xhr.status == 200) {
var response = JSON.parse(xhr.responseText); var response = JSON.parse(xhr.responseText);
@ -881,7 +881,7 @@ function up2k_init(have_crypto) {
alert('y o u b r o k e i t\n\n(was that a folder? just files please)'); alert('y o u b r o k e i t\n\n(was that a folder? just files please)');
}; };
reader.onload = function (ev) { reader.onload = function (e) {
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.upload.onprogress = function (xev) { xhr.upload.onprogress = function (xev) {
var perc = xev.loaded / (cdr - car) * 100; var perc = xev.loaded / (cdr - car) * 100;
@ -915,7 +915,7 @@ function up2k_init(have_crypto) {
xhr.setRequestHeader('Content-Type', 'application/octet-stream'); xhr.setRequestHeader('Content-Type', 'application/octet-stream');
xhr.overrideMimeType('Content-Type', 'application/octet-stream'); xhr.overrideMimeType('Content-Type', 'application/octet-stream');
xhr.responseType = 'text'; xhr.responseType = 'text';
xhr.send(ev.target.result); xhr.send(e.target.result);
}; };
reader.readAsArrayBuffer(bobslice.call(t.fobj, car, cdr)); reader.readAsArrayBuffer(bobslice.call(t.fobj, car, cdr));
@ -944,7 +944,7 @@ function up2k_init(have_crypto) {
/// config ui /// config ui
// //
function onresize(ev) { function onresize(e) {
var bar = ebi('ops'), var bar = ebi('ops'),
wpx = innerWidth, wpx = innerWidth,
fpx = parseInt(getComputedStyle(bar)['font-size']), fpx = parseInt(getComputedStyle(bar)['font-size']),
@ -959,17 +959,17 @@ function up2k_init(have_crypto) {
ebi('u2conf').setAttribute('class', wide ? 'has_btn' : ''); ebi('u2conf').setAttribute('class', wide ? 'has_btn' : '');
} }
} }
window.onresize = onresize; window.addEventListener('resize', onresize);
onresize(); onresize();
function desc_show(ev) { function desc_show(e) {
var msg = this.getAttribute('alt'); var msg = this.getAttribute('alt');
msg = msg.replace(/\$N/g, "<br />"); msg = msg.replace(/\$N/g, "<br />");
var cdesc = ebi('u2cdesc'); var cdesc = ebi('u2cdesc');
cdesc.innerHTML = msg; cdesc.innerHTML = msg;
cdesc.setAttribute('class', 'show'); cdesc.setAttribute('class', 'show');
} }
function desc_hide(ev) { function desc_hide(e) {
ebi('u2cdesc').setAttribute('class', ''); ebi('u2cdesc').setAttribute('class', '');
} }
var o = document.querySelectorAll('#u2conf *[alt]'); var o = document.querySelectorAll('#u2conf *[alt]');
@ -1084,17 +1084,17 @@ function up2k_init(have_crypto) {
} }
} }
function nop(ev) { function nop(e) {
ev.preventDefault(); ev(e);
this.click(); this.click();
} }
ebi('nthread_add').onclick = function (ev) { ebi('nthread_add').onclick = function (e) {
ev.preventDefault(); ev(e);
bumpthread(1); bumpthread(1);
}; };
ebi('nthread_sub').onclick = function (ev) { ebi('nthread_sub').onclick = function (e) {
ev.preventDefault(); ev(e);
bumpthread(-1); bumpthread(-1);
}; };

4
copyparty/web/upload.css
View File

@ -62,7 +62,7 @@
width: calc(100% - 2em); width: calc(100% - 2em);
max-width: 100em; max-width: 100em;
} }
#u2form.srch #u2tab { #op_up2k.srch #u2tab {
max-width: none; max-width: none;
} }
#u2tab td { #u2tab td {
@ -76,7 +76,7 @@
#u2tab td:nth-child(3) { #u2tab td:nth-child(3) {
width: 40%; width: 40%;
} }
#u2form.srch #u2tab td:nth-child(3) { #op_up2k.srch #u2tab td:nth-child(3) {
font-family: sans-serif; font-family: sans-serif;
width: auto; width: auto;
} }

3
copyparty/web/util.js
View File

@ -183,6 +183,9 @@ function goto(dest) {
if (fn) if (fn)
fn(); fn();
} }
if (window['treectl'])
treectl.onscroll();
} }