MediaWiki:Common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.
Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
document.addEventListener('DOMContentLoaded', function () {
    console.log('JavaScript נטען בהצלחה'); // הודעת בדיקה
    const toggleButton = document.createElement('button');
    toggleButton.innerText = 'החלף למצב יום/לילה';
    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 () {
    // 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);
})();