MediaWiki:Common.js: Difference between revisions

Revision as of 17:18, 19 September 2025

/* Any JavaScript here will be loaded for all users on every page load. */
// JavaScript code to save checkbox state and restore it when the page loads
$(document).ready(function() {
    // Function to save the state of checkboxes to localStorage
    function saveCheckboxState() {
        $('input[type="checkbox"]').each(function() {
            localStorage.setItem($(this).attr('id'), $(this).prop('checked'));
        });
    }

    // Function to load the state of checkboxes from localStorage
    function loadCheckboxState() {
        $('input[type="checkbox"]').each(function() {
            const savedState = localStorage.getItem($(this).attr('id'));
            if (savedState !== null) {
                $(this).prop('checked', savedState === 'true');
            }
        });
    }

    // Load the saved checkbox state when the page is loaded
    loadCheckboxState();

    // Save the checkbox state whenever a checkbox is changed
    $('input[type="checkbox"]').change(function() {
        saveCheckboxState();
    });
});

// Adjust the search box width
$(document).ready(function () {
    $('#searchInput').css('width', '600px'); // Adjust width as needed
});

// Right side dropdown
mw.loader.using('mediawiki.util', function () {

    // Create the dropdown container
    var navbarRight = document.getElementById('mw-navbar-right');
    if (!navbarRight) return;

    var dropdown = document.createElement('div');
    dropdown.className = 'custom-dropdown'; // adjust for your CSS
    dropdown.style.position = 'relative';
    dropdown.style.display = 'inline-block';
    dropdown.style.marginLeft = '10px';

    // Dropdown button
    var button = document.createElement('button');
    button.textContent = 'Settings';
    button.className = 'custom-dropdown-button';
    button.style.cursor = 'pointer';
    dropdown.appendChild(button);

    // Dropdown menu
    var menu = document.createElement('div');
    menu.className = 'custom-dropdown-menu';
    menu.style.display = 'none';
    menu.style.position = 'absolute';
    menu.style.backgroundColor = '#fff';
    menu.style.minWidth = '160px';
    menu.style.boxShadow = '0px 8px 16px rgba(0,0,0,0.2)';
    menu.style.zIndex = 1000;
    dropdown.appendChild(menu);

    // Populate dropdown items
    var pageName = mw.config.get('wgPageName'); // current page
    var menuItems = [
        { text: 'Edit Source', href: mw.util.getUrl(pageName, { action: 'edit' }) },
        { text: 'Another Item', href: '/' } // optional extra item
    ];

    menuItems.forEach(function(item) {
        var a = document.createElement('a');
        a.textContent = item.text;
        a.href = item.href;
        a.className = 'custom-dropdown-item';
        a.style.display = 'block';
        a.style.padding = '8px 12px';
        a.style.textDecoration = 'none';
        a.style.color = '#000';
        a.addEventListener('mouseover', function() { a.style.backgroundColor = '#eee'; });
        a.addEventListener('mouseout', function() { a.style.backgroundColor = '#fff'; });
        menu.appendChild(a);
    });

    // Toggle menu visibility
    button.addEventListener('click', function() {
        menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
    });

    // Close menu if clicked outside
    document.addEventListener('click', function(e) {
        if (!dropdown.contains(e.target)) {
            menu.style.display = 'none';
        }
    });

    // Add dropdown to navbar
    navbarRight.appendChild(dropdown);

});

/* "Where To" dropdown
$(function () {
    // Prevent duplicate
    if ($('#mw-settings-dropdown').length) return;

    // Create container
    var $container = $('<div id="mw-settings-dropdown"></div>');
    var $button = $('<button>Where To? ▾</button>');
    var $list = $('<ul></ul>');

    // Define menu items
    var menuItems = [
    // Example: existing items
        { title: 'Home', href: 'Disneyland' }
    ];
    menuItems.push({
        title: 'Edit Source',
        href: mw.util.getUrl(mw.config.get('wgPageName'), { action: 'edit' })
    });

    // Populate dropdown
    menuItems.forEach(function(item) {
        var $li = $('<li></li>');
        var $a = $('<a></a>').attr('href', mw.util.getUrl(item.page)).text(item.title);
        $li.append($a);
        $list.append($li);
    });

    $container.append($button).append($list);

    // Insert into navbar-right if exists
    var $navbar = $('#mw-navbar-right');
    if ($navbar.length) {
        // Prepend = place at far left of navbar-right
        $navbar.prepend($container);
    } else {
        // fallback: absolute top-right
        $container.css({ position: 'absolute', top: '10px', right: '10px' });
        $('body').append($container);
    }

    // Toggle dropdown
    $button.on('click', function(e) {
        $list.toggle();
        e.stopPropagation();
    });

    // Close dropdown when clicking outside
    $(document).on('click', function() {
        $list.hide();
    });

    $container.on('click', function(e) {
        e.stopPropagation();
    });
}); */

/* Add Edit Source to user dropdown
mw.loader.using('mediawiki.util', function () {
    // Add a new entry into the user dropdown
    mw.util.addPortletLink(
        'p-personal',                        // user menu ID
        mw.util.getUrl( mw.config.get('wgPageName'), { action: 'edit' } ), 
        'Edit Source',
        'pt-editsource'
    );
}); */

/* Drop down on the left
$(function() {
    // Find the site title container
    var $siteTitle = $('#p-logo');

    if ($siteTitle.length) {
        // Wrap the site title and dropdown in a flex container
        var $wrapper = $('<div>', { class: 'custom-title-wrapper' }).css({
            display: 'inline-flex',
            alignItems: 'center',
            gap: '10px' // spacing between title and menu
        });

        // Move the site title inside the wrapper
        $siteTitle.before($wrapper);
        $wrapper.append($siteTitle);

        // Create dropdown container
        var $leftDropdown = $('<div>', { class: 'custom-left-dropdown' }).css({
            position: 'relative'
        });

        // Create the button
        var $leftButton = $('<button>', {
            text: 'Menu ▼',
            class: 'custom-left-dropdown-btn'
        }).css({
            background: '#fff',
            border: '1px solid #ccc',
            padding: '3px 6px',
            cursor: 'pointer'
        });

        // Create the dropdown items
        var $leftMenu = $('<ul>', { class: 'custom-left-dropdown-menu' }).css({
            display: 'none',
            position: 'absolute',
            top: '100%',
            left: 0,
            background: '#fff',
            border: '1px solid #ccc',
            padding: 0,
            margin: 0,
            listStyle: 'none',
            zIndex: 1000,
            minWidth: '120px'
        });

        // Add items
        var leftItems = [
            { text: 'Home', href: '/' },
            { text: 'Recent changes', href: '/wiki/Special:RecentChanges' },
            { text: 'Random page', href: '/wiki/Special:Random' }
        ];

        leftItems.forEach(function(item) {
            var $li = $('<li>').css({ padding: '5px 10px' });
            var $a = $('<a>', { text: item.text, href: item.href }).css({ textDecoration: 'none', color: '#000' });
            $li.append($a);
            $leftMenu.append($li);
        });

        // Toggle menu on click
        $leftButton.on('click', function() {
            $leftMenu.toggle();
        });

        // Close if clicked outside
        $(document).on('click', function(e) {
            if (!$(e.target).closest($leftDropdown).length) {
                $leftMenu.hide();
            }
        });

        // Assemble dropdown and add to wrapper
        $leftDropdown.append($leftButton).append($leftMenu);
        $wrapper.append($leftDropdown);
    }
}); */