MediaWiki:Common.js: Difference between revisions

Revision as of 12:17, 19 October 2025

/* Stylish Weighted Tag Cloud */
(function() {
    if (typeof window.CEOTagCloudInit !== 'undefined') return;
    window.CEOTagCloudInit = true;

    function buildStylishTagCloud() {
        var placeholder = document.getElementById('ceo-tagcloud-placeholder');
        if (!placeholder) return;

        // Tag data with weights (1-10, higher = more popular)
        var tags = [
            {text: 'Satya Nadella', href: '/wiki/Satya_Nadella', weight: 10},
            {text: 'Sundar Pichai', href: '/wiki/Sundar_Pichai', weight: 10},
            {text: 'Tim Cook', href: '/wiki/Tim_Cook', weight: 9},
            {text: 'Andy Jassy', href: '/wiki/Andy_Jassy', weight: 9},
            {text: 'Mary Barra', href: '/wiki/Mary_Barra', weight: 8},
            {text: 'Apple', href: '/wiki/Apple_Inc.', weight: 8},
            {text: 'Google', href: '/wiki/Google', weight: 8},
            {text: 'Tech CEOs', href: '/wiki/Category:Technology_CEOs', weight: 8},
            {text: 'Microsoft', href: '/wiki/Microsoft', weight: 7},
            {text: 'Amazon', href: '/wiki/Amazon', weight: 7},
            {text: 'American CEOs', href: '/wiki/Category:American_CEOs', weight: 7},
            {text: 'CEO Profiles', href: '/wiki/Category:Chief_executive_officers', weight: 7},
            {text: 'Companies', href: '/wiki/Category:Companies', weight: 6},
            {text: 'General Motors', href: '/wiki/General_Motors', weight: 6},
            {text: 'CEOs by Country', href: '/wiki/Category:CEOs_by_country', weight: 6},
            {text: 'Fortune 500', href: '/wiki/Category:Fortune_500_CEOs', weight: 6},
            {text: 'Business Strategy', href: '/wiki/Category:Business_strategies', weight: 5},
            {text: 'Governance', href: '/wiki/Category:Corporate_governance', weight: 5},
            {text: 'Industry Analysis', href: '/wiki/Category:Industry_analysis', weight: 5},
            {text: 'Random Article', href: '/wiki/Special:Random', weight: 4}
        ];

        // Shuffle tags for visual variety
        for (var i = tags.length - 1; i > 0; i--) {
            var j = Math.floor(Math.random() * (i + 1));
            var temp = tags[i];
            tags[i] = tags[j];
            tags[j] = temp;
        }

        // Color palettes based on weight
        var colorSchemes = [
            {gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', hover: '#667eea'}, // Purple
            {gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)', hover: '#f093fb'}, // Pink
            {gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', hover: '#4facfe'}, // Blue
            {gradient: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)', hover: '#43e97b'}, // Green
            {gradient: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)', hover: '#fa709a'}, // Orange
            {gradient: 'linear-gradient(135deg, #30cfd0 0%, #330867 100%)', hover: '#30cfd0'}, // Teal
            {gradient: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)', hover: '#a8edea'}, // Pastel
            {gradient: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)', hover: '#ff9a9e'}  // Rose
        ];

        var cloudHTML = '<div class="mp-card" style="margin-top: 1em;">' +
            '<div class="mp-card-title">Most Popular Topics</div>' +
            '<div class="mp-card-content" style="padding: 2em 1.5em;">' +
            '<div class="stylish-tag-cloud" id="stylish-tag-cloud"></div>' +
            '<div style="text-align: center; margin-top: 1.5em; padding-top: 1em; border-top: 2px solid #e5e7eb;">' +
            '<div style="font-size: 0.85em; color: #6b7280; margin-bottom: 0.5em;">Font size represents popularity</div>' +
            '<div style="font-size: 0.8em; color: #9ca3af;">Click any topic to explore</div>' +
            '</div>' +
            '</div></div>';

        placeholder.innerHTML = cloudHTML;

        var cloudContainer = document.getElementById('stylish-tag-cloud');
        if (!cloudContainer) return;

        // Create tag elements
        tags.forEach(function(tag, index) {
            var a = document.createElement('a');
            a.href = tag.href;
            a.className = 'stylish-tag';
            a.textContent = tag.text;
            a.setAttribute('data-weight', tag.weight);
            
            // Font size based on weight (0.8em to 2.5em)
            var fontSize = 0.8 + (tag.weight / 10) * 1.7;
            a.style.fontSize = fontSize + 'em';
            
            // Assign color scheme
            var colorScheme = colorSchemes[index % colorSchemes.length];
            a.style.background = colorScheme.gradient;
            a.setAttribute('data-hover-color', colorScheme.hover);
            
            // Random animation delay for staggered floating effect
            var delay = Math.random() * 3;
            a.style.animationDelay = delay + 's';
            
            cloudContainer.appendChild(a);
        });

        // Add hover interaction
        var tagElements = cloudContainer.getElementsByClassName('stylish-tag');
        for (var i = 0; i < tagElements.length; i++) {
            (function(elem) {
                elem.addEventListener('mouseenter', function() {
                    this.style.transform = 'scale(1.15) translateY(-5px)';
                    this.style.boxShadow = '0 10px 30px rgba(0, 0, 0, 0.25)';
                    this.style.zIndex = '100';
                });
                
                elem.addEventListener('mouseleave', function() {
                    this.style.transform = 'scale(1) translateY(0)';
                    this.style.boxShadow = '0 4px 15px rgba(0, 0, 0, 0.15)';
                    this.style.zIndex = 'auto';
                });
            })(tagElements[i]);
        }
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', buildStylishTagCloud);
    } else {
        buildStylishTagCloud();
    }
})();