User:Monster Domosed/common.js: Difference between revisionsGive feedback
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
(function() { | (function () { | ||
'use strict'; | 'use strict'; | ||
var availableIcons = [ | var availableIcons = [ | ||
{ id: 'abrams', name: 'Abrams' }, | { id: 'abrams', name: 'Abrams' }, | ||
| Line 43: | Line 42: | ||
{ id: 'yamato', name: 'Yamato' } | { id: 'yamato', name: 'Yamato' } | ||
]; | ]; | ||
var PREFERENCE_KEY = 'userjs-selectedicon'; | var PREFERENCE_KEY = 'userjs-selectedicon'; | ||
function getFilePath(filename) { | function getFilePath(filename) { | ||
return mw.util.getUrl('Special:FilePath/' + filename); | return mw.util.getUrl('Special:FilePath/' + filename); | ||
} | } | ||
function getCachedIcon() { | |||
return localStorage.getItem(PREFERENCE_KEY) || 'rem'; | |||
} | |||
function setCachedIcon(iconId) { | |||
localStorage.setItem(PREFERENCE_KEY, iconId); | |||
} | |||
function applyIcon(iconId) { | |||
document.body.className = | |||
document.body.className.replace(/usericon-\w+/g, ''); | |||
document.body.classList.add('usericon-' + iconId); | |||
} | |||
// ========================= | |||
// FAST LOAD (NO WAIT) | |||
// ========================= | |||
function applyStoredIcon() { | function applyStoredIcon() { | ||
applyIcon(getCachedIcon()); | |||
// background sync (keeps devices in sync) | |||
var api = new mw.Api(); | var api = new mw.Api(); | ||
api.get({ | api.get({ | ||
| Line 70: | Line 75: | ||
meta: 'userinfo', | meta: 'userinfo', | ||
uiprop: 'options' | uiprop: 'options' | ||
}).done(function(data) { | }).done(function (data) { | ||
var | var serverIcon = | ||
data.query.userinfo.options[PREFERENCE_KEY] || 'rem'; | |||
if (serverIcon !== getCachedIcon()) { | |||
setCachedIcon(serverIcon); | |||
applyIcon(serverIcon); | |||
} | |||
}); | }); | ||
} | } | ||
// ========================= | |||
// ICON SELECTOR UI | |||
// ========================= | |||
function createIconSelector() { | function createIconSelector() { | ||
var | var currentIcon = getCachedIcon(); | ||
var html = '<div id="usericon-selector">' + | |||
'<h3>Choose Your Profile Icon</h3>' + | |||
'<div class="usericon-grid">'; | |||
availableIcons.forEach(function (icon) { | |||
var selected = icon.id === currentIcon ? ' selected' : ''; | |||
var imgSrc = getFilePath(icon.name + '.png'); | |||
html += '<div class="usericon-option' + selected + '" data-icon="' + icon.id + '">' + | |||
'<img src="' + imgSrc + '" alt="' + icon.name + '">' + | |||
'<span>' + icon.name + '</span>' + | |||
'</div>'; | |||
}); | |||
html += '</div></div>'; | |||
var $selector = $(html); | |||
$('#mw-content-text').prepend($selector); | |||
$('.usericon-option').on('click', function () { | |||
var iconId = $(this).data('icon'); | |||
$('.usericon-option').removeClass('selected'); | |||
$(this).addClass('selected'); | |||
selectIcon(iconId); | |||
}); | }); | ||
} | } | ||
// ========================= | |||
// SAVE + SYNC | |||
// ========================= | |||
function selectIcon(iconId) { | function selectIcon(iconId) { | ||
setCachedIcon(iconId); | |||
applyIcon(iconId); | |||
var api = new mw.Api(); | var api = new mw.Api(); | ||
api.saveOption(PREFERENCE_KEY, iconId) | |||
.done(function () { | |||
mw.notify('Icon updated and synced across devices!', { | |||
type: 'success' | |||
}); | |||
}) | |||
.fail(function () { | |||
mw.notify('Failed to save icon.', { | |||
type: 'error' | |||
api.saveOption(PREFERENCE_KEY, iconId).done(function() { | }); | ||
}); | |||
} | } | ||
// ========================= | |||
// INIT | |||
// ========================= | |||
mw.loader.using(['mediawiki.api', 'mediawiki.util'], function () { | |||
applyStoredIcon(); | |||
var config = mw.config.get([ | |||
'wgNamespaceNumber', | |||
'wgTitle', | |||
'wgUserName' | |||
]); | |||
if ( | |||
config.wgNamespaceNumber === 2 && | |||
config.wgTitle === config.wgUserName && | |||
config.wgUserName | |||
) { | |||
createIconSelector(); | |||
} | |||
}); | |||
})(); | |||