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
|
|
}
|