MediaWiki:Citizen.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.

function isUserLoggedIn() {
    // Use MediaWiki's user interface elements to check the login status
    return !mw.user.isAnon();
}

function insertLoginMessage($element) {
    // Check if aria-disabled is set to "true"
    if ($element.attr('aria-disabled') === 'true') {
        // Create a new HTML snippet with MediaWiki links
        var loginMessage = '<p>Please <a href="/wiki/Special:UserLogin">login</a> or <a href="/wiki/Special:CreateAccount">sign up</a> to continue.</p>';

        // Insert the message after the disabled button
        $element.after(loginMessage);
    }
}

function observeDOM() {
    // Select the target node where you expect the dynamic changes
    var targetNode = document.body; // You can specify a more specific container if needed

    // Create a MutationObserver instance
    var observer = new MutationObserver(function (mutationsList) {
        for (var mutation of mutationsList) {
            if (mutation.type === 'childList') {
                // Handle added nodes
                mutation.addedNodes.forEach(function (node) {
                    if (node.nodeType === Node.ELEMENT_NODE) {
                        var $element = $(node);
                        if ($element.hasClass('oo-ui-buttonElement-button')) {
                            insertLoginMessage($element);
                        }
                    }
                });
            } else if (mutation.type === 'attributes' && mutation.attributeName === 'aria-disabled') {
                // Handle attribute changes
                var $element = $(mutation.target);
                insertLoginMessage($element);
            }
        }
    });

    // Configure and start the observer
    var config = { childList: true, subtree: true, attributes: true, attributeFilter: ['aria-disabled'] };
    observer.observe(targetNode, config);
}

$(document).ready(function () {
    // Check the initial state
    checkElements();

    // Observe DOM for changes
    observeDOM();

    function checkElements() {
        // Select all elements with the specified class
        var elements = $('.oo-ui-buttonElement-button');
        elements.each(function () {
            var $element = $(this);
            insertLoginMessage($element);
        });
    }
});