User:Monster Domosed/common.js: Difference between revisionsGive feedback
No edit summary |
testing |
||
| Line 1: | Line 1: | ||
(function() { | |||
'use strict'; | |||
// Configuration: Add your available icons here | |||
var availableIcons = [ | |||
{ id: 'abrams', name: 'Abrams' }, | |||
{ id: 'apollo', name: 'Apollo' }, | |||
{ id: 'bebop', name: 'Bebop' }, | |||
{ id: 'billy', name: 'Billy' }, | |||
{ id: 'calico', name: 'Calico' }, | |||
{ id: 'celeste', name: 'Celeste' }, | |||
{ id: 'doorman', name: 'The Doorman' }, | |||
{ id: 'drifter', name: 'Drifter' }, | |||
{ id: 'dynamo', name: 'Dynamo' }, | |||
{ id: 'graves', name: 'Graves' }, | |||
{ id: 'grey-talon', name: 'Grey Talon' }, | |||
{ id: 'haze', name: 'Haze' }, | |||
{ id: 'holliday', name: 'Holliday' }, | |||
{ id: 'infernus', name: 'Infernus' }, | |||
{ id: 'ivy', name: 'Ivy' }, | |||
{ id: 'kelvin', name: 'Kelvin' }, | |||
{ id: 'lady-geist', name: 'Lady Geist' }, | |||
{ id: 'lash', name: 'Lash' }, | |||
{ id: 'mcginnis', name: 'McGinnis' }, | |||
{ id: 'mina', name: 'Mina' }, | |||
{ id: 'mirage', name: 'Mirage' }, | |||
{ id: 'mo-krill', name: 'Mo & Krill' }, | |||
{ id: 'paige', name: 'Paige' }, | |||
{ id: 'paradox', name: 'Paradox' }, | |||
{ id: 'pocket', name: 'Pocket' }, | |||
{ id: 'rem', name: 'Rem' }, | |||
{ id: 'seven', name: 'Seven' }, | |||
{ id: 'shiv', name: 'Shiv' }, | |||
{ id: 'silver', name: 'Silver' }, | |||
{ id: 'sinclair', name: 'Sinclair' }, | |||
{ id: 'venator', name: 'Venator' }, | |||
{ id: 'victor', name: 'Victor' }, | |||
{ id: 'vindicta', name: 'Vindicta' }, | |||
{ id: 'viscous', name: 'Viscous' }, | |||
{ id: 'vyper', name: 'Vyper' }, | |||
{ id: 'warden', name: 'Warden' }, | |||
{ id: 'wraith', name: 'Wraith' }, | |||
{ id: 'yamato', name: 'Yamato' } | |||
]; | |||
var PREFERENCE_KEY = 'userjs-selectedicon'; | |||
// Helper function to get file path | |||
function getFilePath(filename) { | |||
return mw.util.getUrl('Special:FilePath/' + filename); | |||
} | |||
// Only run on user's own user page | |||
var config = mw.config.get(['wgNamespaceNumber', 'wgTitle', 'wgUserName']); | |||
if (config.wgNamespaceNumber !== 2 || // Not User namespace | |||
config.wgTitle !== config.wgUserName || // Not own user page | |||
!config.wgUserName) { // Not logged in | |||
applyStoredIcon(); // Still apply the icon everywhere | |||
return; | |||
} | |||
mw.loader.using(['mediawiki.api', 'mediawiki.util'], function() { | |||
init(); | |||
}); | |||
function init() { | |||
// Apply stored icon | |||
applyStoredIcon(); | |||
// Create and insert selector | |||
createIconSelector(); | |||
} | |||
function applyStoredIcon() { | |||
var api = new mw.Api(); | |||
api.get({ | |||
action: 'query', | |||
meta: 'userinfo', | |||
uiprop: 'options' | |||
}).done(function(data) { | |||
var selectedIcon = data.query.userinfo.options[PREFERENCE_KEY] || 'rem'; | |||
document.body.classList.add('usericon-' + selectedIcon); | |||
}); | |||
} | |||
function createIconSelector() { | |||
var api = new mw.Api(); | |||
// Get current selection | |||
api.get({ | |||
action: 'query', | |||
meta: 'userinfo', | |||
uiprop: 'options' | |||
}).done(function(data) { | |||
var currentIcon = data.query.userinfo.options[PREFERENCE_KEY] || 'rem'; | |||
// Build selector HTML | |||
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>'; | |||
// Insert at top of page content | |||
var $selector = $(html); | |||
$('#mw-content-text').prepend($selector); | |||
// Add click handlers | |||
$('.usericon-option').on('click', function() { | |||
var iconId = $(this).data('icon'); | |||
selectIcon(iconId); | |||
}); | |||
}); | |||
} | |||
function selectIcon(iconId) { | |||
var api = new mw.Api(); | |||
// Visual feedback | |||
$('.usericon-option').removeClass('selected'); | |||
$('.usericon-option[data-icon="' + iconId + '"]').addClass('selected'); | |||
// Update body class | |||
document.body.className = document.body.className.replace(/usericon-\w+/g, ''); | |||
document.body.classList.add('usericon-' + iconId); | |||
// Save preference | |||
api.saveOption(PREFERENCE_KEY, iconId).done(function() { | |||
mw.notify('Icon updated successfully!', { type: 'success' }); | |||
}).fail(function() { | |||
mw.notify('Failed to save icon preference.', { type: 'error' }); | |||
}); | |||
} | |||
})(); | |||
/** | /** | ||
* Rotatable Model Viewer — with 2D / 3D toggle | * Rotatable Model Viewer — with 2D / 3D toggle | ||