MediaWiki:Common.js

/* ===== 侧边工具栏 Rail ===== */
(function () {
    function initRail() {
        // 避免重复注入
        if (document.getElementById('custom-rail')) return;

        // 创建按钮
        var btn = document.createElement('button');
        btn.id = 'custom-rail-toggle';
        btn.className = 'custom-rail-toggle';
        btn.setAttribute('aria-label', '打开工具栏');
        btn.innerHTML = '<span class="custom-rail-toggle__icon">★</span>';

        // 创建面板
        var panel = document.createElement('aside');
        panel.id = 'custom-rail';
        panel.className = 'custom-rail';
        panel.innerHTML = [
            '<div class="custom-rail__header">',
            '  <span class="custom-rail__title">工具栏</span>',
            '  <button class="custom-rail__close" aria-label="关闭">×</button>',
            '</div>',
            '<div class="custom-rail__content">',
            '  <h3>快速导航</h3>',
            '  <ul>',
            '    <li><a href="/index.php/首页">首页</a></li>',
            '    <li><a href="/index.php/特殊:最近更改">最近更改</a></li>',
            '    <li><a href="/index.php/特殊:随机">随机页面</a></li>',
            '    <li><a href="/index.php/Category:站点样式">站点样式</a></li>',
            '  </ul>',
            '  <h3>公告</h3>',
            '  <p>本 Wiki 正在建设中。</p>',
            '</div>'
        ].join('');

        // 创建遮罩
        var overlay = document.createElement('div');
        overlay.id = 'custom-rail-overlay';
        overlay.className = 'custom-rail-overlay';

        document.body.appendChild(btn);
        document.body.appendChild(overlay);
        document.body.appendChild(panel);

        var closeBtn = panel.querySelector('.custom-rail__close');

        function openRail() {
            document.body.classList.add('custom-rail-open');
            btn.setAttribute('aria-label', '关闭工具栏');
        }
        function closeRail() {
            document.body.classList.remove('custom-rail-open');
            btn.setAttribute('aria-label', '打开工具栏');
        }

        btn.addEventListener('click', function () {
            if (document.body.classList.contains('custom-rail-open')) {
                closeRail();
            } else {
                openRail();
            }
        });

        closeBtn.addEventListener('click', closeRail);
        overlay.addEventListener('click', closeRail);

        // 按 Esc 关闭
        document.addEventListener('keydown', function (e) {
            if (e.key === 'Escape') closeRail();
        });
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initRail);
    } else {
        initRail();
    }
})();

/* ===== 首页轮播图 ===== */
(function () {
    function initHomeCarousel() {
        var carousel = document.getElementById('home-carousel');
        if (!carousel) return;

        var items = carousel.querySelectorAll('.home-carousel-item');
        var dotsBox = document.getElementById('home-carousel-dots');
        var prevBtn = document.getElementById('home-carousel-prev');
        var nextBtn = document.getElementById('home-carousel-next');
        if (!items.length || !dotsBox || !prevBtn || !nextBtn) return;

        var current = 0;
        var timer = null;

        items.forEach(function (_, i) {
            var dot = document.createElement('span');
            dot.className = 'home-carousel-dot' + (i === 0 ? ' active' : '');
            dot.addEventListener('click', function () { goTo(i); });
            dotsBox.appendChild(dot);
        });
        var dots = dotsBox.querySelectorAll('.home-carousel-dot');

        function goTo(index) {
            items[current].classList.remove('active');
            dots[current].classList.remove('active');
            current = (index + items.length) % items.length;
            items[current].classList.add('active');
            dots[current].classList.add('active');
        }

        function next() { goTo(current + 1); }
        function prev() { goTo(current - 1); }

        function startAuto() {
            stopAuto();
            timer = setInterval(next, 5000);
        }
        function stopAuto() {
            if (timer) { clearInterval(timer); timer = null; }
        }

        nextBtn.addEventListener('click', function () { next(); startAuto(); });
        prevBtn.addEventListener('click', function () { prev(); startAuto(); });
        carousel.addEventListener('mouseenter', stopAuto);
        carousel.addEventListener('mouseleave', startAuto);

        startAuto();
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initHomeCarousel);
    } else {
        initHomeCarousel();
    }
})();