49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
const USER_VIEW_STORAGE_KEY = "magent_user_view_preview";
|
|
const USER_VIEW_EVENT = "magent:user-view-change";
|
|
|
|
const readUserViewPreview = () => {
|
|
if (typeof window === "undefined") return false;
|
|
return window.sessionStorage.getItem(USER_VIEW_STORAGE_KEY) === "1";
|
|
};
|
|
|
|
const applyDocumentMode = (enabled: boolean) => {
|
|
if (typeof document === "undefined") return;
|
|
document.documentElement.dataset.userView = enabled ? "true" : "false";
|
|
};
|
|
|
|
export const setUserViewPreview = (enabled: boolean) => {
|
|
if (typeof window === "undefined") return;
|
|
if (enabled) {
|
|
window.sessionStorage.setItem(USER_VIEW_STORAGE_KEY, "1");
|
|
} else {
|
|
window.sessionStorage.removeItem(USER_VIEW_STORAGE_KEY);
|
|
}
|
|
applyDocumentMode(enabled);
|
|
window.dispatchEvent(new CustomEvent(USER_VIEW_EVENT, { detail: { enabled } }));
|
|
};
|
|
|
|
export const useUserViewPreview = () => {
|
|
const [enabled, setEnabled] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const sync = () => {
|
|
const nextValue = readUserViewPreview();
|
|
applyDocumentMode(nextValue);
|
|
setEnabled(nextValue);
|
|
};
|
|
sync();
|
|
window.addEventListener(USER_VIEW_EVENT, sync);
|
|
window.addEventListener("storage", sync);
|
|
return () => {
|
|
window.removeEventListener(USER_VIEW_EVENT, sync);
|
|
window.removeEventListener("storage", sync);
|
|
};
|
|
}, []);
|
|
|
|
return enabled;
|
|
};
|