有觉性 以安住且中立的心 照见身心的实相
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();
}
}
/* =========================================================
Dhamma.cn 划词复制开示落款逻辑
========================================================= */
$(function () {
var $content = $('.mw-body-content');
if (!$content.length) return;
// 1. 创建浮窗节点
var $popover = $(
'<div id="dhamma-copy-popover">' +
'<button id="dhamma-copy-btn">📋 复制该段开示（带出处）</button>' +
'</div>'
);
$('body').append($popover);
var currentSelectionText = '';
// 2. 多重兼容提取短网址
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 (mw.config.get('wgShortUrl')) {
return mw.config.get('wgShortUrl');
}
return window.location.href.split('#')[0].split('?')[0];
}
// 3. 监听选中文本松开鼠标事件
$content.on('mouseup', function () {
setTimeout(function () {
var selection = window.getSelection();
var text = selection ? selection.toString().trim() : '';
if (!text || text.length === 0) {
$popover.hide();
return;
}
currentSelectionText = text;
var range = selection.getRangeAt(0);
var rect = range.getBoundingClientRect();
var popWidth = $popover.outerWidth();
var popHeight = $popover.outerHeight();
// 定位至选中区域正上方
var top = rect.top + window.scrollY - popHeight - 8;
var left = rect.left + window.scrollX + (rect.width / 2) - (popWidth / 2);
if (left < 10) left = 10;
$popover.css({
top: top + 'px',
left: left + 'px'
}).show();
}, 10);
});
// 4. 点击空白区域隐藏浮窗
$(document).on('mousedown', function (e) {
if (!$(e.target).closest('#dhamma-copy-popover').length) {
$popover.hide();
}
});
// 5. 生成精确格式并写入剪贴板
$('#dhamma-copy-btn').on('click', function (e) {
e.stopPropagation();
if (!currentSelectionText) return;
var pageTitle = mw.config.get('wgTitle') || document.title;
var siteName = 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);
}
});
// 6. 反馈提示
function showSuccessFeedback() {
var $btn = $('#dhamma-copy-btn');
var originalHtml = $btn.html();
$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();
}
});
/* =========================================================
Dhamma.cn 法谈引用
========================================================= */
importScript('MediaWiki:QuoteCopy.js');
