Spaces:
Running
Running
| // ==================== SETTINGS ==================== | |
| async function loadLocations() { | |
| const _apiBase = location.hostname === 'localhost' ? 'http://localhost:4000/api' : '/api'; | |
| const res = await fetch(`${_apiBase}/map-images`, { headers: { 'X-API-Key': sessionStorage.getItem('admin_api_key') || '' } }); | |
| const data = await res.json(); | |
| locationsData = data.images.map((src, i) => ({ src, name: `Map ${i + 1}` })); | |
| filteredLocations = locationsData; | |
| await loadCities(); | |
| displayLocations(locationsData); | |
| } | |
| function displayLocations(locations) { | |
| const galleryDiv = document.getElementById('gallery'); | |
| galleryDiv.innerHTML = ''; | |
| const settings = window._gallerySettings || {}; | |
| const noBorder = settings.isBorder === false; | |
| locations.forEach((location, index) => { | |
| const item = document.createElement('div'); | |
| item.className = 'gallery-item'; | |
| item.dataset.index = index; | |
| item.innerHTML = ` | |
| <div class="image-wrapper"> | |
| <img src="${location.src}" alt="${location.name}" style="${noBorder ? 'border:none;' : ''}"> | |
| </div> | |
| <div class="image-info">${location.name}</div> | |
| `; | |
| galleryDiv.appendChild(item); | |
| }); | |
| } | |
| function initSettings() { | |
| const btn = document.getElementById('settingsBtn'); | |
| const panel = document.getElementById('settingsPanel'); | |
| btn.addEventListener('click', (e) => { | |
| e.stopPropagation(); | |
| panel.classList.toggle('open'); | |
| }); | |
| document.addEventListener('click', (e) => { | |
| if (!panel.contains(e.target) && e.target !== btn) { | |
| panel.classList.remove('open'); | |
| } | |
| }); | |
| let _prevSize = parseInt(document.getElementById('sSize').value) || 400; | |
| window._gallerySettings = { | |
| items: parseInt(document.getElementById('sItems').value) || 23, | |
| size: _prevSize, | |
| isBorder: document.getElementById('sIsBorder').checked, | |
| opacity: parseInt(document.getElementById('sOpacity').value) ?? 100 | |
| }; | |
| document.getElementById('sOpacity').addEventListener('input', () => { | |
| const opacity = parseInt(document.getElementById('sOpacity').value) / 100; | |
| document.getElementById('gallery').style.opacity = opacity; | |
| if (window._gallerySettings) window._gallerySettings.opacity = parseInt(document.getElementById('sOpacity').value); | |
| }); | |
| document.getElementById('sSize').addEventListener('change', () => { | |
| const items = parseInt(document.getElementById('sItems').value) || 23; | |
| const newSize = parseInt(document.getElementById('sSize').value); | |
| if (!newSize || newSize < 1) return; | |
| document.querySelector('.gallery').style.gridTemplateColumns = `repeat(${items}, ${newSize}px)`; | |
| const oldSize = _prevSize || (window._gallerySettings && window._gallerySettings.size); | |
| rescalePointrs(oldSize, newSize); | |
| _prevSize = newSize; | |
| if (window._gallerySettings) window._gallerySettings.size = newSize; | |
| }); | |
| document.getElementById('sIsStreetPath').addEventListener('change', () => { | |
| refreshStreetPath(); | |
| }); | |
| document.getElementById('sIsPoi').addEventListener('change', () => { | |
| renderPois(); | |
| }); | |
| document.getElementById('settingsSave').addEventListener('click', () => { | |
| const items = parseInt(document.getElementById('sItems').value) || 23; | |
| const newSize = parseInt(document.getElementById('sSize').value) || 400; | |
| const isBorder = document.getElementById('sIsBorder').checked; | |
| const opacity = parseInt(document.getElementById('sOpacity').value) / 100; | |
| const oldSize = _prevSize || (window._gallerySettings && window._gallerySettings.size); | |
| document.querySelector('.gallery').style.gridTemplateColumns = `repeat(${items}, ${newSize}px)`; | |
| document.querySelectorAll('.gallery-item img').forEach(img => { | |
| img.style.border = isBorder ? '' : 'none'; | |
| }); | |
| document.getElementById('gallery').style.opacity = opacity; | |
| rescalePointrs(oldSize, newSize); | |
| _prevSize = newSize; | |
| window._gallerySettings = { items, size: newSize, isBorder, opacity: parseInt(document.getElementById('sOpacity').value) }; | |
| panel.classList.remove('open'); | |
| }); | |
| } | |