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);
|