iportal/src/module/inject/cssVar.ts

web-portal

import { Module, ApplicationSafeAreaValue, GlobalCSSVariables } from '../../types'

export default (moduleWindow: Window, module: Module) => {
  const { config, application } = module
  const globalCSSVariables = application.config.globalCSSVariables
  const docStyle = moduleWindow.document.documentElement.style
  const setGlobalCSSVariables = (variables: GlobalCSSVariables) => {
    for (const key in variables) {
      docStyle.setProperty(key, variables[key])
    }
  }
  const setCSSSafeAreaValue = (data: ApplicationSafeAreaValue) => {
    setGlobalCSSVariables({
      '--application-safe-area-top': data[0] ?? data,
      '--application-safe-area-right': data[1] ?? data,
      '--application-safe-area-bottom': data[2] ?? data,
      '--application-safe-area-left': data[3] ?? data
    })
  }
  if (config.safeArea) {
    setCSSSafeAreaValue(config.safeArea)
  } else if (application.config.safeArea) {
    setCSSSafeAreaValue(application.config.safeArea)
  }
  if (globalCSSVariables) {
    setGlobalCSSVariables(globalCSSVariables)
  }
  application.on('safeAreaChange', (data: ApplicationSafeAreaValue) => {
    setCSSSafeAreaValue(data)
  })
  application.on('globalCSSVariablesChange', (data: GlobalCSSVariables) => {
    setGlobalCSSVariables(data)
  })
}