MediaWiki:Common.js: Difference between revisions

Revision as of 09:36, 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 Interactive Rotating Tag Cloud for Main Page
 * True 3D sphere with mouse interaction
 */
(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 importance weights
        var topics = [
            { text: 'Satya Nadella', url: '/wiki/Satya_Nadella', weight: 9 },
            { text: 'Tim Cook', url: '/wiki/Tim_Cook', weight: 8 },
            { text: 'Elon Musk', url: '/wiki/Elon_Musk', weight: 10 },
            { text: 'Mark Zuckerberg', url: '/wiki/Mark_Zuckerberg', weight: 7 },
            { text: 'Sundar Pichai', url: '/wiki/Sundar_Pichai', weight: 7 },
            { text: 'Andy Jassy', url: '/wiki/Andy_Jassy', weight: 6 },
            { text: 'Jensen Huang', url: '/wiki/Jensen_Huang', weight: 8 },
            { text: 'Lisa Su', url: '/wiki/Lisa_Su', weight: 6 },
            { text: 'Mary Barra', url: '/wiki/Mary_Barra', weight: 5 },
            { text: 'Jamie Dimon', url: '/wiki/Jamie_Dimon', weight: 5 },
            { text: 'Microsoft', url: '/wiki/Microsoft', weight: 5 },
            { text: 'Apple', url: '/wiki/Apple_Inc.', weight: 5 },
            { text: 'Amazon', url: '/wiki/Amazon', weight: 5 },
            { text: 'Google', url: '/wiki/Google', weight: 5 },
            { text: 'Tesla', url: '/wiki/Tesla', weight: 5 },
            { text: 'Leadership', url: '/wiki/Category:Chief_executive_officers', weight: 4 },
            { text: 'Innovation', url: '/wiki/Category:Business_strategies', weight: 4 },
            { text: 'Technology', url: '/wiki/Category:Companies', weight: 4 },
            { text: 'Strategy', url: '/wiki/Category:Business_strategies', weight: 4 },
            { text: 'Cloud Computing', url: '/wiki/Category:Industry_analysis', weight: 4 }
        ];

        // Create container
        var container = document.createElement('div');
        container.id = 'tagcloud-3d-container';
        container.style.cssText = 'background: linear-gradient(135deg, #0a1929 0%, #1a2942 50%, #0d2744 100%); padding: 40px 20px; border-radius: 12px; box-shadow: 0 15px 40px rgba(0,0,0,0.4), inset 0 2px 10px rgba(255,255,255,0.05); min-height: 400px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; perspective: 1000px;';

        // Add animated background pattern
        var bgPattern = document.createElement('div');
        bgPattern.style.cssText = 'position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.1; background-image: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(255,255,255,0.1) 0%, transparent 50%);';
        container.appendChild(bgPattern);

        // Title
        var title = document.createElement('div');
        title.style.cssText = 'position: absolute; top: 20px; left: 50%; transform: translateX(-50%); color: white; font-size: 1.4em; font-weight: 700; text-shadow: 0 4px 10px rgba(0,0,0,0.5), 0 0 20px rgba(255,255,255,0.1); z-index: 10; letter-spacing: 1px;';
        title.textContent = 'TRENDING TOPICS';
        container.appendChild(title);

        // 3D Cloud container
        var cloud = document.createElement('div');
        cloud.id = 'tagcloud-3d';
        cloud.style.cssText = 'position: relative; width: 100%; max-width: 700px; height: 350px; transform-style: preserve-3d;';

        // Create tags with 3D positioning
        var radius = 180;
        var tags = [];
        var angleX = 0;
        var angleY = 0;
        var speed = 0.3;
        var mouseX = 0;
        var mouseY = 0;

        topics.forEach(function(topic, index) {
            var link = document.createElement('a');
            link.href = topic.url;
            link.textContent = topic.text;

            var fontSize = 14 + (topic.weight * 2);
            link.style.cssText = 'position: absolute; left: 50%; top: 50%; color: white; text-decoration: none; font-size: ' + fontSize + 'px; font-weight: 600; padding: 8px 18px; background: rgba(255,255,255,0.12); border-radius: 25px; backdrop-filter: blur(10px); transition: all 0.3s ease; white-space: nowrap; border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 4px 15px rgba(0,0,0,0.3);';

            // Calculate initial 3D position on sphere
            var phi = Math.acos(-1 + (2 * index) / topics.length);
            var theta = Math.sqrt(topics.length * Math.PI) * phi;

            link.phi = phi;
            link.theta = theta;

            // Hover effects
            link.onmouseenter = function() {
                this.style.transform = this.style.transform.replace(/scale\([^)]+\)/, '') + ' scale(1.25)';
                this.style.background = 'rgba(255,255,255,0.25)';
                this.style.boxShadow = '0 8px 25px rgba(0,0,0,0.5), 0 0 30px rgba(255,255,255,0.2)';
                this.style.zIndex = '1000';
            };
            link.onmouseleave = function() {
                this.style.transform = this.style.transform.replace(/scale\([^)]+\)/, '') + ' scale(1)';
                this.style.background = 'rgba(255,255,255,0.12)';
                this.style.boxShadow = '0 4px 15px rgba(0,0,0,0.3)';
                this.style.zIndex = '';
            };

            cloud.appendChild(link);
            tags.push(link);
        });

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

        // Mouse tracking for interactive rotation
        container.addEventListener('mousemove', function(e) {
            var rect = container.getBoundingClientRect();
            mouseX = (e.clientX - rect.left - rect.width / 2) / (rect.width / 2);
            mouseY = (e.clientY - rect.top - rect.height / 2) / (rect.height / 2);
        });

        container.addEventListener('mouseleave', function() {
            mouseX = 0;
            mouseY = 0;
        });

        // Animation loop
        function animate() {
            // Update rotation based on mouse position or auto-rotate
            angleY += (mouseX * 2 - angleY) * 0.05 + speed * 0.01;
            angleX += (mouseY * 2 - angleX) * 0.05;

            // Update each tag position
            tags.forEach(function(tag) {
                var phi = tag.phi;
                var theta = tag.theta + angleY;

                // 3D to 2D projection
                var x = radius * Math.sin(phi) * Math.cos(theta);
                var y = radius * Math.cos(phi) + Math.sin(angleX) * 30;
                var z = radius * Math.sin(phi) * Math.sin(theta);

                // Calculate scale based on z-depth
                var scale = (z + radius) / (2 * radius);
                scale = Math.max(0.5, Math.min(1.2, scale));

                // Calculate opacity based on z-depth
                var opacity = (z + radius) / (2 * radius);
                opacity = Math.max(0.4, Math.min(1, opacity));

                // Apply 3D transform
                var transformStyle = 'translate(-50%, -50%) translate3d(' + x + 'px, ' + y + 'px, ' + z + 'px) scale(' + scale + ')';
                tag.style.transform = transformStyle;
                tag.style.opacity = opacity;
                tag.style.zIndex = Math.floor(z + radius);
            });

            requestAnimationFrame(animate);
        }

        animate();

        // Add instruction text
        var instruction = document.createElement('div');
        instruction.style.cssText = 'position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.6); font-size: 0.9em; text-shadow: 0 2px 5px rgba(0,0,0,0.5); z-index: 10;';
        instruction.textContent = 'Move your mouse to rotate';
        container.appendChild(instruction);
    });
})();