MediaWiki:Common.js

/* Add spoiler warning popup for first-time visitors */
mw.loader.using(['mediawiki.api', 'mediawiki.util'], function() {
    // Debug mode - set to true to always show the popup
    var debugMode = false;
    
    // Check if user has seen the warning before (or if in debug mode)
    if (debugMode || !mw.cookie.get('spoilerWarningShown')) {
        // Create styles for light/dark mode
        var style = document.createElement('style');
        style.textContent = '@media (prefers-color-scheme: dark) { ' +
            '.spoiler-warning { background: #202020 !important; color: #ffffff !important; }' +
            '.spoiler-warning .subtext { color: #bbbbbb !important; }' +
        '} ' +
        '@media (prefers-color-scheme: light) { ' +
            '.spoiler-warning { background: #ffffff !important; color: #000000 !important; }' +
            '.spoiler-warning .subtext { color: #666666 !important; }' +
        '}';
        document.head.appendChild(style);

        // Create overlay
        var overlay = document.createElement('div');
        overlay.style.position = 'fixed';
        overlay.style.top = '0';
        overlay.style.left = '0';
        overlay.style.right = '0';
        overlay.style.bottom = '0';
        overlay.style.background = 'rgba(0, 0, 0, 0.5)';
        overlay.style.zIndex = '9999';
        overlay.style.cursor = 'pointer';

        // Create popup container
        var popup = document.createElement('div');
        popup.className = 'spoiler-warning';
        popup.style.position = 'fixed';
        popup.style.top = '50%';
        popup.style.left = '50%';
        popup.style.transform = 'translate(-50%, -50%)';
        popup.style.padding = '20px';
        popup.style.textAlign = 'center';
        popup.style.zIndex = '10000';
        popup.style.maxWidth = '400px';
        popup.style.borderRadius = '8px';
        popup.style.boxShadow = '0 2px 10px rgba(0,0,0,0.1)';

        // Create the main text with "spoilers" in normal weight
        var message = document.createElement('div');
        message.style.marginBottom = '5px';
        message.style.fontSize = '14px';
        
        var textBefore = document.createTextNode('This wiki contains ');
        var spoilersSpan = document.createElement('span');
        spoilersSpan.textContent = 'spoilers';
        var textAfter = document.createTextNode(' for the manga until the latest chapter.');
        
        message.appendChild(textBefore);
        message.appendChild(spoilersSpan);
        message.appendChild(textAfter);

        // Create subtext
        //var subMessage = document.createElement('div');
        //subMessage.textContent = 'By continuing, you agree to accept the risk of spoilers.';
        //subMessage.style.fontSize = '12px';
        //subMessage.className = 'subtext';
        //subMessage.style.marginBottom = '5px';

        // Create "click anywhere" text
        var clickText = document.createElement('div');
        clickText.textContent = 'Click anywhere to continue.';
        clickText.style.fontSize = '14px';
        clickText.className = 'spoiler';

        // Function to close popup and set cookie
        function closePopup() {
            // Set cookie to expire in 365 days
            mw.cookie.set('spoilerWarningShown', '1', {
                expires: 365 * 24 * 60 * 60,
                path: '/'
            });
            // Remove popup, overlay, and style
            document.body.removeChild(popup);
            document.body.removeChild(overlay);
            document.head.removeChild(style);
        }

        // Add click handlers
        overlay.onclick = closePopup;
        popup.onclick = function(e) {
            e.stopPropagation(); // Prevent clicks on popup from triggering overlay click
            closePopup();
        };

        // Add debug text if in debug mode
        if (debugMode) {
            var debugText = document.createElement('div');
            debugText.textContent = '(Debug Mode Active)';
            debugText.style.fontSize = '10px';
            debugText.className = 'subtext';
            popup.appendChild(debugText);
        }

        // Assemble and show popup
        popup.appendChild(message);
       // popup.appendChild(subMessage);
        popup.appendChild(clickText);
        document.body.appendChild(overlay);
        document.body.appendChild(popup);
    }
});