fixed layering, working on subset navigation...

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

css/grid-n-view.css

@@ -88,6 +88,10 @@ body {
 	color: var(--gallery-text-color);
 	background: var(--gallery-background-color);
 }
+.gallery.lightboxed {
+	--base-layer: 100;
+}
+
 .gallery .images {
 	position: relative;
 	display: flex;
@@ -118,16 +122,13 @@ body {
 }
 
 /* hover... */
-/* XXX Problems:
+/* XXX seems a bit convoluted */
-	- this hides marks... 
+.gallery:not(.lightboxed) .images img:not(.current):hover {
-	- shown over lightbox...
+	z-index: calc(var(--base-layer) + 1);
-*/
-.gallery .images img:not(.current):hover {
-	z-index: 20;
 	box-shadow: 0.2em 0.2em 1em 0em rgba(0,0,0,0.8);
 }
-.gallery .images img.current:hover {
+.gallery:not(.lightboxed) .images img.current:hover {
-	z-index: 20;
+	z-index: calc(var(--base-layer) + 1);
 	box-shadow: 
 		0px 0px 0px var(--gallery-current-image-border) rgba(255,255,255,1),
 		0.6em 0.6em 4em 0em rgba(0,0,0,0.8);
@@ -141,8 +142,14 @@ body {
 	z-index: var(--base-layer);
 	position: relative;
 }
+.gallery .images img:hover+.mark {
+	z-index: calc(var(--base-layer) + 1);
+}
+.gallery.lightboxed .images img:not(.current)+.mark {
+	display: none;
+}
 .gallery.lightboxed .images img.current+.mark {
-	z-index: calc(var(--base-layer) + 10);
+	z-index: calc(var(--base-layer) + 1);
 	position: fixed;
 	bottom: 0;
 	right: 0;
@@ -171,8 +178,6 @@ body {
 /******************************************************* Lightbox ****/
 
 .gallery .lightbox {
-	--base-layer: 100;
-
 	display: none;
 	position: fixed;
 	width: 100%;

grid-n-view.html

@@ -20,7 +20,6 @@
 
 <h3>ToDo</h3>
 <pre>
-- <b>ASAP: CSS: z-index needs fixing...</b>
 - Views:
 	- <s>Gallery</s>
 	- <b>Details</b>
@@ -77,11 +76,11 @@
 	<div class="images">
 		<img src="images/500px/1.JPG" caption="Caption text">
 		<img src="images/500px/2.JPG">
-		<img src="images/500px/3.JPG">
+		<img src="images/500px/3.JPG" class="marked">
 		<img src="images/500px/DSC08102.jpg">
 		<img src="images/500px/4.JPG">
 		<img src="images/500px/5.JPG">
-		<img src="images/500px/DSC08102.jpg">
+		<img src="images/500px/DSC08102.jpg" class="marked">
 		<img src="images/500px/6.JPG">
 		<img src="images/500px/DSC08102.jpg">
 		<img src="images/500px/2.JPG">

grid-n-view.js

@@ -309,10 +309,16 @@ var Gallery = {
 	get index(){
 		return this.images.indexOf(this.current) },
 
-	getRow: function(img, direction='current'){
+	getRow: function(img, direction='current', images){
 		if(['above', 'current', 'below'].includes(img)){
+			images = direction
 			direction = img
 			img = this.current }
+		if(direction instanceof Array){
+			images = direction
+			direction = null }
+		direction ??= 'current'
+		images ??= this.images
 		// get above/below row...
 		// XXX these are wastefull...
 		if(direction == 'above'){
@@ -323,7 +329,7 @@ var Gallery = {
 			return e ?
 					this.getRow(e)
 				: this.loop_images ?
-					this.getRow(this.images.at(-1))
+					this.getRow(images.at(-1))
 				: undefined
 		} else if(direction == 'below'){
 			// special case: nothing marked...
@@ -336,14 +342,14 @@ var Gallery = {
 			return e ?
 					this.getRow(e) 
 				: this.loop_images ?
-					this.getRow(this.images[0])
+					this.getRow(images[0])
 				: undefined }
 		// get current row...
 		var cur = img 
 			?? this.current
 		if(cur == null){
 			var scroll = getScrollParent(this.dom).scrollTop
-			var images = this.images 
+			var images = images 
 			for(cur of images){
 				if(cur.offsetTop >= scroll){
 					break } } }
@@ -364,19 +370,27 @@ var Gallery = {
 				e = e.previousElementSibling } }
 		return row },
 	// XXX add .loop_images support???
-	getImage: function(img, direction='current'){
+	getImage: function(img, direction='current', images){
+		// .getImage(direction[, images])
 		if(['left', 'above', 'current', 'below', 'right'].includes(img)){
+			images = direction
 			direction = img
 			img = null }
+		// .getImage(img, images)
+		if(direction instanceof Array){
+			images = direction
+			direction = null }
+		direction ??= 'current'
+		images ??= this.images
 		// current...
 		if(direction == 'current'){
 			return img 
 				?? this.current 
-				?? this.getRow(img)[0]
+				?? this.getRow(img, images)[0]
 		// above/below...
 		// get image with closest center to target image center...
 		} else if(direction == 'above' || direction == 'below'){
-			var row = this.getRow(direction)
+			var row = this.getRow(direction, images)
 			if(row == null){
 				return undefined }
 			var cur = this.current 
@@ -406,7 +420,7 @@ var Gallery = {
 					target = img } } 
 		// left/right...
 		} else {
-			var row = this.getRow(img)
+			var row = this.getRow(img, images)
 			var i = row.indexOf(
 				img 
 					?? this.current 
@@ -423,8 +437,8 @@ var Gallery = {
 		return target },
 
 	// XXX cache image list???
-	prev: function(){
+	prev: function(images){
-		var images = this.images
+		images ??= this.images
 		var i = this.current == null ? 
 			images.length-1
 			: images.indexOf(this.current)-1
@@ -435,8 +449,8 @@ var Gallery = {
 			: 0
 		this.current = images[i]
 		return this },
-	next: function(){
+	next: function(images){
-		var images = this.images 
+		images ??= this.images
 		var i = this.current == null ? 
 			0
 			: images.indexOf(this.current)+1
@@ -449,29 +463,30 @@ var Gallery = {
 		return this },
 
 	// navigate images visually...
-	left: function(){
+	// XXX these seem not to work with passed list of images...
+	left: function(images){
 		var cur = this.current
-		var row = this.getRow(cur)
+		var row = this.getRow(cur, images)
 		var i = row.indexOf(cur) - 1
 		this.current = row[i < 0 ?
 			row.length-1
 			: i]
 		return this },
-	right: function(){
+	right: function(images){
 		var cur = this.current
-		var row = this.getRow(cur)
+		var row = this.getRow(cur, images)
 		var i = row.indexOf(cur) + 1
 		this.current = row[i >= row.length ?
 			0
 			: i]
 		return this },
-	up: function(){
+	up: function(images){
-		var img = this.getImage('above')
+		var img = this.getImage('above', images)
 		img 
 			&& (this.current = img)
 		return this },
-	down: function(){
+	down: function(images){
-		var img = this.getImage('below')
+		var img = this.getImage('below', images)
 		img 
 			&& (this.current = img)
 		return this },
@@ -679,6 +694,7 @@ var Gallery = {
 			.observe(this.dom)
 		
 		return this
+			.updateMarkers()
    			.update() },
 }