查看“︁MediaWiki:Common.js”︁的源代码

/* ===== 侧边工具栏 Rail 管理器 ===== */
/* ===== 侧边工具栏 Rail 管理器 ===== */
window.Rail = (function () {
    var items = [];
    var activeId = null;
    var panelEl, overlayEl, buttonsEl, contentEl, titleEl;

    function ensureDOM() {
        if (document.getElementById('rail-container')) return;

        buttonsEl = document.createElement('div');
        buttonsEl.id = 'rail-container';
        buttonsEl.className = 'rail-container';

        overlayEl = document.createElement('div');
        overlayEl.id = 'rail-overlay';
        overlayEl.className = 'rail-overlay';

        panelEl = document.createElement('aside');
        panelEl.id = 'rail-panel';
        panelEl.className = 'rail-panel';
        panelEl.innerHTML = [
            '<div class="rail-panel__header">',
            '  <span class="rail-panel__title"></span>',
            '  <button class="rail-panel__close" type="button" aria-label="关闭">×</button>',
            '</div>',
            '<div class="rail-panel__content" id="rail-panel-content"></div>'
        ].join('');

        titleEl = panelEl.querySelector('.rail-panel__title');
        contentEl = panelEl.querySelector('#rail-panel-content');

        document.body.appendChild(overlayEl);
        document.body.appendChild(panelEl);
        document.body.appendChild(buttonsEl);

        panelEl.querySelector('.rail-panel__close').addEventListener('click', close);
        overlayEl.addEventListener('click', close);
        document.addEventListener('keydown', function (e) {
            if (e.key === 'Escape') close();
        });
    }

   function createButton(item) {
    var btn = document.createElement('button');
    btn.type = 'button';
    btn.className = 'rail-button fx-swap fx-pulse';   // 呼吸 
    btn.setAttribute('data-rail-id', item.id);
    btn.setAttribute('aria-label', item.label);
    btn.setAttribute('title', item.label);

    var iconDefault = item.icon || '●';
    var iconActive = item.iconActive || iconDefault;

    btn.innerHTML =
        '<span class="fx-swap__a rail-button__icon fx-text-pulse">' + iconDefault + '</span>' +
        '<span class="fx-swap__b rail-button__icon fx-text-pulse">' + iconActive + '</span>';

    btn.addEventListener('click', function () {
        if (activeId === item.id) {
            close();
        } else {
            open(item);
        }
    });
    return btn;
	}

    function highlightButtons() {
        var all = buttonsEl.querySelectorAll('.rail-button');
        for (var i = 0; i < all.length; i++) {
            var id = all[i].getAttribute('data-rail-id');
            all[i].classList.toggle('is-active', id === activeId);
        }
    }

    function open(item) {
        activeId = item.id;
        titleEl.textContent = item.label;
        contentEl.innerHTML = '<p class="rail-panel__loading">加载中…</p>';
        highlightButtons();
        document.body.classList.add('rail-open');

        if (item.html) {
            contentEl.innerHTML = item.html;
            return;
        }

        if (item.template) {
            var api = new mw.Api();
            api.get({
                action: 'parse',
                page: item.template,
                prop: 'text',
                formatversion: '2'
            }).done(function (data) {
                if (activeId !== item.id) return; // 用户切换了按钮
                if (data && data.parse && data.parse.text) {
                    contentEl.innerHTML = data.parse.text;
                } else {
                    contentEl.innerHTML = '<p>加载失败。</p>';
                }
            }).fail(function () {
                if (activeId !== item.id) return;
                contentEl.innerHTML = '<p>加载失败。</p>';
            });
        } else {
            contentEl.innerHTML = '<p>未配置内容。</p>';
        }
    }

    function close() {
        activeId = null;
        document.body.classList.remove('rail-open');
        if (buttonsEl) highlightButtons();
    }

    function init() {
        ensureDOM();
        buttonsEl.innerHTML = '';
        items.forEach(function (item) {
            buttonsEl.appendChild(createButton(item));
        });
    }

    return {
        register: function (id, options) {
            options = options || {};
            items.push({
                id: id,
                icon: options.icon || '●',
                label: options.label || id,
                html: options.html || null,
                template: options.template || null
            });
        },
        init: init,
        open: open,
        close: close
    };
})();


/* ===== 在 rail 面板中触发 Citizen 偏好设置面板 ===== */
(function () {
    function bindRailPreferences() {
        var trigger = document.getElementById('rail-open-preferences');
        if (!trigger) return;

        trigger.addEventListener('click', function () {
            // Citizen 的偏好设置面板由 <details id="citizen-preferences-details"> 控制
            var details = document.getElementById('citizen-preferences-details');
            if (details) {
                // 关闭 rail 面板
                if (window.Rail && typeof Rail.close === 'function') {
                    Rail.close();
                }
                // 打开 Citizen 原生偏好设置面板
                details.open = true;
                // 滚动到顶部，让用户能看到面板
                window.scrollTo({ top: 0, behavior: 'smooth' });
            } else {
                // 回退：如果找不到原生元素，直接跳转到参数设置页
                window.location.href = mw.util.getUrl('特殊:参数设置');
            }
        });
    }

    // rail 面板内容是通过 API 异步加载的，所以需要监听加载完成
    function observeRailContent() {
        var target = document.getElementById('rail-panel-content');
        if (!target) return;

        var observer = new MutationObserver(function () {
            bindRailPreferences();
        });
        observer.observe(target, { childList: true, subtree: true });
    }

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

/* ===== 在这里注册工具栏按钮 ===== */
Rail.register('navigation', {
    icon: '☰',
    label: '导航',
    template: 'Template:工具栏导航'
});

Rail.register('claim', {
    icon: '！',
    label: '公告',
    template: 'Template:工具栏公告'
});

Rail.register('help', {
    icon: '?',
    label: '帮助',
    template: 'Template:工具栏帮助'
});

Rail.register('settings', {
    icon: '⚙',
    label: '设置',
    template: 'Template:工具栏设置'
});

/* ===== 初始化 ===== */
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', function () { Rail.init(); });
} else {
    Rail.init();
}

/* ===== 侧边工具栏 Rail 管理器 ===== */
/* ===== 侧边工具栏 Rail 管理器 ===== */



/* ===== 首页轮播图 ===== */
(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();
    }
})();