Add image gallery (Spotlight)

index.html

@@ -5,6 +5,7 @@
     <link rel="stylesheet" href="js/vendor/leaflet/dist/leaflet.css" />
     <script src="js/vendor/leaflet/dist/leaflet.js"></script>
     <link rel="stylesheet" href="css/app.css" />
+    <link rel="stylesheet" href="js/vendor/spotlight.js/dist/css/spotlight.min.css" />
     <script src="js/index.js" type="module"></script>
     <title>Carta Archeologica di Capri</title>
 </head>

js/package.json

@@ -7,7 +7,8 @@
   "dependencies": {
     "bulma": "^1.0.1",
     "fontawesome-free": "^1.0.4",
-    "leaflet": "^1.9.4"
+    "leaflet": "^1.9.4",
+    "spotlight.js": "^0.7.8"
   },
   "devDependencies": {}
 }

js/ui.js

@@ -1,5 +1,7 @@
 'use strict';
 
+import Spotlight from './vendor/spotlight.js/src/js/spotlight.js';
+
 /**
  * @namespace UI
  */
@@ -67,6 +69,7 @@ UI.toggleMenu = function (triggerId) {
 }
 /**
  * Open a modal with DB data
+ * @todo Refactor! Web components??
  * @param {object} data The data retrieved from the DB to display as modal content
  */
 UI.openModal = async function (data) {
@@ -105,33 +108,32 @@ UI.openModal = async function (data) {
 	}
 	if (data.surveys.length) {
 		table += `<tr><th class="has-text-centered" colspan="2">Elaborazioni CNR da rilievi</th></tr>`;
-		for (const img of data.surveys) {
-			table += `
-				<tr>
-				<td colspan="2" style="max-width: 70%">
-					<figure class="image">
-						<img src="/img/${img.filename}" />
-						<figcaption class="p-2 has-text-centered">${img.didascalia}</figcaption>
-					</figure>
-				</td>
-				</tr>
-			`;
-		}
+		table += `
+			<tr>
+			<td colspan="2" style="max-width: 70%">
+				<p class="is-size-6 has-text-centered p-2">Cliccare sull'immagine per aprire la gallery</p>
+				<figure class="image is-clickable" id="gallery-1">
+					<img src="/img/${data.surveys[0].filename}" />
+					<figcaption class="p-2 has-text-centered">${data.surveys[0].didascalia}</figcaption>
+				</figure>
+			</td>
+			</tr>
+		`;
 	}
 	if (data.photos.length) {
 		table += `<tr><th class="has-text-centered" colspan="2">Fotografie</th></tr>`;
-		for (const img of data.photos) {
-			table += `
-				<tr>
-				<td colspan="2" style="max-width: 70%">
-					<figure class="image">
-						<img src="/img/${img.filename}" />
-						<figcaption class="p-2 has-text-centered">${img.didascalia}</figcaption>
-					</figure>
-				</td>
-				</tr>
-			`;
-		}
+		table += `
+			<tr>
+			<td colspan="2" style="max-width: 70%">
+				<p class="is-size-6 has-text-centered p-2">Cliccare sull'immagine per aprire la gallery</p>
+				<figure class="image is-clickable" id="gallery-2">
+					<img src="/img/${data.photos[0].filename}" />
+					<figcaption class="p-2 has-text-centered">${data.photos[0].didascalia}</figcaption>
+				</figure>
+			</td>
+			</tr>
+		`;
+		// Open gallery when image is clicked
 	}
 	table += '</table>';
 
@@ -147,6 +149,9 @@ UI.openModal = async function (data) {
 	modalBg.addEventListener('click', () => {
 		closeModal();
 	});
+
+	this.imageGallery('gallery-1', data.surveys);
+	this.imageGallery('gallery-2', data.photos);
 }
 /**
  * @param {string} menuListSel Menu list selector
@@ -170,5 +175,24 @@ UI.sitesMenu = function (menuListSel, map, sites) {
 		}
 	});
 }
+/**
+ * Open Spotlight gallery
+ * @param {string} galleryId The id of the trigger element
+ * @param {Array<Object>} images Array of image objects from DB 
+ */
+UI.imageGallery = function (galleryId, images) {
+	const element = document.querySelector(`#${galleryId}`);
+
+	if (element) {
+		let gallery = [];
+		for (let img of images) {
+			gallery.push({src: `/img/${img.filename}`, description: img.didascalia});
+		}
+
+		document.querySelector(`#${galleryId}`).addEventListener('click', () => {
+			Spotlight.show(gallery);
+		});
+	}
+}
 
 export default UI;

js/yarn.lock

@@ -16,3 +16,8 @@ leaflet@^1.9.4:
   version "1.9.4"
   resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.9.4.tgz#23fae724e282fa25745aff82ca4d394748db7d8d"
   integrity sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==
+
+spotlight.js@^0.7.8:
+  version "0.7.8"
+  resolved "https://registry.yarnpkg.com/spotlight.js/-/spotlight.js-0.7.8.tgz#0620371701508222d736e0658e8db3fbe9ddc53b"
+  integrity sha512-zq822gqhjaMHt31oZi4do211NwqBcxZ4u7Xtb+OEsbLrz37dcELhBCoQXFu/0sTiomqD6tm5g6tmqvE7S6h4ng==