Merge branch 'grid-n-view' of ssh://flynx.chas.ch/olyakonstantin/gallery into grid-n-view

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

css/grid-n-view.css

@@ -233,9 +233,10 @@ body {
 	display: inline-block;
 	position: sticky;
 	top: 1em;
+	margin-left: calc(var(--gallery-padding-horizontal) * -1);
 	padding: var(--padding);
 
-	z-index: calc(var(--base-layer) + 1);
+	z-index: calc(var(--base-layer) + 2);
 
 	border: solid 1px var(--gallery-secondary-color);
 	background: var(--gallery-background-color);

grid-n-view.html

@@ -87,8 +87,8 @@ For more info see: <a href="./README.md">README.md</a>
 		</div>
 		<div>
 			<button onclick="gallery.toggleQueueRemoval()" title="queue removal (del)">&#9703;</button> 
-			<button onclick="gallery.queueRemoval('marked')" title="queue marked removal">&#9724;&#9210;</button> 
-			<button onclick="gallery.unqueueRemoval('marked')" title="unqueue marked removal">&#9723;&#9210;</button> 
+			<!--button onclick="gallery.queueRemoval('marked')" title="queue marked removal">&#9724;&#9210;</button--> 
+			<!--button onclick="gallery.unqueueRemoval('marked')" title="unqueue marked removal">&#9723;&#9210;</button--> 
 			<button onclick="gallery.toggleQueueRemoval('marked')" title="toggle marked removal">&#9703;&#9210;</button> 
 			<button onclick="gallery.removeQueued()" title="remove queued (shift-del)">&#9746;</button> 
 		</div>

grid-n-view.js

@@ -1078,9 +1078,18 @@ var Overlay = {
 			&& this.cache_count != 0
 			&& this.cache() },
 
+	__clicks_canceled: false,
+	__clicks_canceled_timeout: 500,
+
 	get shown(){
 		return this.gallery.dom.classList.contains(this.cls) },
 	show: function(){
+		var that = this
+		this.__clicks_canceled = true
+		setTimeout(
+			function(){
+				that.__clicks_canceled = false }, 
+			this.__clicks_canceled_timeout ?? 200)
 		this.update()
 		this.gallery.dom.classList.add(this.cls)
 		return this },
@@ -1130,24 +1139,34 @@ var Overlay = {
 		this.dom.querySelector('.close')
 			?.addEventListener('click', function(evt){
 				evt.stopPropagation()
+				if(that.__clicks_canceled){
+					return }
 				that.hide() })
 		this.dom.querySelector('.fullscreen')
 			?.addEventListener('click', function(evt){
 				evt.stopPropagation()
+				if(that.__clicks_canceled){
+					return }
 				document.fullscreenElement ?
 					document.exitFullscreen()
 					: that.dom.requestFullscreen() })
 		this.dom.querySelector('.info')
 			?.addEventListener('click', function(evt){
 				evt.stopPropagation()
+				if(that.__clicks_canceled){
+					return }
 				that.gallery.showDetails() })
 		this.dom.querySelector('.prev')
 			?.addEventListener('click', function(evt){
 				evt.stopPropagation()
+				if(that.__clicks_canceled){
+					return }
 				that.gallery.prev() })
 		this.dom.querySelector('.next')
 			?.addEventListener('click', function(evt){
 				evt.stopPropagation()
+				if(that.__clicks_canceled){
+					return }
 				that.gallery.next() })
 		// stop body from scrolling...
 		var stop = function(evt){
@@ -1179,7 +1198,7 @@ var Lightbox = {
 
 	caption_format: '${INDEX} ${CAPTION}',
 
-	navigation_deadzone: 100,
+	navigation_deadzone: 0.3,
 	caption_hysteresis: 10,
 	cache_count: 1,
 
@@ -1212,25 +1231,39 @@ var Lightbox = {
 		Overlay.setup.call(this, ...arguments)
 
 		// click zones...
-		var deadzone = this.navigation_deadzone ?? 100
+		var dblclick_canceled = false
+		var deadzone = this.navigation_deadzone ?? 0.3
 		this.dom
 			.addEventListener('click', function(evt){
 				evt.stopPropagation()
+				if(that.__clicks_canceled){
+					return }
+				var d = that.dom.offsetWidth * deadzone
 				// click left/right side of view...
 				// NOTE: this is vewport-relative...
-				evt.clientX < that.dom.offsetWidth / 2 - deadzone/2
+				dblclick_canceled = false
+				evt.clientX < that.dom.offsetWidth / 2 - d/2
 					&& that.gallery.prev()
-				evt.clientX > that.dom.offsetWidth / 2 + deadzone/2
-					&& that.gallery.next() })
+					&& (dblclick_canceled = true)
+				evt.clientX > that.dom.offsetWidth / 2 + d/2
+					&& that.gallery.next() 
+					&& (dblclick_canceled = true) })
+		this.dom
+			.addEventListener('dblclick', function(evt){
+				evt.stopPropagation()
+				dblclick_canceled
+					|| that.__clicks_canceled
+					|| that.hide() })
 		// hover zones...
 		var hysteresis = this.caption_hysteresis ?? 10
 		this.dom
 			.addEventListener('mousemove', function(evt){
+				var d = that.dom.offsetWidth * deadzone
 				// indicate action...
-				if(evt.clientX < that.dom.offsetWidth / 2 - deadzone/2){
+				if(evt.clientX < that.dom.offsetWidth / 2 - d/2){
 					that.dom.classList.contains('clickable')
 						|| that.dom.classList.add('clickable')
-				} else if( evt.clientX > that.dom.offsetWidth / 2 + deadzone/2){
+				} else if( evt.clientX > that.dom.offsetWidth / 2 + d/2){
 					that.dom.classList.contains('clickable')
 						|| that.dom.classList.add('clickable')
 				} else {