MediaWiki:Common.js: Difference between revisions

Access restrictions were established for this page. If you see this message, you have no access to this page.

Revision as of 05:13, 25 February 2025 (view source) Sharvey (talk | contribs) mNo edit summary ← Older edit		Revision as of 00:01, 2 March 2025 (view source) Sharvey (talk | contribs) mNo edit summary Newer edit →
Line 101:		Line 101:
	"}"		"}"
	);		);
			// New Program
			$(document).ready(function () {
			// Check if user is logged in
			if (mw.config.get("wgUserName")) {
			console.log("User is logged in. No blur applied.");
			return; // Exit if the user is logged in
			}
			console.log("User is not logged in. Applying blur and popup.");
			// Find the third subheader
			var $subHeaders = $("h2");
			if ($subHeaders.length < 3) {
			console.warn("Not enough headers found!");
			return;
			}
			var $thirdHeader = $subHeaders.eq(2); // Zero-based index
			// Blur everything below the third sub-header
			var $contentToBlur = $thirdHeader.nextAll();
			$contentToBlur.css({
			"filter": "blur(8px)",
			"pointer-events": "none",
			"user-select": "none"
			});
			// Create the popup div
			var $popup = $(`
			<div id="stripe-popup" style="
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background: white;
			padding: 20px;
			box-shadow: 0px 4px 10px rgba(0,0,0,0.2);
			border-radius: 10px;
			z-index: 1000;
			text-align: center;
			">
			<h2>Subscribe to Unlock Content</h2>
			<p>Subscribe to view the full article.</p>
			<button id="subscribe-button" style="
			background: #635bff;
			color: white;
			border: none;
			padding: 10px 20px;
			cursor: pointer;
			font-size: 16px;
			border-radius: 5px;
			">Subscribe</button>
			</div>
			`);
			// Append popup to the body
			$("body").append($popup);
			// 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);
			}
			});
			});
			});

---

Revision as of 00:01, 2 March 2025

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 (for testing)
        var popupTimeout2 = 20000; // 20 seconds for second popup (for testing)

        // Define the two 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(); });
            });
        }

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

        if (!loggedInUser) {
            console.log("User is logged out, scheduling popups.");
            setTimeout(function () {
                showPopup(popups[0]);
            }, popupTimeout1);

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

// 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;" +
    "}"
);

// New Program

$(document).ready(function () {
    // Check if user is logged in
    if (mw.config.get("wgUserName")) {
        console.log("User is logged in. No blur applied.");
        return; // Exit if the user is logged in
    }

    console.log("User is not logged in. Applying blur and popup.");

    // Find the third subheader
    var $subHeaders = $("h2");
    
    if ($subHeaders.length < 3) {
        console.warn("Not enough headers found!");
        return;
    }

    var $thirdHeader = $subHeaders.eq(2); // Zero-based index

    // Blur everything below the third sub-header
    var $contentToBlur = $thirdHeader.nextAll();
    $contentToBlur.css({
        "filter": "blur(8px)",
        "pointer-events": "none",
        "user-select": "none"
    });

    // Create the popup div
    var $popup = $(`
        <div id="stripe-popup" style="
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 20px;
            box-shadow: 0px 4px 10px rgba(0,0,0,0.2);
            border-radius: 10px;
            z-index: 1000;
            text-align: center;
        ">
            <h2>Subscribe to Unlock Content</h2>
            <p>Subscribe to view the full article.</p>
            <button id="subscribe-button" style="
                background: #635bff;
                color: white;
                border: none;
                padding: 10px 20px;
                cursor: pointer;
                font-size: 16px;
                border-radius: 5px;
            ">Subscribe</button>
        </div>
    `);

    // Append popup to the body
    $("body").append($popup);

    // 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);
            }
        });
    });
});