Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Common.js: Difference between revisions

MediaWiki interface page
No edit summary
mNo edit summary
 
(93 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* Any JavaScript here will be loaded for all users on every page load. */
/* Any JavaScript here will be loaded for all users on every page load. */
$(function(){
$(document).ready(function () {
  $('.card').on('mousenter', function(event){
     setTimeout(() => {
     event.preventDefault();
        $('body').addClass('fade-in');
    $(this).toggleClass('hovered');
     }, 100); // 0.1s delay before showing content
  });
  $('.card').on('mouseleave', function(event){
    event.preventDefault();
     $(this).toggleClass('hovered');
  });
});
});


$(document).ready(function () {
    // Immediately inject the loading screen before anything else
    var loadingScreen = document.createElement("div");
    loadingScreen.id = "loading-screen";
    loadingScreen.innerHTML =
        `<div class="loading-circle"></div>
        <p id="loading-message">Loading...</p>`;
    document.body.prepend(loadingScreen);


$(document).ready(function() {
    // Create the <p> tag dynamically to display messages
    var categories = mw.config.get('wgCategories');
    var messageTag = document.createElement("p");
    messageTag.id = "dynamic-message";
    loadingScreen.appendChild(messageTag); // Add the new message tag to the loading screen
 
    // Check if it's the user's first visit by using localStorage
    if (!localStorage.getItem("visitedBefore")) {
        localStorage.setItem("visitedBefore", "true");
 
        // Show the welcome and preload messages immediately
        document.getElementById("dynamic-message").innerHTML = "Welcome to the Chrome Engine Modding Wiki ❤️<br>Uh oh I have never seen you here before, let me preload some stuff";
 
        // After 3 seconds, switch to the random message
        setTimeout(() => {
            displayRandomMessage();
        }, 8000);  // Wait for 8 seconds before changing the message
    } else {
        // If not first visit, just show the loading message as normal
        setTimeout(() => {
            displayRandomMessage();
        }, 100);  // Wait for 0.1 second to show the random message
    }
 
    // Function to display a random message
    function displayRandomMessage() {
        var messages = [
            "Hold on, just a second while we get things ready for you!",
            "Almost done loading everything for you!",
            "Preloading the cool stuff... be right there!"
        ];
        var randomMessage = messages[Math.floor(Math.random() * messages.length)];
        document.getElementById("dynamic-message").innerHTML = randomMessage;
    }


    // Apply background styles based on categories
    var categories = mw.config.get("wgCategories");
     var categoryBackgrounds = {
     var categoryBackgrounds = {
         'Dead Island': ['https://cemodding.wiki/images/5/5b/Dead_islan_background.png'],
         "Dead Island": ["https://cemodding.wiki/images/5/5b/Dead_islan_background.png"],
         'Dying Light': ['https://cemodding.wiki/images/f/fe/Dying_light.png'],
         "Dying Light": ["https://cemodding.wiki/images/f/fe/Dying_light.png"],
         'Call of Juarez: Gunslinger': ['https://cemodding.wiki/images/4/4b/Call_of_juaez_gunslinger.png'],
         "Call of Juarez: Gunslinger": ["https://cemodding.wiki/images/4/4b/Call_of_juaez_gunslinger.png"],
         'Dead Island Riptide': ['https://cemodding.wiki/images/b/b6/Random_project_di_riptide_1.png'],
         "Dead Island: Riptide": ["https://cemodding.wiki/images/b/b6/Random_project_di_riptide_1.png"],
         'Dead Island Riptide DE': ['https://cemodding.wiki/images/0/09/Dead_island_riptide_DE.png'],
         "Dead Island: Riptide DE": ["https://cemodding.wiki/images/0/09/Dead_island_riptide_DE.png"],
         'Call of Juarez: BiB': ['https://cemodding.wiki/images/2/24/Project_juaez_no_title_1.png'],
         "Call of Juarez: BiB": ["https://cemodding.wiki/images/2/24/Project_juaez_no_title_1.png"],
         'Call of Juarez: The Cartel': ['https://cemodding.wiki/images/6/64/Callofjuarezcartel.png'],
         "Call of Juarez: The Cartel": ["https://cemodding.wiki/images/6/64/Callofjuarezcartel.png"],
         'Call of Juarez': [
         "Call of Juarez": [
             'https://cemodding.wiki/images/c/cf/Call_of_juarez_background_1.png',
             "https://cemodding.wiki/images/c/cf/Call_of_juarez_background_1.png",
             'https://cemodding.wiki/images/3/38/Call_of_juarez_background_2.png'
             "https://cemodding.wiki/images/3/38/Call_of_juarez_background_2.png"
         ],
         ],
         'Dead Island DE': ['https://cemodding.wiki/images/4/45/Dead_island_DE.png'],
         "Dead Island DE": ["https://cemodding.wiki/images/4/45/Dead_island_DE.png"],
         'Dying Light: The Beast': [
         "Dying Light: The Beast": [
             'https://cemodding.wiki/images/1/12/Dying_light_the_beast.png',
             "https://cemodding.wiki/images/1/12/Dying_light_the_beast.png",
             'https://cemodding.wiki/images/c/c3/Dying_light_the_beast_2.png'
             "https://cemodding.wiki/images/c/c3/Dying_light_the_beast_2.png"
         ],
         ],
         'Dying Light 2': [
         "Dying Light 2": [
             'https://cemodding.wiki/images/0/04/Dying_light_2.png',
             "https://cemodding.wiki/images/0/04/Dying_light_2.png",
             'https://cemodding.wiki/images/0/02/Dying_light_2_.png',
             "https://cemodding.wiki/images/0/02/Dying_light_2_.png",
             'https://cemodding.wiki/images/3/3f/Dying_light_2_some_layered_effects.png'
             "https://cemodding.wiki/images/3/3f/Dying_light_2_some_layered_effects.png"
         ]
         ]
     };
     };


     var defaultBackgrounds = ['https://cemodding.wiki/images/1/1f/Wiki_page.png'];
     var defaultBackgrounds = ["https://cemodding.wiki/images/1/1f/Wiki_page.png"];
 
    function preloadImage(url) {
        var img = new Image();
        img.src = url;
    }
 
    // Preload all background images
    for (var category in categoryBackgrounds) {
        categoryBackgrounds[category].forEach(preloadImage);
    }
    defaultBackgrounds.forEach(preloadImage);


     function getRandomBackground(images) {
     function getRandomBackground(images) {
Line 56: Line 81:
     }
     }


     // Handle background for categories and light mode
     let selectedBackground = null;
 
     function applyBackground() {
     function applyBackground() {
        var backgroundImageSet = false;
         const htmlElement = document.documentElement;
         const htmlElement = document.documentElement;
         const isLightMode = htmlElement.classList.contains("skin-citizen-light");
         const isLightMode = htmlElement.classList.contains("skin-citizen-light");
        const isPureBlackMode = htmlElement.classList.contains("citizen-feature-pure-black-clientpref-0");


        // Apply light mode background if theme is light
         if (isPureBlackMode) {
         if (isLightMode) {
             $("body").css({
             $('body').css({
                 "background": "var(--color-surface-1)",  
                 'background': 'url("https://cemodding.wiki/images/c/c8/Lightgreybackground.png")',
                 "background-repeat": "no-repeat",
                 'background-repeat': 'no-repeat',
                 "background-position": "top center",
                 'background-position': 'top center',
                 "background-size": "cover",
                 'background-size': 'cover',
                 "background-attachment": "fixed"
                 'background-attachment': 'fixed'
            });
 
            // Change header and footer background color for light mode
            $('.mw-header').css({
                'background-color': 'rgba(238, 238, 238, 0.8) !important'
            });
 
            $('.mw-footer').css({
                'background-color': 'rgba(238, 238, 238, 0.8) !important'
             });
             });
            // Change the card and search box background for light mode
            $('.citizen-drawer__card').css({
                'background-color': 'rgba(238, 238, 238, 0.9) !important'
            });
            $('.citizen-search-box').css({
                'background-color': 'rgba(238, 238, 238, 0.9) !important'
            });
         } else {
         } else {
             // Apply category backgrounds if not in light mode
             if (isLightMode) {
            categories.forEach(function(category) {
                 $("body").css({
                 if (categoryBackgrounds[category]) {
                    "background": 'var(--color-surface-1)',
                    var randomImage = getRandomBackground(categoryBackgrounds[category]);
                    "background-repeat": "no-repeat",
                    $('body').css({
                    "background-position": "top center",
                        'background': `linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), url("${randomImage}")`,
                    "background-size": "cover",
                        'background-repeat': 'no-repeat',
                    "background-attachment": "fixed"
                        'background-position': 'top center',
                });
                        'background-size': 'cover',
            } else {
                        'opacity': 1,
                if (!selectedBackground) {
                        'transition': 'opacity 0.5s ease',
                     for (let category of categories) {
                        'background-attachment': 'fixed'
                        if (categoryBackgrounds[category]) {
                     });
                            selectedBackground = getRandomBackground(categoryBackgrounds[category]);
                     backgroundImageSet = true;
                            break;
                        }
                    }
                     if (!selectedBackground) {
                        selectedBackground = getRandomBackground(defaultBackgrounds);
                    }
                 }
                 }
            });


            if (!backgroundImageSet) {
                 $("body").css({
                var randomDefault = getRandomBackground(defaultBackgrounds);
                     "background": `linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), url("${selectedBackground}")`,
                 $('body').css({
                     "background-repeat": "no-repeat",
                     'background': `linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("${randomDefault}")`,
                     "background-position": "top center",
                     'background-repeat': 'no-repeat',
                     "background-size": "cover",
                     'background-position': 'top center',
                     "background-attachment": "fixed"
                     'background-size': 'cover',
                     'background-attachment': 'fixed'
                 });
                 });
             }
             }
            // Reset the styles to default for dark mode
            $('.mw-header').css({
                'background-color': '' // Reset background
            });
            $('.mw-footer').css({
                'background-color': '' // Reset background
            });
            $('.citizen-drawer__card').css({
                'background-color': '' // Reset background
            });
            $('.citizen-search-box').css({
                'background-color': '' // Reset background
            });
         }
         }
     }
     }


    // Run background application on page load
     applyBackground();
     applyBackground();


    // Observe class changes on <html> for theme switching without reloading
     const observer = new MutationObserver(() => {
     const observer = new MutationObserver(() => {
         applyBackground();
         setTimeout(() => applyBackground(), 50);
     });
     });


     observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
     observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
});


    // Show loading screen until everything is ready
    $("#loading-screen").fadeIn();


    var imagesToLoad = [...Object.values(categoryBackgrounds).flat(), ...defaultBackgrounds];
    var loadedImages = 0;


    imagesToLoad.forEach(function (imageUrl) {
        var img = new Image();
        img.onload = function () {
            loadedImages++;
            if (loadedImages === imagesToLoad.length) {
                $("#loading-screen").fadeOut(1000, function () {
                    $(this).remove();
                });
            }
        };
        img.src = imageUrl;
    });
});


function preloadOnHover() {
    $("a").on("mouseenter", function () {
        var url = $(this).attr("href");


        if (url && !$(this).data("preloaded")) {
            var link = document.createElement("link");
            link.rel = "prefetch";
            link.href = url;
            document.head.appendChild(link);


            $(this).data("preloaded", true); // Mark it as preloaded
        }
    });
}


// Run the function when the page loads
$(document).ready(function () {
    preloadOnHover();
});




// Function to trigger file download when the image is clicked
function downloadFile(filePath) {
    var a = document.createElement('a');
    a.href = filePath;
    a.download = '';  // This triggers the download
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);  // Clean up
}




Line 268: Line 298:


$(document).ready(function() {
$(document).ready(function() {
     // Click event for the header or the arrow
     $('.mw-collapsible-header').each(function() {
        // Wrap indicator and spinner inside a container for positioning
        $(this).prepend('<span class="mw-collapsible-icon"><span class="mw-collapsible-indicator">•</span><span class="mw-collapsible-loading hidden"></span></span> ');
    });
 
     $('.mw-collapsible-header').click(function() {
     $('.mw-collapsible-header').click(function() {
         var parentDiv = $(this).closest('.mw-collapsible'); // Get the closest collapsible container
         var parentDiv = $(this).closest('.mw-collapsible');
         var content = parentDiv.find('.mw-collapsible-content'); // Get the collapsible content
         var content = parentDiv.find('.mw-collapsible-content');
         var arrow = $(this).find('.mw-collapsible-arrow'); // Get the arrow inside the header
        var indicator = $(this).find('.mw-collapsible-indicator');
         var spinner = $(this).find('.mw-collapsible-loading');


         // Toggle the collapse/expand state by adding/removing the "mw-collapsed" class
         // Fade out indicator and show spinner at the same position
        indicator.addClass('fade-out');
        setTimeout(() => {
            spinner.removeClass('hidden');
        }, 100);
 
        // Toggle content visibility
         parentDiv.toggleClass('mw-collapsed');
         parentDiv.toggleClass('mw-collapsed');
       
         content.stop(true, true).slideToggle();
        // Toggle visibility of the content with a sliding animation
         content.stop(true, true).slideToggle(); // Stop any ongoing animation before toggling visibility


         // Toggle the arrow direction
         // Restore indicator and hide spinner after animation
         if (parentDiv.hasClass('mw-collapsed')) {
         setTimeout(function() {
             arrow.html('&#x2193;');  
             indicator.removeClass('fade-out');
             arrow.css('transform', 'rotate(0deg)'); // No rotation when collapsed
             spinner.addClass('hidden');
         } else {
         }, 300);
            arrow.html('&#x2193;');
            arrow.css('transform', 'rotate(180deg)'); // Rotate 180 degrees when expanded
        }
     });
     });


     // Ensure that the arrow starts pointing up for expanded sections by default
     // Ensure correct initial state for collapsibles
     $('.mw-collapsible').each(function() {
     $('.mw-collapsible').each(function() {
         var parentDiv = $(this);
         var parentDiv = $(this);
         var content = parentDiv.find('.mw-collapsible-content');
         var content = parentDiv.find('.mw-collapsible-content');
        var arrow = parentDiv.find('.mw-collapsible-header .mw-collapsible-arrow');
 
       
         if (parentDiv.hasClass('mw-collapsed')) {
         if (!parentDiv.hasClass('mw-collapsed')) {
             content.hide();
             content.show(); // Ensure content is visible
            arrow.html('&#x2191;');
            arrow.css('transform', 'rotate(90deg)');  
         } else {
         } else {
             arrow.html('&#x2193;');
             content.show();
            arrow.css('transform', 'rotate(0deg)');  
         }
         }
     });
     });
});
});

Latest revision as of 03:39, 9 March 2025

/* Any JavaScript here will be loaded for all users on every page load. */
$(document).ready(function () {
    setTimeout(() => {
        $('body').addClass('fade-in');
    }, 100); // 0.1s delay before showing content
});

$(document).ready(function () {
    // Immediately inject the loading screen before anything else
    var loadingScreen = document.createElement("div");
    loadingScreen.id = "loading-screen";
    loadingScreen.innerHTML = 
        `<div class="loading-circle"></div>
        <p id="loading-message">Loading...</p>`;
    document.body.prepend(loadingScreen);

    // Create the <p> tag dynamically to display messages
    var messageTag = document.createElement("p");
    messageTag.id = "dynamic-message";
    loadingScreen.appendChild(messageTag); // Add the new message tag to the loading screen

    // Check if it's the user's first visit by using localStorage
    if (!localStorage.getItem("visitedBefore")) {
        localStorage.setItem("visitedBefore", "true");

        // Show the welcome and preload messages immediately
        document.getElementById("dynamic-message").innerHTML = "Welcome to the Chrome Engine Modding Wiki ❤️<br>Uh oh I have never seen you here before, let me preload some stuff";

        // After 3 seconds, switch to the random message
        setTimeout(() => {
            displayRandomMessage();
        }, 8000);  // Wait for 8 seconds before changing the message
    } else {
        // If not first visit, just show the loading message as normal
        setTimeout(() => {
            displayRandomMessage();
        }, 100);  // Wait for 0.1 second to show the random message
    }

    // Function to display a random message
    function displayRandomMessage() {
        var messages = [
            "Hold on, just a second while we get things ready for you!",
            "Almost done loading everything for you!",
            "Preloading the cool stuff... be right there!"
        ];
        var randomMessage = messages[Math.floor(Math.random() * messages.length)];
        document.getElementById("dynamic-message").innerHTML = randomMessage;
    }

    // Apply background styles based on categories
    var categories = mw.config.get("wgCategories");
    var categoryBackgrounds = {
        "Dead Island": ["https://cemodding.wiki/images/5/5b/Dead_islan_background.png"],
        "Dying Light": ["https://cemodding.wiki/images/f/fe/Dying_light.png"],
        "Call of Juarez: Gunslinger": ["https://cemodding.wiki/images/4/4b/Call_of_juaez_gunslinger.png"],
        "Dead Island: Riptide": ["https://cemodding.wiki/images/b/b6/Random_project_di_riptide_1.png"],
        "Dead Island: Riptide DE": ["https://cemodding.wiki/images/0/09/Dead_island_riptide_DE.png"],
        "Call of Juarez: BiB": ["https://cemodding.wiki/images/2/24/Project_juaez_no_title_1.png"],
        "Call of Juarez: The Cartel": ["https://cemodding.wiki/images/6/64/Callofjuarezcartel.png"],
        "Call of Juarez": [
            "https://cemodding.wiki/images/c/cf/Call_of_juarez_background_1.png",
            "https://cemodding.wiki/images/3/38/Call_of_juarez_background_2.png"
        ],
        "Dead Island DE": ["https://cemodding.wiki/images/4/45/Dead_island_DE.png"],
        "Dying Light: The Beast": [
            "https://cemodding.wiki/images/1/12/Dying_light_the_beast.png",
            "https://cemodding.wiki/images/c/c3/Dying_light_the_beast_2.png"
        ],
        "Dying Light 2": [
            "https://cemodding.wiki/images/0/04/Dying_light_2.png",
            "https://cemodding.wiki/images/0/02/Dying_light_2_.png",
            "https://cemodding.wiki/images/3/3f/Dying_light_2_some_layered_effects.png"
        ]
    };

    var defaultBackgrounds = ["https://cemodding.wiki/images/1/1f/Wiki_page.png"];

    function getRandomBackground(images) {
        return images[Math.floor(Math.random() * images.length)];
    }

    let selectedBackground = null;

    function applyBackground() {
        const htmlElement = document.documentElement;
        const isLightMode = htmlElement.classList.contains("skin-citizen-light");
        const isPureBlackMode = htmlElement.classList.contains("citizen-feature-pure-black-clientpref-0");

        if (isPureBlackMode) {
            $("body").css({
                "background": "var(--color-surface-1)", 
                "background-repeat": "no-repeat",
                "background-position": "top center",
                "background-size": "cover",
                "background-attachment": "fixed"
            });
        } else {
            if (isLightMode) {
                $("body").css({
                    "background": 'var(--color-surface-1)',
                    "background-repeat": "no-repeat",
                    "background-position": "top center",
                    "background-size": "cover",
                    "background-attachment": "fixed"
                });
            } else {
                if (!selectedBackground) {
                    for (let category of categories) {
                        if (categoryBackgrounds[category]) {
                            selectedBackground = getRandomBackground(categoryBackgrounds[category]);
                            break;
                        }
                    }
                    if (!selectedBackground) {
                        selectedBackground = getRandomBackground(defaultBackgrounds);
                    }
                }

                $("body").css({
                    "background": `linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), url("${selectedBackground}")`,
                    "background-repeat": "no-repeat",
                    "background-position": "top center",
                    "background-size": "cover",
                    "background-attachment": "fixed"
                });
            }
        }
    }

    applyBackground();

    const observer = new MutationObserver(() => {
        setTimeout(() => applyBackground(), 50);
    });

    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });

    // Show loading screen until everything is ready
    $("#loading-screen").fadeIn();

    var imagesToLoad = [...Object.values(categoryBackgrounds).flat(), ...defaultBackgrounds];
    var loadedImages = 0;

    imagesToLoad.forEach(function (imageUrl) {
        var img = new Image();
        img.onload = function () {
            loadedImages++;
            if (loadedImages === imagesToLoad.length) {
                $("#loading-screen").fadeOut(1000, function () {
                    $(this).remove();
                });
            }
        };
        img.src = imageUrl;
    });
});

function preloadOnHover() {
    $("a").on("mouseenter", function () {
        var url = $(this).attr("href");

        if (url && !$(this).data("preloaded")) {
            var link = document.createElement("link");
            link.rel = "prefetch";
            link.href = url;
            document.head.appendChild(link);

            $(this).data("preloaded", true); // Mark it as preloaded
        }
    });
}

// Run the function when the page loads
$(document).ready(function () {
    preloadOnHover();
});


// Function to trigger file download when the image is clicked
function downloadFile(filePath) {
    var a = document.createElement('a');
    a.href = filePath;
    a.download = '';  // This triggers the download
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);  // Clean up
}


$(function () {
    var categoryList = [];

    // Fetch categories from the API
    $.ajax({
        url: mw.util.wikiScript('api'),
        data: {
            action: 'query',
            list: 'allcategories',
            aclimit: '500',
            format: 'json'
        },
        dataType: 'json',
        success: function (data) {
            categoryList = data.query.allcategories.map(function (cat) {
                return cat['*'];
            });
        }
    });

    function createSuggestionBox(input, suggestions, cursorPosition) {
        $('.category-suggestions').remove(); // Clear old suggestions

        var suggestionBox = $('<ul class="category-suggestions"></ul>').css({
            position: 'absolute',
            zIndex: 1000,
            backgroundColor: 'rgba(0, 0, 0, 0.7)',
            color: 'white',
            border: '1px solid #ccc',
            padding: '0',
            listStyleType: 'none',
            margin: '0',
            maxHeight: '200px',
            overflowY: 'auto',
            cursor: 'pointer'
        });

        suggestions.forEach(function (suggestion) {
            var item = $('<li></li>').text(suggestion).css({ padding: '5px' });
            item.on('mousedown', function () {
                var text = input.val();
                var beforeCursor = text.substring(0, cursorPosition).replace(/\[\[Category:[^\]]*$/, '[[Category:' + suggestion);
                var afterCursor = text.substring(cursorPosition);
                input.val(beforeCursor + afterCursor);
                suggestionBox.remove();
            });
            suggestionBox.append(item);
        });

        $('body').append(suggestionBox);
        positionSuggestionBox(input, cursorPosition, suggestionBox);
    }

    function positionSuggestionBox(input, cursorPos, suggestionBox) {
        var text = input.val().substring(0, cursorPos);
        var textarea = input[0];
        var div = $('<div></div>').css({
            position: 'absolute',
            whiteSpace: 'pre-wrap',
            wordWrap: 'break-word',
            visibility: 'hidden',
            font: input.css('font'),
            padding: input.css('padding'),
            width: input.width(),
            lineHeight: input.css('line-height')
        }).appendTo('body');
        
        // Simulate the text up to the cursor
        var beforeCursorText = text.replace(/ /g, '\u00a0');  // Non-breaking spaces for correct width
        div.text(beforeCursorText);
        var span = $('<span>|</span>').appendTo(div);  // Add a cursor marker
        var cursorOffset = span.offset();

        // Adjust position to match textarea
        var inputOffset = input.offset();
        suggestionBox.css({
            top: inputOffset.top + (cursorOffset.top - div.offset().top) + parseInt(input.css('padding-top'), 10),
            left: inputOffset.left + (cursorOffset.left - div.offset().left) + parseInt(input.css('padding-left'), 10)
        });

        div.remove();
    }

    $('#wpTextbox1').on('input', function () {
        var input = $(this);
        var cursorPos = this.selectionStart;
        var text = input.val().substring(0, cursorPos);
        var match = text.match(/\[\[Category:([^\]]*)$/);
        if (match) {
            var partial = match[1].toLowerCase();
            var matches = categoryList.filter(function (category) {
                return category.toLowerCase().startsWith(partial);
            }).slice(0, 10);  // Limit suggestions
            if (matches.length) {
                createSuggestionBox(input, matches, cursorPos);
            }
        } else {
            $('.category-suggestions').remove();
        }
    });

    $(document).on('mousedown', function (e) {
        if (!$(e.target).closest('.category-suggestions').length) {
            $('.category-suggestions').remove();
        }
    });
});

$(document).ready(function() {
    $('.mw-collapsible-header').each(function() {
        // Wrap indicator and spinner inside a container for positioning
        $(this).prepend('<span class="mw-collapsible-icon"><span class="mw-collapsible-indicator">•</span><span class="mw-collapsible-loading hidden"></span></span> ');
    });

    $('.mw-collapsible-header').click(function() {
        var parentDiv = $(this).closest('.mw-collapsible');
        var content = parentDiv.find('.mw-collapsible-content');
        var indicator = $(this).find('.mw-collapsible-indicator');
        var spinner = $(this).find('.mw-collapsible-loading');

        // Fade out indicator and show spinner at the same position
        indicator.addClass('fade-out');
        setTimeout(() => {
            spinner.removeClass('hidden');
        }, 100);

        // Toggle content visibility
        parentDiv.toggleClass('mw-collapsed');
        content.stop(true, true).slideToggle();

        // Restore indicator and hide spinner after animation
        setTimeout(function() {
            indicator.removeClass('fade-out');
            spinner.addClass('hidden');
        }, 300);
    });

    // Ensure correct initial state for collapsibles
    $('.mw-collapsible').each(function() {
        var parentDiv = $(this);
        var content = parentDiv.find('.mw-collapsible-content');

        if (parentDiv.hasClass('mw-collapsed')) {
            content.hide();
        } else {
            content.show();
        }
    });
});
Cookies help us deliver our services. By using our services, you agree to our use of cookies.