User:Monster Domosed/common.js: Difference between revisions

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