@mattilsynet/designsystem-svelte/dist/svelte/components/map/activate-map-control.js

Design system for Mattilsynet

import { Control } from 'ol/control';
import {} from 'ol';
const FULLSCREEN_OPTIONS = 'fullscreen-options';
export const locationTrackerId = 'activateMap';
export function createActivateMapControl(map, options) {
    const element = createActivateMapWrapper(createActivateMap(map, options));
    const control = new Control({ element });
    control.set(FULLSCREEN_OPTIONS, options);
    control.setMap(map);
    return control;
}
function handleToggleFullscreen(map) {
    return (event) => {
        toggleFullscreen(map, event.target.checked);
    };
}
export function toggleFullscreen(map, isFullscreen) {
    const control = map
        .getControls()
        .getArray()
        .find((control) => control.get(FULLSCREEN_OPTIONS));
    const options = control.get(FULLSCREEN_OPTIONS);
    const mapElement = map.getTargetElement();
    const label = document.getElementById(options.labelId);
    const input = document.getElementById(locationTrackerId);
    label.innerHTML = isFullscreen ? options.labelActive : options.label;
    setInteractions(map, isFullscreen);
    if (isFullscreen) {
        mapElement.classList.add(options.fullscreenClassName);
        label.classList.add('icon--collapse-before');
        label.classList.remove('icon-expand-before');
    }
    else {
        mapElement.classList.remove(options.fullscreenClassName);
        label.classList.remove('icon--collapse-before');
        label.classList.add('icon--expand-before');
        input.checked = isFullscreen;
    }
}
export function setInteractions(map, active) {
    const interactions = map.getInteractions();
    interactions.forEach(i => {
        i.setActive(active);
    });
}
function createActivateMap(map, options) {
    const labelElement = document.createElement('label');
    labelElement.innerHTML = options.label;
    labelElement.htmlFor = locationTrackerId;
    labelElement.id = options.labelId;
    labelElement.className = 'mt-label map-toggle-label icon--expand-before';
    const input = document.createElement('input');
    input.id = locationTrackerId;
    input.type = 'checkbox';
    input.className = 'mt-input map-toggle-input';
    setInteractions(map, false);
    input.addEventListener('change', handleToggleFullscreen(map));
    return {
        input,
        labelElement
    };
}
function createActivateMapWrapper({ input, labelElement }) {
    const element = document.createElement('div');
    element.className = 'map-activate-wrapper ol-unselectable ol-control';
    element.appendChild(input);
    element.appendChild(labelElement);
    return element;
}