55 lines
1.3 KiB
JavaScript
55 lines
1.3 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);
|