<!--

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>