added .remove(..) + tweaking fullscreen mode...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2023-07-28 21:23:00 +03:00
parent 0ff97ccb6f
commit cafb50054c
2 changed files with 29 additions and 10 deletions

View File

@ -43,9 +43,11 @@
- "make view from selection" - "make view from selection"
- close view - close view
- multiple view stack - multiple view stack
- Gallery: drop images - Gallery: drag-n-drop
- Gallery: drag to sort - drop files/images
- Gallery: remove image - drag to sort
- <s>Gallery: remove image</s>
- mark images for deletion + delete marked
- <s>Gallery: serialize / deserialize</s> - <s>Gallery: serialize / deserialize</s>
- <s>Lightbox: navigation (keyboard / mouse)</s> - <s>Lightbox: navigation (keyboard / mouse)</s>
- <s>Lightbox: fullscreen mode</s> - <s>Lightbox: fullscreen mode</s>

View File

@ -523,6 +523,7 @@ var Gallery = {
var {url, ...data} = data } var {url, ...data} = data }
var elem = document.createElement('img') var elem = document.createElement('img')
elem.src = url elem.src = url
elem.setAttribute('draggable', 'true')
for(var [key, value] of Object.entries(data)){ for(var [key, value] of Object.entries(data)){
value value
&& elem.setAttribute(key, value) } && elem.setAttribute(key, value) }
@ -556,11 +557,23 @@ var Gallery = {
&& (res[key] = value) } && (res[key] = value) }
return res }) }, return res }) },
// XXX remove: function(...images){
remove: function(){ if(images.includes('all')){
// XXX return this.clear() }
// NOTE: we need to remove images from the end so as not to be
// affected by shifed indexes...
images
.sort()
.reverse()
for(var img of images){
typeof(img) == 'number' ?
this.images.at(img)?.remove()
: img instanceof Element ?
(this.images.contains(img)
&& img.remove())
: null }
return this return this
}, .update() },
clear: function(){ clear: function(){
this.dom.querySelector('.images').innerHTML = '' this.dom.querySelector('.images').innerHTML = ''
return this }, return this },
@ -603,6 +616,10 @@ var Gallery = {
// XXX // XXX
}) })
// XXX
for(var img of this.images){
img.setAttribute('draggable', 'true') }
// handle resizing... // handle resizing...
new ResizeObserver( new ResizeObserver(
function(elems){ function(elems){
@ -650,6 +667,9 @@ var Lightbox = {
this.gallery.dom.classList.add('lightboxed') this.gallery.dom.classList.add('lightboxed')
return this }, return this },
hide: function(){ hide: function(){
this.gallery.exit_fullscreen_on_lightbox_close
&& document.fullscreenElement
&& document.exitFullscreen()
this.gallery.dom.classList.remove('lightboxed') this.gallery.dom.classList.remove('lightboxed')
return this }, return this },
toggle: function(){ toggle: function(){
@ -715,9 +735,6 @@ var Lightbox = {
this.dom.querySelector('.close') this.dom.querySelector('.close')
.addEventListener('click', function(evt){ .addEventListener('click', function(evt){
evt.stopPropagation() evt.stopPropagation()
that.gallery.exit_fullscreen_on_lightbox_close
&& document.fullscreenElement
&& document.exitFullscreen()
that.hide() }) that.hide() })
this.dom.querySelector('.fullscreen') this.dom.querySelector('.fullscreen')
.addEventListener('click', function(evt){ .addEventListener('click', function(evt){