Spaces:
Running
Running
File size: 4,311 Bytes
a62f8b4 7cab3ee a62f8b4 f8fa21c 4e2d9ce a62f8b4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | // ==================== 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');
});
}
|