diff --git a/css/grid-n-view.css b/css/grid-n-view.css index 2c31480..e707d9f 100644 --- a/css/grid-n-view.css +++ b/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); diff --git a/grid-n-view.html b/grid-n-view.html index 962d203..f592c76 100644 --- a/grid-n-view.html +++ b/grid-n-view.html @@ -87,8 +87,8 @@ For more info see: README.md
- - + +
diff --git a/grid-n-view.js b/grid-n-view.js index 62b3d4b..3526024 100644 --- a/grid-n-view.js +++ b/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 {