MediaWiki:UserStatus/beta.js

/** * * @module                 UserStatus * @description            Adds configurable user status to masthead avatars. *                         Available status settings: *                         • Online *                         • Away *                         • Do Not Disturb (DnD) *                         • Offline *                         • Unknown *                         • Blocked *                         Available config options (UserStatusSettings): *                         • Colorblind mode (colorBlindMode) - 0/1, default 1 * @kind                   Beta build * @author                 Americhino * @version                0.8.1 * @license                CC-BY-SA 3.0 * @todo                   Add dropdown menu option to quickly switch status - WIP, implentation soon™ * @todo                   Colorblind mode - Done * @todo                   Change status to blocked when a user is blocked - WIP * @todo                   Add demo for SapphireSonata's userpage - done, add to /demo.js once finished with main script **/ var config = window.UserStatusSettings || {}; colorBlindMode = config.colorBlindMode || 1; var avatar = '.UserProfileMasthead .masthead-avatar'; var $user = mw.config.get('wgTitle').split('/'); // Fetch content of User:USERNAME/status if ($('.UserProfileMasthead').exists) { $.ajax({       method: 'GET',        dataType: 'text',        url: mw.util.wikiScript('index'),        data: {            title: wgFormattedNamespaces[2] + ':' + ($user[1] ? $user[1] : $user[0]) + '/status',           action: 'raw'        },        complete: function(data){            // Variables            if (data.responseText === 'online', 'away', 'dnd', 'offline') {            var status = data.responseText            }            var status_masthead = $('');            var status_text = {                'online': 'Online',                'away': 'Away',                'dnd': 'Do Not Disturb',                'offline': 'Offline',                'unknown': 'Unknown',            }            var status_color = {                'online': '#43b581',                'away': '#faa61a',                'dnd': '#f04747',                'offline': '#747f8d',                'unknown': '#747f8d',            }            var statusOptions = {                'online': 'online',                'away': 'away',                'dnd': 'dnd',                'offline': 'offline', 'unknown': 'unknown', }           // Colorblind Icons var statusIcons = { 'online': '', 'away': 'https://discordapp.com/assets/2cd083e5b360930c23ca95ab6a6073a0.svg', 'dnd': 'https://discordapp.com/assets/5e6b9355e62148b7f463465fd029ab92.svg', 'offline': 'https://discordapp.com/assets/7026428ff08042eb805e579bd9aea182.svg', 'unknown': 'https://discordapp.com/assets/7026428ff08042eb805e579bd9aea182.svg', }           // Create element $(avatar).append(               $(' ', { 'class': 'status-indicator si-is-not-colorblind status-indicator-' + status, 'title': status_text[status], css: { height: '40px', position: 'absolute', right: '5px', bottom: '5px', width: '40px', borderRadius: '50%', background: status_color[status] || '#747f8d', zIndex: '400' }               })            )            // Change status to blocked automatically if a user is blocked - WIP new mw.Api.get({               action: 'query',                list: 'users',                usprop: 'blockinfo',                ususers: wgTitle,            }).then(function (data) {                if (name === ($user[1] ? $user[1] : $user[0])) {                    var status = 'blocked';					var status_masthead = $('');					// Create blocked status elements, please contact me if there's a better way to do this                    $('.status-indicator-' + status).remove;                    $(avatar).append( $(' ', {                           'class': 'status-indicator si-is-not-colorblind status-indicator-blocked',                            'title': 'Blocked',                            css: {                                height: '40px',                                position: 'absolute',                                right: '5px',                                bottom: '5px',                                width: '40px',                                borderRadius: '50%',                                background: 'rgb(143, 0, 0) !important',								zIndex: '500'                            }                        }) )                   if (colorBlindMode) {                        // uhhhh ok doesn't work                        $('.si-is-not-colorblind').remove;						$('.status-indicator-' + status).remove;                        $(avatar).append( $(' ', {                               'class': 'status-indicator si-is-colorblind status-indicator-blocked',                                'title': 'Blocked',                                css: {                                    height: '40px',                                    position: 'absolute',                                    right: '5px',                                    bottom: '5px',                                    width: '40px',                                    borderRadius: '50%',                                    background: 'rgb(143, 0, 0) !important',                                    zIndex: '500'                                }                            }) ).append( $(' ', {                               'src': '/extensions/wikia/DesignSystem/node_modules/design-system/dist/svg/wds-icons-cross.svg',                                'title': 'Blocked',                                css: {                                    height: '40px',                                    position: 'absolute',                                    right: '5px',                                    bottom: '5px',                                    width: '40px',                                    borderRadius: '50%',                                    zIndex: '600',                                }                            }) )                   }                    // Add label on masthead                    status_masthead                        .addClass('status-masthead status-masthead-blocked')                        .text(' Blocked')                        .prepend( $(' ')                               .addClass('user-status-label') .text('Status') );                   $('.masthead-info > .details > ul').append(status_masthead);                }                // Console log entry to make sure status is returned                console.log('UserStatus: Overriding status for ' + ($user[1] ? $user[1] : $user[0]) + ': user blocked')            }); // Be sure to define editStatus - borrow from QuickCreateUserPage? var $statusMenuLinks = $('').append(                   $('')                        .click(/* editStatus[online] */)                        .attr('target', '_blank')                        .attr('style', 'cursor: pointer;')                        .attr('id', 'StatusMenu-online')                        .text('Online')                ).after(                $('').append( $('') .click(/* editStatus */) .attr('target', '_blank') .attr('style', 'cursor: pointer;') .attr('id', 'StatusMenu-away') .text('Away') )).after(               $('').append( $('') .click(/* editStatus */) .attr('target', '_blank') .attr('style', 'cursor: pointer;') .attr('id', 'StatusMenu-dnd') .text('Do not Disturb') )).after(               $('').append( $('') .click(/* editStatus */) .attr('target', '_blank') .attr('style', 'cursor: pointer;') .attr('id', 'StatusMenu-unknown') .text('Unknown') ));           // Create dropdown menu to change status - WIP var $statusLink = $(' ')           .attr('id', 'StatusChangeWrapper').append(                $(' ')                    .addClass('wds-dropdown')                    .attr('id', 'StatusChange').append ( $( '' ).attr( 'title', 'Change your status' ) .attr( 'style', 'cursor: pointer; margin-top: 10px;' ).text('Status') .attr( 'id', 'StatusToggle' ) .addClass('wds-button wds-is-secondary wds-dropdown__toggle').append (                               $('  ')                        ) .after(                       $(' ')                        .addClass('wds-is-not-scrollable wds-dropdown__content wds-is-left-aligned').append( $(' ')                               .addClass('wds-list wds-is-linked') .attr('id', 'StatusMenu') .append($statusMenuLinks) )                   )                )            );

if (($user[1] ? $user[1] : $user[0]) === mw.config.get('wgUserName')) { $('.UserProfileMasthead .masthead-info .details').append($statusLink); $('#StatusMenu #edit-bio-button').remove; }           // Add label on masthead status_masthead .addClass('status-masthead status-masthead-' + status) .text(' ' + status_text[status] || Unknown) .prepend(                   $(' ')                        .addClass('user-status-label')                        .text('Status')                ); $('.masthead-info > .details > ul').append(status_masthead); // Console log entry to make sure status is returned console.log('UserStatus: Status for ' + ($user[1] ? $user[1] : $user[0]) + ':', status_text[status]) // Colorblind mode if (colorBlindMode) { $('.si-is-not-colorblind').remove; $(avatar).append(                   $(' ', { 'class': 'status-indicator si-is-colorblind status-indicator-' + status, 'title': status_text[status], css: { height: '40px', position: 'absolute', right: '5px', bottom: '5px', width: '40px', borderRadius: '50%', background: status_color[status] || '#747f8d', zIndex: '400' }                   })                ).append(                    $(' ', { 'src': statusIcons[status] || 'https://discordapp.com/assets/7026428ff08042eb805e579bd9aea182.svg', 'title': status_text[status], css: { height: '40px', position: 'absolute', right: '5px', bottom: '5px', width: '40px', borderRadius: '50%', zIndex: '600', }                   })                )            }        },        // attempting quickcreateuserpage-style way to edit status /* welp it was worth a try editStatus: function { var	statusContent = statusOptions[option]; pageName = mw.config.get('wgFormattedNamespaces[2]') + mw.config.get( 'wgUserName' ) + '/status', editStatus = window.statusConfirm || false; if ( statusConfirm === true ) { editStatus.makeEdit( pageName, statusContent ); return; }           $.getJSON( mw.util.wikiScript( 'api' ), {                action: 'query',                prop: 'revisions',                titles: pageName,                format: 'json'            } ).done( function ( data ) {                var	pageId = Object.keys( data.query.pages )[0];                if ( pageId !== '-1' ) {                    if (confirm(i18n.test)) {                        editStatus.makeEdit( pageName, statusContent );                    } else {                        editStatus.showResult( 'error', 'cup-error-exists' );                    }                } else {                    editStatus.makeEdit( pageName, statusContent );                }            } ); }, */       // End Basic functionality }); } /*********************************************************************/ /* SapphireSonata Demo if (mw.config.get('wgTitle') === 'SapphireSonata') {   $('.UserProfileMasthead .masthead-info .details').append($statusLink);    $('#StatusMenu #edit-bio-button').remove; } */