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);
            var logoutLink = mw.util.getUrl('Special:Logout');
            $('#user-info').html('<a href="' + userLink + '" class="text-white">' + username + '</a>' + 
                                 ' &nbsp;|&nbsp; <a href="' + logoutLink + '" class="text-white">Logout</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');
    }
});




$(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-container {',
        '    position: relative;',
        '    width: 100%;',
        '}',
        '#suggestion-box {',
        '    position: absolute;',
        '    top: 100%;', 
        '    left: 0;', 
        '    width: 100%;', 
        '    margin-top: 5px;', 
        '    background-color: #fff;',
        '    z-index: 1000;',
        '}',
        '.suggestion-item {',
        '    padding: 8px;',
        '    cursor: pointer;',
        '}',
        '.suggestion-item:hover {',
        '    background-color: #e0e0e0;',
        '}'
    ].join('\n');
    $('head').append('<style type="text/css">' + css + '</style>');

    $('#suggestion-container').append('<div id="suggestion-box"></div>');

    function showSuggestions() {
        var query = $(this).val();
        if (query.length > 0) { 
            var apiUrl = "https://wiki.mdriven.net/api.php";
            var requestData = {
                action: "bs-extendedsearch-autocomplete",
                format: "json",
                q: JSON.stringify({
                    query: {
                        bool: {
                            must: {
                                match: {
                                    ac_ngram: {
                                        query: query
                                    }
                                }
                            }
                        }
                    },
                    size: 8
                }),
                searchData: JSON.stringify({
                    namespace: 0,
                    value: query,
                    mainpage: ""
                })
            };
            $.ajax({
                url: apiUrl,
                data: requestData,
                dataType: "json",
                method: "GET",
                success: function(data) {
                    var suggestions = data.suggestions || [];
                    $('#suggestion-box').empty();
                    $.each(suggestions, function(index, suggestion) {
                        var item = $('<div class="suggestion-item"></div>').text(suggestion.basename);
                        $('#suggestion-box').append(item);
                    });
                },
                error: function(jqxhr, textStatus, error) {
                    console.error('Error fetching suggestions:', error);
                }
            });
        }
    }

   function hideSuggestions(event) {
    if (!$(event.target).closest('#suggestion-container').length) {
        $('#suggestion-box').empty();
    }
}

function selectSuggestion(event) {
    event.preventDefault();  // Prevent the mousedown event from triggering blur on the search input
    var selectedText = $(this).text();
    window.location.href = '/index.php?title=' + encodeURIComponent(selectedText);
}


   $('.search-input').on('input', showSuggestions);
$(document).on('click', hideSuggestions);  
$('#suggestion-box').on('mousedown', '.suggestion-item', selectSuggestion); 


})(jQuery);

$(document).ready(function() {
    // Function to toggle a section open or closed
    function toggleSection(element) {
        var submenu = $(element).next('.submenu');
        submenu.toggle();
    }

    // Function to open the submenu containing the current page link and scroll to it
    function openCurrentPageSubmenuAndScroll() {
        var currentPageLink = $('#navMenu .current-page');
        if (currentPageLink.length) {
            // Open the parent submenu(s) of the current page link
            currentPageLink.parents('.submenu').show();

            // Delay the scrolling to allow for any dynamic layout changes
            setTimeout(function() {
                // Calculate the position of the current page link
                var position = currentPageLink.offset().top - $('#navMenu').offset().top + $('#navMenu').scrollTop();

                // Scroll the menu to the active item
                $('#navMenu').animate({
                    scrollTop: position
                }, 500);
            }, 100); // Delay of 100 milliseconds
        }
    }

    // Event delegation for dynamically loaded content
    $('#navMenu').on('click', '.menu-header', function() {
        toggleSection(this);
    });

    // Open the submenu containing the current page link and scroll to it
    openCurrentPageSubmenuAndScroll();
});

document.getElementById('menu-toggle').addEventListener('click', function() {
    var navMenu = document.getElementById('navMenu');
    var bodyContent = document.getElementById('bodyContent');

    if (navMenu.style.display === 'none' || navMenu.style.display === '') {
        navMenu.style.display = 'block';
        bodyContent.style.display = 'none';  // Hide body content when nav menu is displayed
    } else {
        navMenu.style.display = 'none';
        bodyContent.style.display = 'block';  // Show body content when nav menu is hidden
    }
});

$(document).ready(function() {
    $('.video__navigation .navigation-item').click(function() {
        var videoID = $(this).data('video');
        var startTime = $(this).data('start');
        var newSrc = 'https://www.youtube.com/embed/' + videoID + '?start=' + startTime + '&autoplay=1';
        
        $('.video__wrapper iframe').attr('src', newSrc);
    });
});

$(document).ready(function() {
        $('.bs-extendedsearch-filter-button-button').each(function() {
            $(this).append('<span class="fa fa-chevron-down"></span>');
        });
});

document.addEventListener("scroll", function() {
    var sidebar = document.getElementById("navMenu");
    var footerHeight = 100;
    var windowHeight = window.innerHeight;

    var scrollBottomPosition = window.scrollY + windowHeight;
    var footerTopPosition = document.documentElement.offsetHeight - footerHeight;

    if (scrollBottomPosition <= footerTopPosition) {
        sidebar.style.height = "100vh";
    } else {
        sidebar.style.height = "calc(100vh - 110px)";
    }
});

(function(window, document) {
    'use strict';

    // Function to toggle the section and save its state to localStorage
    function toggleSection(event) {
        // Prevent the event from affecting parent sections
        event.stopPropagation();

        var section = this.parentNode; // 'this' refers to the clicked .menu-header
        var submenu = section.querySelector('.submenu');
        var isOpen = submenu.style.display !== 'none';

        if (isOpen) {
            submenu.style.display = 'none';
            localStorage.setItem(section.id, 'false'); // Save state as closed
        } else {
            submenu.style.display = 'block';
            localStorage.setItem(section.id, 'true'); // Save state as open
        }

        // Update the icon class to reflect the current state
        var icon = this.querySelector('i.fa');
        if (icon) {
            icon.className = isOpen ? 'fa fa-angle-right' : 'fa fa-angle-down';
        }
    }

    // Function to apply stored states from localStorage
    function applyStoredStates() {
        var menuSections = document.querySelectorAll('.menu-section');

        Array.prototype.forEach.call(menuSections, function(section) {
            var submenu = section.querySelector('.submenu');
            var storedState = localStorage.getItem(section.id);

            // Directly modify the display style of the submenu based on storedState
            submenu.style.display = storedState === 'true' ? 'block' : 'none';

            // Update the icon class based on the submenu's state
            var icon = section.querySelector('.menu-header i.fa');
            if (icon) {
                icon.className = storedState === 'true' ? 'fa fa-angle-down' : 'fa fa-angle-right';
            }
        });
    }

    // Attach the applyStoredStates function to run when the document is fully loaded
    document.addEventListener('DOMContentLoaded', function() {
        applyStoredStates();
        // Attach event listeners to all .menu-header elements for toggling
        var headers = document.querySelectorAll('.menu-header');
        Array.prototype.forEach.call(headers, function(header) {
            header.addEventListener('click', toggleSection);
        });
    });

})(window, document);