From 04d8f9ea8de1ab593804887ec763f12eeb05e190 Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Tue, 25 Jul 2023 21:57:18 +0300
Subject: [PATCH] better navigation (testing) + image number indicator in
 lightbox...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 grid-n-view.html | 19 +++++++++------
 grid-n-view.js   | 63 +++++++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 70 insertions(+), 12 deletions(-)

diff --git a/grid-n-view.html b/grid-n-view.html
index 80bcd80..9419283 100644
--- a/grid-n-view.html
+++ b/grid-n-view.html
@@ -20,19 +20,22 @@
 
 <h3>ToDo</h3>
 <pre>
+- Lightbox: indicators: 
+	- start/end (a-la ImageGrid.Viewer)
+	- next/prev
+	- <s>count</s>
+	- <s>selection</s>
 - <s>Gallery: Adaptable image justification in grid</s>
 	- Can we make this passive??? (i.e. CSS only)
 	- <s>Make more accurate -- align right side to pixel...</s>
 - <s>Gallery: Spacial navigation (up/down/left/right)</s>
-	- <b>do auto focus current image iff the gallery is visible</b>
-		- handle focus (???)
-	- <s>option: .loop_images (in porgress)</s>
-	- non-looping: indicate start/end (a-la ImageGrid.Viewer)
-	- Up/Down: might be a good idea to err slightly to the left
-	- <b>might be a good idea to select an image based on longest border 
-	  instead of closest center (current)...</b>
+	- <b>auto focus current image iff the gallery is visible</b>
+		- handle focus / tabindex (???)
+	- <s>option: .loop_images</s>
+	- <s>Up/Down: might be a good idea to select an image based on 
+	  longest border instead of closest center (current)...</s>
 - Gallery: PageUp/PageDown, home/end + allow page navigation
-- <b>Gallery: focus visible (if no current)...</b>
+- <b>Gallery: focus visible (if no current and partially scrolled)...</b>
 - <s>Gallery/Lightbox: Selection of images (space / ctrl-a / ctrl-d / ctrl-i)</s>
 	- <s>Lightbox: show selection marker</s>
 - <b>Gallery: constructor (list of urls)</b>
diff --git a/grid-n-view.js b/grid-n-view.js
index 5559064..6ad42c7 100644
--- a/grid-n-view.js
+++ b/grid-n-view.js
@@ -166,6 +166,34 @@ var Gallery = {
 
 	click_to_select: true,
 
+	// Mode to select the above/below image...
+	//
+	// 					 	   	   
+	// 		     - -----+-------------+
+	// 					|	   .	  |
+	// 					|   current	  |
+	// 					|	   .	  |
+	// 		- --+-------+---.---+--.--+
+	// 			|		.	    |  .  |			
+	// 			|	    B	    |  A  |			
+	// 			|		.	    |  .  |			
+	// 		- --+---------------+-----+
+	// 			 		^   ^      ^
+	// 			 		c   i      c   			
+	//
+	// Here, A has the closest center (c) to current but B has the closest 
+	// center of intersection (i), thus the two approaches will yield 
+	// different results, moving down from current:
+	// 		current ----(center)----> A
+	// 		current -(intersection)-> B
+	//
+	// can be:
+	// 	'intersection'	- closest center of intersecting part to center 
+	// 						of current image.
+	// 	'center'		- closest center of image to current image center
+	// XXX remove this when/if the selected options feels natural...
+	vertical_navigate_mode: 'intersection',
+
 
 	code: `
 		<div class="gallery">
@@ -230,6 +258,11 @@ var Gallery = {
 					.replace(/\/[0-9]+px\//, '/') }) },
 				//*/
 
+	get length(){
+		return this.images.length },
+	get index(){
+		return this.images.indexOf(this.current) },
+
 	getRow: function(img, direction='current'){
 		if(['above', 'current', 'below'].includes(img)){
 			direction = img
@@ -295,17 +328,31 @@ var Gallery = {
 				?? this.current 
 				?? this.getRow(img)[0]
 		// above/below...
+		// get image with closest center to target image center...
 		} else if(direction == 'above' || direction == 'below'){
 			var row = this.getRow(direction)
 			if(row == null){
 				return undefined }
 			var cur = this.current 
 				?? row[0]
+			// image center point...
 			var c = cur.offsetLeft + cur.offsetWidth/2
 			var target
 			var min
 			for(var img of row){
-				var n = img.offsetLeft + img.offsetWidth/2
+				// length of intersection...
+				if(this.vertical_navigate_mode == 'intersection'){
+					var l = Math.max(
+						img.offsetLeft, 
+						cur.offsetLeft)
+					var r = Math.min(
+						img.offsetLeft + img.offsetWidth,
+						cur.offsetLeft + cur.offsetWidth)
+					var w = r - l
+					var n = l + w/2
+				// closest center...
+				} else {
+					var n = img.offsetLeft + img.offsetWidth/2 }
 				var d = Math.abs(n - c)
 				min = min ?? d
 				if(d <= min){
@@ -504,6 +551,8 @@ var Lightbox = {
 	dom: undefined,
 	gallery: undefined,
 
+	caption_format: '${INDEX} ${CAPTION}',
+
 	navigation_deadzone: 100,
 	caption_hysteresis: 10,
 	cache_count: 1,
@@ -537,13 +586,19 @@ var Lightbox = {
 			: this.show() },
 
 	update: function(){
-		// set caption...
-		this.dom.setAttribute('caption',
+		var caption = 
 			(this.gallery.current
 					?? this.gallery.next().current
 					?? {})
 				.getAttribute('caption') 
-					?? '')
+					?? ''
+		var index = (this.gallery.index+1) +'/'+ this.gallery.length
+		// set caption...
+		// XXX should these be separate elements???
+		this.dom.setAttribute('caption',
+			this.caption_format
+				.replace(/\${CAPTION}/, caption)
+				.replace(/\${INDEX}/, index))
 		// set selection...
 		this.gallery.current.classList.contains('selected') ?
 			this.dom.classList.add('selected')