waffle/frontend/src/responsive.js

import { getItem } from "./storage";
import { showSidebar, smallViewport } from "./stores";

function initViewportSizeHandler() {
    const root = document.querySelector(':root');
    const method = getItem("ui:useragent:viewportSizeJustificationMethod");

    if (method === "dynamicViewportUnits") {
        root.style.setProperty("--viewportWidth", "100dvw");
        root.style.setProperty("--viewportHeight", "100dvh");
    } else if (method === "javascriptResponsive") {
        const updateUnits = () => {
            root.style.setProperty("--viewportWidth", `${window.innerWidth}px`);
            root.style.setProperty("--viewportHeight", `${window.innerHeight}px`);
        };
        window.addEventListener("resize", updateUnits);
        updateUnits();
    } else if (method === "normalUnits") {
        root.style.setProperty("--viewportWidth", "100vw");
        root.style.setProperty("--viewportHeight", "100vh");
    } else {
        throw new Error("initViewportSizeHandler(): got unexpected value from getItem('ui:useragent:viewportSizeJustificationMethod').");
    }
}

export function initResponsiveHandlers() {
    initViewportSizeHandler();

    const mediaQuery = window.matchMedia('(min-width: 768px)');

    const update = ({ matches }) => {
        showSidebar.set(matches);
        smallViewport.set(!matches);
    };

    mediaQuery.addEventListener("change", update);
    update(mediaQuery);
}