finished looping option + minor tweaks...

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

css/grid-n-view.css

@@ -9,18 +9,18 @@
 
 :root {
 	/* dimensions */
-	--gallery-current-border-size: 0.7em;
+	--gallery-current-image-border: 0.7em;
 	--gallery-padding: 3em;
 	--gallery-padding-horizontal: var(--gallery-padding);
-	--gallery-padding-vertical: var(--gallery-current-border-size);
+	--gallery-padding-vertical: var(--gallery-current-image-border);
 	--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-image-scroll-margin: calc(2 * var(--gallery-current-image-border));
 	--gallery-scrollbar-width: 0.5em;
 
-	--lightbox-frame-size: 5vmin;
+	--lightbox-frame: 5vmin;
 	--lightbox-image-margin-top: 0.75;
 	--lightbox-button-size: 4em;
 
@@ -105,7 +105,7 @@ body {
 .gallery .images img.current {
 	z-index: 1;
 	box-shadow: 
-		0px 0px 0px var(--gallery-current-border-size) rgba(255,255,255,1),
+		0px 0px 0px var(--gallery-current-image-border) rgba(255,255,255,1),
 		0.4em 0.4em 3em 0em rgba(0,0,0,0.8);
 }
 
@@ -176,12 +176,12 @@ body {
 	object-fit: contain;
 	width: calc(
 		100vw 
-		- var(--lightbox-frame-size) * 2);
+		- var(--lightbox-frame) * 2);
 	height: calc(
 		100vh 
-		- var(--lightbox-frame-size) * 2);
+		- var(--lightbox-frame) * 2);
 	margin-top: calc(
-		var(--lightbox-frame-size) 
+		var(--lightbox-frame) 
 		* var(--lightbox-image-margin-top)); 
 }
 /* controls: next/prev... */

grid-n-view.js

@@ -104,12 +104,16 @@ var keyboard = {
 		gallery.lightbox.shown ?
 			gallery.lightbox.next()
 			: gallery.next() },
+	// NOTE: up/down will not prevent the default scrolling behavior 
+	// 		when at top/bottom of the gallery.
 	ArrowUp: function(evt){
-		evt.preventDefault()
+		gallery.__at_top_row 
+			|| evt.preventDefault()
 		gallery.lightbox.shown
 			|| gallery.up() },
 	ArrowDown: function(evt){
-		evt.preventDefault()
+		gallery.__at_bottom_row 
+			|| evt.preventDefault()
 		gallery.lightbox.shown
 			|| gallery.down() },
 	Enter: function(){
@@ -148,11 +152,18 @@ var keyboard = {
 
 var Gallery = {
 
-	// options...
+	// Options...
 	//
 	deselect_current: true,
-	loop_images: true,
+
+	// If true navigation will loop over top/bottom rows and first/last 
+	// images...
+	// This is mainly usefull for small galleries that do not need paging.
+	// XXX might be a good idea to autodisable this when paging is required.
+	loop_images: false,
+
 	allow_row_expansion: true,
+
 	click_to_select: true,
 
 
@@ -181,6 +192,8 @@ var Gallery = {
 		delete this.__lightbox 
 		return undefined },
 
+	__at_top_row: undefined,
+	__at_bottom_row: undefined,
 	get current(){
 		return this.dom.querySelector('.images img.current') },
 	set current(img){
@@ -197,7 +210,10 @@ var Gallery = {
 			behavior: 'smooth',
 			block: 'nearest',
 			offset: 10,
-		}) },
+		}) 
+		// helpers...
+		this.__at_top_row = !this.getRow('above')
+		this.__at_bottom_row = !this.getRow('below') },
 
 	// XXX should this be writable???
 	get images(){
@@ -214,7 +230,6 @@ var Gallery = {
 					.replace(/\/[0-9]+px\//, '/') }) },
 				//*/
 
-	// XXX add .loop_images support...
 	getRow: function(img, direction='current'){
 		if(['above', 'current', 'below'].includes(img)){
 			direction = img
@@ -227,8 +242,10 @@ var Gallery = {
 			while(e && e.tagName != 'IMG'){
 				e = e.previousElementSibling }
 			return e ?
-				this.getRow(e)
+					this.getRow(e)
-				: this.getRow(this.images.at(-1))
+				: this.loop_images ?
+					this.getRow(this.images.at(-1))
+				: undefined
 		} else if(direction == 'below'){
 			// special case: nothing selected...
 			if(img == null){
@@ -238,8 +255,10 @@ var Gallery = {
 			while(e && e.tagName != 'IMG'){
 				e = e.nextElementSibling }
 			return e ?
-				this.getRow(e) 
+					this.getRow(e) 
-				: this.getRow(this.images[0]) }
+				: this.loop_images ?
+					this.getRow(this.images[0])
+				: undefined }
 		// get current row...
 		var cur = img 
 			?? this.current
@@ -265,7 +284,7 @@ var Gallery = {
 			while(e && e.tagName != 'IMG'){
 				e = e.previousElementSibling } }
 		return row },
-	// XXX add .loop_images support...
+	// XXX add .loop_images support???
 	getImage: function(img, direction='current'){
 		if(['left', 'above', 'current', 'below', 'right'].includes(img)){
 			direction = img
@@ -278,6 +297,8 @@ var Gallery = {
 		// above/below...
 		} else if(direction == 'above' || direction == 'below'){
 			var row = this.getRow(direction)
+			if(row == null){
+				return undefined }
 			var cur = this.current 
 				?? row[0]
 			var c = cur.offsetLeft + cur.offsetWidth/2
@@ -309,15 +330,16 @@ var Gallery = {
 		return target },
 
 	// XXX cache image list???
-	// XXX add .loop_images support...
 	prev: function(){
 		var images = this.images
 		var i = this.current == null ? 
 			images.length-1
 			: images.indexOf(this.current)-1
-		i = i < 0 ?
+		i = i >= 0 ?
-			images.length-1
+				i
-			: i
+			: this.loop_images ?
+				images.length-1
+			: 0
 		this.current = images[i]
 		return this },
 	next: function(){
@@ -325,9 +347,11 @@ var Gallery = {
 		var i = this.current == null ? 
 			0
 			: images.indexOf(this.current)+1
-		i = i >= images.length ?
+		i = i < images.length ?
-			0
+				i
-			: i
+			: this.loop_images ?
+				0
+			: images.length-1
 		this.current = images[i]
 		return this },
 
@@ -349,10 +373,14 @@ var Gallery = {
 			: i]
 		return this },
 	up: function(){
-		this.current = this.getImage('above')
+		var img = this.getImage('above')
+		img 
+			&& (this.current = img)
 		return this },
 	down: function(){
-		this.current = this.getImage('below')
+		var img = this.getImage('below')
+		img 
+			&& (this.current = img)
 		return this },
 
 	// selection...