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。
/* Windows XP风格的MediaWiki JavaScript增强 */ // 轮播图功能 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(236, 233, 216)', 'border-bottom': '1px solid rgb(0, 0, 0)' }); // 修复下拉菜单 $('.dropdown-menu').css({ 'background-color': 'rgb(236, 233, 216)', 'border': '1px solid rgb(0, 0, 0)' }); // 修复按钮 $('.btn').css({ 'background-color': 'rgb(192, 192, 192)', 'border': '1px solid rgb(0, 0, 0)', 'color': 'rgb(0, 0, 0)' }); // 修复表单控件 $('.form-control').css({ 'background-color': 'white', 'border': '1px solid rgb(0, 0, 0)', 'color': 'rgb(0, 0, 0)' }); } // 应用样式修复 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) { $.get(mw.util.wikiScript('api'), { action: 'query', list: 'users', ususers: username, usprop: 'registration|editcount', 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 = [ // SocialProfile扩展路径 '/extensions/SocialProfile/avatars/' + mw.config.get('wgDBname') + '_' + userId + '_ml.png', '/extensions/SocialProfile/avatars/' + mw.config.get('wgDBname') + '_' + userId + '_ml.jpg', '/extensions/SocialProfile/avatars/' + mw.config.get('wgDBname') + '_' + userId + '_l.png', '/extensions/SocialProfile/avatars/' + mw.config.get('wgDBname') + '_' + userId + '_l.jpg', // MediaWiki头像路径 '/images/avatars/' + mw.config.get('wgDBname') + '_' + userId + '_l.png', '/images/avatars/' + mw.config.get('wgDBname') + '_' + userId + '_l.jpg', // 默认头像 '/extensions/SocialProfile/avatars/default_ml.gif', '/extensions/SocialProfile/avatars/default_l.gif' ]; function checkPath(index) { if (index >= possiblePaths.length) { // 使用默认头像 applyAvatarCSS('/extensions/SocialProfile/avatars/default.jpg'); return; } var img = new Image(); img.onload = function() { applyAvatarCSS(mw.config.get('wgScriptPath') + possiblePaths[index]); }; img.onerror = function() { checkPath(index + 1); }; img.src = mw.config.get('wgScriptPath') + possiblePaths[index]; } checkPath(0); } }); } function applyAvatarCSS(avatarUrl) { $('<style>').text( '#pt-userpage > a::before, ' + '.vector-user-menu-legacy #pt-userpage a::before, ' + '#p-personal #pt-userpage a::before, ' + '.skin-chameleon .navbar-tools > li:first-child > a::before {' + ' background-image: url("' + avatarUrl + '") !important;' + '}' ).appendTo('head'); } }); /* Windows XP风格的MediaWiki JavaScript增强 */ // 等待文档加载完成 $(document).ready(function() { // 创建真实的开始按钮(替代伪元素) createStartButton(); // 添加扫描线效果(完整的三条扫描线) if ($('.scan-animation').length === 0) { var $scanContainer = $('<div class="scan-animation"></div>'); var $fastScan = $('<div class="fast-scan"></div>'); $scanContainer.append($fastScan); $('body').append($scanContainer); } // 添加XP窗口控制按钮(仅视觉效果) addWindowControls(); // 添加系统时钟 addSystemClock(); // 添加开始菜单功能 setupStartMenu(); // 添加窗口拖动功能 makeWindowsDraggable(); // 添加系统托盘图标 addSystemTrayIcon(); }); // 创建真实的开始按钮(修复透明问题) function createStartButton() { // 移除任何现有的开始按钮 $('.start-button').remove(); var $startButton = $('<div class="start-button">开始</div>'); $('body').append($startButton); // 创建开始按钮图标 var $startIcon = $('<span class="start-icon"></span>'); $startButton.prepend($startIcon); } // 添加XP窗口控制按钮 function addWindowControls() { // 为内容区域添加窗口控制按钮的点击效果 $(document).on('click', '.lightblock::after, .darkblock::after, h1::after, h2::after, h3::after, h4::after, h5::after, h6::after, #firstHeading::after, .section-title::after, .notaninfobox > .infobox-title::after, .infobox th::after, .error-dialog::after, #toc::after, .toc::after, .navbox-title::after, table.navbox th::after, .mw-carousel::after', function(e) { e.preventDefault(); // 定位到被点击的元素 var $clickedElement = $(this); var $parentElement = $clickedElement.parent(); // 添加关闭动画效果 $parentElement.css({ 'transition': 'all 0.3s ease', 'opacity': '0', 'transform': 'scale(0.9)' }); // 半秒后恢复元素 setTimeout(function() { $parentElement.css({ 'opacity': '1', 'transform': 'scale(1)' }); }, 500); }); // 为最小化按钮添加点击效果 $(document).on('click', '.min-button, h1::before, h2::before, h3::before, h4::before, h5::before, h6::before, #firstHeading::before', function(e) { e.preventDefault(); // 定位到被点击的元素 var $clickedElement = $(this); var $parentElement = $clickedElement.parent(); // 添加最小化动画效果 $parentElement.css({ 'transition': 'all 0.3s ease', 'opacity': '0.5', 'transform': 'translateY(50px) scale(0.9)' }); // 在任务栏添加最小化窗口图标 var windowTitle = $parentElement.find('h1, h2, h3, h4, h5, h6').first().text() || 'Window'; if (windowTitle.length > 20) windowTitle = windowTitle.substring(0, 20) + '...'; var $minimizedWindow = $('<div class="minimized-window">' + windowTitle + '</div>'); $('body').append($minimizedWindow); // 点击任务栏图标恢复窗口 $minimizedWindow.click(function() { $parentElement.css({ 'opacity': '1', 'transform': 'translateY(0) scale(1)' }); $(this).remove(); }); }); // 为最大化按钮添加点击效果 $(document).on('click', '.max-button, h1 span::after, h2 span::after, h3 span::after, h4 span::after, h5 span::after, h6 span::after, #firstHeading span::after', function(e) { e.preventDefault(); // 定位到被点击的元素 var $clickedElement = $(this); var $parentElement = $clickedElement.parent(); // 切换最大化状态 if (!$parentElement.data('maximized')) { // 保存原始尺寸和位置 $parentElement.data('original-width', $parentElement.width()); $parentElement.data('original-height', $parentElement.height()); $parentElement.data('original-position', $parentElement.css('position')); $parentElement.data('original-top', $parentElement.css('top')); $parentElement.data('original-left', $parentElement.css('left')); $parentElement.data('original-right', $parentElement.css('right')); $parentElement.data('original-bottom', $parentElement.css('bottom')); $parentElement.data('original-z-index', $parentElement.css('z-index')); // 最大化 $parentElement.css({ 'transition': 'all 0.3s ease', 'position': 'fixed', 'top': '0', 'left': '0', 'right': '0', 'bottom': '0', 'width': '100%', 'height': '100%', 'z-index': '9999' }); $parentElement.data('maximized', true); $clickedElement.text('❐'); } else { // 恢复原始尺寸和位置 $parentElement.css({ 'transition': 'all 0.3s ease', 'position': $parentElement.data('original-position'), 'top': $parentElement.data('original-top'), 'left': $parentElement.data('original-left'), 'right': $parentElement.data('original-right'), 'bottom': $parentElement.data('original-bottom'), 'width': $parentElement.data('original-width'), 'height': $parentElement.data('original-height'), 'z-index': $parentElement.data('original-z-index') }); $parentElement.data('maximized', false); $clickedElement.text('□'); } }); } // 修复系统时钟显示 function addSystemClock() { // 移除任何现有的时钟 $('.taskbar-clock').remove(); // 创建时钟元素 var $clock = $('<div class="taskbar-clock"></div>'); $('body').append($clock); // 更新时钟函数 function updateClock() { var now = new Date(); var hours = now.getHours(); var minutes = now.getMinutes(); // 格式化时间 hours = (hours < 10 ? '0' : '') + hours; minutes = (minutes < 10 ? '0' : '') + minutes; // 设置时钟显示 $clock.text(hours + ':' + minutes); } // 初始化时钟 updateClock(); // 每秒更新一次时钟 setInterval(updateClock, 1000); } // 添加开始菜单 function setupStartMenu() { // 移除任何现有的开始菜单 $('#xp-start-menu').remove(); // 创建开始菜单元素 var $startMenu = $('<div id="xp-start-menu"></div>').css({ 'position': 'fixed', 'left': '0', 'bottom': '60px', 'width': '250px', 'background-color': 'white', 'border': '2px solid #0054e3', 'box-shadow': '2px -2px 5px rgba(0, 0, 0, 0.3)', 'z-index': '10000', 'display': 'none' }); // 添加菜单顶部 var username = mw.config.get('wgUserName') || 'Guest'; var $menuTop = $('<div class="start-menu-top"></div>').css({ 'height': '60px', 'background': 'linear-gradient(to bottom, #235ddc, #225ada 50%, #214fbb)', 'color': 'white', 'padding': '10px', 'font-weight': 'bold', 'display': 'flex', 'align-items': 'center' }); $menuTop.html('<span style="font-size: 16px;">' + username + '</span>'); $startMenu.append($menuTop); // 添加菜单项 var $menuItems = $('<div class="start-menu-items"></div>').css({ 'background-color': 'white', 'padding': '5px 0' }); // 定义菜单项 var menuItemsData = [ { icon: '📄', text: '我的文档', link: '/wiki/Special:MyPage' }, { icon: '🖼️', text: '我的图片', link: '/wiki/Special:MediaStatistics' }, { icon: '🎵', text: '我的音乐', link: '#' }, { icon: '⚙️', text: '控制面板', link: '/wiki/Special:Preferences' }, { icon: '🔍', text: '搜索', link: '/wiki/Special:Search' }, { icon: '❓', text: '帮助和支持', link: '/wiki/Help:目录' }, { icon: '🚪', text: '注销', link: '/wiki/Special:UserLogout' } ]; // 添加菜单项 $.each(menuItemsData, function(index, item) { var $menuItem = $('<div class="start-menu-item"></div>').css({ 'padding': '5px 10px', 'display': 'flex', 'align-items': 'center', 'cursor': 'pointer' }); $menuItem.html('<span style="margin-right: 10px; font-size: 16px;">' + item.icon + '</span>' + '<span>' + item.text + '</span>'); // 添加悬停效果 $menuItem.hover( function() { $(this).css('background-color', '#e0ecff'); }, function() { $(this).css('background-color', 'transparent'); } ); // 添加链接功能 $menuItem.click(function() { if (item.link && item.link !== '#') { window.location.href = mw.config.get('wgScriptPath') + item.link; } }); $menuItems.append($menuItem); }); $startMenu.append($menuItems); // 添加开始菜单到body $('body').append($startMenu); // 为开始按钮添加点击事件 $(document).on('click', '.start-button', function(e) { e.stopPropagation(); $startMenu.toggle(); }); // 点击其他区域关闭开始菜单 $(document).click(function(e) { if (!$(e.target).is('.start-button') && !$(e.target).closest('#xp-start-menu').length) { $startMenu.hide(); } }); } // 使窗口可拖动 function makeWindowsDraggable() { // 让所有具有标题栏的元素可拖动 $('.main-page-banner, .announcement-container, .recent-pages-container .page-section, .featured-content-container .feature-item, .tools-container .tool-item, .news-container, .mw-carousel, .infobox, .notaninfobox, #toc, .toc, .navbox, .modulebox, .community-updates, .logoblock, .error-dialog, .lightblock, .darkblock').each(function() { var $window = $(this); var $header = $window.find('.section-title, .notaninfobox > .infobox-title, .infobox th, h1, h2, h3, h4, h5, h6, #firstHeading, .navbox-title, table.navbox th').first(); if ($header.length) { // 设置窗口的基本样式 $window.css({ 'position': 'relative' }); // 让标题栏可拖动 $header.css({ 'cursor': 'move' }).on('mousedown', function(e) { // 只有当没有点击窗口控制按钮时才允许拖动 if (!$(e.target).hasClass('min-button') && !$(e.target).hasClass('max-button') && !$(e.target).is('h1::after') && !$(e.target).is('h2::after') && !$(e.target).is('h3::after') && !$(e.target).is('h4::after') && !$(e.target).is('h5::after') && !$(e.target).is('h6::after') && !$(e.target).is('#firstHeading::after') && !$(e.target).is('.section-title::after') && !$(e.target).is('.notaninfobox > .infobox-title::after') && !$(e.target).is('.infobox th::after') && !$(e.target).is('.error-dialog::after') && !$(e.target).is('#toc::after') && !$(e.target).is('.toc::after') && !$(e.target).is('.navbox-title::after') && !$(e.target).is('table.navbox th::after') && !$(e.target).is('.mw-carousel::after')) { var startX = e.pageX; var startY = e.pageY; var startTop = parseInt($window.css('top')) || 0; var startLeft = parseInt($window.css('left')) || 0; var windowWidth = $window.outerWidth(); var windowHeight = $window.outerHeight(); // 确保窗口在可视区域内 var viewportWidth = $(window).width(); var viewportHeight = $(window).height(); // 设置窗口为绝对定位,这样可以移动 $window.css({ 'position': 'absolute', 'z-index': '1000' }); $(document).on('mousemove', function(e) { var newLeft = startLeft + (e.pageX - startX); var newTop = startTop + (e.pageY - startY); // 限制窗口在可视区域内 newLeft = Math.max(0, Math.min(newLeft, viewportWidth - windowWidth)); newTop = Math.max(0, Math.min(newTop, viewportHeight - windowHeight)); $window.css({ 'top': newTop + 'px', 'left': newLeft + 'px' }); }); $(document).on('mouseup', function() { $(document).off('mousemove mouseup'); }); e.preventDefault(); } }); } }); } // 添加系统托盘图标 function addSystemTrayIcon() { // 创建系统托盘图标 var $trayIcon = $('<div class="system-tray-icon"></div>').css({ 'position': 'fixed', 'right': '30px', 'bottom': '5px', 'width': '16px', 'height': '16px', 'background-image': 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 16 16\'%3E%3Ccircle cx=\'8\' cy=\'8\' r=\'7\' fill=\'%23ffffff\'/%3E%3Cpath d=\'M8 3v5h3\' stroke=\'%23000000\' stroke-width=\'2\' fill=\'none\'/%3E%3C/svg%3E")', 'background-repeat': 'no-repeat', 'background-size': 'contain', 'cursor': 'pointer', 'z-index': '10000' }); // 添加到body $('body').append($trayIcon); // 添加工具提示 var $tooltip = $('<div class="system-tray-tooltip"></div>').css({ 'position': 'fixed', 'right': '20px', 'bottom': '35px', 'padding': '5px 10px', 'background-color': '#ffffcc', 'border': '1px solid #999', 'font-size': '12px', 'display': 'none', 'z-index': '10001', 'box-shadow': '2px 2px 5px rgba(0, 0, 0, 0.2)' }); $tooltip.text('当前时间: ' + new Date().toLocaleTimeString()); $('body').append($tooltip); // 鼠标悬停显示工具提示 $trayIcon.hover( function() { $tooltip.show(); }, function() { $tooltip.hide(); } ); // 定时更新工具提示内容 setInterval(function() { $tooltip.text('当前时间: ' + new Date().toLocaleTimeString()); }, 1000); }
Loading comments...