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 04:47, 18 February 2025 (view source) Sharvey (talk | contribs) mNo edit summary ← Older edit		Revision as of 04:48, 18 February 2025 (view source) Sharvey (talk | contribs) mNo edit summary Newer edit →
Line 2:		Line 2:
	$(document).ready(function () {		mw.loader.using(['jquery'], function () {
	let popupShown = localStorage.getItem("popupShown");		$(document).ready(function () {
			var popupShown = localStorage.getItem("popupShown");
	function showPopup() {		function showPopup() {
	let popup = $(`		var popup = $('<div id="popup-overlay">' +
	<div id="popup-overlay">		'<div id="popup-box">' +
	<div id="popup-box">		'<h2>Need Tenant Legal Help?</h2>' +
	<h2>Need Tenant Legal Help?</h2>		'<p>We specialize in helping tenants at the Landlord and Tenant Board.</p>' +
	<p>We specialize in helping tenants at the Landlord and Tenant Board.</p>		'<a href="https://riverview.legal" target="_blank" class="popup-button">Book a Consultation</a>' +
	<a href="https://riverview.legal" target="_blank" class="popup-button">Book a Consultation</a>		'<span id="popup-close">×</span>' +
	<span id="popup-close">×</span>		'</div>' +
	</div>		'</div>');
	</div>
	`);
	$("body").append(popup);		$("body").append(popup);
	localStorage.setItem("popupShown", "true");		localStorage.setItem("popupShown", "true");
	// Close popup on click		// Close popup on click
	$("#popup-close").click(function () {		$("#popup-close").click(function () {
	$("#popup-overlay").fadeOut();		$("#popup-overlay").fadeOut();
	});		});
	// Remove scroll listener after triggering		// Remove scroll listener after triggering
	$(document).off("scroll", showPopup);		$(document).off("scroll", showPopup);
	}		}
	// Trigger popup when user scrolls for the first time		// Ensure script runs when user scrolls
	if (!popupShown) {		if (!popupShown) {
	$(document).one("scroll", showPopup);		$(document).one("scroll", showPopup);
	}		}
			});
	});		});
	// CSS Styling		// Add CSS styles
	mw.util.addCSS(`		mw.util.addCSS(
	#popup-overlay {		"#popup-overlay {" +
	position: fixed;		"position: fixed;" +
	top: 0;		"top: 0;" +
	left: 0;		"left: 0;" +
	width: 100%;		"width: 100%;" +
	height: 100%;		"height: 100%;" +
	background: rgba(0, 0, 0, 0.6);		"background: rgba(0, 0, 0, 0.6);" +
	display: flex;		"display: flex;" +
	justify-content: center;		"justify-content: center;" +
	align-items: center;		"align-items: center;" +
	z-index: 9999;		"z-index: 9999;" +
	}		"}" +
	#popup-box {		"#popup-box {" +
	background: white;		"background: white;" +
	padding: 20px;		"padding: 20px;" +
	border-radius: 10px;		"border-radius: 10px;" +
	text-align: center;		"text-align: center;" +
	width: 300px;		"width: 300px;" +
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);		"box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);" +
	position: relative;		"position: relative;" +
	}		"}" +
	.popup-button {		".popup-button {" +
	display: inline-block;		"display: inline-block;" +
	background: #007bff;		"background: #007bff;" +
	color: white;		"color: white;" +
	padding: 10px;		"padding: 10px;" +
	text-decoration: none;		"text-decoration: none;" +
	border-radius: 5px;		"border-radius: 5px;" +
	margin-top: 10px;		"margin-top: 10px;" +
	}		"}" +
	#popup-close {		"#popup-close {" +
	position: absolute;		"position: absolute;" +
	top: 10px;		"top: 10px;" +
	right: 15px;		"right: 15px;" +
	cursor: pointer;		"cursor: pointer;" +
	font-size: 20px;		"font-size: 20px;" +
	}		"}"
	`);		);

---

Revision as of 04:48, 18 February 2025

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


mw.loader.using(['jquery'], function () {
    $(document).ready(function () {
        var popupShown = localStorage.getItem("popupShown");

        function showPopup() {
            var popup = $('<div id="popup-overlay">' +
                '<div id="popup-box">' +
                '<h2>Need Tenant Legal Help?</h2>' +
                '<p>We specialize in helping tenants at the Landlord and Tenant Board.</p>' +
                '<a href="https://riverview.legal" target="_blank" class="popup-button">Book a Consultation</a>' +
                '<span id="popup-close">×</span>' +
                '</div>' +
                '</div>');

            $("body").append(popup);
            localStorage.setItem("popupShown", "true");

            // Close popup on click
            $("#popup-close").click(function () {
                $("#popup-overlay").fadeOut();
            });

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

        // Ensure script runs when user scrolls
        if (!popupShown) {
            $(document).one("scroll", showPopup);
        }
    });
});

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