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
});
});
// 添加到common.js或者一个新的JavaScript文件
$(document).ready(function() {
var username = mw.config.get('wgUserName');
if (username) {
// 使用SocialProfile扩展的头像URL
var avatarUrl = mw.util.getUrl('Special:SocialProfile/Avatar/' + username);
$('body').append('<style>:root { --user-avatar-url: url("' + avatarUrl + '") !important; }</style>');
}
});
Loading comments...