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

No edit summary
No edit summary
Line 1: Line 1:
(function() {
(function () {
     'use strict';
     'use strict';
   
 
    // Configuration: Add your available icons here
     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';
   
 
    // Helper function to get file path
     function getFilePath(filename) {
     function getFilePath(filename) {
         return mw.util.getUrl('Special:FilePath/' + filename);
         return mw.util.getUrl('Special:FilePath/' + filename);
     }
     }
   
 
     // ALWAYS apply the stored icon on every page
     function getCachedIcon() {
    mw.loader.using(['mediawiki.api', 'mediawiki.util'], function() {
        return localStorage.getItem(PREFERENCE_KEY) || 'rem';
         applyStoredIcon();
    }
          
 
        // Only show selector on user's own user page
    function setCachedIcon(iconId) {
         var config = mw.config.get(['wgNamespaceNumber', 'wgTitle', 'wgUserName']);
         localStorage.setItem(PREFERENCE_KEY, iconId);
        if (config.wgNamespaceNumber === 2 && // User namespace
    }
            config.wgTitle === config.wgUserName && // Own user page
 
            config.wgUserName) { // Logged in
    function applyIcon(iconId) {
            createIconSelector();
         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 selectedIcon = data.query.userinfo.options[PREFERENCE_KEY] || 'rem';
             var serverIcon =
             document.body.classList.add('usericon-' + selectedIcon);
                data.query.userinfo.options[PREFERENCE_KEY] || 'rem';
 
             if (serverIcon !== getCachedIcon()) {
                setCachedIcon(serverIcon);
                applyIcon(serverIcon);
            }
         });
         });
     }
     }
      
 
     // =========================
    // ICON SELECTOR UI
    // =========================
     function createIconSelector() {
     function createIconSelector() {
         var api = new mw.Api();
         var currentIcon = getCachedIcon();
       
 
         // Get current selection
         var html = '<div id="usericon-selector">' +
        api.get({
            '<h3>Choose Your Profile Icon</h3>' +
            action: 'query',
            '<div class="usericon-grid">';
            meta: 'userinfo',
 
            uiprop: 'options'
        availableIcons.forEach(function (icon) {
        }).done(function(data) {
            var selected = icon.id === currentIcon ? ' selected' : '';
            var currentIcon = data.query.userinfo.options[PREFERENCE_KEY] || 'rem';
            var imgSrc = getFilePath(icon.name + '.png');
           
 
            // Build selector HTML
            html += '<div class="usericon-option' + selected + '" data-icon="' + icon.id + '">' +
            var html = '<div id="usericon-selector">' +
                '<img src="' + imgSrc + '" alt="' + icon.name + '">' +
                '<h3>Choose Your Profile Icon</h3>' +
                '<span>' + icon.name + '</span>' +
                '<div class="usericon-grid">';
                '</div>';
           
        });
            availableIcons.forEach(function(icon) {
 
                var selected = icon.id === currentIcon ? ' selected' : '';
        html += '</div></div>';
                var imgSrc = getFilePath(icon.name + '.png');
 
                html += '<div class="usericon-option' + selected + '" data-icon="' + icon.id + '">' +
        var $selector = $(html);
                    '<img src="' + imgSrc + '" alt="' + icon.name + '">' +
        $('#mw-content-text').prepend($selector);
                    '<span>' + icon.name + '</span>' +
 
                    '</div>';
        $('.usericon-option').on('click', function () {
            });
            var iconId = $(this).data('icon');
           
 
            html += '</div></div>';
            $('.usericon-option').removeClass('selected');
           
            $(this).addClass('selected');
            // Insert at top of page content
 
            var $selector = $(html);
             selectIcon(iconId);
            $('#mw-content-text').prepend($selector);
           
            // Add click handlers
            $('.usericon-option').on('click', function() {
                var iconId = $(this).data('icon');
                selectIcon(iconId);
             });
         });
         });
     }
     }
      
 
     // =========================
    // SAVE + SYNC
    // =========================
     function selectIcon(iconId) {
     function selectIcon(iconId) {
        setCachedIcon(iconId);
        applyIcon(iconId);
         var api = new mw.Api();
         var api = new mw.Api();
       
 
        // Visual feedback
         api.saveOption(PREFERENCE_KEY, iconId)
        $('.usericon-option').removeClass('selected');
            .done(function () {
        $('.usericon-option[data-icon="' + iconId + '"]').addClass('selected');
                mw.notify('Icon updated and synced across devices!', {
       
                    type: 'success'
        // Update body class
                });
        document.body.className = document.body.className.replace(/usericon-\w+/g, '');
            })
        document.body.classList.add('usericon-' + iconId);
            .fail(function () {
       
                mw.notify('Failed to save icon.', {
        // Save preference
                    type: 'error'
         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' });
        });
     }
     }
   
})();


    // =========================
    // 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();
        }
    });


})();