MediaWiki:Common.js
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/**
* 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);
});
})();