opnform/client/lib/forms/public-page.js

65 lines
1.8 KiB
JavaScript

let darkModeNodeParent = process.client ? document.body : null
/**
* Handle form public pages dark mode and transparent mode
*/
export function handleDarkMode (darkMode, elem = null) {
if (process.server) return
darkModeNodeParent = elem ?? document.body
// Dark mode
if (['dark', 'light'].includes(darkMode)) {
return handleDarkModeToggle(darkMode === 'dark')
}
// Case auto
handleDarkModeToggle(window.matchMedia('(prefers-color-scheme: dark)').matches)
// Create listener
window.matchMedia('(prefers-color-scheme: dark)')
.addEventListener('change', handleDarkModeToggle)
}
export function darkModeEnabled() {
if (process.server) return false
return computed(() => document.body.classList.contains('dark'))
}
function handleDarkModeToggle (enabled) {
if (enabled !== false && enabled !== true) {
// if we received an event
enabled = enabled.matches
}
enabled ? darkModeNodeParent.classList.add('dark') : darkModeNodeParent.classList.remove('dark')
}
export function disableDarkMode () {
if (process.server) return
const body = document.body
body.classList.remove('dark')
// Remove event listener
window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', handleDarkModeToggle)
}
export function handleTransparentMode (transparentModeEnabled) {
if (process.server) return
if (!useIsIframe() || !transparentModeEnabled) return
const app = document.getElementById('app')
app.classList.remove('bg-white')
app.classList.remove('dark:bg-notion-dark')
app.classList.add('bg-transparent')
}
export function focusOnFirstFormElement() {
if (process.server) return
for (const ele of document.querySelectorAll('input,button,textarea,[role="button"]')) {
if (ele.offsetWidth !== 0 || ele.offsetHeight !== 0) {
ele.focus()
break
}
}
}