MediaWiki:Common.js: Difference between revisions

From Riverview Legal Group
Access restrictions were established for this page. If you see this message, you have no access to this page.
mNo edit summary
mNo edit summary
Line 3: Line 3:
mw.loader.using(['jquery', 'mediawiki.user'], function () {
mw.loader.using(['jquery', 'mediawiki.user'], function () {
     $(document).ready(function () {
     $(document).ready(function () {
         var popupTimeout1 = 10000; // 10 seconds for first popup (for testing)
         var popupTimeout1 = 10000; // 10 seconds for first popup
         var popupTimeout2 = 20000; // 20 seconds for second popup (for testing)
         var popupTimeout2 = 20000; // 20 seconds for second popup


         // Define the two popups
         var loggedInUser = mw.config.get('wgUserName');
        var popups = [
        console.log("Logged-in User:", loggedInUser);
            {
 
                id: "popup1",
        if (!loggedInUser) {
                title: "Free Legal Consultation <br> Riverview Legal Group (Ontario)",
            console.log("User is logged out, scheduling popups.");
                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/",
            // Define popups
                linkText: "Book a Consultation",
            var popups = [
                eventLabel: "Legal Consultation Popup",
                {
                position: "top: 20%; left: 50%; transform: translate(-50%, 0);"
                    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",
                id: "popup2",
                    link: "https://riverview.legal/about-us/",
                title: "Are you a Legal Professional?",
                    linkText: "Book a Consultation",
                content: "Support our work with the Caselaw Ninja on Patreon.<br>Become a member today",
                    eventLabel: "Legal Consultation Popup",
                link: "https://patreon.com/CaselawNinja",
                    position: "top: 20%; left: 50%; transform: translate(-50%, 0);"
                linkText: "Join Here",
                },
                eventLabel: "Patreon Popup",
                {
                position: "top: 60%; 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 sendAnalyticsEvent(label) {
            function showPopup(popupData) {
            if (typeof gtag === "function") {
                if (sessionStorage.getItem(popupData.id)) return; // Prevent duplicate popups
                gtag('event', 'popup_shown', {
               
                     'event_category': 'Engagement',
                console.log("Triggering popup: " + popupData.id);
                     'event_label': label,
               
                     'value': 1
                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(); });
                 });
                 });
            } else {
                console.warn("Google Analytics not detected.");
             }
             }
        }


        function showPopup(popupData) {
            setTimeout(function () { showPopup(popups[0]); }, popupTimeout1);
            if (sessionStorage.getItem(popupData.id)) return; // Prevent duplicate popups
             setTimeout(function () { showPopup(popups[1]); }, popupTimeout2);
              
            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);
             // Apply blur effect after third ==Sub Header==
             sendAnalyticsEvent(popupData.eventLabel);
             var $subHeaders = $("h2");
            sessionStorage.setItem(popupData.id, "true");


             $(".popup-close").click(function () {
             if ($subHeaders.length >= 3) {
                 $(this).closest(".popup-overlay").fadeOut(function() { $(this).remove(); });
                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>
                `);


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


        if (!loggedInUser) {
                // Stripe Checkout Handler
            console.log("User is logged out, scheduling popups.");
                $("#subscribe-button").click(function () {
            setTimeout(function () {
                    var stripe = Stripe("your_stripe_publishable_key");
                showPopup(popups[0]);
                    stripe.redirectToCheckout({
            }, popupTimeout1);
                        sessionId: "your_checkout_session_id"
                    }).then(function (result) {
                        if (result.error) {
                            alert(result.error.message);
                        }
                    });
                });


            setTimeout(function () {
                // Close Stripe popup
                 showPopup(popups[1]);
                $("#stripe-popup .popup-close").click(function () {
             }, popupTimeout2);
                    $("#stripe-popup").fadeOut(function() { $(this).remove(); });
                 });
             } else {
                console.warn("Not enough headers found for blur effect.");
            }
         }
         }
     });
     });
Line 99: Line 142:
     ".popup-close:hover {" +
     ".popup-close:hover {" +
     "color: red;" +
     "color: red;" +
     "}"
     "}"+
    ".blurred-content { filter: blur(8px) !important; }"
);
);
// 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:04, 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
        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; }"
);
Retrieved from "https://riverview.legal/encyclopedia/index.php?title=MediaWiki:Common.js&oldid=24609"