alex/copyparty
1
0
Fork 0
mirror of https://github.com/9001/copyparty.git synced 2026-02-21 09:50:40 +10:00
Code Issues Packages Projects Releases Wiki Activity

dsel: fix bugs, improve selection (#1214)

Browse Source 
* additive/subtractive select (hold shift/alt while releasing LMB)
* mobile support
This commit is contained in:
exci
2026-01-16 23:17:01 +02:00
committed by GitHub
parent 5d7cf80ff0
commit 72c59405e7
1 changed files with 123 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

231
copyparty/web/browser.js
View File

@@ -9759,144 +9759,151 @@ function reload_browser() {
} }
(function() { (function() {
var is_selma = false; var is_selma = false;
var is_drag = false; var dragging = false;
var startx, starty;
var selbox = null;
var ttimer = null; var startx, starty;
var lpdelay = 400; var fwrap = null;
var mvthresh = 10; var selbox = null;
var ttimer = null;
function unbox() { var lpdelay = 250;
qsr('.selbox'); var mvthresh = 10;
selbox = null;
is_drag = false;
is_selma = false;
}
function getpp(e) { function unbox() {
if (e.touches && e.touches.length > 0) { qsr('.selbox');
return { x: e.touches[0].clientX, y: e.touches[0].clientY }; ebi('gfiles').style.removeProperty('pointer-events')
} ebi('wrap').style.removeProperty('user-select')
return { x: e.clientX, y: e.clientY };
}
function sel_toggle(el) { if (selbox) {
clmod(el, 'sel', 't'); console.log(selbox)
var eref = el.getAttribute('ref'); window.getSelection().removeAllRanges();
if (eref) { }
var ehidden = ebi(eref);
if (ehidden) {
var tr = ehidden.closest('tr');
if (tr) clmod(tr, 'sel', 't');
}
}
}
function bob(rect1, rect2) { is_selma = false;
return !(rect1.right < rect2.left || rect1.left > rect2.right || dragging = false;
rect1.bottom < rect2.top || rect1.top > rect2.bottom); fwrap = null;
} selbox = null;
ttimer = null;
}
function sel_start(e) { function getpp(e) {
var touch = (e.touches && e.touches[0]) || e;
return { x: touch.clientX, y: touch.clientY };
}
function sel_toggle(el, m) {
clmod(el, 'sel', m);
var eref = el.getAttribute('ref');
if (eref) {
var ehidden = ebi(eref);
if (ehidden) {
var tr = ehidden.closest('tr');
if (tr) clmod(tr, 'sel', m);
}
}
}
function bob(b1, b2) {
return !(b1.right < b2.left || b1.left > b2.right ||
b1.bottom < b2.top || b1.top > b2.bottom);
}
function sel_start(e) {
if (e.button !== 0 && e.type !== 'touchstart') return;
if (!thegrid.en || !treectl.dsel) return; if (!thegrid.en || !treectl.dsel) return;
if (e.target.closest('#widget,#ops,.opview,.doc')) return;
var pos = getpp(e); if (e.target.closest('#gfiles'))
startx = pos.x; ebi('gfiles').style.userSelect = "none"
starty = pos.y;
if (e.type === 'mousedown') { var pos = getpp(e);
if (e.button !== 0) { startx = pos.x;
unbox(); starty = pos.y;
return; is_selma = true;
} ttimer = null;
is_selma = true;
start_drag(pos);
}
else if (e.type === 'touchstart') {
ttimer = setTimeout(function() {
is_selma = true;
start_drag(pos);
}, lpdelay);
}
}
function start_drag(pos) { if (e.type === 'touchstart') {
is_drag = true; ttimer = setTimeout(function() {
selbox = document.createElement('div'); ttimer = null;
selbox.className = 'selbox'; start_drag();
document.body.appendChild(selbox); }, lpdelay);
document.body.style.userSelect = 'none'; }
} }
function sel_move(e) { function start_drag() {
if (!treectl.dsel) return; if (dragging) return;
var pos = getpp(e); dragging = true;
selbox = document.createElement('div');
selbox.className = 'selbox';
document.body.appendChild(selbox);
if (ttimer && !is_drag) { ebi('gfiles').style.pointerEvents = 'none';
var dist = Math.sqrt(Math.pow(pos.x - startx, 2) + Math.pow(pos.y - starty, 2)); }
if (dist > mvthresh) {
clearTimeout(ttimer);
ttimer = null;
}
}
if (!is_drag || !selbox) return; function sel_move(e) {
if (!is_selma) return;
var pos = getpp(e);
var dist = Math.sqrt(Math.pow(pos.x - startx, 2) + Math.pow(pos.y - starty, 2));
ev(e); if (e.type === 'touchmove' && ttimer) {
if (dist > mvthresh) {
clearTimeout(ttimer);
ttimer = null;
is_selma = false;
}
return;
}
if (!dragging && dist > mvthresh && !window.getSelection().toString()) {
if (fwrap = e.target.closest('#wrap'))
fwrap.style.userSelect = 'none';
else return;
start_drag();
}
var width = Math.abs(pos.x - startx); if (!dragging || !selbox) return;
var height = Math.abs(pos.y - starty); ev(e);
var left = Math.min(pos.x, startx);
var top = Math.min(pos.y, starty);
selbox.style.width = width + 'px'; selbox.style.width = Math.abs(pos.x - startx) + 'px';
selbox.style.height = height + 'px'; selbox.style.height = Math.abs(pos.y - starty) + 'px';
selbox.style.left = left + 'px'; selbox.style.left = Math.min(pos.x, startx) + 'px';
selbox.style.top = top + 'px'; selbox.style.top = Math.min(pos.y, starty) + 'px';
if (IE && window.getSelection) if (IE && window.getSelection)
window.getSelection().removeAllRanges(); window.getSelection().removeAllRanges();
} }
function sel_end(e) {
clearTimeout(ttimer);
ttimer = null;
if (!is_drag) return;
if (selbox) {
var sbrect = selbox.getBoundingClientRect();
var faf = QSA('#ggrid a');
for (var a = 0, aa = faf.length; a < aa; a++)
if (bob(sbrect, faf[a].getBoundingClientRect()))
sel_toggle(faf[a]);
function sel_end(e) {
clearTimeout(ttimer);
if (dragging && selbox) {
var sbrect = selbox.getBoundingClientRect();
var faf = QSA('#ggrid a');
var sadmode = e.shiftKey ? true : e.altKey ? false : "t";
for (var a = 0, aa = faf.length; a < aa; a++)
if (bob(sbrect, faf[a].getBoundingClientRect()))
sel_toggle(faf[a], sadmode);
msel.selui(); msel.selui();
} ev(e);
}
unbox();
}
unbox(); function dsel_init() {
document.body.style.userSelect = 'auto';
}
function dsel_init() {
window.addEventListener('mousedown', sel_start); window.addEventListener('mousedown', sel_start);
window.addEventListener('mousemove', sel_move); window.addEventListener('mousemove', sel_move);
window.addEventListener('mouseup', sel_end); window.addEventListener('mouseup', sel_end);
window.addEventListener('touchstart', sel_start, { passive: true }); window.addEventListener('touchstart', sel_start, { passive: true });
window.addEventListener('touchmove', sel_move, { passive: false }); window.addEventListener('touchmove', sel_move, { passive: false });
window.addEventListener('touchend', sel_end, { passive: true }); window.addEventListener('touchend', sel_end, { passive: true });
window.addEventListener('dragstart', function(e) { window.addEventListener('dragstart', function(e) {
if (treectl.dsel && (is_selma || is_drag)) { if (treectl.dsel && (is_selma || dragging)) {
e.preventDefault(); e.preventDefault();
} }
}); });
} }
dsel_init(); dsel_init();
})(); })();