JSFiddle - React, Tailwind, and code Playground

by morphcast

HTML

<p>Module <b>ALARM_CHEATS</b></p>

ALARMS DESCRIPTION:
<li>pageOnBackground: the page content is not visible to the user: the document is either a background tab or part of a minimized window, or the OS screen lock is active. </li>
<li>pageFocusLost: the focus at the page content is lost because the user selected something outside the page</li>
<li>mouseOverLost: the mouse cursor went outside the page </li>
<li>devtoolsOpen: the user opened DevTools of Chrome, Safari, Firefox or Opera 
</li>


<br /><br />
<b>ALARM LOG:</b>
<div id="log"></div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.min.js"></script>

JavaScript

var mouseX = 0;
  var mouseY = 0;
  var counter = 0;
var mouseIsIn = true;
window.addEventListener("mouseout",
    function(e){
        mouseX = e.pageX;
        mouseY = e.pageY;
        if ((mouseY >= 0 && mouseY <= window.innerHeight)
        && (mouseX >= 0 && mouseX <= window.innerWidth))
            return;
        //do something for mouse out
        counter++;
        mouseIsIn = false;
        log(`mouseOverLost: <b>true</b>`);
    },
    false);
window.addEventListener("mouseover",
    function(e){
        if(mouseIsIn)
            return;
        //do something for mouse over
        counter++;
        mouseIsIn = true;
        log(`mouseOverLost: false`);
    },
    false);

window.addEventListener("focus", event => { 
	log(`pageFocusLost: false`);
}, false);

window.addEventListener("blur", event => { 
	log(`pageFocusLost: <b>true</b>`);
}, false);

window.document.addEventListener( 'visibilitychange' , function() {
    console.log('pageOnBackground', document.hidden, '-', document.visibilityState);
		log(`pageOnBackground: ${document.hidden ? '<b>true</b>' : 'false' }`);
}, false );

// Get notified when devtools it's opened/closed 
window.addEventListener('devtoolschange', event => {
		log(`devtoolsOpen: ${event.detail.isOpen ? '<b>true</b>' : 'false' }`);
});
if (window.devtools.isOpen) {
	log(`devtoolsOpen: ${window.devtools.isOpen ? '<b>true</b>' : 'false' }`);
}

function log(msg) {
	document.getElementById("log").innerHTML += "<span>" + msg + "</span><br />";
}


// function from Peter-Paul Koch; cross browser event handler:
function addEvent(obj, evt, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(evt, fn, false);
    }
    else if (obj.attachEvent) {
        obj.attachEvent("on" + evt, fn);
    }
}