有觉性 以安住且中立的心 照见身心的实相
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。
/**
* =========================================================
* 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();
}
}
