qh.js

(function () {
    const map = /** @type {any} */ (window).map;
    let currentControl = null;

    function buildSliders() {
        // Remove previous control if any
        if (currentControl) {
            map.removeControl(currentControl);
            currentControl = null;
        }

        // Re-collect tile layers from current map state
        const tileLayers = [];
        map.eachLayer(layer => {
            if (layer._url !== undefined) {
                tileLayers.push(layer);
            }
        });

        // Set initial opacity for overlay layers (1+)
        for (let i = 1; i < tileLayers.length; i++) {
            if (tileLayers[i]) {
                tileLayers[i].setOpacity(0.5);
            }
        }

        const control = L.control({ position: 'bottomleft' });

        control.onAdd = function () {
            const div = L.DomUtil.create('div', 'layer-opacity-panel');
            div.style.cssText = [
                'background:rgba(255,255,255,0.92)',
                'padding:10px 14px',
                'border-radius:8px',
                'box-shadow:0 2px 8px rgba(0,0,0,0.2)',
                'min-width:230px',
                'font-family:sans-serif',
                'font-size:13px',
                'user-select:none',
            ].join(';');

            let html = '<strong style="display:block;margin-bottom:8px;font-size:13px;">Layer Opacity</strong>';

            tileLayers.forEach((_layer, i) => {
                const initial = i === 0 ? 1 : 0.5;
                const label = i === 0 ? 'Base' : `Layer ${i}`;
                html += `
                    <div style="display:flex;align-items:center;gap:6px;margin-bottom:6px;">
                        <span style="width:52px;flex-shrink:0;">${label}</span>
                        <input type="range" id="lr_${i}" data-idx="${i}"
                               min="0" max="1" step="0.01" value="${initial}"
                               style="flex:1;cursor:pointer;">
                        <span id="lv_${i}" style="width:36px;text-align:right;">${Math.round(initial * 100)}%</span>
                    </div>`;
            });

            div.innerHTML = html;

            // Block all pointer/touch events from reaching the map
            L.DomEvent.disableClickPropagation(div);
            L.DomEvent.disableScrollPropagation(div);
            L.DomEvent.on(div, 'mousedown touchstart pointerdown', L.DomEvent.stopPropagation);

            return div;
        };

        control.addTo(window.map);
        currentControl = control;

        // Wire up per-layer listeners after the control is in the DOM
        tileLayers.forEach((layer, i) => {
            const input = document.getElementById(`lr_${i}`);
            const valEl = document.getElementById(`lv_${i}`);
            if (!input) return;

            input.addEventListener('mousedown', e => e.stopPropagation());
            input.addEventListener('touchstart', e => e.stopPropagation(), { passive: true });

            input.addEventListener('input', function () {
                const opacity = parseFloat(this.value);
                layer.setOpacity(opacity);
                if (valEl) valEl.textContent = Math.round(opacity * 100) + '%';
            });
        });
    }

    // Initial build
    buildSliders();

    // Rebuild sliders whenever the map base layer is switched
    document.querySelectorAll('.btn--map-switch').forEach(btn => {
        btn.addEventListener('click', () => {
            // Defer so the map finishes swapping layers before we re-collect
            setTimeout(buildSliders, 300);
        });
    });

    // #input-hide-post click this to hide the post content
    const hideBtn = document.getElementById('input-hide-post');
    // just click it programmatically to hide the content
    if (hideBtn) {
        hideBtn.click();
    }
})();