From cafb50054c45926cb0cf8349ccb2922e96025a90 Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Fri, 28 Jul 2023 21:23:00 +0300
Subject: [PATCH] added .remove(..) + tweaking fullscreen mode...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 grid-n-view.html |  8 +++++---
 grid-n-view.js   | 31 ++++++++++++++++++++++++-------
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/grid-n-view.html b/grid-n-view.html
index 45d33fc..bc740f8 100644
--- a/grid-n-view.html
+++ b/grid-n-view.html
@@ -43,9 +43,11 @@
 	- "make view from selection"
 	- close view
 	- multiple view stack
-- Gallery: drop images
-- Gallery: drag to sort
-- Gallery: remove image
+- Gallery: drag-n-drop
+	- drop files/images
+	- drag to sort
+- <s>Gallery: remove image</s>
+	- mark images for deletion + delete marked
 - <s>Gallery: serialize / deserialize</s>
 - <s>Lightbox: navigation (keyboard / mouse)</s>
 - <s>Lightbox: fullscreen mode</s>
diff --git a/grid-n-view.js b/grid-n-view.js
index cbe7187..039035f 100644
--- a/grid-n-view.js
+++ b/grid-n-view.js
@@ -523,6 +523,7 @@ var Gallery = {
 				var {url, ...data} = data }
 			var elem = document.createElement('img')
 			elem.src = url
+			elem.setAttribute('draggable', 'true')
 			for(var [key, value] of Object.entries(data)){
 				value
 					&& elem.setAttribute(key, value) }
@@ -556,11 +557,23 @@ var Gallery = {
 						&& (res[key] = value) }
 				return res }) },
 
-	// XXX
-	remove: function(){
-		// XXX
+	remove: function(...images){
+		if(images.includes('all')){
+			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
-	},
+			.update() },
 	clear: function(){
 		this.dom.querySelector('.images').innerHTML = ''
 		return this },
@@ -603,6 +616,10 @@ var Gallery = {
 				// XXX
 			})
 
+		// XXX
+		for(var img of this.images){
+			img.setAttribute('draggable', 'true') }
+
 		// handle resizing...
 		new ResizeObserver(
 			function(elems){
@@ -650,6 +667,9 @@ var Lightbox = {
 		this.gallery.dom.classList.add('lightboxed')
 		return this },
 	hide: function(){
+		this.gallery.exit_fullscreen_on_lightbox_close
+			&& document.fullscreenElement
+			&& document.exitFullscreen()
 		this.gallery.dom.classList.remove('lightboxed')
 		return this },
 	toggle: function(){
@@ -715,9 +735,6 @@ var Lightbox = {
 		this.dom.querySelector('.close')
 			.addEventListener('click', function(evt){
 				evt.stopPropagation()
-				that.gallery.exit_fullscreen_on_lightbox_close
-					&& document.fullscreenElement
-					&& document.exitFullscreen()
 				that.hide() })
 		this.dom.querySelector('.fullscreen')
 			.addEventListener('click', function(evt){