Update findings + menu layout (WIP)
This commit is contained in:
parent
08711db11a
commit
e3fe2f1b94
BIN
webgis/img/Londra_British_Museum_base_candelabro.jpg
Normal file
BIN
webgis/img/Londra_British_Museum_base_candelabro.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
BIN
webgis/img/affresco_da_damecuta.png
Normal file
BIN
webgis/img/affresco_da_damecuta.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 436 KiB |
BIN
webgis/img/icons/rinv_menu.png
Normal file
BIN
webgis/img/icons/rinv_menu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
BIN
webgis/img/icons/siti_menu.png
Normal file
BIN
webgis/img/icons/siti_menu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
@ -63,49 +63,103 @@
|
||||
<div class="main columns">
|
||||
<div class="column is-hidden is-overlay has-background-white" id="menu">
|
||||
<aside class="menu ml-4">
|
||||
<p class="menu-label">
|
||||
Beni archeologici
|
||||
<button title="Chiudi menu" class="button is-small is-pulled-right" id="close-menu">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-chevron-left"></i>
|
||||
</span>
|
||||
</button>
|
||||
<p class="menu-label is-size-5">
|
||||
<span class="icon pr-2">
|
||||
<img class="image" src="img/icons/siti_menu.png"/>
|
||||
</span>
|
||||
Beni archeologici
|
||||
</p>
|
||||
<ul class="menu-list">
|
||||
<ul class="menu-list is-hidden" id="siti-list">
|
||||
<li>
|
||||
Anacapri
|
||||
<ul id="siti-anacapri-sub">
|
||||
<li>
|
||||
<a class="is-block button" title="Vai al sito Villa di Gradola" id="gradola">
|
||||
Villa di Gradola
|
||||
</a>
|
||||
<a class="is-block button" title="Vai al sito Villa di Gradola" id="grotta_azzurra">
|
||||
Grotta Azzurra
|
||||
</a>
|
||||
<a class="button" title="Vai al sito Villa di Damecuta" id="damecuta">
|
||||
Villa di Damecuta
|
||||
</a>
|
||||
<a class="button" title="Vai al sito Grotta di Matermania" id="matermania">
|
||||
Grotta di Matermania
|
||||
</a>
|
||||
<a class="button" id="arsenale">
|
||||
Grotta dell'Arsenale
|
||||
</a>
|
||||
<a class="button" id="tiberio">
|
||||
Bagni di Tiberio
|
||||
</a>
|
||||
<a class="button" id="mura">
|
||||
Mura greche
|
||||
</a>
|
||||
<a class="button" id="san_michele">
|
||||
Villa San Michele
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" id="lopozzo">
|
||||
Lo Pozzo (complesso idraulico)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" id="scala_fenicia">
|
||||
Scala Fenicia
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" title="Vai al sito Villa di Damecuta" id="damecuta">
|
||||
Villa di Damecuta
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="is-block button" title="Vai al sito Villa di Gradola" id="gradola">
|
||||
Villa di Gradola
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" id="san_michele">
|
||||
Villa San Michele
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="menu-label">
|
||||
</li>
|
||||
<li>
|
||||
Capri
|
||||
<ul id="siti-capri-sub">
|
||||
<li>
|
||||
<a class="button" id="tiberio">
|
||||
Bagni di Tiberio
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" id="arsenale">
|
||||
Grotta dell'Arsenale
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" title="Vai al sito Grotta di Matermania" id="matermania">
|
||||
Grotta di Matermania
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" id="mura">
|
||||
Mura greche
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="menu-label is-size-5">
|
||||
Beni non conservati
|
||||
</p>
|
||||
<ul class="menu-list" id="not-conserved"></ul>
|
||||
<ul class="menu-list is-hidden" id="not-conserved-list">
|
||||
|
||||
</ul>
|
||||
<p class="menu-label is-size-5">
|
||||
<span class="icon pr-2">
|
||||
<img class="image" src="img/icons/rinv_menu.png"/>
|
||||
</span>
|
||||
Rinvenimenti
|
||||
</p>
|
||||
<ul class="menu-list is-hidden" id="rinvenimenti-list">
|
||||
<li>
|
||||
<a class="button" id="affresco_dame">
|
||||
Affresco Villa di Damecuta
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" id="candelabro">
|
||||
Base di candelabro
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</aside>
|
||||
</div>
|
||||
<div class="column mb-0 pb-0 is-full is-relative">
|
||||
@ -173,7 +227,28 @@
|
||||
<div class="modal" id="finding-data">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-content has-background-white" style="min-height: 95vh;">
|
||||
<div id="finding-sheet"></div>
|
||||
<div class="tabs is-centered">
|
||||
<ul>
|
||||
<li class="is-active" id="for-finding-sheet">
|
||||
<a>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-info-circle" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Scheda</span>
|
||||
</a>
|
||||
</li>
|
||||
<li id="for-photos">
|
||||
<a>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-image" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Immagini</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="data-tabs" id="finding-sheet"></div>
|
||||
<div class="data-tabs is-hidden" id="photos"></div>
|
||||
</div>
|
||||
<button class="modal-close is-large" aria-label="close"></button>
|
||||
</div>
|
||||
|
||||
@ -2,11 +2,14 @@
|
||||
* @class Finding
|
||||
*/
|
||||
export class Finding {
|
||||
biblioElements = [];
|
||||
images = null;
|
||||
|
||||
set data(data) {
|
||||
this._data = data;
|
||||
}
|
||||
|
||||
render() {
|
||||
async render() {
|
||||
return `
|
||||
<div class="container px-4 pt-4">
|
||||
<p class="p-2">
|
||||
@ -36,6 +39,13 @@ export class Finding {
|
||||
<p class="p-2">
|
||||
<strong>Luogo di conservazione</strong> ${this._data.conservationPlace}
|
||||
</p>
|
||||
<p class="mt-4 pl-2 pr-5">
|
||||
<span class="icon has-text-link">
|
||||
<i class="fa fa-book"></i>
|
||||
</span>
|
||||
<strong>Bibliografia:</strong> ${await this.biblio(this._data.id)}
|
||||
</p>
|
||||
<div class="notification is-light mx-3 mt-4 mb-0 p-2 is-hidden" id="biblio"></div>
|
||||
<p class="mt-4 pl-2 pr-5">
|
||||
<strong class="pb-3">Descrizione</strong></br>
|
||||
${this._data.description}
|
||||
@ -45,4 +55,70 @@ export class Finding {
|
||||
</p>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
renderImages() {
|
||||
let content = `<div class="content has-text-centered">
|
||||
<p class="is-size-5 mt-3">Immagini</p>`;
|
||||
content += `
|
||||
<div style="max-width: 70%; margin: 0 auto">
|
||||
<p class="is-size-6 has-text-centered">Cliccare sull'immagine per aprire la gallery</p>
|
||||
<figure class="is-relative is-clickable has-text-centered" id="finding-gallery">
|
||||
<img src="img/${this.images[0].filename}" width="300"/>
|
||||
<div class="icon overlay is-flex is-justify-content-center is-align-items-center">
|
||||
<i class="is-flex fa fa-2x fa-play-circle"></i>
|
||||
</div>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
return content;
|
||||
}
|
||||
|
||||
async setImages() {
|
||||
let record = await this.fetchData(`${window.API_URL}/finding/${this._data.id}`)
|
||||
|
||||
if (record.images.length) {
|
||||
this.images = record.images;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* @param {number} recordId
|
||||
*/
|
||||
async biblio(recordId) {
|
||||
let record = await this.fetchData(`${window.API_URL}/finding/${recordId}`);
|
||||
|
||||
let citations = '';
|
||||
|
||||
if (record.bibliography.length) {
|
||||
record.bibliography.forEach(record => {
|
||||
citations += `
|
||||
<span class="is-clickable is-capitalized has-text-link"
|
||||
id="cit-${record.id}">
|
||||
${record.citation.toLowerCase()},
|
||||
</span> ${record.pages};
|
||||
`;
|
||||
|
||||
this.biblioElements.push(`
|
||||
<div class="p-2 mt-2" id="ref-${record.id}">
|
||||
<p>${record.reference}</p>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
return citations.trim().slice(0, -1);
|
||||
}
|
||||
|
||||
getReference(id) {
|
||||
return this.biblioElements.find(ref => {
|
||||
let regex = new RegExp('ref-'+id+'"');
|
||||
return ref.match(regex);
|
||||
});
|
||||
}
|
||||
|
||||
async fetchData(url) {
|
||||
return await fetch(url).then(res => res.json());
|
||||
}
|
||||
}
|
||||
|
||||
@ -42,8 +42,7 @@ export class NotConservedSheet {
|
||||
</span>
|
||||
<strong>Bibliografia:</strong> ${await this.biblio(this._data.id)}
|
||||
</p>
|
||||
<div class="notification is-light mx-3 mt-4 mb-0 p-2 is-hidden" id="biblio">
|
||||
</div>
|
||||
<div class="notification is-light mx-3 mt-4 mb-0 p-2 is-hidden" id="biblio"></div>
|
||||
<p class="p-2 mb-4">
|
||||
<strong>Autore scheda:</strong> ${this._data.author}
|
||||
</p>
|
||||
|
||||
@ -12,7 +12,12 @@ document.addEventListener('DOMContentLoaded', async () => {
|
||||
GIS.toggleSpherical(map);
|
||||
|
||||
UI.addCenterMapControl(map, GIS.CENTER_COORDS, GIS.INIT_ZOOM);
|
||||
UI.toggleMenu('siti');
|
||||
UI.toggleMenu('siti', 'siti-list');
|
||||
UI.toggleMenu('rinvenimenti', 'rinvenimenti-list');
|
||||
UI.toggleBurger('navbar-burger');
|
||||
UI.sitesMenu('.menu-list', map, sites);
|
||||
|
||||
document.querySelector('#close-menu').addEventListener('click', () => {
|
||||
document.querySelector('#menu').classList.add('is-hidden');
|
||||
})
|
||||
});
|
||||
|
||||
@ -67,16 +67,28 @@ UI.toggleBurger = function(burgerClass) {
|
||||
});
|
||||
}
|
||||
/**
|
||||
* Toggle side menu and rescale map container
|
||||
* Toggle side menu
|
||||
* @param {string} triggerId The ID of the trigger element
|
||||
* @param {?string} listId The ID of the menu list to open (if any)
|
||||
*/
|
||||
UI.toggleMenu = function (triggerId) {
|
||||
UI.toggleMenu = function (triggerId, listId = null) {
|
||||
const trigger = document.querySelector(`#${triggerId}`);
|
||||
trigger.addEventListener('click', () => {
|
||||
const menu = document.querySelector('#menu');
|
||||
menu.classList.toggle('is-hidden');
|
||||
menu.classList.toggle('is-3');
|
||||
//document.querySelector('#map').parentElement.classList.toggle('is-full');
|
||||
trigger.addEventListener('click', () => {
|
||||
menu.classList.remove('is-hidden');
|
||||
menu.classList.add('is-3');
|
||||
const lists = menu.querySelectorAll('ul');
|
||||
|
||||
if (listId !== null) {
|
||||
const list = document.querySelector(`#${listId}`);
|
||||
list.classList.remove('is-hidden');
|
||||
|
||||
for (let ul of lists) {
|
||||
if (ul.id !== listId && !ul.id.includes('sub')) {
|
||||
ul.classList.add('is-hidden');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
@ -201,10 +213,60 @@ UI.openNotConserModal = async function (data, selector) {
|
||||
*/
|
||||
UI.openFindingModal = async function (data, selector) {
|
||||
const modal = document.querySelector(selector);
|
||||
const tabs = modal.querySelector('.tabs > ul');
|
||||
let dataTabs = modal.querySelectorAll('.data-tabs');
|
||||
|
||||
let sheet = new Finding();
|
||||
sheet.data = data;
|
||||
modal.querySelector('#finding-sheet').innerHTML = await sheet.render();
|
||||
// Reset data tabs content
|
||||
for (let tab of dataTabs) {
|
||||
tab.innerHTML = '';
|
||||
}
|
||||
|
||||
let finding = new Finding();
|
||||
finding.data = data;
|
||||
finding.setImages();
|
||||
modal.querySelector('#finding-sheet').innerHTML = await finding.render();
|
||||
modal.addEventListener('click', event => {
|
||||
const biblio = document.querySelector('#biblio');
|
||||
if (event.target.id.includes('cit')) {
|
||||
|
||||
const id = event.target.id.replace('cit-','');
|
||||
|
||||
biblio.innerHTML = '<button class="delete"></button>';
|
||||
biblio.innerHTML += finding.getReference(id);
|
||||
biblio.classList.remove('is-hidden');
|
||||
biblio.scrollIntoView({behavior: 'smooth'});
|
||||
}
|
||||
|
||||
if (event.target.className == 'delete') {
|
||||
biblio.classList.add('is-hidden');
|
||||
}
|
||||
});
|
||||
if (finding.images) {
|
||||
modal.querySelector('#photos').innerHTML = finding.renderImages();
|
||||
this.imageGallery('finding-gallery', finding.images);
|
||||
}
|
||||
// Move to Stimulus?
|
||||
// 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');
|
||||
@ -220,7 +282,6 @@ UI.openFindingModal = async function (data, selector) {
|
||||
*/
|
||||
UI.sitesMenu = function (menuListSel, map, sites) {
|
||||
// Close menu if arrow button is clicked...
|
||||
this.toggleMenu('close-menu');
|
||||
let markers = [];
|
||||
|
||||
map.eachLayer(layer => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user