dsel: fix bugs, improve selection (#1214)

* additive/subtractive select (hold shift/alt while releasing LMB)
* mobile support

copyparty/web/browser.js

@@ -9760,102 +9760,115 @@ function reload_browser() {
 
 (function() {
 	var is_selma = false;
-    var is_drag = false;
+	var dragging = false;
-    var startx, starty;
-    var selbox = null;
 
+	var startx, starty;
+	var fwrap = null;
+	var selbox = null;
 	var ttimer = null;
-    var lpdelay = 400; 
+
+	var lpdelay = 250; 
 	var mvthresh = 10;
 
 	function unbox() {
 		qsr('.selbox');
-        selbox = null;
+		ebi('gfiles').style.removeProperty('pointer-events')
-        is_drag = false;
+		ebi('wrap').style.removeProperty('user-select')
+		
+		if (selbox) {
+			console.log(selbox)
+			window.getSelection().removeAllRanges();
+		}
+		
 		is_selma = false;
+		dragging = false;
+		fwrap = null;
+		selbox = null;
+		ttimer = null;
 	}
 
 	function getpp(e) {
-        if (e.touches && e.touches.length > 0) {
+		var touch = (e.touches && e.touches[0]) || e;
-            return { x: e.touches[0].clientX, y: e.touches[0].clientY };
+		return { x: touch.clientX, y: touch.clientY };
-        }
-        return { x: e.clientX, y: e.clientY };
 	}
 
-    function sel_toggle(el) {
+	function sel_toggle(el, m) {
-        clmod(el, 'sel', 't');
+		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', 't');
+				if (tr) clmod(tr, 'sel', m);
 			}
 		}
 	}
 
-    function bob(rect1, rect2) {
+	function bob(b1, b2) {
-        return !(rect1.right < rect2.left || rect1.left > rect2.right ||
+		return !(b1.right < b2.left || b1.left > b2.right ||
-                 rect1.bottom < rect2.top || rect1.top > rect2.bottom);
+				 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 (e.target.closest('#widget,#ops,.opview,.doc')) return;
+
+		if (e.target.closest('#gfiles'))
+			ebi('gfiles').style.userSelect = "none"
 
 		var pos = getpp(e);
 		startx = pos.x;
 		starty = pos.y;
+		is_selma = true;
+		ttimer = null;
 		
-        if (e.type === 'mousedown') {
+		if (e.type === 'touchstart') {
-            if (e.button !== 0) {
-                unbox();
-                return;
-            }
-            is_selma = true;
-            start_drag(pos);
-        } 
-        else if (e.type === 'touchstart') {
 			ttimer = setTimeout(function() {
-                is_selma = true;
+				ttimer = null;
-                start_drag(pos);
+				start_drag();
 			}, lpdelay);
 		}
 	}
 	
-    function start_drag(pos) {
+	function start_drag() {
-        is_drag = true;
+		if (dragging) return;
+
+		dragging = true;
 		selbox = document.createElement('div');
 		selbox.className = 'selbox';
 		document.body.appendChild(selbox);
-        document.body.style.userSelect = 'none';
+
+		ebi('gfiles').style.pointerEvents = 'none';
 	}
 	
 	function sel_move(e) {
-        if (!treectl.dsel) return;
+		if (!is_selma) return;
-
 		var pos = getpp(e);
-
-        if (ttimer && !is_drag) {
 		var dist = Math.sqrt(Math.pow(pos.x - startx, 2) + Math.pow(pos.y - starty, 2));
+
+		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 (!is_drag || !selbox) return;
+		if (!dragging || !selbox) return;
-
 		ev(e);
 
-        var width = Math.abs(pos.x - startx);
+		selbox.style.width = Math.abs(pos.x - startx) + 'px';
-        var height = Math.abs(pos.y - starty);
+		selbox.style.height = Math.abs(pos.y - starty) + 'px';
-        var left = Math.min(pos.x, startx);
+		selbox.style.left = Math.min(pos.x, startx) + 'px';
-        var top = Math.min(pos.y, starty);
+		selbox.style.top = Math.min(pos.y, starty) + 'px';
-
-        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();
@@ -9863,23 +9876,17 @@ function reload_browser() {
 
 	function sel_end(e) {
 		clearTimeout(ttimer);
-        ttimer = null;
+		if (dragging && selbox) {
-
-        if (!is_drag) return;
-
-        if (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]);
+					sel_toggle(faf[a], sadmode);
-
 			msel.selui();
+			ev(e);
 		}
-
 		unbox();
-        document.body.style.userSelect = 'auto';
 	}
 
 	function dsel_init() {
@@ -9892,7 +9899,7 @@ function reload_browser() {
 		window.addEventListener('touchend', sel_end, { passive: true });
 
 		window.addEventListener('dragstart', function(e) {
-            if (treectl.dsel && (is_selma || is_drag)) {
+			if (treectl.dsel && (is_selma || dragging)) {
 				e.preventDefault();
 			}
 		});