Allows the use of the "Page Marker" extension with SudokuPad

sudokupad-pagemaker.user.js

// ==UserScript==
// @name         SudokuPad Page Marker Compatibility
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Allows the use of the Page Marker Chrome extension with SudokuPad
// @author       Rangsk
// @match        *://sudokupad.app/*
// @match        *://beta.sudokupad.app/*
// @grant        none
// ==/UserScript==

(function () {
    "use strict";

    let isBlocked = false;

    const block = () => {
        Framework.closeDialog();
        Framework.showDialog();
        Object.assign(document.querySelector(".dialog-overlay").style, { visibility: "hidden" });
        isBlocked = true;
    };

    const unblock = () => {
        if (isBlocked) {
            Framework.closeDialog();
            isBlocked = false;
        }
    };

    const isPointerActive = () => {
        const pointerButton = document.getElementById("pageMarker_pointer");
        return pointerButton && pointerButton.style.background.includes("rgba(0, 0, 0, 0.2)");
    };

    const handleButtonActivation = (mutations) => {
        mutations.forEach((mutation) => {
            if (mutation.attributeName === "style") {
                const buttonId = mutation.target.id;
                const isActive = mutation.target.style.background.includes("rgba(0, 0, 0, 0.2)");
                if (isActive) {
                    if (buttonId !== "pageMarker_pointer") {
                        block();
                    } else {
                        unblock();
                    }
                }
            }
        });
    };

    let buttonsObserver = null;

    const setUpButtonsObserver = (penToolElement) => {
        if (!buttonsObserver) {
            buttonsObserver = new MutationObserver(handleButtonActivation);
        }

        const config = { attributes: true, attributeFilter: ["style"] };
        penToolElement.querySelectorAll(".pageMarker_tool").forEach((el) => {
            buttonsObserver.observe(el, config);
        });

        // Check the initial state
        if (!isPointerActive()) {
            block();
        } else {
            unblock();
        }
    };

    const penToolObserver = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            mutation.addedNodes.forEach((node) => {
                if (node.nodeType === Node.ELEMENT_NODE) {
                    if (node.id === "pageMarker_draggable") {
                        setUpButtonsObserver(node);
                    } else if (node.classList.contains("dialog-overlay")) {
                        isBlocked = true;
                    }
                }
            });
            mutation.removedNodes.forEach((node) => {
                if (node.nodeType === Node.ELEMENT_NODE) {
                    if (node.id === "pageMarker_draggable") {
                        unblock();
                    } else if (node.classList.contains("dialog-overlay")) {
                        isBlocked = false;
                    }
                }
            });
        });
    });

    const init = () => {
        penToolObserver.observe(document.body, { childList: true, subtree: true });
    };

    if (document.readyState === "complete" || document.readyState === "interactive") {
        init();
    } else {
        window.addEventListener("load", init);
    }
})();