Jump to content

MediaWiki:Common.js: Difference between revisions

The comprehensive free global encyclopedia of CEOs, corporate leadership, and business excellence
← Older editNewer edit →
Fixed 3D tag cloud - now auto-rotates continuously, uses Canvas for visibility, clickable tags, proper depth sorting
Using proven TagCanvas library from CDN for reliable 3D auto-rotating tag cloud
Line 44: Line 44:


/**
/**
  * Simple 3D Rotating Tag Cloud for Main Page
  * 3D Rotating Tag Cloud using TagCanvas library
  * Auto-rotates continuously, very visible
  * Loads from CDN and initializes on Main Page
  */
  */
(function() {
(function() {
Line 54: Line 54:


     $(document).ready(function() {
     $(document).ready(function() {
        var placeholder = document.getElementById('ceo-tagcloud-placeholder');
         // Check if canvas element exists
        if (!placeholder) return;
         if (!document.getElementById('tagcanvas')) {
 
             return;
         // Topics
        var topics = [
            { text: 'Satya Nadella', url: '/wiki/Satya_Nadella' },
            { text: 'Tim Cook', url: '/wiki/Tim_Cook' },
            { text: 'Elon Musk', url: '/wiki/Elon_Musk' },
            { text: 'Mark Zuckerberg', url: '/wiki/Mark_Zuckerberg' },
            { text: 'Sundar Pichai', url: '/wiki/Sundar_Pichai' },
            { text: 'Andy Jassy', url: '/wiki/Andy_Jassy' },
            { text: 'Jensen Huang', url: '/wiki/Jensen_Huang' },
            { text: 'Lisa Su', url: '/wiki/Lisa_Su' },
            { text: 'Mary Barra', url: '/wiki/Mary_Barra' },
            { text: 'Jamie Dimon', url: '/wiki/Jamie_Dimon' },
            { text: 'Microsoft', url: '/wiki/Microsoft' },
            { text: 'Apple', url: '/wiki/Apple_Inc.' },
            { text: 'Amazon', url: '/wiki/Amazon' },
            { text: 'Google', url: '/wiki/Google' },
            { text: 'Tesla', url: '/wiki/Tesla' },
            { text: 'Leadership', url: '/wiki/Category:Chief_executive_officers' },
            { text: 'Innovation', url: '/wiki/Category:Business_strategies' },
            { text: 'Technology', url: '/wiki/Category:Companies' },
            { text: 'Strategy', url: '/wiki/Category:Business_strategies' },
            { text: 'Cloud Computing', url: '/wiki/Category:Industry_analysis' }
        ];
 
        // Create container
        var container = $('<div>').css({
            '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)',
            'min-height': '400px',
            'position': 'relative',
            'overflow': 'hidden'
        });
 
        // Title
        var title = $('<div>').text('TRENDING TOPICS').css({
            'color': 'white',
            'font-size': '1.4em',
            'font-weight': '700',
            'text-align': 'center',
            'margin-bottom': '30px',
            'text-shadow': '0 4px 10px rgba(0,0,0,0.5)'
        });
        container.append(title);
 
        // Canvas for 3D cloud
        var canvas = $('<canvas>').attr({
            'id': 'tagcloud3d-canvas',
            'width': '800',
            'height': '400'
         }).css({
            'display': 'block',
            'margin': '0 auto',
            'max-width': '100%'
        });
        container.append(canvas);
        placeholder.appendChild(container[0]);
 
        // 3D Tag Cloud Implementation
        var ctx = canvas[0].getContext('2d');
        var tags = [];
        var radius = 150;
        var fallLength = 500;
        var angleX = 0;
        var angleY = 0;
        var speedX = 0.01; // Auto-rotation speed
        var speedY = 0.015;
 
        // Initialize tags in 3D space
        topics.forEach(function(topic, i) {
            var phi = Math.acos(-1 + (2 * i) / topics.length);
            var theta = Math.sqrt(topics.length * Math.PI) * phi;
 
            tags.push({
                text: topic.text,
                url: topic.url,
                x: radius * Math.sin(phi) * Math.cos(theta),
                y: radius * Math.cos(phi),
                z: radius * Math.sin(phi) * Math.sin(theta),
                originalX: radius * Math.sin(phi) * Math.cos(theta),
                originalY: radius * Math.cos(phi),
                originalZ: radius * Math.sin(phi) * Math.sin(theta)
            });
        });
 
        // Rotation functions
        function rotateX(x, y, z, angle) {
            var cos = Math.cos(angle);
            var sin = Math.sin(angle);
            return {
                x: x,
                y: y * cos - z * sin,
                z: y * sin + z * cos
            };
        }
 
        function rotateY(x, y, z, angle) {
            var cos = Math.cos(angle);
            var sin = Math.sin(angle);
            return {
                x: x * cos + z * sin,
                y: y,
                z: -x * sin + z * cos
            };
        }
 
        // Animation loop
        function animate() {
            // Clear canvas
            ctx.clearRect(0, 0, canvas[0].width, canvas[0].height);
 
            // Auto-rotate
            angleX += speedX;
            angleY += speedY;
 
            // Update and draw tags
            tags.forEach(function(tag) {
                // Apply rotations
                var rotated = rotateX(tag.originalX, tag.originalY, tag.originalZ, angleX);
                rotated = rotateY(rotated.x, rotated.y, rotated.z, angleY);
 
                tag.x = rotated.x;
                tag.y = rotated.y;
                tag.z = rotated.z;
            });
 
             // Sort by z-depth (back to front)
            tags.sort(function(a, b) {
                return a.z - b.z;
            });
 
            // Draw tags
            tags.forEach(function(tag) {
                var scale = fallLength / (fallLength + tag.z);
                var x = tag.x * scale + canvas[0].width / 2;
                var y = tag.y * scale + canvas[0].height / 2;
                var alpha = (tag.z + radius) / (2 * radius);
                alpha = Math.max(0.3, Math.min(1, alpha));
 
                // Font size based on depth
                var fontSize = Math.floor(14 + 10 * scale);
 
                ctx.save();
                ctx.font = fontSize + 'px sans-serif, "Helvetica Neue", Helvetica, Arial';
                ctx.fillStyle = 'rgba(255, 255, 255, ' + alpha + ')';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
                ctx.shadowBlur = 5;
                ctx.fillText(tag.text, x, y);
                ctx.restore();
            });
 
            requestAnimationFrame(animate);
         }
         }


         // Start animation
         // Load TagCanvas library from CDN
         animate();
         var script = document.createElement('script');
 
         script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery.tagcanvas/2.11/jquery.tagcanvas.min.js';
         // Make tags clickable
         script.onload = function() {
         canvas.on('click', function(e) {
             // Initialize TagCanvas after library loads
             var rect = canvas[0].getBoundingClientRect();
            try {
            var x = e.clientX - rect.left;
                $('#tagcanvas').tagcanvas({
            var y = e.clientY - rect.top;
                    textColour: '#ffffff',
 
                    textFont: 'sans-serif, Arial, Helvetica',
            // Check if click is near any tag
                    outlineColour: 'transparent',
            for (var i = tags.length - 1; i >= 0; i--) {
                    outlineThickness: 0,
                var tag = tags[i];
                    maxSpeed: 0.03,
                var scale = fallLength / (fallLength + tag.z);
                    freezeActive: true,
                var tagX = tag.x * scale + canvas[0].width / 2;
                    shuffleTags: true,
                var tagY = tag.y * scale + canvas[0].height / 2;
                    shape: 'sphere',
 
                    zoom: 1.0,
                ctx.font = Math.floor(14 + 10 * scale) + 'px sans-serif';
                    noSelect: true,
                var metrics = ctx.measureText(tag.text);
                    textHeight: 20,
                 var width = metrics.width;
                    wheelZoom: false,
                var height = Math.floor(14 + 10 * scale);
                    reverse: true,
 
                    depth: 0.8,
                 if (x >= tagX - width/2 && x <= tagX + width/2 &&
                    initial: [0.1, -0.1],
                    y >= tagY - height/2 && y <= tagY + height/2) {
                    fadeIn: 1000,
                    window.location.href = tag.url;
                    clickToFront: 600,
                    break;
                    shadow: '#000000',
                }
                    shadowBlur: 3,
                    shadowOffset: [0, 2],
                    weight: true,
                    weightMode: 'size',
                    weightFrom: 'font-size',
                    weightSize: 1.5,
                    weightGradient: {
                        0: '#ffffff',
                        0.5: '#ffffff',
                        1: '#ffffff'
                    }
                 }, 'tagcanvas-wrapper');
            } catch(e) {
                // If TagCanvas fails, hide canvas and show fallback
                 $('#tagcanvas-wrapper').html('<div style="color: white; padding: 40px;">Trending: Satya Nadella • Tim Cook • Elon Musk • Jensen Huang • Mark Zuckerberg • Sundar Pichai • Andy Jassy • Lisa Su • Mary Barra • Jamie Dimon</div>');
             }
             }
         });
         };
 
         script.onerror = function() {
         // Change cursor on hover
             // If CDN fails, show fallback
        canvas.on('mousemove', function(e) {
            $('#tagcanvas-wrapper').html('<div style="color: white; padding: 40px;">Trending: Satya Nadella • Tim Cook • Elon Musk • Jensen Huang • Mark Zuckerberg • Sundar Pichai • Andy Jassy • Lisa Su • Mary Barra • Jamie Dimon</div>');
             var rect = canvas[0].getBoundingClientRect();
        };
            var x = e.clientX - rect.left;
        document.head.appendChild(script);
            var y = e.clientY - rect.top;
            var overTag = false;
 
            for (var i = tags.length - 1; i >= 0; i--) {
                var tag = tags[i];
                var scale = fallLength / (fallLength + tag.z);
                var tagX = tag.x * scale + canvas[0].width / 2;
                var tagY = tag.y * scale + canvas[0].height / 2;
 
                ctx.font = Math.floor(14 + 10 * scale) + 'px sans-serif';
                var metrics = ctx.measureText(tag.text);
                var width = metrics.width;
                var height = Math.floor(14 + 10 * scale);
 
                if (x >= tagX - width/2 && x <= tagX + width/2 &&
                    y >= tagY - height/2 && y <= tagY + height/2) {
                    overTag = true;
                    break;
                }
            }
 
            canvas.css('cursor', overTag ? 'pointer' : 'default');
        });
     });
     });
})();
})();

Revision as of 10:27, 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 using TagCanvas library
 * Loads from CDN and initializes on Main Page
 */
(function() {
    // Only run on Main Page
    if (mw.config.get('wgPageName') !== 'Main_Page') {
        return;
    }

    $(document).ready(function() {
        // Check if canvas element exists
        if (!document.getElementById('tagcanvas')) {
            return;
        }

        // Load TagCanvas library from CDN
        var script = document.createElement('script');
        script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery.tagcanvas/2.11/jquery.tagcanvas.min.js';
        script.onload = function() {
            // Initialize TagCanvas after library loads
            try {
                $('#tagcanvas').tagcanvas({
                    textColour: '#ffffff',
                    textFont: 'sans-serif, Arial, Helvetica',
                    outlineColour: 'transparent',
                    outlineThickness: 0,
                    maxSpeed: 0.03,
                    freezeActive: true,
                    shuffleTags: true,
                    shape: 'sphere',
                    zoom: 1.0,
                    noSelect: true,
                    textHeight: 20,
                    wheelZoom: false,
                    reverse: true,
                    depth: 0.8,
                    initial: [0.1, -0.1],
                    fadeIn: 1000,
                    clickToFront: 600,
                    shadow: '#000000',
                    shadowBlur: 3,
                    shadowOffset: [0, 2],
                    weight: true,
                    weightMode: 'size',
                    weightFrom: 'font-size',
                    weightSize: 1.5,
                    weightGradient: {
                        0: '#ffffff',
                        0.5: '#ffffff',
                        1: '#ffffff'
                    }
                }, 'tagcanvas-wrapper');
            } catch(e) {
                // If TagCanvas fails, hide canvas and show fallback
                $('#tagcanvas-wrapper').html('<div style="color: white; padding: 40px;">Trending: Satya Nadella • Tim Cook • Elon Musk • Jensen Huang • Mark Zuckerberg • Sundar Pichai • Andy Jassy • Lisa Su • Mary Barra • Jamie Dimon</div>');
            }
        };
        script.onerror = function() {
            // If CDN fails, show fallback
            $('#tagcanvas-wrapper').html('<div style="color: white; padding: 40px;">Trending: Satya Nadella • Tim Cook • Elon Musk • Jensen Huang • Mark Zuckerberg • Sundar Pichai • Andy Jassy • Lisa Su • Mary Barra • Jamie Dimon</div>');
        };
        document.head.appendChild(script);
    });
})();
Retrieved from "https://ceo.wiki/index.php?title=MediaWiki:Common.js&oldid=298"