MediaWiki:Common.js

/* Any JavaScript here will be loaded for all users on every page load. */
$(document).ready(function () {
    $.get(mw.util.wikiScript('api'), {
        action: 'query',
        meta: 'userinfo',
        format: 'json'
    }).done(function (data) {
        if (data.query.userinfo.id !== 0) { 
            var username = data.query.userinfo.name;
            var userLink = mw.util.getUrl('User:' + username);
            $('#user-info').html('<a href="' + userLink + '" class="text-white">' + username + '</a>');
        }
    });
});


document.getElementById('offcanvas-toggler').addEventListener('click', function() {
    var sidebar = document.getElementById('offcanvas-menu');
    if (sidebar.classList.contains('show')) {
        sidebar.classList.remove('show');
    } else {
        sidebar.classList.add('show');
    }
});


(function() {
    function toggleSection(header) {
        var submenu = header.nextElementSibling;
        var menuState = JSON.parse(localStorage.getItem('menuState') || '{}');
        var menuKey = header.innerText.trim();
        if (submenu.style.display === "none" || submenu.style.display === "") {
            submenu.style.display = "block";
            menuState[menuKey] = 'block';
        } else {
            submenu.style.display = "none";
            menuState[menuKey] = 'none';
        }
        localStorage.setItem('menuState', JSON.stringify(menuState));
    }

    window.toggleSection = toggleSection; 

    window.onload = function() {
        var menuState = JSON.parse(localStorage.getItem('menuState') || '{}');
        var headers = document.querySelectorAll('.menu-header');
        headers.forEach(function(header, index) {
            var menuKey = header.innerText.trim();
            var submenu = header.nextElementSibling;
            if (menuState.hasOwnProperty(menuKey)) {
                submenu.style.display = menuState[menuKey];
            } else {
                submenu.style.display = 'none';
            }
        });
    };
})();


$(document).ready(function() {
    $('#offcanvas-close').on('click', function() {
        $('#offcanvas-menu').removeClass('show');
    });
});

document.addEventListener('DOMContentLoaded', function() {
    var form = document.querySelector('.namespace-search-form');
    if (form) {
        form.addEventListener('submit', function(e) {
            var input = form.querySelector('#bs-extendedsearch-input');
            if (input) {
                var namespace = mw.config.get('wgCanonicalNamespace');
                if (namespace && namespace.length > 0) {
                    input.value = namespace + ": " + input.value;
                }
            }
        });
    }
});

(function() {
    'use strict';

    var css = `
        #suggestion-box {
            position: absolute;
            top: 50px;  /* Adjust position */
            left: 10px;  /* Adjust position */
            border: 1px solid #ccc;
            background-color: #fff;
            z-index: 1000;
        }
        .suggestion-item {
            padding: 8px;
            cursor: pointer;
        }
        .suggestion-item:hover {
            background-color: #e0e0e0;
        }
    `;
    var styleSheet = document.createElement("style");
    styleSheet.type = "text/css";
    styleSheet.innerText = css;
    document.head.appendChild(styleSheet);

    var suggestionBox = document.createElement('div');
    suggestionBox.id = 'suggestion-box';
    document.body.appendChild(suggestionBox);

    function showSuggestions(e) {
        var query = e.target.value;
        if (query.length > 2) {
            var apiUrl = "/api.php?action=opensearch&search=" + encodeURIComponent(query) + "&namespace=0&limit=5&format=json";
            fetch(apiUrl)
                .then(response => response.json())
                .then(data => {
                    var suggestions = data[1];  // The suggestions are in the second element of the returned array
                    suggestionBox.innerHTML = '';  // Clear previous suggestions
                    suggestions.forEach(function(suggestion) {
                        var item = document.createElement('div');
                        item.className = 'suggestion-item';
                        item.textContent = suggestion;
                        suggestionBox.appendChild(item);
                    });
                })
                .catch(error => console.error('Error fetching suggestions:', error));
        }
    }

    var searchInput = document.querySelector('.search-input');
    if (searchInput) {
        searchInput.addEventListener('input', showSuggestions);
    }
})();