mirror of
https://github.com/9001/copyparty.git
synced 2025-08-17 09:02:15 -06:00
lazyload big folders; closes #11
This commit is contained in:
ed
parent
add04478e5
commit
17c465bed7
|
|
@ -1583,11 +1583,26 @@ html.y #tree.nowrap .ntree a+a:hover {
|
|||
}
|
||||
#files>thead>tr>th.min,
|
||||
#files td.min {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
#files td:nth-child(2n) {
|
||||
color: var(--tab-alt);
|
||||
}
|
||||
#plazy {
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#blazy {
|
||||
text-align: center;
|
||||
font-size: 1.2em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
#blazy code,
|
||||
#blazy a {
|
||||
font-size: 1.1em;
|
||||
padding: 0 .2em;
|
||||
}
|
||||
.opwide,
|
||||
#op_unpost,
|
||||
#srch_form {
|
||||
|
|
|
|||
|
|
@ -101,6 +101,7 @@ var Ls = {
|
|||
"cl_ziptype": "folder download",
|
||||
"cl_uopts": "up2k switches",
|
||||
"cl_favico": "favicon",
|
||||
"cl_bigdir": "big dirs",
|
||||
"cl_keytype": "key notation",
|
||||
"cl_hiddenc": "hidden columns",
|
||||
"cl_reset": "(reset)",
|
||||
|
|
@ -124,6 +125,9 @@ var Ls = {
|
|||
"cft_fg": "foreground color",
|
||||
"cft_bg": "background color",
|
||||
|
||||
"cdt_lim": "max number of files to show in a folder",
|
||||
"cdt_ask": "when scrolling to the bottom,$Ninstead of loading more files,$Nask what to do",
|
||||
|
||||
"tt_entree": "show navpane (directory tree sidebar)$NHotkey: B",
|
||||
"tt_detree": "show breadcrumbs$NHotkey: B",
|
||||
"tt_visdir": "scroll to selected folder",
|
||||
|
|
@ -168,6 +172,8 @@ var Ls = {
|
|||
|
||||
"f_chide": 'this will hide the column «{0}»\n\nyou can unhide columns in the settings tab',
|
||||
"f_bigtxt": "this file is {0} MiB large -- really view as text?",
|
||||
"fbd_more": '<div id="blazy">showing <code>{0}</code> of <code>{1}</code> files; <a href="#" id="bd_more">show {2}</a> or <a href="#" id="bd_all">show all</a></div>',
|
||||
"fbd_all": '<div id="blazy">showing <code>{0}</code> of <code>{1}</code> files; <a href="#" id="bd_all">show all</a></div>',
|
||||
|
||||
"ft_paste": "paste {0} items$NHotkey: ctrl-V",
|
||||
"fr_eperm": 'cannot rename:\nyou do not have “move” permission in this folder',
|
||||
|
|
@ -448,6 +454,7 @@ var Ls = {
|
|||
"cl_ziptype": "nedlastning av mapper",
|
||||
"cl_uopts": "up2k-brytere",
|
||||
"cl_favico": "favicon",
|
||||
"cl_bigdir": "store mapper",
|
||||
"cl_keytype": "notasjon for musikalsk dur",
|
||||
"cl_hiddenc": "skjulte kolonner",
|
||||
"cl_reset": "(nullstill)",
|
||||
|
|
@ -471,6 +478,9 @@ var Ls = {
|
|||
"cft_fg": "farge",
|
||||
"cft_bg": "bakgrunnsfarge",
|
||||
|
||||
"cdt_lim": "maks antall filer å vise per mappe",
|
||||
"cdt_ask": "vis knapper for å laste flere filer nederst på siden istedenfor å gradvis laste mer av mappen når man scroller ned",
|
||||
|
||||
"tt_entree": "bytt til mappehierarki$NSnarvei: B",
|
||||
"tt_detree": "bytt til tradisjonell sti-visning$NSnarvei: B",
|
||||
"tt_visdir": "bla ned til den åpne mappen",
|
||||
|
|
@ -515,6 +525,8 @@ var Ls = {
|
|||
|
||||
"f_chide": 'dette vil skjule kolonnen «{0}»\n\nfanen for "andre innstillinger" lar deg vise kolonnen igjen',
|
||||
"f_bigtxt": "denne filen er hele {0} MiB -- vis som tekst?",
|
||||
"fbd_more": '<div id="blazy">viser <code>{0}</code> av <code>{1}</code> filer; <a href="#" id="bd_more">vis {2}</a> eller <a href="#" id="bd_all">vis alle</a></div>',
|
||||
"fbd_all": '<div id="blazy">viser <code>{0}</code> av <code>{1}</code> filer; <a href="#" id="bd_all">vis alle</a></div>',
|
||||
|
||||
"ft_paste": "Lim inn {0} filer$NSnarvei: ctrl-V",
|
||||
"fr_eperm": 'kan ikke endre navn:\ndu har ikke “move”-rettigheten i denne mappen',
|
||||
|
|
@ -827,6 +839,9 @@ ebi('op_up2k').innerHTML = (
|
|||
);
|
||||
|
||||
|
||||
ebi('wrap').insertBefore(mknod('div', 'lazy'), ebi('epi'));
|
||||
|
||||
|
||||
(function () {
|
||||
var o = mknod('div');
|
||||
o.innerHTML = (
|
||||
|
|
@ -887,6 +902,14 @@ ebi('op_cfg').innerHTML = (
|
|||
' </td>\n' +
|
||||
' </div>\n' +
|
||||
'</div>\n' +
|
||||
'<div>\n' +
|
||||
' <h3>' + L.cl_bigdir + '</h3>\n' +
|
||||
' <div>\n' +
|
||||
' <input type="text" id="bd_lim" value="250" style="width:4em" tt="' + L.cdt_lim + '" />' +
|
||||
' <a id="bd_ask" class="tgl btn" href="#" tt="' + L.cdt_ask + '">ask</a>\n' +
|
||||
' </td>\n' +
|
||||
' </div>\n' +
|
||||
'</div>\n' +
|
||||
'<div><h3>' + L.cl_keytype + '</h3><div id="key_notation"></div></div>\n' +
|
||||
'<div><h3>' + L.cl_hiddenc + ' <a href="#" id="hcolsr">' + L.cl_reset + '</h3><div id="hcols"></div></div>'
|
||||
);
|
||||
|
|
@ -1015,7 +1038,7 @@ function set_files_html(html) {
|
|||
par.removeChild(files);
|
||||
files = mknod('div');
|
||||
files.innerHTML = '<table id="files">' + html + '</table>';
|
||||
par.insertBefore(files.childNodes[0], ebi('epi'));
|
||||
par.insertBefore(files.childNodes[0], ebi('lazy'));
|
||||
files = ebi('files');
|
||||
return files;
|
||||
}
|
||||
|
|
@ -3375,7 +3398,7 @@ var showfile = (function () {
|
|||
lang = r.getlang(name),
|
||||
is_md = lang == 'md';
|
||||
|
||||
ebi('files').style.display = ebi('gfiles').style.display = ebi('pro').style.display = ebi('epi').style.display = 'none';
|
||||
ebi('files').style.display = ebi('gfiles').style.display = ebi('lazy').style.display = ebi('pro').style.display = ebi('epi').style.display = 'none';
|
||||
ebi('dldoc').setAttribute('href', url);
|
||||
|
||||
var wr = ebi('bdoc'),
|
||||
|
|
@ -3629,7 +3652,7 @@ var thegrid = (function () {
|
|||
var vis = has(perms, "read");
|
||||
gfiles.style.display = vis && r.en ? '' : 'none';
|
||||
lfiles.style.display = vis && !r.en ? '' : 'none';
|
||||
ebi('pro').style.display = ebi('epi').style.display = ebi('treeul').style.display = ebi('treepar').style.display = '';
|
||||
ebi('pro').style.display = ebi('epi').style.display = ebi('lazy').style.display = ebi('treeul').style.display = ebi('treepar').style.display = '';
|
||||
ebi('bdoc').style.display = 'none';
|
||||
clmod(ebi('wrap'), 'doc');
|
||||
qsr('#docname');
|
||||
|
|
@ -4496,6 +4519,9 @@ document.onkeydown = function (e) {
|
|||
})();
|
||||
|
||||
function aligngriditems() {
|
||||
if (!window.treectl)
|
||||
return;
|
||||
|
||||
var em2px = parseFloat(getComputedStyle(ebi('ggrid')).fontSize);
|
||||
var gridsz = getComputedStyle(document.getElementsByTagName('html')[0]).getPropertyValue('--grid-sz').slice(0, -2);
|
||||
var gridwidth = ebi('ggrid').clientWidth;
|
||||
|
|
@ -4504,10 +4530,8 @@ function aligngriditems() {
|
|||
|
||||
if (((griditemcount * em2px) * gridsz) + totalgapwidth < gridwidth) {
|
||||
ebi('ggrid').style.justifyContent = 'left';
|
||||
} else if (localStorage.getItem('entreed') == 'na') {
|
||||
ebi('ggrid').style.justifyContent = 'center';
|
||||
} else if (localStorage.getItem('entreed') == 'tree') {
|
||||
ebi('ggrid').style.justifyContent = 'space-between';
|
||||
} else {
|
||||
ebi('ggrid').style.justifyContent = treectl.hidden ? 'center' : 'space-between';
|
||||
}
|
||||
}
|
||||
window.addEventListener('resize', aligngriditems);
|
||||
|
|
@ -4537,6 +4561,13 @@ var treectl = (function () {
|
|||
setwrap(bcfg_bind(r, 'wtree', 'wraptree', true, setwrap));
|
||||
setwrap(bcfg_bind(r, 'parpane', 'parpane', true, onscroll));
|
||||
bcfg_bind(r, 'htree', 'hovertree', false, reload_tree);
|
||||
bcfg_bind(r, 'ask', 'bd_ask', false);
|
||||
ebi('bd_lim').value = r.lim = icfg_get('bd_lim');
|
||||
ebi('bd_lim').oninput = function (e) {
|
||||
var n = parseInt(this.value);
|
||||
swrite('bd_lim', r.lim = (isNum(n) ? n : 0) || 1000);
|
||||
};
|
||||
r.nvis = r.lim;
|
||||
|
||||
function setwrap(v) {
|
||||
clmod(ebi('tree'), 'nowrap', !v);
|
||||
|
|
@ -4662,7 +4693,7 @@ var treectl = (function () {
|
|||
}
|
||||
y = ebi('treeh').offsetHeight;
|
||||
if (!fixedpos)
|
||||
y += tree.offsetTop - document.documentElement.scrollTop;
|
||||
y += tree.offsetTop - yscroll();
|
||||
|
||||
y = (y - 3) + 'px';
|
||||
if (parp.style.top != y)
|
||||
|
|
@ -4916,8 +4947,10 @@ var treectl = (function () {
|
|||
if (hpush && !no_tree)
|
||||
get_tree('.', xhr.top);
|
||||
|
||||
r.nvis = r.lim;
|
||||
r.nextdir = xhr.top;
|
||||
enspin(thegrid.en ? '#gfiles' : '#files');
|
||||
window.removeEventListener('scroll', r.tscroll);
|
||||
}
|
||||
|
||||
function treegrow(e) {
|
||||
|
|
@ -4955,6 +4988,10 @@ var treectl = (function () {
|
|||
return;
|
||||
}
|
||||
|
||||
for (var a = 0; a < res.files.length; a++)
|
||||
if (res.files[a].tags === undefined)
|
||||
res.files[a].tags = {};
|
||||
|
||||
srvinf = res.srvinf;
|
||||
try {
|
||||
ebi('srv_info').innerHTML = ebi('srv_info2').innerHTML = '<span>' + res.srvinf + '</span>';
|
||||
|
|
@ -4990,14 +5027,32 @@ var treectl = (function () {
|
|||
}
|
||||
|
||||
r.gentab = function (top, res) {
|
||||
r.lsc = res;
|
||||
var nodes = res.dirs.concat(res.files),
|
||||
html = mk_files_header(res.taglist),
|
||||
sel = r.lsc === res ? msel.getsel() : [],
|
||||
plain = [],
|
||||
seen = {};
|
||||
|
||||
r.lsc = res;
|
||||
nodes = sortfiles(nodes);
|
||||
window.removeEventListener('scroll', r.tscroll);
|
||||
r.trunc = nodes.length > r.nvis && location.hash.length < 2;
|
||||
if (r.trunc) {
|
||||
for (var a = r.lim; a < nodes.length; a++) {
|
||||
var tn = nodes[a],
|
||||
tns = Object.keys(tn.tags);
|
||||
|
||||
plain.push(uricom_dec(tn.href.split('?')[0]));
|
||||
|
||||
for (var b = 0; b < tns.length; b++)
|
||||
if (has(res.taglist, tns[b]))
|
||||
plain.push(tn.tags[tns[b]]);
|
||||
}
|
||||
nodes = nodes.slice(0, r.nvis);
|
||||
}
|
||||
|
||||
showfile.files = [];
|
||||
html.push('<tbody>');
|
||||
nodes = sortfiles(nodes);
|
||||
for (var a = 0; a < nodes.length; a++) {
|
||||
var tn = nodes[a],
|
||||
bhref = tn.href.split('?')[0],
|
||||
|
|
@ -5037,6 +5092,13 @@ var treectl = (function () {
|
|||
html.push('</tbody>');
|
||||
html = html.join('\n');
|
||||
set_files_html(html);
|
||||
if (r.trunc) {
|
||||
r.setlazy(plain);
|
||||
if (!r.ask) {
|
||||
window.addEventListener('scroll', r.tscroll);
|
||||
setTimeout(r.tscroll, 100);
|
||||
}
|
||||
}
|
||||
|
||||
function asdf() {
|
||||
showfile.mktree();
|
||||
|
|
@ -5050,6 +5112,9 @@ var treectl = (function () {
|
|||
apply_perms(res.perms);
|
||||
fileman.render();
|
||||
}
|
||||
if (sel.length)
|
||||
msel.loadsel(sel);
|
||||
|
||||
setTimeout(eval_hash, 1);
|
||||
}
|
||||
|
||||
|
|
@ -5090,6 +5155,65 @@ var treectl = (function () {
|
|||
setTimeout(eval_hash, 1);
|
||||
};
|
||||
|
||||
r.setlazy = function (plain) {
|
||||
var html = ['<div id="plazy">', esc(plain.join(' ')), '</div>'],
|
||||
all = r.lsc.files.length + r.lsc.dirs.length,
|
||||
nxt = r.nvis * 4;
|
||||
|
||||
if (r.ask)
|
||||
html.push((nxt >= all ? L.fbd_all : L.fbd_more).format(r.nvis, all, nxt));
|
||||
|
||||
ebi('lazy').innerHTML = html.join('\n');
|
||||
|
||||
try {
|
||||
ebi('bd_all').onclick = function (e) {
|
||||
ev(e);
|
||||
r.showmore(all);
|
||||
};
|
||||
ebi('bd_more').onclick = function (e) {
|
||||
ev(e);
|
||||
r.showmore(nxt);
|
||||
};
|
||||
}
|
||||
catch (ex) { }
|
||||
};
|
||||
|
||||
r.showmore = function (n) {
|
||||
window.removeEventListener('scroll', r.tscroll);
|
||||
console.log('nvis {0} -> {1}'.format(r.nvis, n));
|
||||
r.nvis = n;
|
||||
ebi('lazy').innerHTML = '';
|
||||
ebi('wrap').style.opacity = 0.4;
|
||||
setTimeout(function () {
|
||||
r.gentab(get_evpath(), r.lsc);
|
||||
ebi('wrap').style.opacity = 'unset';
|
||||
}, 1);
|
||||
};
|
||||
|
||||
r.tscroll = function () {
|
||||
var el = r.trunc ? ebi('plazy') : null;
|
||||
if (!el || ebi('lazy').style.display || ebi('unsearch'))
|
||||
return;
|
||||
|
||||
var sy = yscroll() + window.innerHeight,
|
||||
ty = el.offsetTop;
|
||||
|
||||
if (sy <= ty)
|
||||
return;
|
||||
|
||||
window.removeEventListener('scroll', r.tscroll);
|
||||
|
||||
var all = r.lsc.files.length + r.lsc.dirs.length;
|
||||
if (r.nvis * 16 <= all) {
|
||||
console.log("{0} ({1} * 16) <= {2}".format(r.nvis * 16, r.nvis, all));
|
||||
r.showmore(r.nvis * 4);
|
||||
}
|
||||
else {
|
||||
console.log("{0} ({1} * 16) > {2}".format(r.nvis * 16, r.nvis, all));
|
||||
r.showmore(all);
|
||||
}
|
||||
};
|
||||
|
||||
function parsetree(res, top) {
|
||||
var ret = '';
|
||||
for (var a = 0; a < res.a.length; a++) {
|
||||
|
|
@ -5768,6 +5892,21 @@ var msel = (function () {
|
|||
}
|
||||
};
|
||||
|
||||
r.loadsel = function (sel) {
|
||||
r.sel = [];
|
||||
r.load();
|
||||
|
||||
var vsel = new Set();
|
||||
for (var a = 0; a < sel.length; a++)
|
||||
vsel.add(sel[a].vp);
|
||||
|
||||
for (var a = 0; a < r.all.length; a++)
|
||||
if (vsel.has(r.all[a].vp))
|
||||
clmod(ebi(r.all[a].id).closest('tr'), 'sel', 1);
|
||||
|
||||
r.selui();
|
||||
};
|
||||
|
||||
r.getsel = function () {
|
||||
r.load();
|
||||
return r.sel;
|
||||
|
|
@ -6318,8 +6457,9 @@ function reload_browser() {
|
|||
mp.read_order();
|
||||
});
|
||||
|
||||
for (var a = 0; a < 2; a++)
|
||||
clmod(ebi(a ? 'pro' : 'epi'), 'hidden', ebi('unsearch'));
|
||||
var ns = ['pro', 'epi', 'lazy']
|
||||
for (var a = 0; a < ns.length; a++)
|
||||
clmod(ebi(ns[a]), 'hidden', ebi('unsearch'));
|
||||
|
||||
if (window['up2k'])
|
||||
up2k.set_fsearch();
|
||||
|
|
|
|||
|
|
@ -395,7 +395,7 @@ function init_toc() {
|
|||
|
||||
// collect vertical position of all toc items (headers in document)
|
||||
function freshen_offsets() {
|
||||
var top = window.pageYOffset || document.documentElement.scrollTop;
|
||||
var top = yscroll();
|
||||
for (var a = anchors.length - 1; a >= 0; a--) {
|
||||
var y = top + anchors[a].elm.getBoundingClientRect().top;
|
||||
y = Math.round(y * 10.0) / 10;
|
||||
|
|
@ -411,7 +411,7 @@ function init_toc() {
|
|||
if (anchors.length == 0)
|
||||
return;
|
||||
|
||||
var ptop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
var ptop = yscroll();
|
||||
var hit = anchors.length - 1;
|
||||
for (var a = 0; a < anchors.length; a++) {
|
||||
if (anchors[a].y >= ptop - 8) { //???
|
||||
|
|
|
|||
|
|
@ -390,6 +390,21 @@ if (window.matchMedia) {
|
|||
}
|
||||
|
||||
|
||||
function yscroll() {
|
||||
if (document.documentElement.scrollTop) {
|
||||
return (window.yscroll = function () {
|
||||
return document.documentElement.scrollTop;
|
||||
})();
|
||||
}
|
||||
if (window.pageYOffset) {
|
||||
return (window.yscroll = function () {
|
||||
return window.pageYOffset;
|
||||
})();
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
|
||||
function showsort(tab) {
|
||||
var v, vn, v1, v2, th = tab.tHead,
|
||||
sopts = jread('fsort', [["href", 1, ""]]);
|
||||
|
|
|
|||
Loading…
Reference in a new issue