MediaWiki:Common.js: Difference between revisions

Revision as of 08:25, 5 January 2025


(function () {
    // Check if the notification was shown within the last 30 days
    const lastShown = localStorage.getItem('bookBannerLastShown');
    const now = new Date().getTime();
    const ONE_MONTH = 30 * 24 * 60 * 60 * 1000;

    if (lastShown && now - lastShown < ONE_MONTH) {
        return; // Do not show the banner
    }

    // Function to display the popup
    const showPopup = () => {
        // Create the popup element
        const bannerHTML = `
            <div id="book-banner-popup" class="book-banner-popup">
                <h3>Subscribe to our newsletter for a free eBook, Regenaissance: The Call to Heal by Sharon Gal-Or, and expert MRV insights delivered to your inbox!</h3>
                <div>
                    <a href="https://iefwiki.substack.com/embed/" target="_blank" class="book-banner-link" style="color: #121212;">Click to Subscribe</a>
                </div>
                <button id="book-banner-close" class="book-banner-close">×</button>
            </div>
        `;
        const container = document.createElement('div');
        container.innerHTML = bannerHTML;
        document.body.appendChild(container);

        // Set display to block to ensure the popup is visible
        const bannerPopup = document.getElementById('book-banner-popup');
        bannerPopup.style.display = 'block';

        // Add event listener for the close button
        document.getElementById('book-banner-close').addEventListener('click', function () {
            bannerPopup.style.display = 'none';
            localStorage.setItem('bookBannerLastShown', new Date().getTime());
        });
    };

    // Delay the popup display by 5 seconds
    setTimeout(showPopup, 5000);
})();

@@ Line 1: / Line 1: @@
-document.addEventListener('DOMContentLoaded', function () {
-    console.log('JavaScript loaded successfully!');
-    const toggleButton = document.createElement('button');
-    toggleButton.innerText = 'Toggle Day/Night Mode';
-    toggleButton.classList.add('toggle-button');
-    document.body.appendChild(toggleButton);
-    toggleButton.addEventListener('click', function () {
-        const isDark = document.body.classList.toggle('dark-mode');
-        localStorage.setItem('theme', isDark ? 'dark' : 'light');
-    });
-    if (localStorage.getItem('theme') === 'dark') {
-        document.body.classList.add('dark-mode');
-    }
-});
-const lightThemeVars = {
-	"background-color-base": "#e6e6dd", // Light Beige
-	"text-color-base": "#000000"
-};
-const darkThemeVars = {
-	"background-color-base": "#ededed", // light gray, dark theme turns to #121212
-	"text-color-base": "#2e2e2e"
-};
-// Function to update CSS variables
-function applyThemeVariables(themeVars) {
-	Object.keys(themeVars).forEach(key => {
-		document.documentElement.style.setProperty(`--${key}`, themeVars[key]);
-	});
-}
-// Function to update .mw-logo-icon styles based on theme
-function updateLogoIconStyles(isDarkMode) {
-	const logoIcon = document.querySelector('.mw-logo-icon');
-	if (logoIcon) {
-		if (isDarkMode) {
-			// Apply dark mode styles
-			logoIcon.style.mixBlendMode = 'difference';
-			logoIcon.style.backgroundColor = 'transparent';
-		} else {
-			// Reset styles for light mode
-			logoIcon.style.mixBlendMode = '';
-			logoIcon.style.backgroundColor = '';
-		}
-	}
-}
-// Observer to monitor class changes on <html> element
-const observer = new MutationObserver(() => {
-	const isDarkMode = document.documentElement.classList.contains("skin-theme-clientpref-night");
-	applyThemeVariables(isDarkMode ? darkThemeVars : lightThemeVars);
-	updateLogoIconStyles(isDarkMode); // Update logo icon styles based on theme
-});
-// Observe changes to the class attribute on <html>
-observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
-// Initial application based on current class list
-const isDarkMode = document.documentElement.classList.contains("skin-theme-clientpref-night");
-applyThemeVariables(isDarkMode ? darkThemeVars : lightThemeVars);
-updateLogoIconStyles(isDarkMode); // Apply logo icon styles based on the initial theme
 (function () {