Initial commit.

themes/blowfish/assets/js/zen-mode.js

@@ -0,0 +1,63 @@
+function _toogleZenMode(zendModeButton) {
+  // Nodes selection
+  const body = document.querySelector("body");
+  const footer = document.querySelector("footer");
+  const tocRight = document.querySelector(".toc-right");
+  const tocInside = document.querySelector(".toc-inside");
+  const articleContent = document.querySelector(".article-content");
+  const header = document.querySelector("#single_header");
+
+  // Add semantic class into body tag
+  body.classList.toggle("zen-mode-enable");
+
+  // Show/Hide 'toc right' and 'toc inside'
+  if (tocRight) tocRight.classList.toggle("lg:block");
+  if (tocInside) tocInside.classList.toggle("lg:hidden");
+
+  // Change width of article content
+  articleContent.classList.toggle("max-w-fit");
+  articleContent.classList.toggle("max-w-prose");
+
+  // Change width of article title and footer
+  header.classList.toggle("max-w-full");
+  header.classList.toggle("max-w-prose");
+  footer.classList.toggle("max-w-full");
+  footer.classList.toggle("max-w-prose");
+
+  // Read i18n title from data-attributes
+  const titleI18nDisable = zendModeButton.getAttribute("data-title-i18n-disable");
+  const titleI18nEnable = zendModeButton.getAttribute("data-title-i18n-enable");
+
+  if (body.classList.contains("zen-mode-enable")) {
+    // Persist configuration
+    //localStorage.setItem('blowfish-zen-mode-enabled', 'true');
+
+    // Change title to enable
+    zendModeButton.setAttribute("title", titleI18nEnable);
+    // Auto-scroll to title article
+    window.scrollTo(window.scrollX, header.getBoundingClientRect().top - 90);
+  } else {
+    //localStorage.setItem('blowfish-zen-mode-enabled', 'false');
+    zendModeButton.setAttribute("title", titleI18nDisable);
+    document.querySelector("body").scrollIntoView();
+  }
+}
+
+function _registerZendModeButtonClick(zendModeButton) {
+  zendModeButton.addEventListener("click", function (event) {
+    event.preventDefault();
+
+    // Toggle zen-mode
+    _toogleZenMode(zendModeButton);
+  });
+}
+
+(function init() {
+  window.addEventListener("DOMContentLoaded", (event) => {
+    // Register click on 'zen-mode-button' node element
+    const zendModeButton = document.getElementById("zen-mode-button");
+    if (zendModeButton !== null && zendModeButton !== undefined) {
+      _registerZendModeButtonClick(zendModeButton);
+    }
+  });
+})();