有觉性 以安住且中立的心 照见身心的实相

MediaWiki:Common.js：修订间差异

来自Dhamma.cn
←上一编辑下一编辑→
法藏​（留言 | 贡献）
行政员、​界面管理员、​管理员
11,542次编辑
小无编辑摘要
法藏​（留言 | 贡献）
行政员、​界面管理员、​管理员
11,542次编辑
小无编辑摘要
第1行： 第1行：
```javascript
/* 这里的任何JavaScript将为所有用户在每次页面加载时加载。 */
/**
/**
  * =========================================================
  * =========================================================
第43行： 第39行：


     /* =====================================================
     /* =====================================================
       2. 可用选项
       2. 从 localStorage 读取
       ===================================================== */
       ===================================================== */


     var allowedThemes = [
     var settings = {};
        'default',
        'cream',
        'zen',
        'dark'
    ];
 
    var allowedFonts = [
        'system',
        'serif',
        'sans'
    ];
 
 
    /* =====================================================
      3. 字体
      ===================================================== */
 
    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'
 
    };
 
 
    /* =====================================================
      4. 从 localStorage 读取设置
      ===================================================== */
 
    var settings;


     try {
     try {


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


         if (saved) {
         if (saved) {
            var parsed =
                JSON.parse(saved);


             settings =
             settings =
第100行： 第55行：
                     {},
                     {},
                     defaults,
                     defaults,
                     parsed
                     JSON.parse(saved)
                 );
                 );


第106行： 第61行：


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


         }
         }
第116行： 第68行：


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


     }
     }
第125行： 第74行：


     /* =====================================================
     /* =====================================================
       5. 检查并修正设置
       3. 保存设置
       ===================================================== */
       ===================================================== */


     function validateSettings() {
     function saveSettings() {


         /* -----------------------------
         try {
          主题
          ----------------------------- */


        if (
             localStorage.setItem(
             allowedThemes.indexOf(
                 'dhammaReaderSettings',
                 settings.theme
                 JSON.stringify(settings)
            ) === -1
        ) {
 
            settings.theme =
                 defaults.theme;
 
        }
 
 
        /* -----------------------------
          字体
          ----------------------------- */
 
        if (
            allowedFonts.indexOf(
                settings.fontFamily
            ) === -1
        ) {
 
            settings.fontFamily =
                defaults.fontFamily;
 
        }
 
 
        /* -----------------------------
          字号
          ----------------------------- */
 
        settings.fontSize =
            parseInt(
                settings.fontSize,
                10
             );
             );


        if (
         } catch (e) {
            isNaN(settings.fontSize) ||
            settings.fontSize < 14 ||
            settings.fontSize > 26
        ) {
 
            settings.fontSize =
                defaults.fontSize;
 
         }
 
 
        /* -----------------------------
          行距
          ----------------------------- */
 
        settings.lineHeight =
            parseFloat(
                settings.lineHeight
            );
 
        if (
            isNaN(settings.lineHeight) ||
            settings.lineHeight < 1.4 ||
            settings.lineHeight > 2.4
        ) {
 
            settings.lineHeight =
                defaults.lineHeight;
 
        }
 
 
        /* -----------------------------
          阅读宽度
          ----------------------------- */
 
        settings.maxWidth =
            parseInt(
                settings.maxWidth,
                10
            );
 
        if (
            isNaN(settings.maxWidth) ||
            settings.maxWidth < 680 ||
            settings.maxWidth > 1200
        ) {
 
            settings.maxWidth =
                defaults.maxWidth;


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


     }
     }
    validateSettings();




     /* =====================================================
     /* =====================================================
       6. 保存设置
       4. 字体
       ===================================================== */
       ===================================================== */


     function saveSettings() {
     var fonts = {


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


             localStorage.setItem(
        serif:
                'dhammaReaderSettings',
             '"Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif',
                JSON.stringify(settings)
            );


         } catch (e) {
         sans:
            '"Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", Arial, sans-serif'


            /*
     };
            * 浏览器禁用 localStorage 时，
            * 忽略保存错误，不影响页面使用。
            */
 
        }
 
     }




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


第268行： 第123行：
         var body =
         var body =
             document.body;
             document.body;
        /*
        * 如果 body 尚未建立，
        * 暂时不执行。
        */
        if (!body) {
            return;
        }




第294行： 第137行：


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


第342行： 第184行：


     /* =====================================================
     /* =====================================================
       8. 创建阅读设置按钮
       6. 创建设置按钮
       ===================================================== */
       ===================================================== */


第352行： 第194行：
             )
             )
         ) {
         ) {
            return;
        }
        if (!document.body) {
             return;
             return;
         }
         }




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


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


         button.type =
         button.type =
             'button';
             'button';


         button.setAttribute(
         button.setAttribute(
第383行： 第211行：
             '阅读设置'
             '阅读设置'
         );
         );


         button.setAttribute(
         button.setAttribute(
第389行： 第216行：
             '阅读设置'
             '阅读设置'
         );
         );


         button.innerHTML =
         button.innerHTML =
第395行： 第221行：




         document.body.appendChild(
         document.body.appendChild(button);
            button
        );




第408行： 第232行：
                         'reader-settings-panel'
                         'reader-settings-panel'
                     );
                     );


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


                 panel.classList.toggle(
                 panel.classList.toggle(
第428行： 第248行：


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


第438行： 第258行：
             )
             )
         ) {
         ) {
             return;
             return;
        }
        if (!document.body) {
            return;
         }
         }




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


         panel.id =
         panel.id =
第465行： 第273行：
             'dialog'
             'dialog'
         );
         );


         panel.setAttribute(
         panel.setAttribute(
第494行： 第301行：
                     <button
                     <button
                         type="button"
                         type="button"
                         class="reader-theme-button"
                         class="reader-theme-button reader-theme-default-button"
                         data-theme="default">
                         data-theme="default">
                         默认
                         默认
第501行： 第308行：
                     <button
                     <button
                         type="button"
                         type="button"
                         class="reader-theme-button"
                         class="reader-theme-button reader-theme-cream-button"
                         data-theme="cream">
                         data-theme="cream">
                         米白
                         米白
第508行： 第315行：
                     <button
                     <button
                         type="button"
                         type="button"
                         class="reader-theme-button"
                         class="reader-theme-button reader-theme-zen-button"
                         data-theme="zen">
                         data-theme="zen">
                         禅意
                         禅意
第515行： 第322行：
                     <button
                     <button
                         type="button"
                         type="button"
                         class="reader-theme-button"
                         class="reader-theme-button reader-theme-dark-button"
                         data-theme="dark">
                         data-theme="dark">
                         夜间
                         夜间
第680行： 第487行：




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




第693行： 第498行：


     /* =====================================================
     /* =====================================================
       10. 绑定设置事件
       8. 绑定事件
       ===================================================== */
       ===================================================== */


第707行： 第512行：
                 '.reader-theme-button'
                 '.reader-theme-button'
             )
             )
             .forEach(
             .forEach(function (button) {
                function (button) {


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


                            settings.theme =
                        settings.theme =
                                this.dataset.theme;
                            this.dataset.theme;


                            applySettings();
                        applySettings();


                            saveSettings();
                        saveSettings();


                            updateSettingsUI();
                        updateSettingsUI();


                        }
                    }
                    );
                );


                }
            });
            );




第739行： 第542行：
             );
             );


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


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


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


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


                    applySettings();
                updateSettingsUI();


                    saveSettings();
            }
 
        );
                    updateSettingsUI();
 
                }
            );
 
        }




第773行： 第571行：
             );
             );


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


        if (lineHeight) {
                settings.lineHeight =
                    parseFloat(
                        this.value
                    );


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


                    settings.lineHeight =
                saveSettings();
                        parseFloat(
                            this.value
                        );


                    applySettings();
                updateSettingsUI();


                    saveSettings();
            }
 
        );
                    updateSettingsUI();
 
                }
            );
 
        }




第806行： 第599行：
             );
             );


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


        if (maxWidth) {
                settings.maxWidth =
 
                    parseInt(
            maxWidth.addEventListener(
                        this.value,
                'input',
                        10
                function () {
                    );


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


                    applySettings();
                saveSettings();


                    saveSettings();
                updateSettingsUI();


                    updateSettingsUI();
            }
 
        );
                }
            );
 
        }




第839行： 第627行：
                 '.reader-font-button'
                 '.reader-font-button'
             )
             )
             .forEach(
             .forEach(function (button) {
                function (button) {


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


                            settings.fontFamily =
                        settings.fontFamily =
                                this.dataset.font;
                            this.dataset.font;


                            applySettings();
                        applySettings();


                            saveSettings();
                        saveSettings();


                            updateSettingsUI();
                        updateSettingsUI();


                        }
                    }
                    );
                );


                }
            });
            );




第866行： 第652行：
           ----------------------------- */
           ----------------------------- */


         var resetButton =
         document
             document.getElementById(
             .getElementById(
                 'reader-settings-reset'
                 'reader-settings-reset'
             );
             )
 
             .addEventListener(
 
        if (resetButton) {
 
             resetButton.addEventListener(
                 'click',
                 'click',
                 function () {
                 function () {
第883行： 第665行：
                             defaults
                             defaults
                         );
                         );


                     applySettings();
                     applySettings();
第893行： 第674行：
                 }
                 }
             );
             );
        }


     }
     }
第900行： 第679行：


     /* =====================================================
     /* =====================================================
       11. 更新设置界面
       9. 更新界面
       ===================================================== */
       ===================================================== */


第914行： 第693行：
                 '.reader-theme-button'
                 '.reader-theme-button'
             )
             )
             .forEach(
             .forEach(function (button) {
                function (button) {


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


                }
            });
            );




第935行： 第712行：
                 'reader-font-size'
                 'reader-font-size'
             );
             );


         var fontSizeValue =
         var fontSizeValue =
第942行： 第718行：
             );
             );


 
         if (fontSize) {
         if (
            fontSize &&
            fontSizeValue
        ) {


             fontSize.value =
             fontSize.value =
                 settings.fontSize;
                 settings.fontSize;


             fontSizeValue.textContent =
             fontSizeValue.textContent =
第966行： 第737行：
                 'reader-line-height'
                 'reader-line-height'
             );
             );


         var lineHeightValue =
         var lineHeightValue =
第973行： 第743行：
             );
             );


 
         if (lineHeight) {
         if (
            lineHeight &&
            lineHeightValue
        ) {


             lineHeight.value =
             lineHeight.value =
                 settings.lineHeight;
                 settings.lineHeight;


             lineHeightValue.textContent =
             lineHeightValue.textContent =
第997行： 第762行：
                 'reader-max-width'
                 'reader-max-width'
             );
             );


         var maxWidthValue =
         var maxWidthValue =
第1,004行： 第768行：
             );
             );


 
         if (maxWidth) {
         if (
            maxWidth &&
            maxWidthValue
        ) {


             maxWidth.value =
             maxWidth.value =
                 settings.maxWidth;
                 settings.maxWidth;


             maxWidthValue.textContent =
             maxWidthValue.textContent =
第1,028行： 第787行：
                 '.reader-font-button'
                 '.reader-font-button'
             )
             )
             .forEach(
             .forEach(function (button) {
                function (button) {


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


                }
            });
            );


     }
     }
第1,044行： 第801行：


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


第1,057行： 第814行：
                         'reader-settings-panel'
                         'reader-settings-panel'
                     );
                     );


                 var button =
                 var button =
第1,064行： 第820行：
                     );
                     );


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




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


第1,100行： 第844行：


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


     function initReaderSettings() {
     function initReaderSettings() {
        if (!document.body) {
            return;
        }
        validateSettings();


         applySettings();
         applySettings();
第1,125行： 第860行：




     /* =====================================================
     /*
      14. MediaWiki 页面初始化
    * MediaWiki 页面加载完成以后执行。
      ===================================================== */
    */
if (
    typeof mw !== 'undefined' &&
    mw.hook
) {


     function startReaderSettings() {
     mw.hook(
        'wikipage.content'
    ).add(function () {


         if (
         if (
             document.getElementById(
             !document.getElementById(
                 'reader-settings-button'
                 'reader-settings-button'
             )
             )
         ) {
         ) {


             return;
             initReaderSettings();


         }
         }


    });


        initReaderSettings();
} else {
 
    }
 
 
    /* =====================================================
      15. 页面加载后执行
      ===================================================== */
 
    if (
        document.readyState ===
        'loading'
    ) {
 
        document.addEventListener(
            'DOMContentLoaded',
            startReaderSettings
        );
 
    } else {
 
        startReaderSettings();
 
    }


    document.addEventListener(
        'DOMContentLoaded',
        initReaderSettings
    );


})();
}
```

2026年9月18日 (五) 08:07的版本

/**
 * =========================================================
 * 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 页面加载完成以后执行。
     */
if (
    typeof mw !== 'undefined' &&
    mw.hook
) {

    mw.hook(
        'wikipage.content'
    ).add(function () {

        if (
            !document.getElementById(
                'reader-settings-button'
            )
        ) {

            initReaderSettings();

        }

    });

} else {

    document.addEventListener(
        'DOMContentLoaded',
        initReaderSettings
    );

}
检索自“https://www.dhamma.cn/index.php?title=MediaWiki:Common.js&oldid=13018”