interlanguage-checker/src/main/js/Main.ts

// @ts-ignore
const {$, doAfterLoad, footer, header, nav} = window.fwdekker;
import {ErrorHandler, InterlangTable, MessageHandler, ValidatableInput} from "./DOM";
import {discoverNetwork, InterlangNetwork, MediaWiki, MediaWikiManager} from "./MediaWiki";


// Contains global functions for debugging
// @ts-ignore
window.ilc = {};


// Set up template
doAfterLoad(() => {
    $("#nav").appendChild(nav("/Tools/Interlanguage Checker/"));
    $("#header").appendChild(header({
        title: "Interlanguage Checker",
        description: "Check the consistency of MediaWiki interlanguage links in a simple overview"
    }));
    $("#footer").appendChild(footer({
        vcsURL: "https://git.fwdekker.com/FWDekker/interlanguage-checker/",
        version: "v%%VERSION_NUMBER%%"
    }));
    $("main").classList.remove("hidden");
});

// Handle "About" toggle
doAfterLoad(() => {
    const about = $("#about");
    const key = "/tools/interlanguage-checker//toggle-about";

    about.addEventListener("toggle", () => localStorage.setItem(key, "" + !!about.open));

    const storedState = localStorage.getItem(key);
    if (storedState === null) about.open = true;
    else about.open = storedState === "true";
});

// Handle input
doAfterLoad(async () => {
    const urlInput = new ValidatableInput($("#url"), (value) => {
        if (value.trim() === "")
            return "API URL must not be empty.";

        try {
            new URL(value);  // Throws exception if invalid
            return "";
        } catch (error) {
            try {
                // noinspection HttpUrlsUsage
                const url = `http://${value}`;
                new URL(url);  // Throws exception if invalid
                $("#url").value = url;
                return "";
            } catch {
                return error.message;
            }
        }
    });
    const articleInput = new ValidatableInput($("#article"), (value) => {
        return value.trim() === "" ? "Article must not be empty" : "";
    });
    const checkButton = $("#check");

    const errorHandler = new ErrorHandler($("#errors"));
    const messageHandler = new MessageHandler($("#messages"))
        .setCallback((level, message) => {
            if (level === "error") console.error(message);
        });


    let previousUrl: string | undefined;
    let mwm: MediaWikiManager | undefined;

    const submit = async () => {
        localStorage.setItem("/tools/interlanguage-checker//api-url", urlInput.getValue());

        // Clean up
        urlInput.showBlank();
        articleInput.showBlank();
        errorHandler.clear();
        messageHandler.clear();

        const oldTable = $("#networkTable");
        if (oldTable !== null)
            oldTable.parentNode.removeChild(oldTable);

        // Validate
        const urlValidity = urlInput.validate();
        if (urlValidity !== "") return messageHandler.handle("error", urlValidity);

        const articleValidity = articleInput.validate();
        if (articleValidity !== "") return messageHandler.handle("error", articleValidity);

        // Initialize
        if (urlInput.getValue() !== previousUrl) {
            messageHandler.handle("progress", `Initializing <code>${urlInput.getValue()}</code>`);

            try {
                const mw = await new MediaWiki(urlInput.getValue()).init();
                mwm = await new MediaWikiManager().init(mw);
            } catch (error) {
                messageHandler.handle("error", error);
                return;
            }

            previousUrl = urlInput.getValue();
        }

        // Discover
        discoverNetwork(
            mwm!,
            articleInput.getValue(),
            (level, message) => errorHandler.handle(level, message),
            it => messageHandler.handle("progress", it)
        )
            .then(it => new InterlangNetwork(it.pages, it.redirects))
            .then(network => {
                messageHandler.handle("progress", "Creating table");

                const form = $("#networkTableForm");
                form.textContent = "";
                form.appendChild((new InterlangTable()).render("networkTable", network));

                switch (network.getNetworkVerdict()) {
                    case "perfect":
                        messageHandler.handle("complete", "A perfect network! 🙂");
                        break;
                    case "broken":
                        messageHandler.handle("warning", "The network is broken 😞<br />Hover over an icon in the left column for more information.");
                        break;
                    case "flawed":
                        messageHandler.handle("warning", "The network is complete but flawed 😕<br />Hover over an icon in the left column for more information.");
                        break;
                }
            })
            .catch(error => messageHandler.handle("error", error));
    };

    urlInput.input.addEventListener("keypress", (event) => {
        if (event.key.toLowerCase() === "enter") submit();
    });
    articleInput.input.addEventListener("keypress", (event) => {
        if (event.key.toLowerCase() === "enter") submit();
    });
    checkButton.addEventListener("click", () => submit());

    urlInput.input.focus() // Default focus

    // Read inputs from cookies
    const apiUrl = localStorage.getItem("/tools/interlanguage-checker//api-url");
    if (apiUrl !== null && apiUrl.trim() !== "") {
        urlInput.setValue(apiUrl);
        articleInput.input.focus();
    }

    // Read inputs from URL
    const currentParams = new URLSearchParams(window.location.search);
    if (currentParams.has("api")) {
        urlInput.setValue(currentParams.get("api")!);
        articleInput.input.focus();
    }
    if (currentParams.has("article")) articleInput.setValue(currentParams.get("article")!);
    if (currentParams.has("api") && currentParams.has("article")) await submit();

    // Set global debug function
    // @ts-ignore
    window.ilc.getCurrentInputAsUrl = () =>
        location.href.split("?")[0] +
        `?api=${encodeURI(urlInput.getValue())}` +
        `&article=${encodeURI(articleInput.getValue())}`;
});