<!--
Purpose: Display temporary message in centered window.
Author: Macdevign
Created: 2022-1-24
Usage: User click on window to close it or using auto-close delay.
-->
<html>
<head>
<title>Display Text</title>
<style>
* {
-webkit-user-select: none;
}
body {
width: 100%;
height: 100%;
overflow: hidden;
}
/*
Center horizontally and vertically pre element.
https://www.freecodecamp.org/news/how-to-center-anything-with-css-align-a-div-text-and-more/
*/
#tDivText {
background: black;
color: white;
border-radius: 1em;
padding: 1em;
width: 96%;
height: 93%;
position: relative;
}
#tPreText {
top: 40%;
left: 40%;
position: absolute;
white-space: pre-wrap;
width: 100%;
margin: -25px 0 0 -25px;
font-family: "Arial, Helvetica, sans-serif";
}
</style>
</head>
<body data-kmwindowid="displayTextWindowApp"
data-kmwindow="SCREEN(Main,Left),SCREEN(Main,Top), SCREEN(Main,Width),SCREEN(Main,Height)">
<div id="tDivText" onclick="closeWindow()">
<pre id="tPreText">Message</pre>
</div>
<script>
"use strict";
const KM = window.KeyboardMaestro;
const tDivText = document.querySelector("#tDivText");
const tPreText = document.querySelector("#tPreText");
// ===============================================
/* Hack to avoid click twice to close window
if window lost focus and then user click again.
*/
window.onfocus = function () {
let focusCount = 0;
tDivText.style.color = "white";
return function () {
if (focusCount++ <= 2) {
return;
}
closeWindow();
};
}();
window.onblur = () => {
tDivText.style.color = "#fdf6e3"; // To indicate lost focus
};
document.addEventListener("keydown", (event) => {
if (event.key === "Escape") {
closeWindow();
}
});
// KM functions =============================================
function KMInit() {
try {
const input = JSON.parse(document.kmvar.Local_inputJson || "{}");
// textSize(px) , width(px), text=String, delayInSec=Digit, 0 stand for No-Delay
const {
textSize = 20, width = 400, text = "This is default message", delayInSec = 0
} = input;
tPreText.textContent = text;
tDivText.style.fontSize = `${textSize}pt`;
if (delayInSec) {
setTimeout(() => closeWindow(), delayInSec * 1000);
}
} catch (exception) {
console.log(exception);
}
}
function KMWillShowWindow() {
centerWindow();
}
// Other functions =======================================
function closeWindow() {
KM?.Cancel();
}
function centerWindow() {
const {width, height} = document.body.getBoundingClientRect();
const x = Math.ceil(screen.width - width) / 2;
const y = Math.ceil(screen.height - height) / 2;
KM?.ResizeWindow(`${x},${y},${width + 10},${height + 10}`);
}
</script>
</body>
</html>