97 lines
2.8 KiB
JavaScript
97 lines
2.8 KiB
JavaScript
import { Controller } from "@hotwired/stimulus"
|
|
import { GisState } from '../state.js';
|
|
|
|
export default class extends Controller {
|
|
static targets = ['list', 'menu', 'icon'];
|
|
|
|
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');
|
|
const labelSpan = clone.querySelector('.label');
|
|
|
|
link.dataset.markerCoordsValue = key;
|
|
link.dataset.markerGroupValue = group;
|
|
labelSpan.textContent = marker.options.label;
|
|
|
|
ul.appendChild(clone);
|
|
}
|
|
}
|
|
|
|
return ul;
|
|
}
|
|
|
|
toggleMenu() {
|
|
this.menuTarget.classList.toggle('is-hidden');
|
|
}
|
|
|
|
close() {
|
|
this.menuTarget.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;
|
|
}
|
|
}
|