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 popupTimeout1 = 10000; // 10 seconds for first popup
        var popupTimeout2 = 20000; // 20 seconds for second popup

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

        if (!loggedInUser) {
            console.log("User is logged out, scheduling popups.");

            // Define popups
            var popups = [
                {
                    id: "popup1",
                    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",
                    position: "top: 20%; left: 50%; transform: translate(-50%, 0);"
                },
                {
                    id: "popup2",
                    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",
                    position: "top: 60%; left: 50%; transform: translate(-50%, 0);"
                }
            ];

            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(popupData) {
                if (sessionStorage.getItem(popupData.id)) return; // Prevent duplicate popups
                
                console.log("Triggering popup: " + popupData.id);
                
                var popup = $('<div class="popup-overlay" id="' + popupData.id + '">' +
                    '<div class="popup-box" style="' + popupData.position + '">' +
                    '<h2>' + popupData.title + '</h2>' +
                    '<p>' + popupData.content + '</p>' +
                    '<a href="' + popupData.link + '" target="_blank" class="popup-button">' + popupData.linkText + '</a>' +
                    '<span class="popup-close">×</span>' +
                    '</div>' +
                    '</div>');

                $("body").append(popup);
                sendAnalyticsEvent(popupData.eventLabel);
                sessionStorage.setItem(popupData.id, "true");

                $(".popup-close").click(function () {
                    $(this).closest(".popup-overlay").fadeOut(function() { $(this).remove(); });
                });
            }

            setTimeout(function () { showPopup(popups[0]); }, popupTimeout1);
            setTimeout(function () { showPopup(popups[1]); }, popupTimeout2);

            // Apply blur effect after third ==Sub Header==
            var $subHeaders = $("h2");

            if ($subHeaders.length >= 3) {
                console.log("Applying blur after third header.");
                var $thirdHeader = $subHeaders.eq(2);
                var $contentToBlur = $thirdHeader.nextAll();
                $contentToBlur.css({
                    "filter": "blur(8px)",
                    "pointer-events": "none",
                    "user-select": "none"
                });

                // Create the Stripe popup
                var $stripePopup = $(`
                    <div class="popup-overlay" id="stripe-popup">
                        <div class="popup-box" style="top: 50%; left: 50%; transform: translate(-50%, -50%);">
                            <h2>Subscribe to Unlock Content</h2>
                            <p>Subscribe to view the full article.</p>
                            <button id="subscribe-button" class="popup-button">Subscribe</button>
                            <span class="popup-close">×</span>
                        </div>
                    </div>
                `);

                $("body").append($stripePopup);

                // Stripe Checkout Handler
                $("#subscribe-button").click(function () {
                    var stripe = Stripe("your_stripe_publishable_key");
                    stripe.redirectToCheckout({
                        sessionId: "your_checkout_session_id"
                    }).then(function (result) {
                        if (result.error) {
                            alert(result.error.message);
                        }
                    });
                });

                // Close Stripe popup
                $("#stripe-popup .popup-close").click(function () {
                    $("#stripe-popup").fadeOut(function() { $(this).remove(); });
                });
            } else {
                console.warn("Not enough headers found for blur effect.");
            }
        }
    });
});

// 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: absolute;" +
    "}" +
    ".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;" +
    "color: black; font-weight: bold;" +
    "}" +
    ".popup-close:hover {" +
    "color: red;" +
    "}"+
    ".blurred-content { filter: blur(8px) !important; }"
);