MediaWiki:LinksPanel.js

/*
 * Kenshi Wiki - LinksPanel.js
 * Creates and manages the desktop pop-out panel for external links.
 * This script is loaded on demand by Citizen.js.
 */
(function ($) {
    // Use strict mode to prevent common errors.
    'use strict';

    // Define our main panel object to keep our code organized.
    const linksPanel = {
        // A flag to check if we've already built the panel's HTML.
        isInitialized: false,

        // The main entry point. This is what gets called when the script loads.
        init: function () {
            // Only build the panel's HTML once.
            if (!this.isInitialized) {
                this.create();
                this.isInitialized = true;
                console.log('LinksPanel initialized and created.');
            }
            this.show();
        },

        // This function builds the panel's HTML structure and attaches events.
        create: function () {
    		// Create the elements using jQuery.
    		const $overlay = $('<div>').attr('id', 'desktop-links-overlay');
    		const $panel = $('<div>').attr('id', 'desktop-links-panel');
    		const $header = $('<div>').addClass('links-panel-header');
    		const $content = $('<div>').addClass('links-panel-content');
    		const $closeButton = $('<button>').addClass('links-panel-close-button').html('&times;');
    		const $title = $('<h3>').text('External Links & Resources');

    		// --- NEW: Define categories and create their containers ---
    		const categories = {
        		lofi: { title: 'LoFi Games Official', container: $('<div>').addClass('links-panel-grid') },
        		stores: { title: 'Where to Buy', container: $('<div>').addClass('links-panel-grid') },
        		community: { title: 'Community', container: $('<div>').addClass('links-panel-grid') },
        		modding: { title: 'Modding', container: $('<div>').addClass('links-panel-grid') }
    		};

    		// --- NEW: Loop through icons and place them in the correct category container ---
    		if (window.masterIconList && Array.isArray(window.masterIconList)) {
        		window.masterIconList.forEach(function(iconData) {
            		if (iconData.category && categories[iconData.category]) {
                		const $link = $('<a>').addClass('links-panel-item').attr({ href: iconData.href, title: iconData.title, target: '_blank', rel: 'noopener noreferrer' });
                		const $icon = $('<img>').addClass('links-panel-icon').attr('src', iconData.iconSrc);
                		const $label = $('<span>').addClass('links-panel-label').text(iconData.title);
                		$link.append($icon, $label);
                		categories[iconData.category].container.append($link);
            		}
        		});
    		}

    		// --- NEW: Assemble the content area with categories ---
    		for (const key in categories) {
        		// Only add the category section if it contains at least one icon.
        		if (categories[key].container.children().length > 0) {
            		const $categorySection = $('<div>').addClass('links-panel-category');
            		const $categoryTitle = $('<h4>').text(categories[key].title);
            		$categorySection.append($categoryTitle, categories[key].container);
            		$content.append($categorySection);
        		}
    		}
    
    		// Assemble the final panel.
    		$header.append($title, $closeButton);
    		$panel.append($header, $content);
    		$overlay.append($panel);

    		// Append to the body and attach event handlers.
    		$('body').append($overlay);
    		$closeButton.on('click', this.hide);
    		$overlay.on('click', function (e) {
        		if (e.target.id === 'desktop-links-overlay') {
            		linksPanel.hide();
        		}
    		});
		},

        // Function to show the panel with a fade-in effect.
        show: function () {
            $('#desktop-links-overlay').fadeIn(200);
        },

        // Function to hide the panel with a fade-out effect.
        hide: function () {
            $('#desktop-links-overlay').fadeOut(200);
        }
    };

    // --- Execute the Script ---
    // This is the only line that runs when mw.loader.getScript() loads this file.
    // It kicks off the entire process.
    linksPanel.init();

})(jQuery);