80 lines
2.3 KiB
JavaScript
80 lines
2.3 KiB
JavaScript
import { Controller } from "@hotwired/stimulus"
|
|
import { GisState } from '../state.js';
|
|
|
|
export default class extends Controller {
|
|
static targets = ['list', 'menu', 'icon'];
|
|
|
|
buildMenu() {
|
|
let ulAnacapri = document.createElement('ul');
|
|
ulAnacapri.id = 'siti-anacapri-sub';
|
|
ulAnacapri.className = 'is-hidden';
|
|
|
|
console.log(GisState.markers.sites);
|
|
|
|
for (let key in GisState.markers.sites) {
|
|
if (GisState.markers.sites[key].options.municipality === 'Anacapri') {
|
|
const li = document.createElement('li');
|
|
li.innerHTML = `
|
|
<a class="is-block button"
|
|
data-action="marker#go"
|
|
data-controller="marker"
|
|
data-marker-coords-value="${key}"
|
|
data-marker-group-value="sites">
|
|
${GisState.markers.sites[key].options.label}
|
|
</a>
|
|
`;
|
|
|
|
ulAnacapri.appendChild(li);
|
|
}
|
|
}
|
|
|
|
console.log(ulAnacapri);
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|