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 4: Line 4:
     $(document).ready(function () {
     $(document).ready(function () {
         var popupShown = sessionStorage.getItem("popupShown");
         var popupShown = sessionStorage.getItem("popupShown");
         var popupTimeout = 120000; // 2 minutes in milliseconds
         var popupTimeout = 120000; // 2 minutes
         var timeoutTriggered = false;
         var timeoutTriggered = false;


         // Function to send analytics event
         // Define the two popups
         function sendAnalyticsEvent() {
         var popups = [
             if (typeof gtag === "function") {
             {
                 gtag('event', 'popup_shown', {
                 title: "Free Legal Consultation <br> Riverview Legal Group (Ontario)",
                    'event_category': 'Engagement',
                 content: "Our primary focus is the Ontario Landlord and Tenant Board.<br>Call us for help at (888) 655-1076",
                    'event_label': 'Legal Consultation Popup',
                 link: "https://riverview.legal/about-us/",
                    'value': 1
                linkText: "Book a Consultation",
                });
                 eventLabel: "Legal Consultation Popup"
            } else {
             },
                console.warn("Google Analytics not detected.");
             {
            }
                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",
        // Function to display the popup
                linkText: "Join Here",
        function showPopup() {
                 eventLabel: "Patreon Popup"
            var popup = $('<div id="popup-overlay">' +
                '<div id="popup-box">' +
                '<h2>Free Legal Consultation <br> Riverview Legal Group (Ontario)</h2>' +
                 '<p>Our primary focus is the Ontario Landlord and Tenant Board.</p>' +
                '<p>Call us for help at (888) 655-1076</p>' +
                 '<a href="https://riverview.legal/about-us/" target="_blank" class="popup-button">Book a Consultation</a>' +
                '<span id="popup-close">×</span>' +
                 '</div>' +
                '</div>');
 
            $("body").append(popup);
             sessionStorage.setItem("popupShown", "true");
 
             // Send Google Analytics event
            sendAnalyticsEvent();
 
            // Close popup on click
            $("#popup-close").click(function () {
                 $("#popup-overlay").fadeOut();
            });
 
            // Remove scroll listener after triggering
            $(document).off("scroll", scrollHandler);
        }
 
        // Function to handle scroll and show popup
        function scrollHandler() {
            if (!popupShown || timeoutTriggered) {
                 showPopup();
             }
             }
         }
         ];
 
        // Check if the user is logged in
        var loggedInUser = mw.config.get('wgUserName');
        console.log("Logged-in User:", loggedInUser);
 
        // Reset popup flag on new page load
        sessionStorage.removeItem("popupShown");
 
        // Trigger popup if user is logged out or timeout triggered
        if (!loggedInUser) {
            console.log("User is logged out, showing popup.");
            $(document).one("scroll", scrollHandler);
        }
 
        // Set timeout to allow popup after 2 minutes (if user is not logged in)
        if (!loggedInUser) {
            setTimeout(function () {
                timeoutTriggered = true;
                $(document).one("scroll", scrollHandler);
            }, popupTimeout);
        }
    });
});
 
// Add CSS styles for the popup
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;" +
    "}"
);


mw.loader.using(['jquery', 'mediawiki.user'], function () {
        // Choose a popup randomly or based on logic
    $(document).ready(function () {
        var selectedPopup = popups[Math.floor(Math.random() * popups.length)];
        var popupShown = sessionStorage.getItem("popupShown");
        var popupTimeout = 180000; // 3 minutes in milliseconds
        var timeoutTriggered = false;


        // Function to send analytics event
         function sendAnalyticsEvent(label) {
         function sendAnalyticsEvent() {
             if (typeof gtag === "function") {
             if (typeof gtag === "function") {
                 gtag('event', 'popup_shown', {
                 gtag('event', 'popup_shown', {
                     'event_category': 'Engagement',
                     'event_category': 'Engagement',
                     'event_label': 'Patreon Popup',
                     'event_label': label,
                     'value': 1
                     'value': 1
                 });
                 });
Line 137: Line 40:
         }
         }


        // Function to display the popup
         function showPopup() {
         function showPopup() {
             var popup = $('<div id="popup-overlay">' +
             var popup = $('<div id="popup-overlay">' +
                 '<div id="popup-box">' +
                 '<div id="popup-box">' +
                 '<h2>Are you a Legal Professional?</h2>' +
                 '<h2>' + selectedPopup.title + '</h2>' +
                 '<p>Support our work with the Caselaw Ninja on Patreon</p>' +
                 '<p>' + selectedPopup.content + '</p>' +
                '<p>Become a member today</p>' +
                 '<a href="' + selectedPopup.link + '" target="_blank" class="popup-button">' + selectedPopup.linkText + '</a>' +
                 '<a href="https://patreon.com/CaselawNinja" target="_blank" class="popup-button">Join Here</a>' +
                 '<span id="popup-close">×</span>' +
                 '<span id="popup-close">×</span>' +
                 '</div>' +
                 '</div>' +
Line 151: Line 52:
             $("body").append(popup);
             $("body").append(popup);
             sessionStorage.setItem("popupShown", "true");
             sessionStorage.setItem("popupShown", "true");
            sendAnalyticsEvent(selectedPopup.eventLabel);


            // Send Google Analytics event
            sendAnalyticsEvent();
            // Close popup on click
             $("#popup-close").click(function () {
             $("#popup-close").click(function () {
                 $("#popup-overlay").fadeOut();
                 $("#popup-overlay").fadeOut();
             });
             });


            // Remove scroll listener after triggering
             $(document).off("scroll", scrollHandler);
             $(document).off("scroll", scrollHandler);
         }
         }


        // Function to handle scroll and show popup
         function scrollHandler() {
         function scrollHandler() {
             if (!popupShown || timeoutTriggered) {
             if (!popupShown || timeoutTriggered) {
Line 171: Line 67:
         }
         }


        // Check if the user is logged in
         var loggedInUser = mw.config.get('wgUserName');
         var loggedInUser = mw.config.get('wgUserName');
         console.log("Logged-in User:", loggedInUser);
         console.log("Logged-in User:", loggedInUser);


        // Reset popup flag on new page load
         sessionStorage.removeItem("popupShown");
         sessionStorage.removeItem("popupShown");


        // Trigger popup if user is logged out or timeout triggered
         if (!loggedInUser) {
         if (!loggedInUser) {
            console.log("User is logged out, showing popup.");
             $(document).one("scroll", scrollHandler);
             $(document).one("scroll", scrollHandler);
        }
        // Set timeout to allow popup after 2 minutes (if user is not logged in)
        if (!loggedInUser) {
             setTimeout(function () {
             setTimeout(function () {
                 timeoutTriggered = true;
                 timeoutTriggered = true;
Line 194: Line 82:
});
});


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

Revision as of 05:06, 25 February 2025

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