refactor: remove reliance on viewport height in favor of body (#1926)

This commit is contained in:
Mo
2022-11-01 15:58:12 -05:00
committed by GitHub
parent d3f04451af
commit 25ecdceea9
17 changed files with 89 additions and 124 deletions

View File

@@ -1,25 +1,14 @@
import { log, LoggingDomain } from './Logging'
export const ViewportHeightKey = '--viewport-height'
export const setViewportHeightWithFallback = () => {
const newValue = visualViewport && visualViewport.height > 0 ? visualViewport.height : window.innerHeight
if (!newValue) {
setCustomViewportHeight('100', 'vh')
return
}
setCustomViewportHeight(String(newValue), 'px')
}
/**
* @param forceTriggerResizeEvent On iPad at least, setProperty(ViewportHeightKey) does not trigger a resize event
*/
export const setCustomViewportHeight = (height: string, suffix: 'px' | 'vh', forceTriggerResizeEvent = false) => {
log(LoggingDomain.Viewport, `setCustomViewportHeight: ${height}`)
export const setCustomViewportHeight = (height: number, suffix: 'px' | 'vh', forceTriggerResizeEvent = false) => {
const value = `${height}${suffix}`
document.documentElement.style.setProperty(ViewportHeightKey, `${height}${suffix}`)
log(LoggingDomain.Viewport, `setCustomViewportHeight: ${value}`)
document.body.style.height = value
if (forceTriggerResizeEvent) {
window.dispatchEvent(new Event('resize'))