added lightbox selection markers + tweaks and fixes...

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

css/grid-n-view.css

@@ -80,22 +80,26 @@ body {
 	height: 300px;
 	width: auto;
 	image-rendering: crisp-edges;
-	box-sizing: border-box;
 
 	cursor: pointer;
 }
+
+/* selection marker... */
 .gallery .images img.current {
-	border: solid 2px red;
+	z-index: 1;
+	box-shadow: 0px 0px 0px 5px rgba(255,0,0,0.8);
 }
 
 
 /*************************************************** Image markers ***/
 
 .gallery .images img+.mark {
+	z-index: 1;
 	position: relative;
 }
 
 /* marker: selected */
+.gallery .lightbox.selected:after,
 .gallery .images img+.mark.selected:after {
 	content: "";
 	position: absolute;
@@ -121,6 +125,7 @@ body {
 	height: 100%;
 	top: 0px;
 	left: 0px;
+	z-index: 1;
 
 	text-align: center;
 

grid-n-view.html

@@ -22,11 +22,11 @@
 <pre>
 - <s>Gallery: Adaptable image justification in grid</s>
 	- Can we make this passive??? (i.e. CSS only)
-	- Make more accurate -- align right side to pixel...
+	- <s>Make more accurate -- align right side to pixel...</s>
 - <s>Gallery: Spacial navigation (up/down/left/right)</s>
 	- Up/Down: might be a good idea to err slightly to the left
 - <s>Gallery/Lightbox: Selection of images (space / ctrl-a / ctrl-d / ctrl-i)</s>
-	- <b>Lightbox: show selection marker</b>
+	- <s>Lightbox: show selection marker</s>
 - <b>Gallery: constructor (list of urls)</b>
 - <b>Gallery: views</b>
 	- "make view from selection"

grid-n-view.js

@@ -19,8 +19,9 @@
 
 // XXX need to account for scrollbar -- add hysteresis???
 var patchFlexRows = 
-function(elems){
+function(elems, prevent_row_expansion=false){
-	var W = elems[0].parentElement.clientWidth - 2
+	// NOTE: -1 here is to compensate for rounding errors...
+	var W = elems[0].parentElement.clientWidth - 1
 	var w = 0
 	var h
 	var row = []
@@ -37,21 +38,26 @@ function(elems){
 		if(elem.offsetTop == top){
 			w += elem.offsetWidth
 			row.push(elem)
-		// next row...
+		// row donw + prep for next...
 		} else {
 			// NOTE: we are checking which will require a lesser resize
 			//		the current row or it with the next image...
 			var r1 = W / w
 			var r2 = W / (w + elem.offsetWidth)
-			var expanded_row = 1/r1 < r2
+			var expanded_row = 
+				prevent_row_expansion ?
+					false
+					: 1/r1 < r2
 			if(!expanded_row){
 				var r = r1
 			} else {
 				var r = r2
 				row.push(elem) }
 			// patch the row...
+			var nw = 0
 			for(var e of row){
-				e.style.height = Math.floor(h * r) + 'px' }
+				e.style.height = (h * r) + 'px' 
+				nw += e.offsetWidth }
 			// prep for next row...
 			if(!expanded_row){
 				w = elem.offsetWidth
@@ -135,6 +141,9 @@ var keyboard = {
 //---------------------------------------------------------------------
 
 var Gallery = {
+
+	allow_row_expansion: true,
+
 	code: `
 		<div class="gallery">
 			<!-- gallery: content -->
@@ -342,6 +351,8 @@ var Gallery = {
 		// clear deselected...
 		for(var mark of this.dom.querySelectorAll('.images img:not(.selected)+.mark')){
 			mark.remove() }
+		// update lightbox...
+		this.lightbox.update()
 		return this },
 	select: function(){
 		this.current?.classList.add('selected')
@@ -371,7 +382,7 @@ var Gallery = {
 		return this },
 
 	update: function(){
-		patchFlexRows(this.images)
+		patchFlexRows(this.images, !this.allow_row_expansion)
 		return this },
 
 	load: function(urls){
@@ -438,13 +449,7 @@ var Lightbox = {
 			?? (this.gallery.current
 				?? this.gallery.next().current
 				?? {}).src
-		// set caption...
+		this.update()
-		this.dom.setAttribute('caption',
-			(this.gallery.current
-					?? this.gallery.next().current
-					?? {})
-				.getAttribute('caption') 
-					?? '')
 		this.dom.style.display = 'block'
 		return this },
 	hide: function(){
@@ -455,6 +460,20 @@ var Lightbox = {
 			this.hide()
 			: this.show() },
 
+	update: function(){
+		// set caption...
+		this.dom.setAttribute('caption',
+			(this.gallery.current
+					?? this.gallery.next().current
+					?? {})
+				.getAttribute('caption') 
+					?? '')
+		// set selection...
+		this.gallery.current.classList.contains('selected') ?
+			this.dom.classList.add('selected')
+			: this.dom.classList.remove('selected')
+		return this },
+
 	prev: function(){
 		this.gallery.prev().show()
 		return this },