改造#集中モード#トグル#フルスクリーン#モジュール
zenmode
上部のメニューや関連ページ一覧、各種バッジといった周辺の表示をまとめて隠し、本文だけが残るすっきりした集中モードに切り替えます。余計なものが目に入らなくなるので、読書や執筆に没頭したいときにぴったりです。設定によってはブラウザのフルスクリーンも一緒に使えます。
もう一度呼べば元の表示に戻るトグル式です。お好みのキーやボタンに割り当てて、ワンアクションで集中モードに入れるようにしておくと快適です。
デモ
インストール
設定ページの code:script.js に貼る
const { toggleZenMode } = await import("/api/code/cosense-toolbox/zenmode/module.js");
ソースコード全文を見る（JS）
let zenModeEnabled = false;
export function toggleZenMode(fullScreen = false) {
const pageMenu = document.querySelector(".page-column .page-menu");
const navbar = document.querySelector(".navbar.navbar-default");
const planBadge = document.querySelector(".footer > div.status-bar > div.plan-badge");
const planBadgeIcon = document.querySelector(".footer .status-bar .item");
const relatedPagesList = document.querySelector(".related-page-list");
const infoboxHideBadge = document.querySelector(".footer [data-infobox-hided-badge]");
const style = document.querySelector("[data-zenmode-style]") || document.createElement("style");
style.setAttribute("data-zenmode-style", "true");
style.innerHTML = `.line .telomere .telomere-border {display: none;} .page {border: none !important;}`;
if (!zenModeEnabled) {
document.head.append(style);
} else {
style.remove();
}
[infoboxHideBadge, pageMenu, navbar, planBadge, planBadgeIcon, relatedPagesList].forEach(
(node) => {
if (node) {
node.style.display = zenModeEnabled ? "initial" : "none";
}
},
);
zenModeEnabled = !zenModeEnabled;
if (fullScreen) {
toggleFullScreen();
}
}
function toggleFullScreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else if (document.exitFullscreen) {
document.exitFullscreen();
}
}