From e91646f771fc1db6dac0fe657ed9cf40242d72cf Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Mon, 24 Jul 2023 21:04:42 +0300 Subject: [PATCH] finished looping option + minor tweaks... Signed-off-by: Alex A. Naanou --- css/grid-n-view.css | 16 +++++------ grid-n-view.js | 68 ++++++++++++++++++++++++++++++++------------- 2 files changed, 56 insertions(+), 28 deletions(-) diff --git a/css/grid-n-view.css b/css/grid-n-view.css index 89f0e9c..adc41ad 100644 --- a/css/grid-n-view.css +++ b/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... */ diff --git a/grid-n-view.js b/grid-n-view.js index 86eef37..5559064 100644 --- a/grid-n-view.js +++ b/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(this.images.at(-1)) + this.getRow(e) + : 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(this.images[0]) } + this.getRow(e) + : 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 ? - images.length-1 - : i + i = i >= 0 ? + 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 ? - 0 - : i + i = i < images.length ? + 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...