有觉性 以安住且中立的心 照见身心的实相
MediaWiki:Common.js
来自Dhamma.cn
注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。
- Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
- Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
- Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。
```javascript
/* 这里的任何JavaScript将为所有用户在每次页面加载时加载。 */
/**
* =========================================================
* Dhamma.cn 阅读显示设置
* MediaWiki 1.43
*
* 功能：
* - 背景主题
* - 字号
* - 行距
* - 阅读宽度
* - 字体
* - localStorage 保存
* =========================================================
*/
(function () {
'use strict';
/* =====================================================
1. 默认设置
===================================================== */
var defaults = {
theme: 'default',
fontSize: 18,
lineHeight: 1.9,
maxWidth: 900,
fontFamily: 'system'
};
/* =====================================================
2. 可用选项
===================================================== */
var allowedThemes = [
'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 {
var saved =
localStorage.getItem(
'dhammaReaderSettings'
);
if (saved) {
var parsed =
JSON.parse(saved);
settings =
Object.assign(
{},
defaults,
parsed
);
} else {
settings =
Object.assign(
{},
defaults
);
}
} catch (e) {
settings =
Object.assign(
{},
defaults
);
}
/* =====================================================
5. 检查并修正设置
===================================================== */
function validateSettings() {
/* -----------------------------
主题
----------------------------- */
if (
allowedThemes.indexOf(
settings.theme
) === -1
) {
settings.theme =
defaults.theme;
}
/* -----------------------------
字体
----------------------------- */
if (
allowedFonts.indexOf(
settings.fontFamily
) === -1
) {
settings.fontFamily =
defaults.fontFamily;
}
/* -----------------------------
字号
----------------------------- */
settings.fontSize =
parseInt(
settings.fontSize,
10
);
if (
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;
}
}
validateSettings();
/* =====================================================
6. 保存设置
===================================================== */
function saveSettings() {
try {
localStorage.setItem(
'dhammaReaderSettings',
JSON.stringify(settings)
);
} catch (e) {
/*
* 浏览器禁用 localStorage 时，
* 忽略保存错误，不影响页面使用。
*/
}
}
/* =====================================================
7. 应用设置
===================================================== */
function applySettings() {
var root =
document.documentElement;
var body =
document.body;
/*
* 如果 body 尚未建立，
* 暂时不执行。
*/
if (!body) {
return;
}
/* -----------------------------
背景主题
----------------------------- */
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]
);
}
/* =====================================================
8. 创建阅读设置按钮
===================================================== */
function createSettingsButton() {
if (
document.getElementById(
'reader-settings-button'
)
) {
return;
}
if (!document.body) {
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'
);
}
);
}
/* =====================================================
9. 创建设置面板
===================================================== */
function createSettingsPanel() {
if (
document.getElementById(
'reader-settings-panel'
)
) {
return;
}
if (!document.body) {
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"
data-theme="default">
默认
</button>
<button
type="button"
class="reader-theme-button"
data-theme="cream">
米白
</button>
<button
type="button"
class="reader-theme-button"
data-theme="zen">
禅意
</button>
<button
type="button"
class="reader-theme-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();
}
/* =====================================================
10. 绑定设置事件
===================================================== */
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'
);
if (fontSize) {
fontSize.addEventListener(
'input',
function () {
settings.fontSize =
parseInt(
this.value,
10
);
applySettings();
saveSettings();
updateSettingsUI();
}
);
}
/* -----------------------------
行距
----------------------------- */
var lineHeight =
document.getElementById(
'reader-line-height'
);
if (lineHeight) {
lineHeight.addEventListener(
'input',
function () {
settings.lineHeight =
parseFloat(
this.value
);
applySettings();
saveSettings();
updateSettingsUI();
}
);
}
/* -----------------------------
阅读宽度
----------------------------- */
var maxWidth =
document.getElementById(
'reader-max-width'
);
if (maxWidth) {
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();
}
);
}
);
/* -----------------------------
恢复默认
----------------------------- */
var resetButton =
document.getElementById(
'reader-settings-reset'
);
if (resetButton) {
resetButton.addEventListener(
'click',
function () {
settings =
Object.assign(
{},
defaults
);
applySettings();
saveSettings();
updateSettingsUI();
}
);
}
}
/* =====================================================
11. 更新设置界面
===================================================== */
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 &&
fontSizeValue
) {
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 &&
lineHeightValue
) {
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 &&
maxWidthValue
) {
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
);
}
);
}
/* =====================================================
12. 点击页面其他地方关闭面板
===================================================== */
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'
);
}
);
}
/* =====================================================
13. 初始化
===================================================== */
function initReaderSettings() {
if (!document.body) {
return;
}
validateSettings();
applySettings();
createSettingsButton();
createSettingsPanel();
bindOutsideClick();
}
/* =====================================================
14. MediaWiki 页面初始化
===================================================== */
function startReaderSettings() {
if (
document.getElementById(
'reader-settings-button'
)
) {
return;
}
initReaderSettings();
}
/* =====================================================
15. 页面加载后执行
===================================================== */
if (
document.readyState ===
'loading'
) {
document.addEventListener(
'DOMContentLoaded',
startReaderSettings
);
} else {
startReaderSettings();
}
})();
```
