User:Lordseriouspig/StatusChangerImproved.js

//////////STATUS CHANGER IMRPOVED
// Creator: Lordseriouspig
// Original Creator: Misza13
// Credits: Voyagerfan5761 for some minor improvements
//     Modified by Xenocidic to simply use /Status as a one word indicator,
//     Modified by Kraftlos to include Sleep status
//     Modified by APerson for compatibility with {{UserStatus}}
// compatible with {{Statustop}} for display

$.when(
    $.ready,
    mw.loader.using(["mediawiki.api", "mediawiki.util"])
).then(function () {
    // create variable to store configuration
    if (typeof(statusChangerConfig) === 'undefined') {
        statusChangerConfig = {};
    }

    // check for configuration options, and set them to default values if they're undefined
    if (typeof(statusChangerConfig.statusList) === 'undefined') {
        statusChangerConfig.statusList = [
            'editing', 'online', 'offline', 'busy', 'sleeping', 'wikibreak',
            'away', 'vandal', 'holiday', 'school', 'working', 'eating', 'huggle', 'twinkle'
        ];
    }

    if (typeof(statusChangerConfig.statusPage) === 'undefined') {
        statusChangerConfig.statusPage = 'User:' + mw.config.get('wgUserName') + '/Status';
    }

    function makeListener(newStatus) {
        return function (evt) {
            evt.preventDefault();
            var api = new mw.Api({
                ajax: { headers: { 'Api-User-Agent': '[[w:User:Enterprisey/StatusChanger.js]]' } }
            });

            api.postWithEditToken({
                action: 'edit',
                title: statusChangerConfig.statusPage,
                text: newStatus,
                summary: mw.config.get('wgUserName') + " is now " + ((newStatus === "sleep") ? "sleeping" : newStatus) + "."
            }).then(function() {
                api.post({ action: "purge", titles: 'User:' + mw.config.get('wgUserName') });
                mw.notify('Done setting status!');
            });
            return false;
        };
    }

    // Create the main user options dropdown if it doesn't exist
    var userOptionsDropdown = $('#p-personal ul:first');

    if (userOptionsDropdown.length === 0) {
        userOptionsDropdown = $('<ul>').appendTo('#p-personal');
    }

    // Find the "Sandbox" list item
    var sandboxItem = userOptionsDropdown.find('li#pt-sandbox');

    // Create a list item for the "Status" dropdown
    var statusDropdownItem = $('<li>').addClass('mw-list-item dropdown');
    var statusDropdownLink = $('<a>')
        .attr('href', '#')
        .text('Status')
        .addClass('dropdown-toggle')
        .appendTo(statusDropdownItem);

    // Create the dropdown menu container
    var dropdownContainer = $('<ul>')
        .addClass('dropdown-menu')
        .css({
            display: 'none',
            position: 'absolute',
            'z-index': '1000'
        })
        .appendTo(statusDropdownItem);

    // Add the links to the dropdown
    for (var i = 0; i < statusChangerConfig.statusList.length; i++) {
        var stat = statusChangerConfig.statusList[i];
        var message = (stat === "sleeping") ? "asleep" : stat;
        $('<li>')
            .append($('<a>')
                .attr('href', '#')
                .text(stat)
                .attr('title', "I'm " + message + "!")
                .on('click', makeListener(stat))
            )
            .appendTo(dropdownContainer);
    }

    // Append the "Status" dropdown after the "Sandbox" item
    statusDropdownItem.insertAfter(sandboxItem);

    // Show dropdown on hover
    statusDropdownItem.on('mouseenter', function() {
        dropdownContainer.stop(true, true).fadeIn(200);
    });

    // Hide dropdown on mouse leave from both link and dropdown
    statusDropdownItem.on('mouseleave', function(e) {
        var containerTop = dropdownContainer.offset().top;
        var containerBottom = containerTop + dropdownContainer.outerHeight();
        if (e.clientY < containerTop || e.clientY > containerBottom) {
            dropdownContainer.stop(true, true).fadeOut(200);
        }
    });

    // Close dropdown on mouse leave from dropdown menu
    dropdownContainer.on('mouseleave', function() {
        dropdownContainer.stop(true, true).fadeOut(200);
    });

    // Add CSS styles for the dropdown menu
    $('<style>')
        .prop('type', 'text/css')
        .html(`
            .dropdown-menu {
                background-color: #fff;
                min-width: 160px;
                box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                list-style: none;
            }
            .dropdown-menu li {
                padding: 8px 12px;
            }
            .dropdown-menu a {
                color: black;
                text-decoration: none;
                display: block;
            }
            .dropdown-menu a:hover {
                background-color: #f1f1f1;
            }
            .dropdown-toggle {
                cursor: pointer;
            }
        `)
        .appendTo('head');
});