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...');
        
        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
            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;
                }
                
                // Replace underscores with spaces for the filename
                var fileName = spriteName.replace(/_/g, ' ') + '.png';
                
                console.log('[Apogea] Loading sprite preview for:', fileName);
                
                // Use MediaWiki API to get the actual file URL and dimensions
                $.ajax({
                    url: mw.util.wikiScript('api'),
                    data: {
                        action: 'query',
                        titles: 'File:' + fileName,
                        prop: 'imageinfo',
                        iiprop: 'url|size',
                        format: 'json'
                    },
                    dataType: 'json',
                    success: function(data) {
                        var pages = data.query.pages;
                        var url = null;
                        var width = null;
                        var height = null;
                        
                        for (var id in pages) {
                            if (pages[id].imageinfo && pages[id].imageinfo[0]) {
                                url = pages[id].imageinfo[0].url;
                                width = pages[id].imageinfo[0].width;
                                height = pages[id].imageinfo[0].height;
                                break;
                            }
                        }
                        
                        if (url) {
                            // Scale up 2x
                            var scaledWidth = (width || 32) * 2;
                            var scaledHeight = (height || 32) * 2;
                            preview.innerHTML = '<img src="' + url + '" alt="' + spriteName + '" class="pixel-sprite" style="image-rendering: pixelated; width: ' + scaledWidth + 'px; height: ' + scaledHeight + 'px;">';
                        } else {
                            preview.innerHTML = '<span style="color: #c33;">Sprite not found: ' + fileName + '</span>';
                        }
                    },
                    error: function() {
                        preview.innerHTML = '<span style="color: #888;">Preview unavailable</span>';
                    }
                });
            }
            
            // 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
    function init() {
        console.log('[Apogea] Common.js loaded');
        initSpritePreview();
        
        // Watch for dynamically added fields
        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 and jQuery
    $(document).ready(init);

})();