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

Tabs to Stimulus

Browse Source
This commit is contained in:
Nicolò P
2024-11-28 14:24:22 +01:00
parent 2129fab101
commit d71420634b
4 changed files with 128 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
webgis/js/controllers/tabs_controller.js Normal file
View File

@@ -0,0 +1,34 @@
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ['active', 'tab', 'content'];
activate(event) {
this.deactivate();
const activeId = event.currentTarget.id;
event.currentTarget.classList.add('is-active');
this.contentTargets.find(c => c.id === activeId.replace('for-', ''))
.classList.remove('is-hidden');
}
reset() {
this.deactivate();
const activeId = this.activeTarget.id;
this.activeTarget.classList.add('is-active');
this.contentTargets.find(c => c.id === activeId.replace('for-', ''))
.classList.remove('is-hidden');
}
deactivate() {
this.tabTargets.forEach(tab => {
tab.classList.remove('is-active');
});
this.contentTargets.forEach(content => {
content.classList.add('is-hidden');
});
}
}

2
webgis/js/index.js
View File

@@ -5,6 +5,7 @@ import MenuController from './controllers/menu_controller.js';
import ModalController from './controllers/modal_controller.js';
import MarkerController from './controllers/marker_controller.js';
import BiblioController from './controllers/biblio_controller.js';
import TabsController from './controllers/tabs_controller.js';
document.addEventListener('DOMContentLoaded', async () => {
// Register Stimulus controllers
@@ -31,4 +32,5 @@ function initStimulus() {
Stimulus.register("modal", ModalController);
Stimulus.register("marker", MarkerController);
Stimulus.register("biblio", BiblioController);
Stimulus.register("tabs", TabsController);
}

84
webgis/js/ui.js
View File

@@ -93,21 +93,21 @@ UI.toggleMenu = function (triggerId, listId = null) {
}
/**
* Open a modal with DB site data
* @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.openSiteModal = async function (data, selector) {
const modal = document.querySelector(selector);
const tabs = modal.querySelector('.tabs > ul');
let dataTabs = modal.querySelectorAll('.data-tabs');
// Reset data tabs content
for (let tab of dataTabs) {
tab.innerHTML = '';
}
let siteSheet = new SiteSheet();
siteSheet.siteData = data;
window.Biblio = siteSheet;
modal.querySelector('#short-sheet').innerHTML = siteSheet.renderShort();
@@ -136,29 +136,6 @@ UI.openSiteModal = async function (data, selector) {
images.innerHTML += photos[0] ? sitePhotos.render() : '';
}
// 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');
this.imageGallery('gallery-1', surveys);
@@ -175,6 +152,7 @@ UI.openNotConserModal = async function (data, selector) {
sheet.siteData = data;
// For Stimulus biblio_controller
window.Biblio = sheet;
modal.querySelector('#not-conser-sheet').innerHTML = await sheet.render();
modal.classList.add('is-active');
}
@@ -184,7 +162,6 @@ 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');
// Reset data tabs content
@@ -194,37 +171,50 @@ UI.openFindingModal = async function (data, selector) {
let finding = new Finding();
finding.data = data;
finding.setImages();
modal.querySelector('#finding-sheet').innerHTML = await finding.render();
// For Stimulus biblio_controller
window.Biblio = finding;
finding.setImages();
modal.querySelector('#finding-sheet').innerHTML = await finding.render();
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');
modal.classList.add('is-active');
}
/**
* @param {string} menuListSel Menu list selector
* @param {L.Map} map
* @param {L.LayerGroup} sites
*/
UI.sitesMenu = function (menuListSel, map, sites) {
// Close menu if arrow button is clicked...
let markers = [];
for (let el of tabs.childNodes) {
if (el.nodeName === 'LI' && el !== node) {
el.classList.remove('is-active');
}
}
map.eachLayer(layer => {
if (layer instanceof L.Marker) {
markers.push(layer);
}
})
for (let tab of dataTabs) {
tab.classList.add('is-hidden');
if (tab.id == node.id.replace('for-','')) {
tab.classList.remove('is-hidden');
}
}
});
const menu = document.querySelector(menuListSel);
menu.addEventListener('click', async event => {
if (event.target.nodeName === 'A') {
const layerId = event.target.id;
const marker = markers.filter(m => m.id === layerId)[0];
// zoom to layer...
const layer = sites.customGetLayer(layerId);
map.setView(
layer.getBounds().getCenter(),
19,
{animate: true, duration: 1, easeLinearity: 0.25}
);
marker.openTooltip();
}
});
modal.classList.add('is-active');
}
/**
* Open Spotlight gallery