From 3e8ce38d1fbdb1f001a654f4d4d4a589b36d0f1b Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Wed, 30 Aug 2023 02:49:03 +0300
Subject: [PATCH] better drag indication + several minor fixes and issues
 documented...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 css/grid-n-view.css |  9 ++++++++-
 grid-n-view.js      | 48 ++++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 51 insertions(+), 6 deletions(-)

diff --git a/css/grid-n-view.css b/css/grid-n-view.css
index 4162e67..a692aeb 100644
--- a/css/grid-n-view.css
+++ b/css/grid-n-view.css
@@ -228,8 +228,15 @@ button:active {
 }
 
 /* image dragged over... */
+.gallery.dragged-over .images img {
+	filter: saturate(0) brightness(0.4);
+}
 .gallery .images img.dragged-over {
-	filter: saturate(0);
+	z-index: calc(var(--base-layer) + 1);
+	box-shadow: 
+		calc(var(--gallery-current-image-border) * -1) 0px 0px 0px rgba(0,0,0,0.8),
+		/* XXX this does not work... */
+		inset var(--gallery-current-image-border) 0px 0px 0px rgba(0,0,0,0.8);
 }
 
 /* image marked for removal... */
diff --git a/grid-n-view.js b/grid-n-view.js
index c4d5151..49387ce 100644
--- a/grid-n-view.js
+++ b/grid-n-view.js
@@ -1124,6 +1124,7 @@ var Gallery = {
 
 		// drag/drop: sort...
 		var dragged
+		var dragged_over
 		this.dom
 			.addEventListener('dragstart', function(evt){
 				var i = that.images.indexOf(evt.target)
@@ -1139,6 +1140,8 @@ var Gallery = {
 		var skip_dragover = false
 		this.dom
 			.addEventListener('dragenter', function(evt){
+				evt.preventDefault()
+				evt.stopPropagation()
 				// NOTE: this prevents jumping back and forth if moving 
 				// 		image causes a resize that causes the image to 
 				// 		move again...
@@ -1182,6 +1185,13 @@ var Gallery = {
 		// 		the image below...
 		this.dom
 			.addEventListener('dragleave', function(evt){
+				// cleanup on drag out...
+				// XXX this does not work sometimes...
+				if(evt.target === that.dom){
+					that.dom.classList.remove('dragged-over')
+					dragged_over
+						&& dragged_over.classList.remove('dragged-over') }
+				// check edge...
 				if(!dragged 
 						|| skip_dragover){
 					return }
@@ -1206,7 +1216,6 @@ var Gallery = {
 								|| next.offsetTop != target.offsetTop){
 							target.after(dragged)
 							that.updateMarkers() } } } })
-		var dragged_over
 		this.dom
 			.addEventListener('dragover', function(evt){
 				evt.preventDefault()
@@ -1216,10 +1225,19 @@ var Gallery = {
 				var i = that.images.indexOf(target)
 				if(!dragged 
 						&& i >= 0){
-					dragged_over
-						&& dragged_over.classList.remove('dragged-over') 
-					dragged_over = target
-					dragged_over.classList.add('dragged-over') } }, false)
+					// XXX BUG: canceling drag leaves the classes in place...
+					// 		...handling dragend does not help...
+					// indicate replacing all...
+					if(!evt.shiftKey){
+						that.dom.classList.add('dragged-over')
+						target.classList.remove('dragged-over') 
+					// indicate insertion...
+					} else {
+						that.dom.classList.remove('dragged-over')
+						dragged_over
+							&& dragged_over.classList.remove('dragged-over') 
+						dragged_over = target
+						dragged_over.classList.add('dragged-over') } } }, false)
 		// drag/drop: files...
 		// NOTE: if shift is pressed then this will add files to the 
 		// 		loaded list, otherwise it will replace the list...
@@ -1287,10 +1305,30 @@ var Gallery = {
 					&& dragged.classList.remove('dragged')
 				dragged_over
 					&& dragged_over.classList.remove('dragged-over')
+				that.dom.classList.remove('dragged-over')
 				// XXX if this is used in the promise, move to the point 
 				// 		after we nned this...
 				dragged = undefined 
 				dragged_over = undefined }, false)
+		// drag/drom: cleanup...
+		// XXX BUG: this does not handle the situation when drag was cancelled 
+		// 		but while the browser was not focused leaving the class 
+		// 		on the element...
+		//		to reproduce:
+		//			- start drag of files
+		//			- drag over the gallery
+		//			- press esc to cancel drag
+		//		...this will leave the dragged-over classes in place...
+		var cleanupAfterDrag = function(evt){
+			console.log('11111')
+			that.dom.classList.remove('dragged-over')
+			dragged_over
+				&& dragged_over.classList.remove('dragged-over') }
+		//this.dom.addEventListener('dragend', cleanupAfterDrag) 
+		// XXX HACK-ish...
+		document.body.addEventListener('dragenter', cleanupAfterDrag) 
+		// XXX HACK...
+		this.dom.addEventListener('mouseover', cleanupAfterDrag) 
 
 		// XXX
 		for(var img of this.images){