mirror of
https://github.com/markusmo3/obsidian-private-mode.git
synced 2026-07-22 05:42:42 +00:00
Added on hover as separate level
This commit is contained in:
Markus Moser
parent
9dd9650652
commit
f1530b598b
2 changed files with 34 additions and 6 deletions
38
main.ts
38
main.ts
|
|
@ -12,17 +12,19 @@ import {
|
|||
|
||||
enum Level {
|
||||
HidePrivate = "hide-private",
|
||||
RevealOnHover = "reveal-on-hover",
|
||||
RevealAll = "reveal-all",
|
||||
}
|
||||
|
||||
enum CssClass {
|
||||
RevealAll = "private-mode-reveal-all",
|
||||
RevealOnHover = "private-mode-reveal-on-hover",
|
||||
}
|
||||
|
||||
export default class PrivateModePlugin extends Plugin {
|
||||
statusBar: HTMLElement;
|
||||
statusBarSpan: HTMLSpanElement;
|
||||
currentLevel: Level = Level.HidePrivate;
|
||||
currentLevel: Level = Level.RevealOnHover;
|
||||
|
||||
async onload() {
|
||||
this.statusBar = this.addStatusBarItem();
|
||||
|
|
@ -30,18 +32,27 @@ export default class PrivateModePlugin extends Plugin {
|
|||
this.statusBar.ariaLabel = "Toggle Private Mode"
|
||||
this.statusBar.setAttr("data-tooltip-position", "top")
|
||||
this.statusBar.onClickEvent(() => {
|
||||
this.currentLevel = this.currentLevel == Level.HidePrivate ? Level.RevealAll : Level.HidePrivate;
|
||||
switch (this.currentLevel) {
|
||||
case Level.HidePrivate: this.currentLevel = Level.RevealOnHover; break;
|
||||
case Level.RevealOnHover: this.currentLevel = Level.RevealAll; break;
|
||||
case Level.RevealAll: this.currentLevel = Level.HidePrivate; break;
|
||||
}
|
||||
this.updateGlobalRevealStyle();
|
||||
});
|
||||
this.statusBarSpan = this.statusBar.createSpan( { text: "" });
|
||||
|
||||
addIcon("eye", eyeIcon);
|
||||
addIcon("eye-hand", eyeHand);
|
||||
addIcon("eye-closed", eyeClosedIcon);
|
||||
|
||||
this.addRibbonIcon("eye-closed", "Hide Private", () => {
|
||||
this.currentLevel = Level.HidePrivate;
|
||||
this.updateGlobalRevealStyle();
|
||||
});
|
||||
this.addRibbonIcon("eye-hand", "Reveal on hover", () => {
|
||||
this.currentLevel = Level.RevealOnHover;
|
||||
this.updateGlobalRevealStyle();
|
||||
});
|
||||
this.addRibbonIcon("eye", "Reveal all", () => {
|
||||
this.currentLevel = Level.RevealAll;
|
||||
this.updateGlobalRevealStyle();
|
||||
|
|
@ -56,6 +67,15 @@ export default class PrivateModePlugin extends Plugin {
|
|||
},
|
||||
});
|
||||
|
||||
this.addCommand({
|
||||
id: "private-mode-reveal-on-hover",
|
||||
name: "Reveal on hover",
|
||||
callback: () => {
|
||||
this.currentLevel = Level.RevealOnHover;
|
||||
this.updateGlobalRevealStyle();
|
||||
},
|
||||
});
|
||||
|
||||
this.addCommand({
|
||||
id: "private-mode-reveal-all",
|
||||
name: "Reveal all",
|
||||
|
|
@ -78,6 +98,7 @@ export default class PrivateModePlugin extends Plugin {
|
|||
removeAllClasses() {
|
||||
document.body.removeClass(
|
||||
CssClass.RevealAll,
|
||||
CssClass.RevealOnHover
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -86,6 +107,10 @@ export default class PrivateModePlugin extends Plugin {
|
|||
case Level.HidePrivate:
|
||||
setIcon(this.statusBarSpan, "eye-closed")
|
||||
break;
|
||||
case Level.RevealOnHover:
|
||||
document.body.classList.add(CssClass.RevealOnHover);
|
||||
setIcon(this.statusBarSpan, "eye-hand")
|
||||
break;
|
||||
case Level.RevealAll:
|
||||
document.body.classList.add(CssClass.RevealAll);
|
||||
setIcon(this.statusBarSpan, "eye")
|
||||
|
|
@ -95,8 +120,11 @@ export default class PrivateModePlugin extends Plugin {
|
|||
|
||||
}
|
||||
|
||||
// https://icon-sets.iconify.design/ph/eye-closed-bold/
|
||||
const eyeClosedIcon = `<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="currentColor" d="M234.4 160.8a12 12 0 0 1-10.4 18a11.8 11.8 0 0 1-10.4-6l-16.3-28.2a126 126 0 0 1-29.4 13.5l5.2 29.4a11.9 11.9 0 0 1-9.7 13.9l-2.1.2a12 12 0 0 1-11.8-9.9l-5.1-28.7a123.5 123.5 0 0 1-16.4 1a146.3 146.3 0 0 1-16.5-1l-5.1 28.7a12 12 0 0 1-11.8 9.9l-2.1-.2a11.9 11.9 0 0 1-9.7-13.9l5.2-29.4a125.3 125.3 0 0 1-29.3-13.5L42.3 173a12.1 12.1 0 0 1-10.4 6a11.7 11.7 0 0 1-6-1.6a12 12 0 0 1-4.4-16.4l17.9-31a142.4 142.4 0 0 1-16.7-17.6a12 12 0 1 1 18.6-15.1C57.1 116.8 84.9 140 128 140s70.9-23.2 86.7-42.7a12 12 0 1 1 18.6 15.1a150.3 150.3 0 0 1-16.7 17.7Z"/></svg>`;
|
||||
// https://icon-sets.iconify.design/ph/eye-closed/
|
||||
const eyeClosedIcon = `<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="currentColor" d="M228 175a8 8 0 0 1-10.92-3l-19-33.2A123.2 123.2 0 0 1 162 155.46l5.87 35.22a8 8 0 0 1-6.58 9.21a8.4 8.4 0 0 1-1.29.11a8 8 0 0 1-7.88-6.69l-5.77-34.58a133 133 0 0 1-36.68 0l-5.77 34.58A8 8 0 0 1 96 200a8.4 8.4 0 0 1-1.32-.11a8 8 0 0 1-6.58-9.21l5.9-35.22a123.2 123.2 0 0 1-36.06-16.69L39 172a8 8 0 1 1-13.94-8l20-35a153.5 153.5 0 0 1-19.3-20a8 8 0 1 1 12.46-10c16.6 20.54 45.64 45 89.78 45s73.18-24.49 89.78-45a8 8 0 1 1 12.44 10a153.5 153.5 0 0 1-19.3 20l20 35a8 8 0 0 1-2.92 11"/></svg>`;
|
||||
|
||||
// https://icon-sets.iconify.design/ph/hand-eye/
|
||||
const eyeHand = `<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="currentColor" d="M188 88a27.75 27.75 0 0 0-12 2.71V60a28 28 0 0 0-41.36-24.6A28 28 0 0 0 80 44v6.71A27.75 27.75 0 0 0 68 48a28 28 0 0 0-28 28v76a88 88 0 0 0 176 0v-36a28 28 0 0 0-28-28m12 64a72 72 0 0 1-144 0V76a12 12 0 0 1 24 0v36a8 8 0 0 0 16 0V44a12 12 0 0 1 24 0v60a8 8 0 0 0 16 0V60a12 12 0 0 1 24 0v60a8 8 0 0 0 16 0v-4a12 12 0 0 1 24 0Zm-60 16a12 12 0 1 1-12-12a12 12 0 0 1 12 12m-12-40c-36.52 0-54.41 34.94-55.16 36.42a8 8 0 0 0 0 7.16C73.59 173.06 91.48 208 128 208s54.41-34.94 55.16-36.42a8 8 0 0 0 0-7.16C182.41 162.94 164.52 128 128 128m0 64c-20.63 0-33.8-16.52-38.7-24c4.9-7.48 18.07-24 38.7-24s33.81 16.53 38.7 24c-4.9 7.48-18.07 24-38.7 24"/></svg>`;
|
||||
|
||||
// https://icon-sets.iconify.design/ph/eye/
|
||||
const eyeIcon = `<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="currentColor" d="M247.3 124.8c-.3-.8-8.8-19.6-27.6-38.5C194.6 61.3 162.9 48 128 48S61.4 61.3 36.3 86.3C17.5 105.2 9 124 8.7 124.8a7.9 7.9 0 0 0 0 6.4c.3.8 8.8 19.6 27.6 38.5c25.1 25 56.8 38.3 91.7 38.3s66.6-13.3 91.7-38.3c18.8-18.9 27.3-37.7 27.6-38.5a7.9 7.9 0 0 0 0-6.4ZM128 192c-30.8 0-57.7-11.2-79.9-33.3A130.3 130.3 0 0 1 25 128a130.3 130.3 0 0 1 23.1-30.8C70.3 75.2 97.2 64 128 64s57.7 11.2 79.9 33.2A130.3 130.3 0 0 1 231 128c-7.2 13.5-38.6 64-103 64Zm0-112a48 48 0 1 0 48 48a48 48 0 0 0-48-48Zm0 80a32 32 0 1 1 32-32a32.1 32.1 0 0 1-32 32Z"/></svg>`;
|
||||
const eyeIcon = `<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="currentColor" d="M247.31 124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57 61.26 162.88 48 128 48S61.43 61.26 36.34 86.35C17.51 105.18 9 124 8.69 124.76a8 8 0 0 0 0 6.5c.35.79 8.82 19.57 27.65 38.4C61.43 194.74 93.12 208 128 208s66.57-13.26 91.66-38.34c18.83-18.83 27.3-37.61 27.65-38.4a8 8 0 0 0 0-6.5M128 192c-30.78 0-57.67-11.19-79.93-33.25A133.5 133.5 0 0 1 25 128a133.3 133.3 0 0 1 23.07-30.75C70.33 75.19 97.22 64 128 64s57.67 11.19 79.93 33.25A133.5 133.5 0 0 1 231.05 128c-7.21 13.46-38.62 64-103.05 64m0-112a48 48 0 1 0 48 48a48.05 48.05 0 0 0-48-48m0 80a32 32 0 1 1 32-32a32 32 0 0 1-32 32"/></svg>`;
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ $element-selectors: (
|
|||
$reveal-templates: (
|
||||
"" ".inline-title:focus-within",
|
||||
"" ".cm-active",
|
||||
"" ":hover",
|
||||
"body.private-mode-reveal-on-hover " ":hover",
|
||||
"body.private-mode-reveal-all "
|
||||
);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue