38 lines
1.4 KiB
JavaScript
38 lines
1.4 KiB
JavaScript
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);
|
|
}
|