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();

    }

}