diff --git a/css/grid-n-view.css b/css/grid-n-view.css
index f07d72c..b446e1f 100644
--- a/css/grid-n-view.css
+++ b/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);
}
diff --git a/grid-n-view.html b/grid-n-view.html
index f945168..9322e71 100644
--- a/grid-n-view.html
+++ b/grid-n-view.html
@@ -27,7 +27,7 @@
- option: .loop_images (in porgress)
- 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...
+- Gallery: focus visible (if no current)...
- Gallery/Lightbox: Selection of images (space / ctrl-a / ctrl-d / ctrl-i)
- Lightbox: show selection marker
- Gallery: constructor (list of urls)
diff --git a/grid-n-view.js b/grid-n-view.js
index 6278a76..86eef37 100644
--- a/grid-n-view.js
+++ 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