olyakonstantin/gallery
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: olyakonstantin:90727814dabde83ce4cefbb19b6fee59128ff646
Branches Tags
olyakonstantin:master
olyakonstantin:grid-n-view
..
compare: olyakonstantin:ffe88f99e86790d529b107eeef8100b40543fa84
Branches Tags
olyakonstantin:grid-n-view
olyakonstantin:master

No commits in common. "90727814dabde83ce4cefbb19b6fee59128ff646" and "ffe88f99e86790d529b107eeef8100b40543fa84" have entirely different histories.
90727814da ... ffe88f99e8

3 changed files with 10 additions and 44 deletions
Show Stats Expand all files Collapse all files

3
css/grid-n-view.css
View File

@ -233,10 +233,9 @@ 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) + 2);
z-index: calc(var(--base-layer) + 1);
border: solid 1px var(--gallery-secondary-color);
background: var(--gallery-background-color);

4
grid-n-view.html
View File

@ -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>

47
grid-n-view.js
View File

@ -1078,18 +1078,9 @@ 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 },
@ -1139,34 +1130,24 @@ 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){
@ -1198,7 +1179,7 @@ var Lightbox = {
caption_format: '${INDEX} ${CAPTION}',
navigation_deadzone: 0.3,
navigation_deadzone: 100,
caption_hysteresis: 10,
cache_count: 1,
@ -1231,39 +1212,25 @@ var Lightbox = {
Overlay.setup.call(this, ...arguments)
// click zones...
var dblclick_canceled = false
var deadzone = this.navigation_deadzone ?? 0.3
var deadzone = this.navigation_deadzone ?? 100
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...
dblclick_canceled = false
evt.clientX < that.dom.offsetWidth / 2 - d/2
evt.clientX < that.dom.offsetWidth / 2 - deadzone/2
&& that.gallery.prev()
&& (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() })
evt.clientX > that.dom.offsetWidth / 2 + deadzone/2
&& that.gallery.next() })
// 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 - d/2){
if(evt.clientX < that.dom.offsetWidth / 2 - deadzone/2){
that.dom.classList.contains('clickable')
|| that.dom.classList.add('clickable')
} else if( evt.clientX > that.dom.offsetWidth / 2 + d/2){
} else if( evt.clientX > that.dom.offsetWidth / 2 + deadzone/2){
that.dom.classList.contains('clickable')
|| that.dom.classList.add('clickable')
} else {