diff --git a/.gitignore b/.gitignore index bcedba7..7533593 100644 --- a/.gitignore +++ b/.gitignore @@ -7,6 +7,7 @@ *.zip *.pdf *.tif +*.mp4 vendor/ progetto_QGIS/ conf.json diff --git a/webgis/js/components/SiteMedia.js b/webgis/js/components/SiteMedia.js new file mode 100644 index 0000000..3cd0215 --- /dev/null +++ b/webgis/js/components/SiteMedia.js @@ -0,0 +1,46 @@ +/** + * Component to render data for site media (photos and videos) + * @class SiteMedia + */ +export class SiteMedia { + /** + * @param {object} data + */ + set siteData(data) { + this._siteData = data; + } + + renderPhotos() { + return ` +
+

Fotografie

+
+

Cliccare sull'immagine per aprire la gallery

+
+ +
+ +
+
+
+
+ `; + } + + renderVideos() { + return ` +
+

Video

+
+

Gallery video

+
+ +
+ +
+
+
+
+ `; + } +} diff --git a/webgis/js/components/SitePhotos.js b/webgis/js/components/SitePhotos.js deleted file mode 100644 index af2b028..0000000 --- a/webgis/js/components/SitePhotos.js +++ /dev/null @@ -1,31 +0,0 @@ -/** - * Component to render data for site photos - * @class SitePhotos - */ -export class SitePhotos { - /** - * @param {object} data - */ - set siteData(data) { - this._siteData = data; - } - - render() { - let content = `
-

Fotografie

`; - content += ` -
-

Cliccare sull'immagine per aprire la gallery

-
- -
- -
-
-
-
- `; - - return content; - } -} diff --git a/webgis/js/components/SiteSurveys.js b/webgis/js/components/SiteSurveys.js index 166a56f..41f56c9 100644 --- a/webgis/js/components/SiteSurveys.js +++ b/webgis/js/components/SiteSurveys.js @@ -11,21 +11,19 @@ export class SiteSurveys { } render() { - let content = `
-

Rilievi CNR-ISPC, elaborazioni grafiche

`; - content += ` -
-

Cliccare sull'immagine per aprire la gallery

-
- -
- -
-
+ return ` +
+

Rilievi CNR-ISPC, elaborazioni grafiche

+
+

Cliccare sull'immagine per aprire la gallery

+
+ +
+ +
+
+
-
`; - - return content; } } \ No newline at end of file diff --git a/webgis/js/gis.js b/webgis/js/gis.js index 6a03638..d471cd4 100644 --- a/webgis/js/gis.js +++ b/webgis/js/gis.js @@ -144,6 +144,8 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) { 'Vincoli archeologici' : layerVincoli, 'Vincoli paesistici' : layerPaesistici, }; + // TEMP!! Remove point for Lo Pozzo... + sitesGroup.removeLayer(sitesGroup.customGetLayer('lopozzo')); markersGroup.addTo(map); sitesGroup.addTo(map); @@ -152,9 +154,6 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) { L.control.layers(baseMap, archeo).addTo(map); - // TEMP!! Remove point for Lo Pozzo... - map.removeLayer(sitesGroup.customGetLayer('lopozzo')); - return map; } /** diff --git a/webgis/js/ui.js b/webgis/js/ui.js index a21e7b9..9b68c22 100644 --- a/webgis/js/ui.js +++ b/webgis/js/ui.js @@ -4,7 +4,7 @@ import Spotlight from './vendor/spotlight.js/src/js/spotlight.js'; import { SiteSheet } from './components/SiteSheet.js'; import { SiteDocuments } from './components/SiteDocuments.js'; import { SiteSurveys } from './components/SiteSurveys.js'; -import { SitePhotos } from './components/SitePhotos.js'; +import { SiteMedia } from './components/SiteMedia.js'; import { NotConservedSheet } from './components/NotConservedSheet.js'; import GIS from './gis.js'; import { Finding } from './components/Finding.js'; @@ -116,30 +116,42 @@ UI.openSiteModal = async function (data, selector) { } let images = modal.querySelector('#photos'); + let docs = modal.querySelector('#documents'); if (data.documents?.length) { let siteDocs = new SiteDocuments; siteDocs.siteData = data; - modal.querySelector('#documents').innerHTML = siteDocs.render(); + docs.innerHTML = siteDocs.render(); + } else { + docs.innerHTML = '

Nessun documento disponibile

' } let surveys = data.images.filter(i => i.type === 'Survey'); let photos = data.images.filter(i => i.type === 'Photo'); + let videos = data.images.filter(i => i.type === 'Video'); + + if (surveys.length === 0 && photos.length === 0 && videos.length === 0) { + images.innerHTML = '

Nessuna risorsa visuale disponibile

'; + } if (images.innerHTML.length === 0) { let siteSurveys = new SiteSurveys; siteSurveys.siteData = surveys[0] ?? undefined; images.innerHTML += surveys[0] ? siteSurveys.render() : ''; - let sitePhotos = new SitePhotos; - sitePhotos.siteData = photos[0] ?? undefined; - images.innerHTML += photos[0] ? sitePhotos.render() : ''; + let siteMedia = new SiteMedia; + siteMedia.siteData = photos[0] ?? undefined; + images.innerHTML += photos[0] ? siteMedia.renderPhotos() : ''; + + siteMedia.siteData = videos[0] ?? undefined; + images.innerHTML += videos[0] ? siteMedia.renderVideos() : ''; } modal.classList.add('is-active'); this.imageGallery('gallery-1', surveys); this.imageGallery('gallery-2', photos); + this.imageGallery('gallery-video', videos, true); } /** * @param {object} data The data retrieved from the DB to display as modal content @@ -220,17 +232,27 @@ UI.sitesMenu = function (menuListSel, map, sites) { * Open Spotlight gallery * @param {string} galleryId The id of the trigger element * @param {Array} images Array of image objects from DB + * @param {boolean} video Is this a video gallery? */ -UI.imageGallery = function (galleryId, images) { +UI.imageGallery = function (galleryId, images, video = false) { const element = document.querySelector(`#${galleryId}`); if (element) { let gallery = []; for (let img of images) { - gallery.push({ - src: `img/${img.filename}`, + let mediaObj = { description: `${img.caption} (${img.author})` - }); + }; + + if (video) { + mediaObj.media = 'video'; + mediaObj["src-mp4"] = `video/${img.filename}`; + mediaObj.poster = `video/${img.filename.replace('mp4', 'png')}`; + } else { + mediaObj.src = `img/${img.filename}`; + } + + gallery.push(mediaObj); } document.querySelector(`#${galleryId}`).addEventListener('click', () => { diff --git a/webgis/video/.keep b/webgis/video/.keep new file mode 100644 index 0000000..e69de29 diff --git a/webgis/video/Filmato_DAMECUTA_EMICICLO.png b/webgis/video/Filmato_DAMECUTA_EMICICLO.png new file mode 100644 index 0000000..7f989bc Binary files /dev/null and b/webgis/video/Filmato_DAMECUTA_EMICICLO.png differ