change viewport size justification to use a javascript solution

This commit is contained in:
hippoz 2022-09-02 12:33:09 +03:00
parent 96066a1345
commit 5072ea5ab5
Signed by: hippoz
GPG key ID: 7C52899193467641
3 changed files with 46 additions and 27 deletions

View file

@ -65,9 +65,6 @@
--radius-lg: calc(2 * var(--radius-unit));
--radius-xl: calc(3.25 * var(--radius-unit));
--radius-xxl: calc(5.25 * var(--sradius-unit));
--100vw: calc(100.0 * 1vw);
--100vh: calc(100.0 * 1vh);
}
html, body {
@ -77,12 +74,8 @@ html, body {
color-scheme: dark;
accent-color: var(--purple-2);
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
max-width: 100%;
max-height: 100%;
width: var(--viewportWidth);
height: var(--viewportHeight);
}
body {
@ -99,22 +92,6 @@ body {
flex-direction: column;
}
@supports(width: 1dvw) {
html, body {
min-width: 100dvw;
max-width: 100dvw;
width: 100dvw;
}
}
@supports(height: 1dvh) {
html, body {
min-height: 100dvh;
max-height: 100dvh;
height: 100dvh;
}
}
/* fullscreen message */
.fullscreen-message {

View file

@ -1,6 +1,31 @@
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 }) => {

View file

@ -13,7 +13,20 @@ const defaults = {
"ui:online:processRemoteTypingEvents": true,
"ui:online:processRemotePresenceEvents": true,
"ui:online:loadMessageHistory": true,
"ui:online:sendTypingUpdates": true
"ui:online:sendTypingUpdates": true,
"ui:useragent:formFactor": () => {
return (window.navigator && window.navigator.maxTouchPoints > 0) ? "touch" : "desktop";
},
"ui:useragent:viewportSizeJustificationMethod": () => {
if (CSS.supports("(width: 1dvw)")) {
return "dynamicViewportUnits";
} else if (getItem("ui:useragent:formFactor") === "touch") {
return "javascriptResponsive";
} else {
return "normalUnits";
}
}
};
const store = new Map(Object.entries(defaults));
const persistentProvider = localStorage;
@ -30,7 +43,11 @@ export function getItem(key) {
if (!didCacheProvider) {
init();
}
return store.get(key);
const value = store.get(key);
if (typeof value === "function") {
return value();
}
return value;
}
export function removeItem(key) {