nicolo/caprigis
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

Add image gallery (Spotlight)

Browse Source
This commit is contained in:
Nicolò P 2024-06-17 11:43:42 +02:00
parent c48eeca754
commit 580b9133a8
4 changed files with 56 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

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

3
js/package.json
View File

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

72
js/ui.js
View File

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

5
js/yarn.lock
View File

@ -16,3 +16,8 @@ leaflet@^1.9.4:
version "1.9.4" version "1.9.4"
resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.9.4.tgz#23fae724e282fa25745aff82ca4d394748db7d8d" resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.9.4.tgz#23fae724e282fa25745aff82ca4d394748db7d8d"
integrity sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA== 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==