MediaWiki:Common.js

/**
 * =========================================================
 * Dhamma.cn 阅读显示设置
 * MediaWiki 1.43
 *
 * 功能：
 *  - 背景主题
 *  - 字号
 *  - 行距
 *  - 阅读宽度
 *  - 字体
 *  - localStorage 保存
 * =========================================================
 */

(function () {

    'use strict';


    /* =====================================================
       1. 默认设置
       ===================================================== */

    var defaults = {

        theme: 'default',

        fontSize: 18,

        lineHeight: 1.9,

        maxWidth: 900,

        fontFamily: 'system'

    };


    /* =====================================================
       2. 从 localStorage 读取
       ===================================================== */

    var settings = {};

    try {

        var saved =
            localStorage.getItem('dhammaReaderSettings');

        if (saved) {

            settings =
                Object.assign(
                    {},
                    defaults,
                    JSON.parse(saved)
                );

        } else {

            settings =
                Object.assign({}, defaults);

        }

    } catch (e) {

        settings =
            Object.assign({}, defaults);

    }


    /* =====================================================
       3. 保存设置
       ===================================================== */

    function saveSettings() {

        try {

            localStorage.setItem(
                'dhammaReaderSettings',
                JSON.stringify(settings)
            );

        } catch (e) {

            // 浏览器禁用 localStorage 时忽略
        }

    }


    /* =====================================================
       4. 字体
       ===================================================== */

    var fonts = {

        system:
            '-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif',

        serif:
            '"Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif',

        sans:
            '"Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", Arial, sans-serif'

    };


    /* =====================================================
       5. 应用设置
       ===================================================== */

    function applySettings() {

        var root =
            document.documentElement;

        var body =
            document.body;


        /* -----------------------------
           背景主题
           ----------------------------- */

        body.classList.remove(
            'reader-theme-default',
            'reader-theme-cream',
            'reader-theme-zen',
            'reader-theme-dark'
        );

        body.classList.add(
            'reader-theme-' + settings.theme
        );


        /* -----------------------------
           字号
           ----------------------------- */

        root.style.setProperty(
            '--reader-font-size',
            settings.fontSize + 'px'
        );


        /* -----------------------------
           行距
           ----------------------------- */

        root.style.setProperty(
            '--reader-line-height',
            settings.lineHeight
        );


        /* -----------------------------
           阅读宽度
           ----------------------------- */

        root.style.setProperty(
            '--reader-max-width',
            settings.maxWidth + 'px'
        );


        /* -----------------------------
           字体
           ----------------------------- */

        root.style.setProperty(
            '--reader-font-family',
            fonts[settings.fontFamily]
        );

    }


    /* =====================================================
       6. 创建设置按钮
       ===================================================== */

    function createSettingsButton() {

        if (
            document.getElementById(
                'reader-settings-button'
            )
        ) {
            return;
        }


        var button =
            document.createElement('button');

        button.id =
            'reader-settings-button';

        button.type =
            'button';

        button.setAttribute(
            'aria-label',
            '阅读设置'
        );

        button.setAttribute(
            'title',
            '阅读设置'
        );

        button.innerHTML =
            '⚙';


        document.body.appendChild(button);


        button.addEventListener(
            'click',
            function () {

                var panel =
                    document.getElementById(
                        'reader-settings-panel'
                    );

                if (!panel) {
                    return;
                }

                panel.classList.toggle(
                    'reader-settings-open'
                );

            }
        );

    }


    /* =====================================================
       7. 创建设置面板
       ===================================================== */

    function createSettingsPanel() {

        if (
            document.getElementById(
                'reader-settings-panel'
            )
        ) {
            return;
        }


        var panel =
            document.createElement('div');

        panel.id =
            'reader-settings-panel';


        panel.setAttribute(
            'role',
            'dialog'
        );

        panel.setAttribute(
            'aria-label',
            '阅读显示设置'
        );


        panel.innerHTML = `

            <div class="reader-settings-title">
                阅读显示设置
            </div>


            <!-- =========================
                 主题
                 ========================= -->

            <div class="reader-setting-group">

                <span class="reader-setting-label">
                    背景
                </span>

                <div class="reader-theme-buttons">

                    <button
                        type="button"
                        class="reader-theme-button reader-theme-default-button"
                        data-theme="default">
                        默认
                    </button>

                    <button
                        type="button"
                        class="reader-theme-button reader-theme-cream-button"
                        data-theme="cream">
                        米白
                    </button>

                    <button
                        type="button"
                        class="reader-theme-button reader-theme-zen-button"
                        data-theme="zen">
                        禅意
                    </button>

                    <button
                        type="button"
                        class="reader-theme-button reader-theme-dark-button"
                        data-theme="dark">
                        夜间
                    </button>

                </div>

            </div>


            <!-- =========================
                 字号
                 ========================= -->

            <div class="reader-setting-group">

                <span class="reader-setting-label">
                    字号
                </span>

                <div class="reader-range-row">

                    <span>A−</span>

                    <input
                        id="reader-font-size"
                        class="reader-range"
                        type="range"
                        min="14"
                        max="26"
                        step="1">

                    <span>A+</span>

                    <span
                        id="reader-font-size-value"
                        class="reader-range-value">
                    </span>

                </div>

            </div>


            <!-- =========================
                 行距
                 ========================= -->

            <div class="reader-setting-group">

                <span class="reader-setting-label">
                    行距
                </span>

                <div class="reader-range-row">

                    <span>窄</span>

                    <input
                        id="reader-line-height"
                        class="reader-range"
                        type="range"
                        min="1.4"
                        max="2.4"
                        step="0.1">

                    <span>宽</span>

                    <span
                        id="reader-line-height-value"
                        class="reader-range-value">
                    </span>

                </div>

            </div>


            <!-- =========================
                 阅读宽度
                 ========================= -->

            <div class="reader-setting-group">

                <span class="reader-setting-label">
                    阅读宽度
                </span>

                <div class="reader-range-row">

                    <span>窄</span>

                    <input
                        id="reader-max-width"
                        class="reader-range"
                        type="range"
                        min="680"
                        max="1200"
                        step="20">

                    <span>宽</span>

                    <span
                        id="reader-max-width-value"
                        class="reader-range-value">
                    </span>

                </div>

            </div>


            <!-- =========================
                 字体
                 ========================= -->

            <div class="reader-setting-group">

                <span class="reader-setting-label">
                    字体
                </span>

                <div class="reader-font-buttons">

                    <button
                        type="button"
                        class="reader-font-button"
                        data-font="system">
                        系统字体
                    </button>

                    <button
                        type="button"
                        class="reader-font-button"
                        data-font="serif">
                        宋体
                    </button>

                    <button
                        type="button"
                        class="reader-font-button"
                        data-font="sans">
                        黑体
                    </button>

                </div>

            </div>


            <!-- =========================
                 恢复默认
                 ========================= -->

            <button
                id="reader-settings-reset"
                type="button">

                恢复默认设置

            </button>

        `;


        document.body.appendChild(panel);


        bindSettingsEvents();

        updateSettingsUI();

    }


    /* =====================================================
       8. 绑定事件
       ===================================================== */

    function bindSettingsEvents() {


        /* -----------------------------
           主题
           ----------------------------- */

        document
            .querySelectorAll(
                '.reader-theme-button'
            )
            .forEach(function (button) {

                button.addEventListener(
                    'click',
                    function () {

                        settings.theme =
                            this.dataset.theme;

                        applySettings();

                        saveSettings();

                        updateSettingsUI();

                    }
                );

            });


        /* -----------------------------
           字号
           ----------------------------- */

        var fontSize =
            document.getElementById(
                'reader-font-size'
            );

        fontSize.addEventListener(
            'input',
            function () {

                settings.fontSize =
                    parseInt(
                        this.value,
                        10
                    );

                applySettings();

                saveSettings();

                updateSettingsUI();

            }
        );


        /* -----------------------------
           行距
           ----------------------------- */

        var lineHeight =
            document.getElementById(
                'reader-line-height'
            );

        lineHeight.addEventListener(
            'input',
            function () {

                settings.lineHeight =
                    parseFloat(
                        this.value
                    );

                applySettings();

                saveSettings();

                updateSettingsUI();

            }
        );


        /* -----------------------------
           阅读宽度
           ----------------------------- */

        var maxWidth =
            document.getElementById(
                'reader-max-width'
            );

        maxWidth.addEventListener(
            'input',
            function () {

                settings.maxWidth =
                    parseInt(
                        this.value,
                        10
                    );

                applySettings();

                saveSettings();

                updateSettingsUI();

            }
        );


        /* -----------------------------
           字体
           ----------------------------- */

        document
            .querySelectorAll(
                '.reader-font-button'
            )
            .forEach(function (button) {

                button.addEventListener(
                    'click',
                    function () {

                        settings.fontFamily =
                            this.dataset.font;

                        applySettings();

                        saveSettings();

                        updateSettingsUI();

                    }
                );

            });


        /* -----------------------------
           恢复默认
           ----------------------------- */

        document
            .getElementById(
                'reader-settings-reset'
            )
            .addEventListener(
                'click',
                function () {

                    settings =
                        Object.assign(
                            {},
                            defaults
                        );

                    applySettings();

                    saveSettings();

                    updateSettingsUI();

                }
            );

    }


    /* =====================================================
       9. 更新界面
       ===================================================== */

    function updateSettingsUI() {


        /* -----------------------------
           主题按钮
           ----------------------------- */

        document
            .querySelectorAll(
                '.reader-theme-button'
            )
            .forEach(function (button) {

                button.classList.toggle(
                    'active',
                    button.dataset.theme ===
                    settings.theme
                );

            });


        /* -----------------------------
           字号
           ----------------------------- */

        var fontSize =
            document.getElementById(
                'reader-font-size'
            );

        var fontSizeValue =
            document.getElementById(
                'reader-font-size-value'
            );

        if (fontSize) {

            fontSize.value =
                settings.fontSize;

            fontSizeValue.textContent =
                settings.fontSize + 'px';

        }


        /* -----------------------------
           行距
           ----------------------------- */

        var lineHeight =
            document.getElementById(
                'reader-line-height'
            );

        var lineHeightValue =
            document.getElementById(
                'reader-line-height-value'
            );

        if (lineHeight) {

            lineHeight.value =
                settings.lineHeight;

            lineHeightValue.textContent =
                settings.lineHeight;

        }


        /* -----------------------------
           阅读宽度
           ----------------------------- */

        var maxWidth =
            document.getElementById(
                'reader-max-width'
            );

        var maxWidthValue =
            document.getElementById(
                'reader-max-width-value'
            );

        if (maxWidth) {

            maxWidth.value =
                settings.maxWidth;

            maxWidthValue.textContent =
                settings.maxWidth + 'px';

        }


        /* -----------------------------
           字体
           ----------------------------- */

        document
            .querySelectorAll(
                '.reader-font-button'
            )
            .forEach(function (button) {

                button.classList.toggle(
                    'active',
                    button.dataset.font ===
                    settings.fontFamily
                );

            });

    }


    /* =====================================================
       10. 点击页面其他地方关闭面板
       ===================================================== */

    function bindOutsideClick() {

        document.addEventListener(
            'click',
            function (event) {

                var panel =
                    document.getElementById(
                        'reader-settings-panel'
                    );

                var button =
                    document.getElementById(
                        'reader-settings-button'
                    );

                if (!panel || !button) {
                    return;
                }


                if (
                    panel.contains(event.target) ||
                    button.contains(event.target)
                ) {
                    return;
                }


                panel.classList.remove(
                    'reader-settings-open'
                );

            }
        );

    }


    /* =====================================================
       11. 初始化
       ===================================================== */

    function initReaderSettings() {

        applySettings();

        createSettingsButton();

        createSettingsPanel();

        bindOutsideClick();

    }


    /*
     * MediaWiki 页面加载完成以后执行。
     */
/* =====================================================
   MediaWiki 初始化
   ===================================================== */

function startReaderSettings() {

    if (
        document.getElementById(
            'reader-settings-button'
        )
    ) {
        return;
    }

    initReaderSettings();
}


/*
 * MediaWiki 页面加载完成后执行。
 *
 * 使用 mw.loader.using + jQuery ready，
 * 避免 Common.js 加载时 DOMContentLoaded
 * 已经执行完毕的问题。
 */

if (
    typeof mw !== 'undefined' &&
    mw.loader
) {

    mw.loader.using([], function () {

        $(startReaderSettings);

    });

} else {

    if (
        document.readyState === 'loading'
    ) {

        document.addEventListener(
            'DOMContentLoaded',
            startReaderSettings
        );

    } else {

        startReaderSettings();

    }

}



/* =========================================================
   Timeless 皮肤专属：划词复制落款逻辑
   ========================================================= */

$(function () {
    // 1. 确保弹窗 DOM 被动态注入到 body 根目录
    if ($('#dhamma-copy-popover').length === 0) {
        $('body').append(
            '<div id="dhamma-copy-popover">' +
                '<button id="dhamma-copy-btn">📋 复制该段开示（带出处）</button>' +
            '</div>'
        );
    }

    var $popover = $('#dhamma-copy-popover');
    var currentSelectionText = '';

    // 2. Timeless 皮肤下的短网址获取
    function getShortUrl() {
        var shortlink = $('link[rel="shortlink"]').attr('href');
        if (shortlink) {
            return shortlink.indexOf('http') === 0 ? shortlink : window.location.origin + shortlink;
        }
        var sidebarShort = $('#t-shorturl a, #t-permalink a').attr('href');
        if (sidebarShort) {
            return sidebarShort.indexOf('http') === 0 ? sidebarShort : window.location.origin + sidebarShort;
        }
        if (typeof mw !== 'undefined' && mw.config && mw.config.get('wgShortUrl')) {
            return mw.config.get('wgShortUrl');
        }
        return window.location.href.split('#')[0].split('?')[0];
    }

    // 3. 全局划词选区监听
    $(document).on('mouseup touchend', function (e) {
        // 若点击的是浮窗内部，不触发隐藏
        if ($(e.target).closest('#dhamma-copy-popover').length) {
            return;
        }

        setTimeout(function () {
            var selection = window.getSelection();
            var text = selection ? selection.toString().trim() : '';

            // 选中少于 2 个字时自动隐藏
            if (!text || text.length < 2) {
                $popover.hide();
                return;
            }

            // Timeless 正文容器选择器校验
            var anchorNode = selection.anchorNode;
            var $contentArea = $(anchorNode).closest('#mw-content, #mw-content-text, .mw-parser-output, #bodyContent');
            if (!$contentArea.length) {
                $popover.hide();
                return;
            }

            currentSelectionText = text;

            // 定位计算
            if (selection.rangeCount > 0) {
                var range = selection.getRangeAt(0);
                var rect = range.getBoundingClientRect();

                if (rect.width === 0 && rect.height === 0) {
                    $popover.hide();
                    return;
                }

                var popWidth  = $popover.outerWidth() || 190;
                var popHeight = $popover.outerHeight() || 36;

                // 兼容不同浏览器的滚动距离计算
                var scrollTop  = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
                var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;

                var top  = rect.top + scrollTop - popHeight - 8;
                var left = rect.left + scrollLeft + (rect.width / 2) - (popWidth / 2);

                if (left < 10) left = 10;
                if (top < scrollTop + 10) {
                    top = rect.bottom + scrollTop + 8;
                }

                $popover.css({
                    top: top + 'px',
                    left: left + 'px'
                }).show();
            }
        }, 50);
    });

    // 4. 点击非浮窗区域自动隐藏
    $(document).on('mousedown touchstart', function (e) {
        if (!$(e.target).closest('#dhamma-copy-popover').length) {
            $popover.hide();
        }
    });

    // 5. 点击按钮格式化落款并写入剪贴板
    $(document).on('click', '#dhamma-copy-btn', function (e) {
        e.stopPropagation();
        e.preventDefault();

        if (!currentSelectionText) return;

        var pageTitle = (typeof mw !== 'undefined' && mw.config && mw.config.get('wgTitle')) || document.title;
        var siteName  = (typeof mw !== 'undefined' && mw.config && mw.config.get('wgSiteName')) || 'Dhamma.cn';
        var shortUrl  = getShortUrl();

        var formattedOutput = 
            '“' + currentSelectionText + '”\n\n' +
            '----------------------------------------\n' +
            '法谈摘自：' + siteName + ' 《' + pageTitle + '》\n' +
            '该篇网址：' + shortUrl + '\n' +
            '转载请保持原文，随喜分享，Sadhu！';

        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(formattedOutput).then(function () {
                showSuccessFeedback();
            }).catch(function () {
                fallbackCopy(formattedOutput);
            });
        } else {
            fallbackCopy(formattedOutput);
        }
    });

    function showSuccessFeedback() {
        var $btn = $('#dhamma-copy-btn');
        var originalHtml = '📋 复制该段开示（带出处）';
        $btn.html('✅ 已复制开示及出处').css('background', '#2e7d32');
        setTimeout(function () {
            $btn.html(originalHtml).css('background', '');
            $popover.hide();
        }, 1200);
    }

    function fallbackCopy(text) {
        var $temp = $('<textarea>');
        $('body').append($temp);
        $temp.val(text).select();
        document.execCommand('copy');
        $temp.remove();
        showSuccessFeedback();
    }
});