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)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/**
* @module UserStatus
* @description Adds configurable user status to masthead avatars.
* @notes Available status settings:
* • Online
* • Away
* • Do Not Disturb (DnD)
* • Offline
* • Unknown
* • Blocked [COMING SOON]
* Available config options (UserStatusSettings):
* • Colorblind mode (colorBlindMode) - 0/1, default 1
* • Light Theme (lightTheme) - 0/1, default 0, requires colorBlindMode
* • Display status indicator (statusIndicator) - 0/1, default 1
* • Colors: (online, away, dnd, and offline) - string (hexadecimal or color name)
* @author Americhino
* @version 1.0.2
* @license CC-BY-SA 3.0
*
*/
mw.loader.using('mediawiki.api').then(function() {
mw.hook('dev.i18n').add(function(i18n) {
i18n.loadMessages('UserStatus').done(function (i18n) {
var config = window.UserStatusSettings || {},
colorBlindMode = config.colorBlindMode || 1,
lightTheme = config.lightTheme || 0,
statusIndicator = config.statusIndicator || 1,
avatar = '#userProfileApp .user-identity-avatar',
$user = mw.config.get('wgTitle').split('/'),
Api = new mw.Api(),
interval;
if (!mw.config.get('profileUserName')) {
return; // "illegal return statement", only comment out when testing outside of a function
}
function appendToMasthead() {
$.ajax({
method: 'GET',
dataType: 'text',
url: mw.util.wikiScript('index'),
data: {
title: mw.config.get('wgFormattedNamespaces')[2] + ':' + ($user[1] ? $user[1] : $user[0]) + '/status',
action: 'raw'
},
complete: function (data) {
// Variables
// Limit responses to valid statuses
var status = ['online', 'away', 'dnd', 'offline'].indexOf(data.responseText) === -1
? i18n.msg('unknown').plain()
: data.responseText;
var status_masthead = $('<li>');
var status_text = {
'online': i18n.msg('online').plain(),
'away': i18n.msg('away').plain(),
'dnd': i18n.msg('dnd').plain(),
'offline': i18n.msg('offline').plain(),
'unknown': i18n.msg('unknown').plain()
};
// Colors: customizable
var status_color = {
'online': config.online || '#43b581',
'away': config.away || '#faa61a',
'dnd': config.dnd || '#f04747',
'offline': config.offline || '#747f8d',
'unknown': config.offline || '#747f8d',
};
var statusOptions = {
'online': 'online',
'away': 'away',
'dnd': 'dnd',
'offline': 'offline',
'unknown': 'unknown'
};
// Colorblind Icons
var statusIcons = {
'online': '',
'away': '<polygon points="5.254 5.093 8.337 6.922 7.578 8.167 3.758 5.875 3.758 1.5 5.254 1.5" />',
'dnd': '<polygon points="9 5.8 1 5.8 1 4.2 9 4.2" />',
'offline': '<path d="M5,8 C6.65685425,8 8,6.65685425 8,5 C8,3.34314575 6.65685425,2 5,2 C3.34314575,2 2,3.34314575 2,5 C2,6.65685425 3.34314575,8 5,8 Z" />',
'unknown': '<path d="M5,8 C6.65685425,8 8,6.65685425 8,5 C8,3.34314575 6.65685425,2 5,2 C3.34314575,2 2,3.34314575 2,5 C2,6.65685425 3.34314575,8 5,8 Z" />'
};
// Create element
if (statusIndicator) {
$(avatar).append(
$('<div>', {
'class': 'status-indicator si-is-not-colorblind si-is-not-blocked 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: '398'
}
})
);
}
// Add label on masthead
status_masthead
.addClass('status-masthead status-masthead-' + status)
.text(status_text[status] || i18n.msg('unknown').plain());
$('ul.user-identity-stats').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();
if (statusIndicator) {
$(avatar).append(
$('<div>', {
'class': 'status-indicator si-is-colorblind si-is-not-blocked 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: '398'
}
})
).append(
$('<svg>', {
xmlns: 'http://www.w3.org/2000/svg',
height: '40px',
width: '40px',
viewBox: '0 0 10 10',
css: {
position: 'absolute',
right: '5px',
bottom: '5px',
borderRadius: '50%',
zIndex: '399'
}
}).append(
$(statusIcons[status] || statusIcons.unknown).attr('fill', lightTheme ? '#f6f6f7' : '#2f3136'),
$('<title>').text(status_text[status] || i18n.msg('unknown').plain())
)
);
}
}
}
});
}
if ($('#userProfileApp').length) {
appendToMasthead();
} else {
interval = setInterval(function() {
if ($('#userProfileApp').length) {
clearInterval(interval);
appendToMasthead();
}
}, 1000);
}
});
});
});
window.importArticles({
type: 'script',
articles: ['u:dev:MediaWiki:I18n-js/code.js']
});
window.importArticles({
type: 'script',
articles: ['u:dev:MediaWiki:UserStatus/dropdown.js']
});
window.importArticles({
type: 'style',
articles: ['u:dev:MediaWiki:UserStatus.css']
});