lots of tweaks...

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

css/grid-n-view.css

@@ -10,6 +10,7 @@
 :root {
 	/* dimensions */
 	--gallery-scrollbar-width: 0.5em;
+	--gallery-image-scroll-margin: 1em;
 
 	--lightbox-frame-size: 5vmin;
 	--lightbox-image-margin-top: 0.75;
@@ -79,6 +80,7 @@ body {
 .gallery .images img {
 	height: 300px;
 	width: auto;
+	scroll-margin: var(--gallery-image-scroll-margin);
 	image-rendering: crisp-edges;
 
 	cursor: pointer;
@@ -87,7 +89,9 @@ body {
 /* selection marker... */
 .gallery .images img.current {
 	z-index: 1;
-	box-shadow: 0px 0px 0px 5px rgba(255,0,0,0.8);
+	box-shadow: 
+		0px 0px 0px 0.5em rgba(255,255,255,1),
+		0.3em 0.3em 3em 0em rgba(0,0,0,0.8);
 }
 
 
@@ -97,9 +101,14 @@ body {
 	z-index: 1;
 	position: relative;
 }
+.gallery.lightboxed .images img+.mark {
+	z-index: 2;
+	position: fixed;
+	bottom: 0;
+	right: 0;
+}
 
 /* marker: selected */
-.gallery .lightbox.selected:after,
 .gallery .images img+.mark.selected:after {
 	content: "";
 	position: absolute;
@@ -111,7 +120,10 @@ body {
 	border-radius: 50%;
 
 	background: blue;
-	border: solid 1px white;
+
+	box-shadow: 0em 0em 0em 0.05em rgba(255,255,255,1);
+
+	cursor: pointer;
 }
 
 
@@ -132,6 +144,9 @@ body {
 	color: var(--lightbox-text-color);
 	background: var(--lightbox-background-color);
 }
+.gallery.lightboxed .lightbox {
+	display: block;
+}
 .gallery .lightbox.show-caption:before {
 	content: attr(caption);
 	position: absolute;

grid-n-view.js

@@ -93,6 +93,7 @@ function(elem) {
 
 //---------------------------------------------------------------------
 
+// XXX add shift+arrow to select...
 // XXX add home/end, pageup/pagedown...
 var keyboard = {
 	ArrowLeft: function(){
@@ -142,9 +143,12 @@ var keyboard = {
 
 var Gallery = {
 
+	// options...
+	//
 	allow_row_expansion: true,
 	click_to_select: true,
 
+
 	code: `
 		<div class="gallery">
 			<!-- gallery: content -->
@@ -176,9 +180,11 @@ var Gallery = {
 		for(var i of this.dom.querySelectorAll('.images img.current')){
 			i.classList.remove('current') }
 		img.classList.add('current') 
+		// XXX add offsets from borders...
 		img.scrollIntoView({
 			behavior: 'smooth',
 			block: 'nearest',
+			offset: 10,
 		}) },
 
 	// XXX should this be writable???
@@ -339,7 +345,9 @@ var Gallery = {
 		return this.dom.querySelectorAll('.images img.selected') },
 	// NOTE: this is here because we can't use :before / :after directly 
 	// 		on the img tag...
+	// XXX make this generic and use a .marks list...
 	updateMarkers: function(){
+		var that = this
 		// select...
 		for(var img of this.dom.querySelectorAll('.images img.selected')){
 			var mark = img.nextElementSibling
@@ -348,21 +356,28 @@ var Gallery = {
 			if(!mark || !mark.classList.contains('mark')){
 				mark = document.createElement('div')
 				mark.classList.add('selected', 'mark')
+				mark.addEventListener('click', function(evt){
+					evt.stopPropagation()
+					that.deselect(mark) })
 				img.after(mark) } }
 		// clear deselected...
 		for(var mark of this.dom.querySelectorAll('.images img:not(.selected)+.mark')){
 			mark.remove() }
 		// update lightbox...
-		this.lightbox.update()
+		this.lightbox.shown
+			&& this.lightbox.update()
 		return this },
-	select: function(){
+	select: function(img){
-		this.current?.classList.add('selected')
+		img = img ?? this.current
+		img?.classList.add('selected')
 		return this.updateMarkers() },
-	deselect: function(){
+	deselect: function(img){
-		this.current?.classList.remove('selected')
+		img = img ?? this.current
+		img?.classList.remove('selected')
 		return this.updateMarkers() },
-	toggleSelect: function(){
+	toggleSelect: function(img){
-		this.current?.classList.toggle('selected')
+		img = img ?? this.current
+		img?.classList.toggle('selected')
 		this.updateMarkers()
 		return this },
 	selectAll: function(){
@@ -406,8 +421,11 @@ var Gallery = {
 			.addEventListener('click', function(evt){
 				var target = evt.target
 				if(target.tagName == 'IMG'){
+					// shift+click: toggle selections...
+					if(evt.shiftKey){
+						that.toggleSelect(target)
 					// first click selects, second shows...
-					if(that.click_to_select){
+					} else if(that.click_to_select){
 						target.classList.contains('current') ?
 							that.show()
 							: (that.current = target)
@@ -451,17 +469,17 @@ var Lightbox = {
 			&& this.cache() },
 
 	get shown(){
-		return this.dom.style.display == 'block' },
+		return this.gallery.dom.classList.contains('lightboxed') },
 	show: function(url){
 		this.url = url 
 			?? (this.gallery.current
 				?? this.gallery.next().current
 				?? {}).src
 		this.update()
-		this.dom.style.display = 'block'
+		this.gallery.dom.classList.add('lightboxed')
 		return this },
 	hide: function(){
-		this.dom.style.display = ''
+		this.gallery.dom.classList.remove('lightboxed')
 		return this },
 	toggle: function(){
 		return this.shown ?