From abd1e6774d3b944e4cce6d26f9982c2f3e2c3e8b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=B2=20P?= Date: Mon, 7 Oct 2024 17:18:35 +0200 Subject: [PATCH] Crude tabs... --- index.html | 45 ++++++++++++++++++++++++---------- js/components/SiteDocuments.js | 16 +++++------- js/components/SiteSheet.js | 5 ---- js/gis.js | 34 ++++++++++++++++--------- js/index.js | 4 --- js/ui.js | 36 +++++++++++++++++++++------ 6 files changed, 89 insertions(+), 51 deletions(-) diff --git a/index.html b/index.html index 1dcf6ef..4fdf63a 100644 --- a/index.html +++ b/index.html @@ -56,22 +56,10 @@
  • Villa di Gradola - - - -
    - -
    Villa di Damecuta + Grotta di Matermania @@ -99,6 +87,37 @@ diff --git a/js/components/SiteDocuments.js b/js/components/SiteDocuments.js index b3ea47d..4e119f3 100644 --- a/js/components/SiteDocuments.js +++ b/js/components/SiteDocuments.js @@ -11,10 +11,8 @@ export class SiteDocuments { } render() { - let content = `
    - - Documentazione di archivio - + let content = `
    +

    Documentazione di archivio

      `; @@ -23,11 +21,9 @@ export class SiteDocuments {
    1. ${doc.titolo}
      2. `; } - content += '
    '; - content += `
    - - Pubblicazioni del progetto Carta Archeologica - + content += '
    '; + content += `
    +

    Pubblicazioni del progetto Carta Archeologica

      `; @@ -36,7 +32,7 @@ export class SiteDocuments {
    1. ${doc.titolo}
      2. `; } - content += '
    '; + content += ''; return content; } diff --git a/js/components/SiteSheet.js b/js/components/SiteSheet.js index 7275591..3eaade5 100644 --- a/js/components/SiteSheet.js +++ b/js/components/SiteSheet.js @@ -12,10 +12,6 @@ export class SiteSheet { render() { return `
    -
    - - Scheda del sito - @@ -37,7 +33,6 @@ export class SiteSheet {
    Denominazione${this._siteData.denominazione}
    Località${this._siteData.localita}
    Leggi tutto${this._siteData.descrizione}
    -
    `; } } \ No newline at end of file diff --git a/js/gis.js b/js/gis.js index df21eac..7e5c736 100644 --- a/js/gis.js +++ b/js/gis.js @@ -281,18 +281,7 @@ GIS.loadLayer = async function (geoJSON, options, popup = true) { } else { layer.on("click", async () => { - const fromStorage = localStorage.getItem(layerId); - let data = {}; - - if (fromStorage !== 'undefined') { - try { - data = JSON.parse(fromStorage); - } catch (error) { - console.log(error); - } - } else { - await GIS._fetchData(layerId); - } + let data = GIS.layerData(layerId); if (typeof data === 'object') { UI.openModal(data); @@ -304,6 +293,27 @@ GIS.loadLayer = async function (geoJSON, options, popup = true) { return layer; } +/** + * Retrieves data for a given layer + * @param {string} layerId + * @returns {object} Data for this layer from DB or cache + */ +GIS.layerData = async function (layerId) { + const fromStorage = localStorage.getItem(layerId); + let data = {}; + + if (fromStorage !== 'undefined') { + try { + data = JSON.parse(fromStorage); + } catch (error) { + console.log(error); + } + } else { + data = await GIS._fetchData(layerId); + } + + return data; +} /** * Cache data from DB in local storage * for a given layer diff --git a/js/index.js b/js/index.js index c4e9dce..94b1122 100644 --- a/js/index.js +++ b/js/index.js @@ -11,8 +11,4 @@ document.addEventListener('DOMContentLoaded', async () => { UI.sitesMenu('.menu-list', map, sites); UI.projectInfo('#project-info'); - // TEMP - document.querySelector('.dropdown-trigger').addEventListener('click', function() { - document.querySelector('.dropdown').classList.toggle('is-active'); - }); }); diff --git a/js/ui.js b/js/ui.js index 4e8b42a..6584392 100644 --- a/js/ui.js +++ b/js/ui.js @@ -73,35 +73,57 @@ UI.toggleMenu = function (triggerId) { } /** * Open a modal with DB data - * @todo Refactor! Web components?? + * @todo Refactor!!! Web components?? * @param {object} data The data retrieved from the DB to display as modal content * @param {string} selector The modal selector */ UI.openModal = async function (data, selector) { const modal = document.querySelector(selector); + const tabs = modal.querySelector('.tabs > ul'); let siteSheet = new SiteSheet(); siteSheet.siteData = data; - modal.querySelector('.modal-content').innerHTML = siteSheet.render(); + modal.querySelector('#site-sheet').innerHTML = siteSheet.render(); - let content = ``; if (data.documents.length) { let siteDocs = new SiteDocuments; siteDocs.siteData = data; - modal.querySelector('.modal-content').innerHTML += siteDocs.render(); + modal.querySelector('#documents').innerHTML = siteDocs.render(); } if (data.surveys.length) { let siteSurveys = new SiteSurveys; siteSurveys.siteData = data.surveys[0]; - modal.querySelector('.modal-content').innerHTML += siteSurveys.render(); + modal.querySelector('#photos').innerHTML += siteSurveys.render(); } if (data.photos.length) { let sitePhotos = new SitePhotos; sitePhotos.siteData = data.photos[0]; - modal.querySelector('.modal-content').innerHTML += sitePhotos.render(); + modal.querySelector('#photos').innerHTML += sitePhotos.render(); } - modal.querySelector('.modal-content').innerHTML += content; + let dataTabs = modal.querySelectorAll('.data-tabs'); + // TODO Awful!!! + tabs.childNodes.forEach(node => { + if (node.nodeName === 'LI') { + node.addEventListener('click', () => { + node.classList.add('is-active'); + + for (let el of tabs.childNodes) { + if (el.nodeName === 'LI' && el !== node) { + el.classList.remove('is-active'); + } + } + + for (let tab of dataTabs) { + tab.classList.add('is-hidden'); + if (tab.id == node.id.replace('for-','')) { + tab.classList.remove('is-hidden'); + } + } + }); + } + }); + modal.classList.add('is-active'); const closeBtn = modal.querySelector('.modal-close'); const modalBg = modal.querySelector('.modal-background');