feat: refactor the focus and toggle mode

.prettierrc

@@ -0,0 +1,12 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 120,
+  "semi": false,
+  "overrides": [
+    {
+      "files": ".prettierrc",
+      "options": { "parser": "json" }
+    }
+  ]
+}

src/addToggleMode.js

@@ -0,0 +1,26 @@
+export default function addToggleMode({ id, on, turnOn, off, turnOff }) {
+  var modeIcon = document.createElement('div')
+  modeIcon.id = id
+  modeIcon.className = `bp3-button bp3-minimal bp3-icon-${off} bp3-small`
+
+  var wrapper = document.querySelector('.rm-topbar')
+  wrapper.appendChild(modeIcon)
+
+  function toggleMode() {
+    if (
+      [].find.call(modeIcon.classList, (name) => {
+        return name === 'bp3-icon-' + on
+      })
+    ) {
+      modeIcon.className = `bp3-button bp3-minimal bp3-icon-${off} bp3-small`
+      turnOff && turnOff()
+    } else {
+      modeIcon.className = `bp3-button bp3-minimal bp3-icon-${on} bp3-small`
+      turnOn && turnOn()
+    }
+  }
+
+  modeIcon.addEventListener('click', toggleMode)
+
+  return toggleMode
+}

src/calendar.js

@@ -1,24 +1,23 @@
-import addCalendarTimestamp from "./addCalendarTimestamp";
-import { renderReact } from "./components/render";
-import { addToggleMode } from "./focus";
-import { switchTo } from "./utils/helper";
+import addCalendarTimestamp from './addCalendarTimestamp'
+import addToggleMode from './addToggleMode'
+import { renderTimings } from './components/render'
+import { switchTo } from './utils/helper'
 
 export default function toggleCalendarTimestamp() {
   function turnOn() {
-    switchTo("calendar-mode");
-    renderReact();
-    addCalendarTimestamp();
+    switchTo('calendar-mode')
+    renderTimings()
+    addCalendarTimestamp()
   }
   function turnOff() {
-    switchTo("simple-calendar-mode");
+    switchTo('simple-calendar-mode')
   }
 
   return addToggleMode({
-    id: "mode-toggle-calendar",
-    on: "cube-add",
-    off: "cube",
-    styleContent: ``,
+    id: 'mode-toggle-calendar',
+    on: 'cube-add',
+    off: 'cube',
     turnOn,
     turnOff,
-  });
+  })
 }

src/components/render.js

@@ -3,7 +3,7 @@ import React from "react";
 import ReactDOM from "react-dom";
 import Timings from "./Timings";
 
-export function renderReact() {
+export function renderTimings() {
   const root =
     document.getElementsByTagName("timings-root")[0] ||
     document.createElement("timings-root");

src/css/focus.less

@@ -0,0 +1,27 @@
+.focus-mode {
+  .roam-block-container div[id],
+  .cyxy-function, // 彩云小译
+  #show-toc,
+  .roam-title-day-banner,
+  .rm-topbar {
+    opacity: 0.2;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  .rm-title-display,
+  .rm-reference-main,
+  .window-headers {
+    opacity: 0.5;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  .roam-toolkit-block-mode--highlight {
+    opacity: 1 !important;
+  }
+}

src/css/index.less

@@ -1,5 +1,6 @@
 @import "card.less";
 @import "gingko.less";
+@import "focus.less";
 
 @import "calendar.less";
 @import "timings.less";

src/focus.js

@@ -1,39 +1,14 @@
-import { generateStyleScript } from "./utils/helper";
-
-export function addToggleMode({
-  id = "mode-toggle-focus",
-  on = "eye-on",
-  turnOn,
-  off = "eye-open",
-  turnOff,
-  styleContent = "",
-}) {
-  var styleScript = generateStyleScript(styleContent);
-
-  var modeIcon = document.createElement("div");
-  modeIcon.id = id;
-  modeIcon.className = `bp3-button bp3-minimal bp3-icon-${off} bp3-small`;
-
-  var wrapper = document.querySelector(".rm-topbar");
-  wrapper.appendChild(modeIcon);
-
-  function toggleMode() {
-    if (
-      [].find.call(modeIcon.classList, (name) => {
-        return name === "bp3-icon-" + on;
-      })
-    ) {
-      modeIcon.className = `bp3-button bp3-minimal bp3-icon-${off} bp3-small`;
-      document.head.removeChild(styleScript);
-      turnOff && turnOff();
-    } else {
-      modeIcon.className = `bp3-button bp3-minimal bp3-icon-${on} bp3-small`;
-      document.head.appendChild(styleScript);
-      turnOn && turnOn();
-    }
-  }
-
-  modeIcon.addEventListener("click", toggleMode);
-
-  return toggleMode;
-}
+import addToggleMode from './addToggleMode'
+import { toggleClass } from './utils/helper'
+
+export const toggleFocusMode = addToggleMode({
+  id: 'mode-toggle-focus',
+  on: 'eye-on',
+  off: 'eye-open',
+  turnOn() {
+    document.querySelector('html').classList.add('focus-mode')
+  },
+  turnOff() {
+    document.querySelector('html').classList.remove('focus-mode')
+  },
+})

src/index.js

@@ -3,6 +3,7 @@ import "./css/card.less";
 import "./css/gingko.less";
 import "./css/calendar.less";
 import "./css/share.less";
+import "./css/focus.less";
 
 setTimeout(() => {
   initCardifyTheme();

src/switch.js

@@ -1,124 +1,100 @@
 import hotkeys from 'hotkeys-js'
 import tippy from 'tippy.js'
 import toggleCalendarTimestamp from './calendar'
-import { addToggleMode } from './focus'
+import { toggleFocusMode } from './focus'
 import { appendIcon, switchTo } from './utils/helper'
 import { shareAndDownloadImage } from './utils/share-image'
 
-const initialMode = localStorage.getItem("INIT_MODE") || "document";
-document.querySelector("html").classList.add(initialMode);
+const initialMode = localStorage.getItem('INIT_MODE') || 'document'
+document.querySelector('html').classList.add(initialMode)
 
-const switchToCardList = function () {
-  switchTo("card-mode");
-  /*document.querySelector(".zoom-path-view.rm-zoom") &&
-    document.querySelector(".zoom-path-view.rm-zoom").firstChild.click();*/
-};
+appendIcon('cardList', function () {
+  switchTo('card-mode')
+})
+appendIcon('cardFlow', function () {
+  switchTo('flow-mode')
+})
+appendIcon('document', function () {
+  switchTo('document-mode')
+})
+appendIcon('download', shareAndDownloadImage)
 
-appendIcon("cardList", switchToCardList);
-appendIcon("cardFlow", function () {
-  switchTo("flow-mode");
-});
-appendIcon("document", function () {
-  switchTo("document-mode");
-});
-appendIcon("download", shareAndDownloadImage);
-
-const toggleCalendarMode = toggleCalendarTimestamp();
-const toggleFocusMode = addToggleMode({
-  id: "mode-toggle-focus",
-  on: "eye-on",
-  off: "eye-open",
-  styleContent: `
-	.roam-block-container div[id], 
-	.rm-topbar, 
-	.cyxy-function {
-  		opacity: 0.2;
-    }
-	.roam-block-container div[id]:hover, 
-	.rm-topbar:hover, 
-	.cyxy-function:hover {
- 	 	opacity: 1;
-	}
-  .roam-toolkit-block-mode--highlight {
-    opacity: 1 !important;
-  }
-`,
-});
+const toggleCalendarMode = toggleCalendarTimestamp()
 
 export default function initCardifyTheme() {
-  hotkeys("alt+shift+1", function (event, handler) {
-    event.preventDefault();
-    switchToCardList();
-  });
-  hotkeys("alt+shift+2", function (event, handler) {
-    event.preventDefault();
-    switchTo("flow-mode");
-  });
-  hotkeys("alt+shift+3", function (event, handler) {
-    event.preventDefault();
-    switchTo("document-mode");
-  });
-  hotkeys("alt+shift+4", function (event, handler) {
-    event.preventDefault();
-    toggleCalendarMode();
-  });
-  hotkeys("alt+shift+c", function (event, handler) {
-    event.preventDefault();
-    toggleCalendarMode();
-  });
-  hotkeys("alt+shift+5", function (event, handler) {
-    event.preventDefault();
-    toggleFocusMode();
-  });
-  hotkeys("alt+shift+f", function (event, handler) {
-    event.preventDefault();
-    toggleFocusMode();
-  });
-  hotkeys("alt+shift+d", async function (event, handler) {
-    event.preventDefault();
-    await shareAndDownloadImage();
-  });
-  hotkeys("alt+shift+u", async function (event, handler) {
-    event.preventDefault();
+  hotkeys('alt+shift+1', function (event, handler) {
+    event.preventDefault()
+    switchTo('card-mode')
+  })
+  hotkeys('alt+shift+2', function (event, handler) {
+    event.preventDefault()
+    switchTo('flow-mode')
+  })
+  hotkeys('alt+shift+3', function (event, handler) {
+    event.preventDefault()
+    switchTo('document-mode')
+  })
+  hotkeys('alt+shift+4', function (event, handler) {
+    event.preventDefault()
+    toggleCalendarMode()
+  })
+  hotkeys('alt+shift+c', function (event, handler) {
+    event.preventDefault()
+    toggleCalendarMode()
+  })
+  hotkeys('alt+shift+5', function (event, handler) {
+    event.preventDefault()
+    toggleFocusMode()
+  })
+  hotkeys('alt+shift+f', function (event, handler) {
+    event.preventDefault()
+    toggleFocusMode()
+  })
+  hotkeys('alt+shift+d', async function (event, handler) {
+    event.preventDefault()
+    await shareAndDownloadImage()
+  })
+  hotkeys('alt+shift+u', async function (event, handler) {
+    event.preventDefault()
     document.querySelector('#unlink-finder-icon').click()
-  });
+  })
 
-  tippy("#mode-button-cardList", {
+  tippy('#mode-button-cardList', {
     content: `Card List<sup>mode</sup> <span style="font-size:7pt">(Alt-Shift-1)</span>`,
     allowHTML: true,
-    theme: "light-border",
-  });
+    theme: 'light-border',
+  })
 
-  tippy("#mode-button-cardFlow", {
+  tippy('#mode-button-cardFlow', {
     content: `Card Flow<sup>mode</sup> <span style="font-size:7pt">(Alt-Shift-2)</span>`,
     allowHTML: true,
-    theme: "light-border",
-  });
+    theme: 'light-border',
+  })
 
-  tippy("#mode-button-document", {
+  tippy('#mode-button-document', {
     content: `Outliner<sup>mode</sup> <span style="font-size:7pt">(Alt-Shift-3)</span>`,
     allowHTML: true,
-    theme: "light-border",
-  });
-  tippy("#mode-toggle-calendar", {
+    theme: 'light-border',
+  })
+  tippy('#mode-toggle-calendar', {
     content: `Calendar<sup>mode</sup> <span style="font-size:7pt">(Alt-Shift-4/c)</span>`,
     allowHTML: true,
-    theme: "light-border",
-  });
-  tippy("#mode-toggle-focus", {
+    theme: 'light-border',
+  })
+  tippy('#mode-toggle-focus', {
     content: `Focus<sup>mode</sup> <span style="font-size:7pt">(Alt-Shift-5/f)</span>`,
     allowHTML: true,
-    theme: "light-border",
-  });
-  tippy("#mode-button-download", {
+    theme: 'light-border',
+  })
+  tippy('#mode-button-download', {
     content: `Share Card<sup>mode</sup> <span style="font-size:7pt">(Alt-Shift-d)</span>`,
     allowHTML: true,
-    theme: "light-border",
-  });
-  tippy("#unlink-finder-icon", {
+    theme: 'light-border',
+  })
+  tippy('#unlink-finder-icon', {
     content: `Find Unlink<sup>mode</sup> <span style="font-size:7pt">(Alt-Shift-u)</span>`,
     allowHTML: true,
-    theme: "light-border",
-  });
-  console.log("started styled-roam");
+    theme: 'light-border',
+  })
+  console.log('started styled-roam')
 }