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 00:10, 2 March 2025 (view source) Sharvey (talk | contribs) mNo edit summary ← Older edit		Revision as of 00:17, 2 March 2025 (view source) Sharvey (talk | contribs) mNo edit summary Newer edit →
Line 32:		Line 32:
	"filter": "blur(8px)",		"filter": "blur(8px)",
	"pointer-events": "none",		"pointer-events": "none",
	"user-select": "none"		"user-select": "none",
			"position": "relative"
	});		});
			// Create persistent overlay message
			var $overlayMessage = $('<div id="patreon-overlay">' +
			'<p>Subscribe to our <a href="https://www.patreon.com/c/CaselawNinja" target="_blank">Patreon</a> for full access! <br> Only $4.99 CAD per month.</p>' +
			'</div>');
			// Append message to the blurred content area
			$thirdHeader.after($overlayMessage);
	// Create the Stripe popup		// Create the Stripe popup
Line 69:		Line 78:
	});		});
	// Unified CSS for popups		// Unified CSS for popups & overlay text
	mw.util.addCSS(		mw.util.addCSS(
	".popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%;" +		".popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%;" +
Line 79:		Line 88:
	".popup-close { position: absolute; top: 10px; right: 15px; cursor: pointer; font-size: 20px;" +		".popup-close { position: absolute; top: 10px; right: 15px; cursor: pointer; font-size: 20px;" +
	"color: black; font-weight: bold; }" +		"color: black; font-weight: bold; }" +
	".popup-close:hover { color: red; }"		".popup-close:hover { color: red; }" +
			/* Patreon Overlay Styling */
			"#patreon-overlay { position: absolute; width: 100%; text-align: center; top: 50px;" +
			"left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, 0.8);" +
			"padding: 10px; font-size: 18px; font-weight: bold; color: #333; border-radius: 5px;" +
			"z-index: 10; }" +
			"#patreon-overlay a { color: #E85D04; text-decoration: none; font-weight: bold; }" +
			"#patreon-overlay a:hover { text-decoration: underline; }"
	);		);

---

Revision as of 00:17, 2 March 2025

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

// Ensure the script only loads after dependencies
mw.loader.using(['jquery', 'mediawiki.user'], function () {
    $(document).ready(function () {
        var loggedInUser = mw.config.get('wgUserName');
        var pageNamespace = mw.config.get('wgCanonicalNamespace');
        console.log("Logged-in User:", loggedInUser);
        console.log("Page Namespace:", pageNamespace);

        // Exit script if user is logged in or on a category page
        if (loggedInUser || pageNamespace === "Category") {
            console.log("User is logged in or on a category page. No blur applied.");
            return;
        }

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

        // Find the third subheader
        var $subHeaders = $("#mw-content-text h2");

        if ($subHeaders.length >= 3) {
            console.log("Applying blur after third header.");
            var $thirdHeader = $subHeaders.eq(2);

            // Select only content below the third header, excluding side menus
            var $contentToBlur = $thirdHeader.nextAll()
                .not(".sidebar, .mw-portlet, #p-tb, #p-personal, #footer, #catlinks");

            // Apply blur effect
            $contentToBlur.css({
                "filter": "blur(8px)",
                "pointer-events": "none",
                "user-select": "none",
                "position": "relative"
            });

            // Create persistent overlay message
            var $overlayMessage = $('<div id="patreon-overlay">' +
                '<p>Subscribe to our <a href="https://www.patreon.com/c/CaselawNinja" target="_blank">Patreon</a> for full access! <br> Only $4.99 CAD per month.</p>' +
                '</div>');

            // Append message to the blurred content area
            $thirdHeader.after($overlayMessage);

            // 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 & overlay text
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; }" +

    /* Patreon Overlay Styling */
    "#patreon-overlay { position: absolute; width: 100%; text-align: center; top: 50px;" +
    "left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, 0.8);" +
    "padding: 10px; font-size: 18px; font-weight: bold; color: #333; border-radius: 5px;" +
    "z-index: 10; }" +
    "#patreon-overlay a { color: #E85D04; text-decoration: none; font-weight: bold; }" +
    "#patreon-overlay a:hover { text-decoration: underline; }"
);