55 lines
1.2 KiB
JavaScript
55 lines
1.2 KiB
JavaScript
// browser tab visibility state detection
|
|
|
|
import Events from '../_events'
|
|
import Consts from '../_consts'
|
|
|
|
export default ((W) => {
|
|
const NAME = '_main.css-screen-size'
|
|
const D = document
|
|
const BODY = D.body
|
|
|
|
const detectCSSScreenSize = () => {
|
|
const el = D.createElement('div')
|
|
el.className = 'env-test'
|
|
BODY.appendChild(el)
|
|
|
|
const envs = [...Consts.ENVS].reverse()
|
|
let curEnv = envs.shift()
|
|
BODY.classList.remove(...envs)
|
|
|
|
for (let i = 0; i < envs.length; ++i) {
|
|
const env = envs[i]
|
|
el.classList.add(`d-${env}-none`)
|
|
|
|
if (W.getComputedStyle(el).display === 'none') {
|
|
curEnv = env
|
|
BODY.classList.add(`${curEnv}`)
|
|
break
|
|
}
|
|
}
|
|
|
|
let landscape = true
|
|
if (W.innerWidth > W.innerHeight) {
|
|
BODY.classList.add('landscape')
|
|
BODY.classList.remove('portrait')
|
|
} else {
|
|
landscape = false
|
|
|
|
BODY.classList.add('portrait')
|
|
BODY.classList.remove('landscape')
|
|
}
|
|
|
|
console.log(
|
|
`${NAME}: screen size detected ${curEnv} | landscape ${landscape}`
|
|
)
|
|
|
|
BODY.removeChild(el)
|
|
|
|
return curEnv
|
|
}
|
|
|
|
W.addEventListener(`${Events.LOADED}`, detectCSSScreenSize)
|
|
|
|
W.addEventListener(`${Events.RESIZE}`, detectCSSScreenSize)
|
|
})(window)
|