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.

/**
 * Apogea Wiki Common JavaScript
 */

(function() {
    'use strict';

    /**
     * Sprite preview for Page Forms
     */
    function initSpritePreview() {
        console.log('[Apogea] Initializing sprite preview...');
        
        // Page Forms uses names like "ItemEntry[sprite]" or "ItemEntry[1][sprite]" for multiple
        var inputs = document.querySelectorAll('input');
        
        inputs.forEach(function(input) {
            var name = input.getAttribute('name') || '';
            
            // Match sprite fields
            if (name.indexOf('sprite]') === -1) return;
            
            console.log('[Apogea] Found sprite field:', name);
            
            // Skip if already has preview
            if (input.dataset.hasPreview) return;
            input.dataset.hasPreview = 'true';
            
            // Create preview container
            var preview = document.createElement('div');
            preview.className = 'sprite-preview';
            preview.style.cssText = 'margin-top: 5px; min-height: 48px;';
            input.parentNode.appendChild(preview);
            
            // Find corresponding name field in same row/section
            var container = input.closest('tr') || input.closest('fieldset') || input.parentNode.parentNode;
            var nameInput = null;
            if (container) {
                var allInputs = container.parentNode.querySelectorAll('input');
                allInputs.forEach(function(inp) {
                    var n = inp.getAttribute('name') || '';
                    if (n.indexOf('[name]') !== -1) {
                        nameInput = inp;
                    }
                });
            }
            
            function updatePreview() {
                var spriteName = input.value.trim();
                
                // Fall back to name field if sprite is empty
                if (!spriteName && nameInput) {
                    spriteName = nameInput.value.trim();
                }
                
                if (!spriteName) {
                    preview.innerHTML = '<span style="color: #888;">No preview</span>';
                    return;
                }
                
                console.log('[Apogea] Loading sprite preview for:', spriteName);
                
                // Build image URL directly using Special:FilePath
                var img = document.createElement('img');
                img.className = 'pixel-sprite';
                img.style.cssText = 'image-rendering: pixelated; max-width: 64px;';
                img.alt = spriteName;
                
                // Try loading the image
                img.onload = function() {
                    preview.innerHTML = '';
                    preview.appendChild(img);
                };
                img.onerror = function() {
                    preview.innerHTML = '<span style="color: #c33;">Sprite not found: ' + spriteName + '</span>';
                };
                
                img.src = '/wiki/Special:FilePath/' + encodeURIComponent(spriteName + '.png');
            }
            
            // Update on input change (debounced)
            var timeout;
            input.addEventListener('input', function() {
                clearTimeout(timeout);
                timeout = setTimeout(updatePreview, 500);
            });
            
            // Also update when name field changes
            if (nameInput) {
                nameInput.addEventListener('input', function() {
                    if (!input.value.trim()) {
                        clearTimeout(timeout);
                        timeout = setTimeout(updatePreview, 500);
                    }
                });
            }
            
            // Initial preview
            updatePreview();
        });
    }

    // Run on page load and observe for dynamically added fields
    function init() {
        console.log('[Apogea] Common.js loaded');
        initSpritePreview();
        
        // Watch for dynamically added fields (Page Forms "Add another")
        var observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.addedNodes.length) {
                    initSpritePreview();
                }
            });
        });
        
        var form = document.querySelector('#pfForm, .pfForm, form');
        if (form) {
            observer.observe(form, { childList: true, subtree: true });
        }
    }

    // Wait for DOM
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }

})();