MediaWiki:Common.js: Difference between revisions

Revision as of 09:24, 20 October 2025

/**
 * Add statistics banner to account creation page
 */
(function() {
    // Only run on Special:CreateAccount page
    if (mw.config.get('wgCanonicalSpecialPageName') !== 'CreateAccount') {
        return;
    }

    // Get site statistics via API
    var api = new mw.Api();

    api.get({
        action: 'query',
        meta: 'siteinfo',
        siprop: 'statistics',
        format: 'json'
    }).done(function(data) {
        var stats = data.query.statistics;

        // Create statistics banner
        var banner = $('<div>').addClass('createaccount-statistics').html(
            '<div class="createaccount-statistics-title">CEO.wiki is made by people like you.</div>' +
            '<div class="createaccount-statistics-grid">' +
                '<div class="createaccount-stat-item">' +
                    '<div class="createaccount-stat-number">' + stats.edits.toLocaleString() + '</div>' +
                    '<div class="createaccount-stat-label">Edits</div>' +
                '</div>' +
                '<div class="createaccount-stat-item">' +
                    '<div class="createaccount-stat-number">' + stats.pages.toLocaleString() + '</div>' +
                    '<div class="createaccount-stat-label">Pages</div>' +
                '</div>' +
                '<div class="createaccount-stat-item">' +
                    '<div class="createaccount-stat-number">' + stats.activeusers.toLocaleString() + '</div>' +
                    '<div class="createaccount-stat-label">Recent Contributors</div>' +
                '</div>' +
            '</div>'
        );

        // Insert banner before the form
        $('#userloginForm').before(banner);
    });
})();

/**
 * 3D Rotating Tag Cloud for Main Page
 */
(function() {
    // Only run on Main Page
    if (mw.config.get('wgPageName') !== 'Main_Page') {
        return;
    }

    // Wait for DOM to be ready
    $(document).ready(function() {
        var placeholder = document.getElementById('ceo-tagcloud-placeholder');
        if (!placeholder) return;

        // Popular topics with sizes (representing importance/frequency)
        var topics = [
            { text: 'Satya Nadella', url: '/wiki/Satya_Nadella', size: 28 },
            { text: 'Tim Cook', url: '/wiki/Tim_Cook', size: 26 },
            { text: 'Elon Musk', url: '/wiki/Elon_Musk', size: 30 },
            { text: 'Mark Zuckerberg', url: '/wiki/Mark_Zuckerberg', size: 24 },
            { text: 'Sundar Pichai', url: '/wiki/Sundar_Pichai', size: 24 },
            { text: 'Andy Jassy', url: '/wiki/Andy_Jassy', size: 22 },
            { text: 'Jensen Huang', url: '/wiki/Jensen_Huang', size: 26 },
            { text: 'Lisa Su', url: '/wiki/Lisa_Su', size: 22 },
            { text: 'Mary Barra', url: '/wiki/Mary_Barra', size: 20 },
            { text: 'Jamie Dimon', url: '/wiki/Jamie_Dimon', size: 20 },
            { text: 'Microsoft', url: '/wiki/Microsoft', size: 18 },
            { text: 'Apple', url: '/wiki/Apple_Inc.', size: 18 },
            { text: 'Amazon', url: '/wiki/Amazon', size: 18 },
            { text: 'Google', url: '/wiki/Google', size: 18 },
            { text: 'Tesla', url: '/wiki/Tesla', size: 18 },
            { text: 'Leadership', url: '/wiki/Category:Chief_executive_officers', size: 16 },
            { text: 'Innovation', url: '/wiki/Category:Business_strategies', size: 16 },
            { text: 'Technology', url: '/wiki/Category:Companies', size: 16 },
            { text: 'Strategy', url: '/wiki/Category:Business_strategies', size: 15 },
            { text: 'Cloud Computing', url: '/wiki/Category:Industry_analysis', size: 15 }
        ];

        // Create container
        var container = document.createElement('div');
        container.id = 'tagcloud-container';
        container.style.cssText = 'background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); padding: 30px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); min-height: 300px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;';

        // Title
        var title = document.createElement('div');
        title.style.cssText = 'position: absolute; top: 15px; left: 20px; color: white; font-size: 1.3em; font-weight: 600; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); z-index: 10;';
        title.textContent = '🔥 Trending Topics';
        container.appendChild(title);

        // Cloud container
        var cloud = document.createElement('div');
        cloud.style.cssText = 'display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; align-items: center; max-width: 900px; padding: 40px 20px 20px;';

        // Add topics
        topics.forEach(function(topic) {
            var link = document.createElement('a');
            link.href = topic.url;
            link.textContent = topic.text;
            link.style.cssText = 'color: white; text-decoration: none; font-size: ' + topic.size + 'px; font-weight: 600; padding: 8px 16px; background: rgba(255,255,255,0.15); border-radius: 25px; backdrop-filter: blur(10px); transition: all 0.3s ease; display: inline-block; box-shadow: 0 4px 10px rgba(0,0,0,0.1); border: 1px solid rgba(255,255,255,0.2);';

            // Hover effects
            link.onmouseenter = function() {
                this.style.transform = 'scale(1.15) translateY(-5px)';
                this.style.background = 'rgba(255,255,255,0.3)';
                this.style.boxShadow = '0 8px 20px rgba(0,0,0,0.25)';
            };
            link.onmouseleave = function() {
                this.style.transform = 'scale(1) translateY(0)';
                this.style.background = 'rgba(255,255,255,0.15)';
                this.style.boxShadow = '0 4px 10px rgba(0,0,0,0.1)';
            };

            cloud.appendChild(link);
        });

        container.appendChild(cloud);
        placeholder.appendChild(container);

        // Subtle floating animation
        var animationStyle = document.createElement('style');
        animationStyle.textContent = '@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } #tagcloud-container a { animation: float 3s ease-in-out infinite; } #tagcloud-container a:nth-child(2n) { animation-delay: 0.5s; } #tagcloud-container a:nth-child(3n) { animation-delay: 1s; }';
        document.head.appendChild(animationStyle);
    });
})();