iraiser script

iraiser_script.js

$(document).ready(function () {
    function getQueryParams() {
        const params = new URLSearchParams(window.location.search);
        return {
            interval: params.get("interval"),
            amount: params.get("amount"),
        };
    }

    const params = getQueryParams();

    var defaultDonationInterval = "monatlich";

    if (params.interval !== null && ["einmalig", "monatlich"].includes(params.interval)) {
        defaultDonationInterval = params.interval;
    }


    /**
     * The default amount for donations.
     *
     * @type {number}
     */
    var defaultDonationAmount = 30;
    if (params.amount !== null) {
        var amount = parseInt(params.amount);
        if (!Number.isNaN(amount)) {
            defaultDonationAmount = amount;
        }
    }

    // Maybe we need this, don't know
    // $('[name=country]').val('AT');
    // $('[name=country]').trigger('change');

    // iraiser suppresses the console.log() function for some reason.
    // This makes our console.log() calls go to console.info() instead so we can debug as normal
    console.log = console.info.bind(console);

    const viewport = document.querySelector("head > meta[name='viewport'");
    if (viewport) {
        viewport.setAttribute("content", "width=device-width, initial-scale=1.0");
    }

    var simulateKeyUp = jQuery.Event("keyup");

    function setOneOffDonationValue(number) {
        $("input#famount-once").focus().val(number).trigger(simulateKeyUp);
    }
    function setRecurringDonationValue(number) {
        $("input#famount-regular").focus().val(number).trigger(simulateKeyUp);
    }

    function setTextDonationInterval(text) {
        var donationIntervalText = $("div#textDonationMessage .donation-frequency");
        donationIntervalText.text(text);
    }

    function setTextDonationAmount(text) {
        var donationAmountText = $("div#textDonationMessage .donation-amount");
        donationAmountText.text(text);
    }

    function selectOneOffInterval() {
        $("a[href='#once']").click();
    }

    function selectRecurringInterval() {
        $("a[href='#regular']").click();
    }

    if (defaultDonationInterval === "einmalig") {
        setTextDonationInterval("Einmalige");
        setTextDonationAmount(defaultDonationAmount);
        selectOneOffInterval();
        setRecurringDonationValue("");
        setOneOffDonationValue(defaultDonationAmount);
    }

    if (defaultDonationInterval === "monatlich") {
        setTextDonationInterval("Monatliche");
        setTextDonationAmount(defaultDonationAmount);
        selectRecurringInterval();
        setOneOffDonationValue("");
        setRecurringDonationValue(defaultDonationAmount);
    }

    var textDonationMessage = `
    <div style='display: flex;' id='textDonationMessage'>
        <div class="donationSentenceWrapper">
            <p>
                <strong class='donation-frequency'>${defaultDonationInterval === "einmalig" ? "Einmalige" : "Monatliche"}</strong>
                Spende von
                <strong>
                    €
                    <span class='donation-amount'>${defaultDonationAmount}</span>
                </strong>
            </p>
        </div>
        <button class='change-donation' aria-label='Spendenbetrag und Häufigkeit ändern' type="button">Anpassen?</button>
    </div>`;

    var interactiveDonationMessage = `
<div style="display: none;" id="interactiveDonationMessage">
    <div class="donationSentenceWrapper">
        <select class="donation-frequency-select" aria-label="Spendenhäufigkeit wählen">
            <option value="Einmalig" ${defaultDonationInterval === "einmalig" ? "selected" : ""
        }>Einmalige</option>
            <option value="Monatlich" ${defaultDonationInterval === "monatlich" ? "selected" : ""
        }>Monatliche</option>
        </select>
        <p>Spende von <strong> € </strong></p>
        <input type="number" pattern="[0-9]*" value=${defaultDonationAmount}
        class="new-donation-amount" aria-label="Spendenbetrag wählen">
        </div>
        <button class="confirm-donation"
            aria-label="Spendenbetrag oder Häufigkeit bestätigen" type="button">Bestätigen</button>
</div>`;

    $("div#step-1").before(textDonationMessage);
    $("div#step-1").before(interactiveDonationMessage);

    // Activate the form to customise the donation
    $("div#textDonationMessage button.change-donation").click(function (event) {
        $("div#textDonationMessage").hide();
        $("div#interactiveDonationMessage").css("display", "flex");
    });

    // Save the customised donation
    $("div#interactiveDonationMessage button.confirm-donation").click(function (
        event
    ) {
        event.preventDefault();
        var donationInterval = String($(
            "div#interactiveDonationMessage select.donation-frequency-select"
        ).val()).toLowerCase();

        var donationAmount = $(
            "div#interactiveDonationMessage input.new-donation-amount"
        ).val();

        if (donationInterval === "einmalig") {
            setTextDonationInterval("Einmalige");
            setTextDonationAmount(donationAmount);
            selectOneOffInterval();
            setRecurringDonationValue("");
            setOneOffDonationValue(donationAmount);
        }

        if (donationInterval === "monatlich") {
            setTextDonationInterval("Monatliche");
            setTextDonationAmount(donationAmount);
            selectRecurringInterval();
            setOneOffDonationValue("");
            setRecurringDonationValue(donationAmount);
        }
        $("div#interactiveDonationMessage").hide();
        $("div#textDonationMessage").css("display", "flex");
    });

    const poweredDiv = document.querySelector(
        `div#footer>div.container#footer_wrapinner>div#powered`
    );
    if (poweredDiv) {
        poweredDiv.style.display = null;
    }
});