MediaWiki:Common.js
来自Age Of History 2 Chinese Wiki
注意:在发布之后,您可能需要清除浏览器缓存才能看到所作出的更改的影响。
- Firefox或Safari:按住Shift的同时单击刷新,或按Ctrl-F5或Ctrl-R(Mac为⌘-R)
- Google Chrome:按Ctrl-Shift-R(Mac为⌘-Shift-R)
- Edge:按住Ctrl的同时单击刷新,或按Ctrl-F5。
/* 轮播图功能 */
mw.hook('wikipage.content').add(function($content) {
// 查找页面中所有轮播图
$content.find('.mw-carousel').each(function() {
const $carousel = $(this);
const $items = $carousel.find('.carousel-item');
const $indicators = $carousel.find('.carousel-indicators');
const $prevBtn = $carousel.find('.carousel-prev');
const $nextBtn = $carousel.find('.carousel-next');
let currentIndex = 0;
const slideCount = $items.length;
if (slideCount === 0) return;
// 创建指示器
for (let i = 0; i < slideCount; i++) {
const $indicator = $('<div class="indicator"></div>');
if (i === 0) $indicator.addClass('active');
$indicator.on('click', function() {
goToSlide(i);
});
$indicators.append($indicator);
}
// 初始化第一张幻灯片
$items.eq(0).addClass('active');
// 给每个幻灯片添加点击事件
$items.each(function() {
const $item = $(this);
const link = $item.data('link');
if (link && link.length > 0) {
$item.css('cursor', 'pointer').on('click', function() {
window.location.href = link;
});
}
});
// 切换到指定幻灯片
function goToSlide(index) {
$items.removeClass('active');
$indicators.find('.indicator').removeClass('active');
$items.eq(index).addClass('active');
$indicators.find('.indicator').eq(index).addClass('active');
currentIndex = index;
}
// 上一张
function prevSlide() {
const newIndex = (currentIndex - 1 + slideCount) % slideCount;
goToSlide(newIndex);
}
// 下一张
function nextSlide() {
const newIndex = (currentIndex + 1) % slideCount;
goToSlide(newIndex);
}
// 绑定按钮事件
$prevBtn.on('click', function(e) {
e.preventDefault();
e.stopPropagation();
prevSlide();
});
$nextBtn.on('click', function(e) {
e.preventDefault();
e.stopPropagation();
nextSlide();
});
// 自动播放
let autoplayInterval = setInterval(nextSlide, 5000);
$carousel.on('mouseenter', function() {
clearInterval(autoplayInterval);
}).on('mouseleave', function() {
autoplayInterval = setInterval(nextSlide, 5000);
});
// 触摸滑动支持
let touchStartX = 0;
let touchEndX = 0;
$carousel.on('touchstart', function(e) {
touchStartX = e.originalEvent.touches[0].clientX;
});
$carousel.on('touchend', function(e) {
touchEndX = e.originalEvent.changedTouches[0].clientX;
// 判断滑动方向
if (touchEndX < touchStartX - 50) {
nextSlide(); // 左滑,下一张
} else if (touchEndX > touchStartX + 50) {
prevSlide(); // 右滑,上一张
}
});
});
});
// Collapsible blocks functionality
$(document).ready(function() {
// Initialize collapsible blocks
$('.collapsible-header').click(function() {
$(this).next('.collapsible-content').slideToggle();
$(this).toggleClass('active');
});
// Initially hide collapsible content
$('.collapsible-content').hide();
});
/* Common.js - Database New主题JavaScript增强 */
$(function() {
// 创建CRT效果容器
function createCRTEffects() {
if ($('.crt-effects').length === 0) {
var crtContainer = $('<div>', {
'class': 'crt-effects',
html: [
$('<div>', {'class': 'scan-line-effect'}),
$('<div>', {'class': 'scan-animation'}).append(
$('<div>', {'class': 'fast-scan'})
),
$('<div>', {'class': 'radial-glow'})
]
});
$('body').append(crtContainer);
}
}
// 初始化CRT效果
createCRTEffects();
// 橙幕切换功能
if (typeof window.orangemu_toggle_init === 'undefined') {
window.orangemu_toggle_init = true;
// 为橙幕添加点击切换功能
$(document).on('click', '.orangemu', function(e) {
e.stopPropagation();
$(this).toggleClass('orangemu_toggle_on');
});
}
// 修复动画问题
function fixAnimations() {
// 延迟应用动画,防止页面加载时的闪烁
setTimeout(function() {
$('#mw-content-text > *').each(function(index) {
$(this).css({
'animation': 'fadeIn 0.5s ease-out forwards',
'animation-delay': (index * 0.1) + 's',
'opacity': '0'
});
});
}, 100);
}
// 应用动画修复
$(document).ready(function() {
fixAnimations();
});
// 监听新内容加载(如AJAX)
mw.hook('wikipage.content').add(function($content) {
if ($content.attr('id') === 'mw-content-text') {
fixAnimations();
}
});
// 添加复古终端效果的打字动画
function typeWriter(element, text, speed) {
var i = 0;
element.empty();
function type() {
if (i < text.length) {
element.append(text.charAt(i));
i++;
setTimeout(type, speed);
}
}
type();
}
// 为特定元素应用打字效果
$('.terminal-text').each(function() {
var text = $(this).text();
typeWriter($(this), text, 50);
});
// 添加闪烁光标效果
function createBlinkingCursor() {
var cursor = $('<span>', {
'class': 'terminal-cursor',
text: '▋'
});
setInterval(function() {
cursor.toggle();
}, 500);
return cursor;
}
// 为终端元素添加光标
$('.terminal').each(function() {
$(this).append(createBlinkingCursor());
});
// 模拟CRT屏幕抖动效果
function screenGlitch() {
var container = $('#content');
container.css('transform', 'translate(' + (Math.random() * 2 - 1) + 'px, ' + (Math.random() * 2 - 1) + 'px)');
setTimeout(function() {
container.css('transform', 'translate(0, 0)');
}, 50);
}
// 随机触发屏幕抖动
setInterval(function() {
if (Math.random() < 0.005) { // 0.5%的概率
screenGlitch();
}
}, 1000);
// 为页面添加启动动画
function bootSequence() {
$('body').addClass('booting');
setTimeout(function() {
$('body').removeClass('booting').addClass('booted');
}, 500);
}
// 页面加载时执行启动序列
bootSequence();
});
// 辅助CSS类
$(function() {
// 动态添加一些必要的CSS
var customStyles = `
.terminal-cursor {
animation: blink 1s infinite;
}
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
.booting #content {
opacity: 0;
transform: scale(0.95);
transition: all 0.5s ease-out;
}
.booted #content {
opacity: 1;
transform: scale(1);
}
.terminal {
font-family: var(--mono-font);
background-color: rgb(var(--black-monochrome));
color: rgb(var(--bright-accent));
padding: 1rem;
border: 2px solid rgb(var(--bright-accent));
box-shadow: 0 0 10px rgba(var(--bright-accent), 0.3);
}
/* 修复动画闪烁问题 */
#mw-content-text > * {
visibility: visible;
}
.mw-parser-output > *.animated {
animation: none !important;
}
`;
$('<style>').text(customStyles).appendTo('head');
});
// 修复变色龙皮肤的Bootstrap组件
$(function() {
function fixBootstrapComponents() {
// 修复导航栏
$('.navbar').css({
'background-color': 'rgb(10, 10, 10)',
'border-bottom': '1px solid rgb(229, 140, 36)'
});
// 修复下拉菜单
$('.dropdown-menu').css({
'background-color': 'rgb(10, 10, 10)',
'border': '1px solid rgb(229, 140, 36)'
});
// 修复按钮
$('.btn').css({
'background-color': 'rgb(72, 69, 60)',
'border': '1px solid rgb(229, 140, 36)',
'color': 'rgb(229, 140, 36)'
});
// 修复表单控件
$('.form-control').css({
'background-color': 'rgb(10, 10, 10)',
'border': '1px solid rgb(229, 140, 36)',
'color': 'rgb(229, 140, 36)'
});
}
// 应用样式修复
fixBootstrapComponents();
// 监听DOM变化
var observer = new MutationObserver(function(mutations) {
fixBootstrapComponents();
});
observer.observe(document.body, {
childList: true,
subtree: true
});
});
// 顶栏头像显示
// 增强的头像显示
$(document).ready(function() {
var username = mw.config.get('wgUserName');
if (username) {
// 获取用户ID,是生成头像URL的关键
$.get(mw.util.wikiScript('api'), {
action: 'query',
list: 'users',
ususers: username,
format: 'json'
}).done(function(data) {
if (data && data.query && data.query.users && data.query.users[0]) {
var userId = data.query.users[0].userid;
// 尝试几种可能的头像路径格式
var possiblePaths = [
'/images/avatars/' + mw.config.get('wgDBname') + '_' + userId + '_s.jpg',
'/images/avatars/' + mw.config.get('wgDBname') + '_' + userId + '_s.png',
'/images/avatars/' + mw.config.get('wgDBname') + '_' + userId + '_s.gif',
'/extensions/SocialProfile/avatars/' + mw.config.get('wgDBname') + '_' + userId + '_s.jpg',
'/extensions/SocialProfile/avatars/' + mw.config.get('wgDBname') + '_' + userId + '_s.png',
'/extensions/SocialProfile/avatars/' + mw.config.get('wgDBname') + '_' + userId + '_s.gif'
];
// 检查哪个路径可用
function checkPath(index) {
if (index >= possiblePaths.length) {
// 所有路径都不可用,使用默认头像
applyAvatarCSS('/extensions/SocialProfile/images/default_s.gif');
return;
}
var img = new Image();
img.onload = function() {
// 找到可用的路径
applyAvatarCSS(possiblePaths[index]);
};
img.onerror = function() {
// 尝试下一个路径
checkPath(index + 1);
};
img.src = mw.config.get('wgScriptPath') + possiblePaths[index];
}
checkPath(0);
}
});
}
function applyAvatarCSS(avatarUrl) {
// 应用CSS规则
$('<style>').text(
'.navbar-userloggedin::before, ' +
'#personal-inner::before, ' +
'#p-personal .vector-menu-content-list > li:first-child > a::before, ' +
'.navbar-personaltools > li:first-child > a::before {' +
' background-image: url("' + avatarUrl + '") !important;' +
'}'
).appendTo('head');
}
});
// Windows XP风格窗口控制按钮
$(document).ready(function() {
function addXPWindowControls() {
// 为各种容器添加Windows XP风格的控制按钮
var containers = [
'.infobox th',
'.notaninfobox .infobox-title',
'.navbox-title',
'.toc .toctitle',
'#toc .toctitle',
'.announcement-container .section-title',
'.recent-pages-container .section-title',
'.featured-content-container .section-title'
];
$(containers.join(', ')).each(function() {
// 检查是否已经添加了控制按钮
if ($(this).find('.xp-window-controls').length === 0) {
// 创建控制按钮容器
var controls = $('<div class="xp-window-controls"></div>');
// 创建最小化按钮
var minButton = $('<div class="xp-window-button xp-minimize" title="最小化"></div>');
minButton.on('click', function(e) {
e.stopPropagation();
$(this).closest('.infobox, .notaninfobox, .navbox, .toc, .announcement-container, .page-section, .feature-item').toggleClass('minimized');
});
// 创建最大化按钮
var maxButton = $('<div class="xp-window-button xp-maximize" title="最大化"></div>');
maxButton.on('click', function(e) {
e.stopPropagation();
$(this).closest('.infobox, .notaninfobox, .navbox, .toc, .announcement-container, .page-section, .feature-item').toggleClass('maximized');
});
// 创建关闭按钮
var closeButton = $('<div class="xp-window-button xp-close" title="关闭"></div>');
closeButton.on('click', function(e) {
e.stopPropagation();
$(this).closest('.infobox, .notaninfobox, .navbox, .toc, .announcement-container, .page-section, .feature-item').fadeOut(300);
});
// 添加按钮到控制容器
controls.append(minButton).append(maxButton).append(closeButton);
// 添加控制容器到标题
$(this).append(controls);
}
});
}
// 初始加载时添加控制按钮
addXPWindowControls();
// 内容变化时(比如通过AJAX加载)也添加控制按钮
$(document).on('DOMNodeInserted', function(e) {
// 延迟执行,防止过多调用
setTimeout(function() {
addXPWindowControls();
}, 500);
});
});
Loading comments...