mirror of
https://github.com/9001/copyparty.git
synced 2026-02-21 01:40:39 +10:00
dsel: fix bugs, improve selection (#1214)
* additive/subtractive select (hold shift/alt while releasing LMB) * mobile support
This commit is contained in:
exci
GitHub
@@ -9759,145 +9759,152 @@ 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 };
|
|
||||||
}
|
if (selbox) {
|
||||||
|
console.log(selbox)
|
||||||
|
window.getSelection().removeAllRanges();
|
||||||
|
}
|
||||||
|
|
||||||
|
is_selma = false;
|
||||||
|
dragging = false;
|
||||||
|
fwrap = null;
|
||||||
|
selbox = null;
|
||||||
|
ttimer = null;
|
||||||
|
}
|
||||||
|
|
||||||
function sel_toggle(el) {
|
function getpp(e) {
|
||||||
clmod(el, 'sel', 't');
|
var touch = (e.touches && e.touches[0]) || e;
|
||||||
var eref = el.getAttribute('ref');
|
return { x: touch.clientX, y: touch.clientY };
|
||||||
if (eref) {
|
}
|
||||||
var ehidden = ebi(eref);
|
|
||||||
if (ehidden) {
|
|
||||||
var tr = ehidden.closest('tr');
|
|
||||||
if (tr) clmod(tr, 'sel', 't');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function bob(rect1, rect2) {
|
function sel_toggle(el, m) {
|
||||||
return !(rect1.right < rect2.left || rect1.left > rect2.right ||
|
clmod(el, 'sel', m);
|
||||||
rect1.bottom < rect2.top || rect1.top > rect2.bottom);
|
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 sel_start(e) {
|
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);
|
if (e.type === 'touchstart') {
|
||||||
}
|
ttimer = setTimeout(function() {
|
||||||
else if (e.type === 'touchstart') {
|
ttimer = null;
|
||||||
ttimer = setTimeout(function() {
|
start_drag();
|
||||||
is_selma = true;
|
}, lpdelay);
|
||||||
start_drag(pos);
|
}
|
||||||
}, lpdelay);
|
}
|
||||||
}
|
|
||||||
}
|
function start_drag() {
|
||||||
|
if (dragging) return;
|
||||||
|
|
||||||
function start_drag(pos) {
|
dragging = true;
|
||||||
is_drag = true;
|
selbox = document.createElement('div');
|
||||||
selbox = document.createElement('div');
|
selbox.className = 'selbox';
|
||||||
selbox.className = 'selbox';
|
document.body.appendChild(selbox);
|
||||||
document.body.appendChild(selbox);
|
|
||||||
document.body.style.userSelect = 'none';
|
|
||||||
}
|
|
||||||
|
|
||||||
function sel_move(e) {
|
ebi('gfiles').style.pointerEvents = 'none';
|
||||||
if (!treectl.dsel) 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));
|
||||||
|
|
||||||
var pos = getpp(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();
|
||||||
|
}
|
||||||
|
|
||||||
if (ttimer && !is_drag) {
|
if (!dragging || !selbox) return;
|
||||||
var dist = Math.sqrt(Math.pow(pos.x - startx, 2) + Math.pow(pos.y - starty, 2));
|
ev(e);
|
||||||
if (dist > mvthresh) {
|
|
||||||
clearTimeout(ttimer);
|
|
||||||
ttimer = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!is_drag || !selbox) return;
|
selbox.style.width = Math.abs(pos.x - startx) + 'px';
|
||||||
|
selbox.style.height = Math.abs(pos.y - starty) + 'px';
|
||||||
|
selbox.style.left = Math.min(pos.x, startx) + 'px';
|
||||||
|
selbox.style.top = Math.min(pos.y, starty) + 'px';
|
||||||
|
|
||||||
ev(e);
|
if (IE && window.getSelection)
|
||||||
|
window.getSelection().removeAllRanges();
|
||||||
var width = Math.abs(pos.x - startx);
|
}
|
||||||
var height = Math.abs(pos.y - starty);
|
|
||||||
var left = Math.min(pos.x, startx);
|
|
||||||
var top = Math.min(pos.y, starty);
|
|
||||||
|
|
||||||
selbox.style.width = width + 'px';
|
|
||||||
selbox.style.height = height + 'px';
|
|
||||||
selbox.style.left = left + 'px';
|
|
||||||
selbox.style.top = top + 'px';
|
|
||||||
|
|
||||||
if (IE && window.getSelection)
|
|
||||||
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) {
|
|
||||||
if (treectl.dsel && (is_selma || is_drag)) {
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
window.addEventListener('dragstart', function(e) {
|
||||||
|
if (treectl.dsel && (is_selma || dragging)) {
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
dsel_init();
|
dsel_init();
|
||||||
})();
|
})();
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user