prozen插件的基础上,做了个性化修改
原本进入禅模式之后,只有主屏全屏
修改成进入禅模式后,主屏+左侧边栏的目录
/*
THIS IS A GENERATED/BUNDLED FILE BY ESBUILD
if you want to view the source, please visit the github repository of this plugin
*/
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// main.ts
var main_exports = {};
__export(main_exports, {
default: () => Prozen
});
module.exports = __toCommonJS(main_exports);
var import_obsidian = require("obsidian");
const ZEN_MODE_STYLE_ID = "prozen-step1-style";
const ZEN_MODE_BODY_CLASS = "prozen-zen-active";
const ZEN_ACTIVE_LEAF_CLASS = "prozen-active-leaf-ontop";
const ZEN_STYLES = `
/*
* This hides the far-left icon bar (Ribbon), the main status bar (bottom-right),
* the new vault profile section (bottom-left), and the sidebar collapse icon (top-left).
*/
body.${ZEN_MODE_BODY_CLASS} .workspace-ribbon,
body.${ZEN_MODE_BODY_CLASS} .status-bar,
body.${ZEN_MODE_BODY_CLASS} .workspace-sidedock-vault-profile,
body.${ZEN_MODE_BODY_CLASS} .workspace-split.mod-left-split .clickable-icon {
display: none !important;
}
/*
=================================================================
功能:鼠标悬停时显示左侧边栏顶部图标
=================================================================
*/
body.${ZEN_MODE_BODY_CLASS} .workspace-split.mod-left-split .workspace-tab-header {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
body.${ZEN_MODE_BODY_CLASS} .workspace-split.mod-left-split .workspace-tab-header:hover {
opacity: 1;
}
/* ================================================================= */
/*
=================================================================
功能:自定义 Quiet Outline 插件样式
=================================================================
*/
/* 增大字号 */
body.${ZEN_MODE_BODY_CLASS} .quiet-outline .n-tree.ellipsis .n-tree-node .n-tree-node-content p {
font-size: 24px !important;
}
/* 增加行高以匹配新字号,防止文字堆叠 */
body.${ZEN_MODE_BODY_CLASS} .quiet-outline .n-tree-node-content {
height: 38px !important; /* 给予足够的垂直空间 */
}
/* 将大纲整体左移 */
body.${ZEN_MODE_BODY_CLASS} .quiet-outline .n-tree {
margin-left: +20px;
}
/* 【新】默认隐藏层级滑块 */
body.${ZEN_MODE_BODY_CLASS} .quiet-outline .n-slider {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
/* 【新】当鼠标悬停在整个大纲区域时,显示滑块 */
body.${ZEN_MODE_BODY_CLASS} .quiet-outline:hover .n-slider {
opacity: 1;
}
/* ================================================================= */
/*
=================================================================
功能:将侧边栏置于光晕效果顶层,防止文字被遮挡
=================================================================
*/
body.${ZEN_MODE_BODY_CLASS} .workspace-split.mod-left-split {
position: relative; /* 建立新的堆叠环境 */
z-index: calc(var(--layer-modal) + 1); /* 将层级提升到光晕(modal)之上 */
}
/* ================================================================= */
/*
=================================================================
【新增代码】功能:为 horizontal-main-container 添加内边距和间距
=================================================================
*/
body.${ZEN_MODE_BODY_CLASS} .horizontal-main-container {
padding: 16px;
gap: 0px;
}
/* ================================================================= */
/* --- The rest of the logic for layout and halo remains the same --- */
/* Hide the entire central pane container */
body.${ZEN_MODE_BODY_CLASS} .mod-root-split > .workspace-split:not(.mod-left-split) {
visibility: hidden;
}
/* The layout logic for the active pane */
body.${ZEN_MODE_BODY_CLASS} .workspace-leaf.${ZEN_ACTIVE_LEAF_CLASS} {
visibility: visible;
position: fixed !important;
top: 0;
left: var(--prozen-left-sidebar-width, 0px);
width: calc(100% - var(--prozen-left-sidebar-width, 0px));
height: 100vh;
z-index: var(--layer-sidedock);
}
/* The single, seamless halo overlay */
body.${ZEN_MODE_BODY_CLASS}::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: var(--layer-modal);
pointer-events: none;
background-image: linear-gradient(
90deg,
rgba(0,0,0,var(--vignette-opacity)) 0%,
transparent var(--vignette-scale-linear),
transparent calc(100% - var(--vignette-scale-linear)),
rgba(0,0,0,var(--vignette-opacity)) 100%
);
}
`;
var DEFAULT_SETTINGS = {
animationDuration: 2,
showHeader: false,
showScroll: false,
showGraphControls: false,
forceReadable: true,
vignetteOpacity: 0.75,
vignetteScaleLinear: 20,
vignetteScaleRadial: 75
};
var Prozen = class extends import_obsidian.Plugin {
styleEl = null;
originalSidebarStyleWidth = null;
async onload() {
await this.loadSettings();
this.styleEl = document.createElement('style');
this.styleEl.id = ZEN_MODE_STYLE_ID;
this.styleEl.innerHTML = ZEN_STYLES;
document.head.appendChild(this.styleEl);
this.addCommand({
id: "zenmode",
name: "终极专注模式 (全屏, 保留侧边栏, 聚焦单屏)",
callback: this.fullscreenMode.bind(this)
});
this.addSettingTab(new ProzenSettingTab(this.app, this));
}
onunload() {
if (document.fullscreenElement) {
document.exitFullscreen();
}
this.cleanupZenMode();
const existingStyle = document.getElementById(ZEN_MODE_STYLE_ID);
if (existingStyle) {
existingStyle.remove();
}
}
async loadSettings() {
this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
}
async saveSettings() {
await this.saveData(this.settings);
}
fullscreenMode() {
const activeLeaf = this.app.workspace.getActiveViewOfType(import_obsidian.ItemView)?.leaf;
if (!activeLeaf) return;
if (!document.fullscreenElement) {
// --- Enter Zen Mode ---
document.body.requestFullscreen();
const root = document.documentElement;
root.style.setProperty("--vignette-opacity", this.settings.vignetteOpacity);
root.style.setProperty("--vignette-scale-linear", this.settings.vignetteScaleLinear + "%");
const leftSidebar = document.querySelector('.workspace-split.mod-left-split');
let effectiveSidebarWidth = 0;
if (leftSidebar && !leftSidebar.classList.contains('is-collapsed')) {
this.originalSidebarStyleWidth = leftSidebar.style.width || "";
const originalSidebarWidth = leftSidebar.offsetWidth;
const newSidebarWidth = originalSidebarWidth + 100;
leftSidebar.style.width = `${newSidebarWidth}px`;
effectiveSidebarWidth = newSidebarWidth;
}
document.body.style.setProperty('--prozen-left-sidebar-width', `${effectiveSidebarWidth}px`);
document.body.classList.add(ZEN_MODE_BODY_CLASS);
activeLeaf.containerEl.classList.add(ZEN_ACTIVE_LEAF_CLASS);
this.addStyles(activeLeaf);
document.onfullscreenchange = () => {
if (!document.fullscreenElement) {
this.cleanupZenMode(activeLeaf);
}
};
} else {
document.exitFullscreen();
}
}
cleanupZenMode(activeLeaf) {
const leaf = activeLeaf || this.app.workspace.getActiveViewOfType(import_obsidian.ItemView)?.leaf;
document.body.classList.remove(ZEN_MODE_BODY_CLASS);
document.body.style.removeProperty('--prozen-left-sidebar-width');
const leftSidebar = document.querySelector('.workspace-split.mod-left-split');
if (leftSidebar && this.originalSidebarStyleWidth !== null) {
leftSidebar.style.width = this.originalSidebarStyleWidth;
this.originalSidebarStyleWidth = null;
}
const activeZenLeaf = document.querySelector(`.${ZEN_ACTIVE_LEAF_CLASS}`);
if (activeZenLeaf) activeZenLeaf.classList.remove(ZEN_ACTIVE_LEAF_CLASS);
if (leaf) this.removeStyles(leaf);
document.onfullscreenchange = null;
}
addStyles(leaf) {
const viewEl = leaf.view.contentEl;
const header = leaf.view.headerEl;
const isGraph = leaf.view.getViewType() === "graph";
let graphControls;
if (isGraph) {
graphControls = leaf.view.dataEngine?.controlsEl;
}
if (!this.settings.showScroll) {
viewEl.classList.add("noscroll");
}
if (isGraph && !this.settings.showGraphControls && graphControls) {
graphControls.classList.add("hide");
}
if (!isGraph && this.settings.forceReadable) {
if (leaf.view.editMode?.editorEl) {
leaf.view.editMode.editorEl.classList.add("is-readable-line-width");
}
}
const root = document.documentElement;
root.style.setProperty("--fadeIn-duration", this.settings.animationDuration + "s");
viewEl.classList.add("animate");
this.settings.showHeader ? header.classList.add("animate") : header.classList.add("hide");
}
removeStyles(leaf) {
const viewEl = leaf.view.contentEl;
const header = leaf.view.headerEl;
const isGraph = leaf.view.getViewType() === "graph";
let graphControls;
if (isGraph) {
graphControls = leaf.view.dataEngine?.controlsEl;
if (graphControls) {
graphControls.classList.remove("animate", "hide");
}
} else if (!this.app.vault.getConfig("readableLineLength")) {
if (leaf.view.editMode?.editorEl) {
leaf.view.editMode.editorEl.classList.remove("is-readable-line-width");
}
}
viewEl.classList.remove("animate", "noscroll");
header.classList.remove("animate", "hide");
}
};
var ProzenSettingTab = class extends import_obsidian.PluginSettingTab {
constructor(app, plugin) {
super(app, plugin);
this.plugin = plugin;
}
display() {
const { containerEl } = this;
containerEl.empty();
this.containerEl.createEl("h3", {
text: "镜头模糊"
});
let vignetteOpacityNumber;
new import_obsidian.Setting(containerEl).setName("不透明度").setDesc("暗角效果的昏暗程度。设置为0可关闭暗角效果。").addSlider((slider) => slider.setLimits(0, 1, 0.01).setValue(this.plugin.settings.vignetteOpacity).onChange(async (value) => {
vignetteOpacityNumber.innerText = " " + value.toString();
this.plugin.settings.vignetteOpacity = value;
await this.plugin.saveSettings();
})).settingEl.createDiv("", (el) => {
vignetteOpacityNumber = el;
el.style.minWidth = "2.0em";
el.style.textAlign = "right";
el.innerText = " " + this.plugin.settings.vignetteOpacity.toString();
});
let vignetteScaleLinearNumber;
new import_obsidian.Setting(containerEl).setName("文本视图中的比例").setDesc("确定从屏幕两侧向屏幕中心传播的晕影的距离,以线性渐变的方式。").addSlider((slider) => slider.setLimits(5, 50, 5).setValue(this.plugin.settings.vignetteScaleLinear).onChange(async (value) => {
vignetteScaleLinearNumber.innerText = " " + value.toString();
this.plugin.settings.vignetteScaleLinear = value;
await this.plugin.saveSettings();
})).settingEl.createDiv("", (el) => {
vignetteScaleLinearNumber = el;
el.style.minWidth = "2.0em";
el.style.textAlign = "right";
el.innerText = " " + this.plugin.settings.vignetteScaleLinear.toString();
});
let vignetteScaleRadialNumber;
new import_obsidian.Setting(containerEl).setName("图形视图中的比例").setDesc("确定了从屏幕边缘向屏幕中心传播晕影的距离,以径向渐变方式。").addSlider((slider) => slider.setLimits(5, 100, 5).setValue(this.plugin.settings.vignetteScaleRadial).onChange(async (value) => {
vignetteScaleRadialNumber.innerText = " " + value.toString();
this.plugin.settings.vignetteScaleRadial = value;
await this.plugin.saveSettings();
})).settingEl.createDiv("", (el) => {
vignetteScaleRadialNumber = el;
el.style.minWidth = "2.0em";
el.style.textAlign = "right";
el.innerText = " " + this.plugin.settings.vignetteScaleRadial.toString();
});
this.containerEl.createEl("h3", {
text: "动画"
});
new import_obsidian.Setting(containerEl).setName("淡入时长").setDesc("进入禅模式时淡入动画的持续时间(以秒为单位)").addText((text) => text.setPlaceholder("1.2").setValue(String(this.plugin.settings.animationDuration)).onChange(async (value) => {
this.plugin.settings.animationDuration = Number(value);
await this.plugin.saveSettings();
}));
this.containerEl.createEl("h3", {
text: "元素切换"
});
new import_obsidian.Setting(containerEl).setName("显示标题").setDesc("在禅定模式下显示标签页标题").addToggle((toggle) => toggle.setValue(this.plugin.settings.showHeader).onChange(async (value) => {
this.plugin.settings.showHeader = value;
await this.plugin.saveSettings();
}));
new import_obsidian.Setting(containerEl).setName("显示滚动条").setDesc("在禅定模式下显示滚动条。如果滚动条被隐藏,仍然可以通过鼠标滚轮、箭头键、触控板等进行滚动。").addToggle((toggle) => toggle.setValue(this.plugin.settings.showScroll).onChange(async (value) => {
this.plugin.settings.showScroll = value;
await this.plugin.saveSettings();
}));
new import_obsidian.Setting(containerEl).setName("显示图形控件").setDesc("在禅定模式下显示图形视图的控件").addToggle((toggle) => toggle.setValue(this.plugin.settings.showGraphControls).onChange(async (value) => {
this.plugin.settings.showGraphControls = value;
await this.plugin.saveSettings();
}));
this.containerEl.createEl("h3", {
text: "其他"
});
new import_obsidian.Setting(containerEl).setName("强制内容居中").setDesc("在禅模式中居中文本内容,即使在常规视图中占据整个屏幕宽度(忽略在禅模式中关闭“编辑器 -> 可读行长度”)").addToggle((toggle) => toggle.setValue(this.plugin.settings.forceReadable).onChange(async (value) => {
this.plugin.settings.forceReadable = value;
await this.plugin.saveSettings();
}));
}
};
/* nosourcemap */
