several options and configs added + cleanup...

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

css/grid-n-view.css

@@ -9,8 +9,16 @@
 
 :root {
 	/* dimensions */
-	--gallery-scrollbar-width: 0.5em;
+	--gallery-current-border-size: 0.7em;
+	--gallery-padding: 3em;
+	--gallery-padding-horizontal: var(--gallery-padding);
+	--gallery-padding-vertical: var(--gallery-current-border-size);
+	--gallery-padding-top: var(--gallery-padding-vertical);
+	--gallery-padding-bottom: var(--gallery-padding-vertical);
+	--gallery-padding-left: var(--gallery-padding-horizontal);
+	--gallery-padding-right: var(--gallery-padding-horizontal);
 	--gallery-image-scroll-margin: 1em;
+	--gallery-scrollbar-width: 0.5em;
 
 	--lightbox-frame-size: 5vmin;
 	--lightbox-image-margin-top: 0.75;
@@ -64,8 +72,12 @@ body {
 
 /* XXX need to account for scrollbar popping in and out */
 .gallery {
-	margin-left: var(--gallery-scrollbar-width);
-	margin-right: 0;
+	padding-top: var(--gallery-padding-top);
+	padding-bottom: var(--gallery-padding-bottom);
+	padding-left: calc(
+		var(--gallery-scrollbar-width) 
+		+ var(--gallery-padding-left) );
+	padding-right: var(--gallery-padding-right);
 
 	color: var(--gallery-text-color);
 	background: var(--gallery-background-color);
@@ -90,8 +102,8 @@ body {
 .gallery .images img.current {
 	z-index: 1;
 	box-shadow: 
-		0px 0px 0px 0.5em rgba(255,255,255,1),
-		0.3em 0.3em 3em 0em rgba(0,0,0,0.8);
+		0px 0px 0px var(--gallery-current-border-size) rgba(255,255,255,1),
+		0.4em 0.4em 3em 0em rgba(0,0,0,0.8);
 }
 
 

grid-n-view.html

@@ -27,7 +27,7 @@
 	- <b>option: .loop_images (in porgress)</b>
 	- Up/Down: might be a good idea to err slightly to the left
 - Gallery: PageUp/PageDown, home/end + allow page navigation
-- Gallery: focus nearest visible...
+- <b>Gallery: focus visible (if no current)...</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>

grid-n-view.js

@@ -115,8 +115,13 @@ var keyboard = {
 	Enter: function(){
 		gallery.lightbox.toggle() },
 	Escape: function(){
-		gallery.lightbox.shown
-			&& gallery.lightbox.hide() },
+		gallery.lightbox.shown ?
+			gallery.lightbox.hide() 
+		// XXX should we remember which image was current and select 
+		// 		it again when needed???
+		: gallery.deselect_current ?
+			(gallery.current = null) 
+		: null },
 	// selection...
 	' ': function(evt){
 		gallery.current
@@ -145,6 +150,7 @@ var Gallery = {
 
 	// options...
 	//
+	deselect_current: true,
 	loop_images: true,
 	allow_row_expansion: true,
 	click_to_select: true,
@@ -178,6 +184,11 @@ var Gallery = {
 	get current(){
 		return this.dom.querySelector('.images img.current') },
 	set current(img){
+		// unset...
+		if(img == null){
+			this.current?.classList.remove('current')
+			return }
+		// set...
 		for(var i of this.dom.querySelectorAll('.images img.current')){
 			i.classList.remove('current') }
 		img.classList.add('current') 
@@ -298,6 +309,7 @@ var Gallery = {
 		return target },
 
 	// XXX cache image list???
+	// XXX add .loop_images support...
 	prev: function(){
 		var images = this.images
 		var i = this.current == null ? 
@@ -325,9 +337,7 @@ var Gallery = {
 		var row = this.getRow(cur)
 		var i = row.indexOf(cur) - 1
 		this.current = row[i < 0 ?
-			(this.loop_images ?
-				row.length-1
-				: 0)
+			row.length-1
 			: i]
 		return this },
 	right: function(){
@@ -335,9 +345,7 @@ var Gallery = {
 		var row = this.getRow(cur)
 		var i = row.indexOf(cur) + 1
 		this.current = row[i >= row.length ?
-			(this.loop_images ?
-				0
-				: row.length-1)
+			0
 			: i]
 		return this },
 	up: function(){
@@ -426,6 +434,7 @@ var Gallery = {
 
 		this.dom.querySelector('.images')
 			.addEventListener('click', function(evt){
+				evt.stopPropagation()
 				var target = evt.target
 				if(target.tagName == 'IMG'){
 					// shift+click: toggle selections...
@@ -439,7 +448,13 @@ var Gallery = {
 					// first click selects and shows...
 					} else {
 						that.current = target
-						that.show() } } })
+						that.show() } 
+				} else if(that.deselect_current){
+					that.current = null } })
+		this.dom
+			.addEventListener('click', function(evt){
+				that.deselect_current
+					&& (that.current = null) })
 
 		// handle resizing...
 		new ResizeObserver(
@@ -550,6 +565,7 @@ var Lightbox = {
 		var deadzone = this.navigation_deadzone ?? 100
 		this.dom
 			.addEventListener('click', function(evt){
+				evt.stopPropagation()
 				// click left/right side of view...
 				// NOTE: this is vewport-relative...
 				evt.clientX < that.dom.offsetWidth / 2 - deadzone/2