more work on dragging...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

css/grid-n-view.css

@@ -109,6 +109,12 @@ body {
 	cursor: pointer;
 }
 
+/* dragging */
+.gallery .images img.dragging {
+}
+.gallery .images:has(.dragging) img:not(.dragging) {
+}
+
 /* selection marker... */
 .gallery .images img.current {
 	z-index: 10;

grid-n-view.js

@@ -17,6 +17,7 @@
 
 // This compansates for any resize rounding errors in patchFlexRows(..).
 var PATCH_MARGIN = 2
+var DRAG_DEAD_ZONE = 0.2
 
 var patchFlexRows = 
 function(elems, 
@@ -607,6 +608,8 @@ var Gallery = {
 		return this },
 	update: function(){
 		this.__update_grid_size()
+		// XXX should this update markers???
+		//this.updateMarkers()
 		this.lightbox.shown
 			&& this.lightbox.update()
 		this.details.shown
@@ -759,16 +762,66 @@ var Gallery = {
 			.addEventListener('dragstart', function(evt){
 				var i = that.images.indexOf(evt.target)
 				if(i >= 0){
-					dragged = evt.target } })
+					dragged = evt.target 
+					dragged.classList.add('dragging') } })
+		// NOTE: this prevents jumping back and forth if moving image 
+		// 		causes a resize that causes the image to move again...
+		var skip_dragover = false
 		this.dom
 			.addEventListener('dragenter', function(evt){
-				var i = that.images.indexOf(evt.target)
+				if(skip_dragover){
+					return }
+				var target = evt.target
+				var i = that.images.indexOf(target)
 				if(dragged && i >= 0){
-					var target = evt.target
+					evt.offsetX < target.offsetWidth / 2 ?
-					evt.offsetX < evt.target.offsetWidth / 2 ?
 						target.after(dragged)
 						: target.before(dragged) 
-					that.updateMarkers() } })
+					// skip a dragover event if triggered by (right 
+					// after) resize...
+					skip_dragover = true
+					setTimeout(function(){
+						skip_dragover = false }, 20)
+					that
+						.__update_grid_size()
+						.updateMarkers() 
+					dragged.scrollIntoView({
+						behavior: 'smooth',
+						block: 'nearest',
+					}) } })
+		// check if we just went out of the edge image...
+		// NOTE: this handles a special case:
+		// 		when a narrow image is at the edge and the adjacent image 
+		// 		is wide. dragging the narrow image over the wide places 
+		// 		it at the other side ow the wide image but the cursor is 
+		// 		now over the wide image so to drag back we either need 
+		// 		to exit it and drag over again (not intuitive) or simply 
+		// 		drag over the oppoiste edge of the wide image (dragleave handler)
+		// XXX should we do all the dragging here???
+		this.dom
+			.addEventListener('dragleave', function(evt){
+				if(skip_dragover){
+					return }
+				var target = evt.target
+				var images = that.images
+				var i = images.indexOf(target)
+				if(dragged !== target 
+						&& i >= 0){
+					var prev = images[i-1]
+					var next = images[i+1]
+					// left edge...
+					if(evt.offsetX <= 0){
+						if(prev == null 
+								|| prev.offsetTop != target.offsetTop){
+							target.before(dragged) 
+							that.updateMarkers() }
+					// right edge...
+					} else {
+						if(next == null 
+								|| next.offsetTop != target.offsetTop){
+							console.log('RIGHT', target, dragged)
+							target.after(dragged)
+							that.updateMarkers() } } } })
 		this.dom
 			.addEventListener('dragover', function(evt){
 				evt.preventDefault()
@@ -817,6 +870,8 @@ var Gallery = {
 						function(err){
 							// XXX handle errors...
 						}) 
+				dragged
+					&& dragged.classList.remove('dragging')
 				// XXX if this is used in the promise, move to the point 
 				// 		after we nned this...
 				dragged = undefined }, false)