151 lines
4.5 KiB
JavaScript
151 lines
4.5 KiB
JavaScript
import { Controller } from "@hotwired/stimulus"
|
|
import { GisState } from '../state.js';
|
|
|
|
export default class extends Controller {
|
|
static targets = [
|
|
'list',
|
|
'menu',
|
|
'cartography',
|
|
'icon'
|
|
];
|
|
|
|
static values = {
|
|
'cartography' : String,
|
|
'main' : String,
|
|
};
|
|
|
|
buildMenu() {
|
|
const groups = Object.keys(GisState.markers);
|
|
const municipalities = ['Anacapri', 'Capri'];
|
|
|
|
// TODO refactor with Stimulus values?
|
|
for (let group of groups) {
|
|
for (let municipality of municipalities) {
|
|
let ul = this.renderMenuItems(group, municipality);
|
|
document.querySelector(`[data-list-id="${group}-${municipality.toLowerCase()}-sub"]`)
|
|
?.appendChild(ul);
|
|
}
|
|
}
|
|
}
|
|
/**
|
|
*
|
|
* @param {String} group
|
|
* @param {String} municipality
|
|
*/
|
|
renderMenuItems(group, municipality) {
|
|
const ul = document.createElement('ul');
|
|
ul.className = 'is-hidden';
|
|
ul.id = `${group}-${municipality.toLowerCase()}-sub`;
|
|
|
|
const template = document.getElementById('menu-item-template');
|
|
|
|
for (let key in GisState.markers[group]) {
|
|
const marker = GisState.markers[group][key];
|
|
if (marker.options.municipality === municipality) {
|
|
const clone = template.content.cloneNode(true);
|
|
const link = clone.querySelector('a');
|
|
|
|
link.dataset.markerCoordsValue = key;
|
|
link.dataset.markerGroupValue = group;
|
|
link.textContent = marker.options.label;
|
|
|
|
ul.appendChild(clone);
|
|
}
|
|
}
|
|
|
|
return ul;
|
|
}
|
|
|
|
buildCartographyMenu() {
|
|
const historicCadastre = GisState.cartography.historic;
|
|
const template = document.getElementById('cartography-item-template');
|
|
const ul = document.createElement('ul');
|
|
ul.className = 'menu-list';
|
|
ul.id = 'historic-sub';
|
|
|
|
const aside = document.querySelector('[data-id="cartography-aside"]');
|
|
|
|
for (let geoImage of historicCadastre) {
|
|
const clone = template.content.cloneNode(true);
|
|
const label = clone.querySelector('label');
|
|
const checkbox = clone.querySelector('input[type="checkbox"]');
|
|
|
|
checkbox.dataset.layerIdValue = geoImage.id;
|
|
checkbox.dataset.layerTypeValue = 'historic';
|
|
const span = document.createElement('span');
|
|
span.className = 'pl-3';
|
|
span.textContent = geoImage.label;
|
|
label.appendChild(span);
|
|
|
|
ul.appendChild(clone);
|
|
}
|
|
|
|
aside.appendChild(ul);
|
|
}
|
|
|
|
toggleMenu(event) {
|
|
const menuId = event.target.dataset.id;
|
|
|
|
// Stupid...
|
|
if (menuId === 'main') {
|
|
this.menuTarget.classList.toggle('is-hidden');
|
|
if (!this.cartographyTarget.classList.contains('is-hidden')) {
|
|
this.cartographyTarget.classList.add('is-hidden');
|
|
}
|
|
}
|
|
|
|
if (menuId === 'cartography') {
|
|
this.cartographyTarget.classList.toggle('is-hidden');
|
|
if (!this.menuTarget.classList.contains('is-hidden')) {
|
|
this.menuTarget.classList.add('is-hidden');
|
|
}
|
|
}
|
|
}
|
|
|
|
close() {
|
|
this.menuTarget.classList.add('is-hidden');
|
|
}
|
|
|
|
closeCartography() {
|
|
this.cartographyTarget.classList.add('is-hidden');
|
|
}
|
|
|
|
toggleList(id) {
|
|
document.querySelector(`#${id}`).classList.toggle('is-hidden');
|
|
}
|
|
|
|
openSubList(event) {
|
|
const target = event.currentTarget;
|
|
const targetIcon = target.querySelector('.fa');
|
|
const id = target.getAttribute('data-list-id');
|
|
this.toggleList(id);
|
|
this.toggleIcon(targetIcon);
|
|
}
|
|
|
|
toggle(event) {
|
|
const target = event.currentTarget;
|
|
const targetIcon = target.querySelector('.fa');
|
|
const id = target.getAttribute('data-id');
|
|
const listId = `${id}-list`;
|
|
const list = this.listTargets.find(t => t.id === listId);
|
|
|
|
if (list) {
|
|
list.classList.toggle('is-hidden');
|
|
}
|
|
|
|
this.toggleIcon(targetIcon);
|
|
}
|
|
|
|
toggleIcon(icon) {
|
|
if (icon.classList.contains('fa-chevron-right')) {
|
|
icon.classList.remove('fa-chevron-right');
|
|
icon.classList.add('fa-chevron-down');
|
|
} else {
|
|
icon.classList.add('fa-chevron-right');
|
|
icon.classList.remove('fa-chevron-down');
|
|
}
|
|
|
|
return icon;
|
|
}
|
|
}
|