MediaWiki:Common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

console.log("Common.js is loading correctly!");

mw.loader.using(['jquery', 'mediawiki.user'], function () {
    $(document).ready(function () {
        var popupShown = sessionStorage.getItem("popupShown");
        var popupTimeout = 120000; // 2 minutes
        var timeoutTriggered = false;

        // Define the two popups
        var popups = [
            {
                title: "Free Legal Consultation <br> Riverview Legal Group (Ontario)",
                content: "Our primary focus is the Ontario Landlord and Tenant Board.<br>Call us for help at (888) 655-1076",
                link: "https://riverview.legal/about-us/",
                linkText: "Book a Consultation",
                eventLabel: "Legal Consultation Popup"
            },
            {
                title: "Are you a Legal Professional?",
                content: "Support our work with the Caselaw Ninja on Patreon.<br>Become a member today",
                link: "https://patreon.com/CaselawNinja",
                linkText: "Join Here",
                eventLabel: "Patreon Popup"
            }
        ];

        // Choose a popup randomly or based on logic
        var selectedPopup = popups[Math.floor(Math.random() * popups.length)];

        function sendAnalyticsEvent(label) {
            if (typeof gtag === "function") {
                gtag('event', 'popup_shown', {
                    'event_category': 'Engagement',
                    'event_label': label,
                    'value': 1
                });
            } else {
                console.warn("Google Analytics not detected.");
            }
        }

        function showPopup() {
            var popup = $('<div id="popup-overlay">' +
                '<div id="popup-box">' +
                '<h2>' + selectedPopup.title + '</h2>' +
                '<p>' + selectedPopup.content + '</p>' +
                '<a href="' + selectedPopup.link + '" target="_blank" class="popup-button">' + selectedPopup.linkText + '</a>' +
                '<span id="popup-close">×</span>' +
                '</div>' +
                '</div>');

            $("body").append(popup);
            sessionStorage.setItem("popupShown", "true");
            sendAnalyticsEvent(selectedPopup.eventLabel);

            $("#popup-close").click(function () {
                $("#popup-overlay").fadeOut();
            });

            $(document).off("scroll", scrollHandler);
        }

        function scrollHandler() {
            if (!popupShown || timeoutTriggered) {
                showPopup();
            }
        }

        var loggedInUser = mw.config.get('wgUserName');
        console.log("Logged-in User:", loggedInUser);

        sessionStorage.removeItem("popupShown");

        if (!loggedInUser) {
            $(document).one("scroll", scrollHandler);
            setTimeout(function () {
                timeoutTriggered = true;
                $(document).one("scroll", scrollHandler);
            }, popupTimeout);
        }
    });
});

// Unified CSS for popups
mw.util.addCSS(
    "#popup-overlay {" +
    "position: fixed; top: 0; left: 0; width: 100%; height: 100%;" +
    "background: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; z-index: 9999;" +
    "}" +
    "#popup-box {" +
    "background: white; padding: 20px; border-radius: 10px; text-align: center; width: 300px;" +
    "box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); position: relative;" +
    "}" +
    ".popup-button {" +
    "display: inline-block; background: #007bff; color: white; padding: 10px;" +
    "text-decoration: none; border-radius: 5px; margin-top: 10px;" +
    "}" +
    "#popup-close {" +
    "position: absolute; top: 10px; right: 15px; cursor: pointer; font-size: 20px;" +
    "}"
);