hexo-theme-redefine-x 2.8.5

package/source/js/tools/codeBlock.js

@@ -0,0 +1,48 @@
+const initCopyCode = () => {
+  HTMLElement.prototype.wrap = function (wrapper) {
+    this.parentNode.insertBefore(wrapper, this);
+    this.parentNode.removeChild(this);
+    wrapper.appendChild(this);
+  };
+
+  document.querySelectorAll("figure.highlight").forEach((element) => {
+    const container = document.createElement("div");
+    element.wrap(container);
+    container.classList.add("highlight-container");
+    container.insertAdjacentHTML(
+      "beforeend",
+      '<div class="copy-button"><i class="fa-regular fa-copy"></i></div>',
+    );
+    container.insertAdjacentHTML(
+      "beforeend",
+      '<div class="fold-button"><i class="fa-solid fa-chevron-down"></i></div>',
+    );
+    const copyButton = container.querySelector(".copy-button");
+    const foldButton = container.querySelector(".fold-button");
+    copyButton.addEventListener("click", () => {
+      const codeLines = [...container.querySelectorAll(".code .line")];
+      const code = codeLines.map((line) => line.innerText).join("\n");
+
+      // Copy code to clipboard
+      navigator.clipboard.writeText(code);
+
+      // Display 'copied' icon
+      copyButton.querySelector("i").className = "fa-regular fa-check";
+
+      // Reset icon after a while
+      setTimeout(() => {
+        copyButton.querySelector("i").className = "fa-regular fa-copy";
+      }, 1000);
+    });
+    foldButton.addEventListener("click", () => {
+      container.classList.toggle("folded");
+      foldButton.querySelector("i").className = container.classList.contains(
+        "folded",
+      )
+        ? "fa-solid fa-chevron-up"
+        : "fa-solid fa-chevron-down";
+    });
+  });
+};
+
+export default initCopyCode;

package/source/js/tools/imageViewer.js

@@ -0,0 +1,194 @@
+export default function imageViewer() {
+  let isBigImage = false;
+  let scale = 1;
+  let isMouseDown = false;
+  let dragged = false;
+  let currentImgIndex = 0;
+  let lastMouseX = 0;
+  let lastMouseY = 0;
+  let translateX = 0;
+  let translateY = 0;
+
+  const maskDom = document.querySelector(".image-viewer-container");
+  if (!maskDom) {
+    console.warn(
+      "Image viewer container not found. Exiting imageViewer function.",
+    );
+    return;
+  }
+
+  const targetImg = maskDom.querySelector("img");
+  if (!targetImg) {
+    console.warn(
+      "Target image not found in image viewer container. Exiting imageViewer function.",
+    );
+    return;
+  }
+
+  const showHandle = (isShow) => {
+    document.body.style.overflow = isShow ? "hidden" : "auto";
+    isShow
+      ? maskDom.classList.add("active")
+      : maskDom.classList.remove("active");
+  };
+
+  const zoomHandle = (event) => {
+    event.preventDefault();
+    const rect = targetImg.getBoundingClientRect();
+    const offsetX = event.clientX - rect.left;
+    const offsetY = event.clientY - rect.top;
+    const dx = offsetX - rect.width / 2;
+    const dy = offsetY - rect.height / 2;
+    const oldScale = scale;
+    scale += event.deltaY * -0.001;
+    scale = Math.min(Math.max(0.8, scale), 4);
+
+    if (oldScale < scale) {
+      // Zooming in
+      translateX -= dx * (scale - oldScale);
+      translateY -= dy * (scale - oldScale);
+    } else {
+      // Zooming out
+      translateX = 0;
+      translateY = 0;
+    }
+
+    targetImg.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
+  };
+
+  const dragStartHandle = (event) => {
+    event.preventDefault();
+    isMouseDown = true;
+    lastMouseX = event.clientX;
+    lastMouseY = event.clientY;
+    targetImg.style.cursor = "grabbing";
+  };
+
+  let lastTime = 0;
+  const throttle = 100;
+
+  const dragHandle = (event) => {
+    if (isMouseDown) {
+      const currentTime = new Date().getTime();
+      if (currentTime - lastTime < throttle) {
+        return;
+      }
+      lastTime = currentTime;
+      const deltaX = event.clientX - lastMouseX;
+      const deltaY = event.clientY - lastMouseY;
+      translateX += deltaX;
+      translateY += deltaY;
+      lastMouseX = event.clientX;
+      lastMouseY = event.clientY;
+      targetImg.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
+      dragged = true;
+    }
+  };
+
+  const dragEndHandle = (event) => {
+    if (isMouseDown) {
+      event.stopPropagation();
+    }
+    isMouseDown = false;
+    targetImg.style.cursor = "grab";
+  };
+
+  targetImg.addEventListener("wheel", zoomHandle, { passive: false });
+  targetImg.addEventListener("mousedown", dragStartHandle, { passive: false });
+  targetImg.addEventListener("mousemove", dragHandle, { passive: false });
+  targetImg.addEventListener("mouseup", dragEndHandle, { passive: false });
+  targetImg.addEventListener("mouseleave", dragEndHandle, { passive: false });
+
+  maskDom.addEventListener("click", (event) => {
+    if (!dragged) {
+      isBigImage = false;
+      showHandle(isBigImage);
+      scale = 1;
+      translateX = 0;
+      translateY = 0;
+      targetImg.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
+    }
+    dragged = false;
+  });
+
+  const imgDoms = document.querySelectorAll(
+    ".markdown-body img:not(.img-preloader-loaded), .masonry-item img:not(.img-preloader-loaded), #shuoshuo-content img:not(.img-preloader-loaded)",
+  );
+
+  const allViewableElements = [];
+  
+  imgDoms.forEach((img) => {
+    allViewableElements.push({
+      element: img,
+      getSrc: () => img.dataset.originalSrc || img.src,
+    });
+  });
+
+  const escapeKeyListener = (event) => {
+    if (event.key === "Escape" && isBigImage) {
+      isBigImage = false;
+      showHandle(isBigImage);
+      scale = 1;
+      translateX = 0;
+      translateY = 0;
+      targetImg.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
+      document.removeEventListener("keydown", escapeKeyListener);
+    }
+  };
+
+  const observeNewImages = () => {
+    const newImgs = document.querySelectorAll(
+      ".markdown-body .img-preloader-loaded, .masonry-item .img-preloader-loaded, #shuoshuo-content .img-preloader-loaded"
+    );
+    
+    newImgs.forEach((img) => {
+      if (!allViewableElements.some(item => item.element === img)) {
+        const index = allViewableElements.length;
+        allViewableElements.push({
+          element: img,
+          getSrc: () => img.dataset.originalSrc || img.src,
+        });
+        
+        img.addEventListener("click", () => {
+          currentImgIndex = index;
+          isBigImage = true;
+          showHandle(isBigImage);
+          targetImg.src = img.dataset.originalSrc || img.src;
+          document.addEventListener("keydown", escapeKeyListener);
+        });
+      }
+    });
+  };
+
+  if (allViewableElements.length > 0 || document.querySelector(".img-preloader")) {
+    allViewableElements.forEach((item, index) => {
+      item.element.addEventListener("click", () => {
+        currentImgIndex = index;
+        isBigImage = true;
+        showHandle(isBigImage);
+        targetImg.src = item.getSrc();
+        document.addEventListener("keydown", escapeKeyListener);
+      });
+    });
+
+    const handleArrowKeys = (event) => {
+      if (!isBigImage) return;
+
+      if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+        currentImgIndex = (currentImgIndex - 1 + allViewableElements.length) % allViewableElements.length;
+      } else if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+        currentImgIndex = (currentImgIndex + 1) % allViewableElements.length;
+      } else {
+        return;
+      }
+
+      targetImg.src = allViewableElements[currentImgIndex].getSrc();
+    };
+
+    document.addEventListener("keydown", handleArrowKeys);
+
+    const imgObserver = new MutationObserver(observeNewImages);
+    imgObserver.observe(document.body, { childList: true, subtree: true });
+    setInterval(observeNewImages, 1000);
+  }
+}

package/source/js/tools/lightDarkSwitch.js

@@ -0,0 +1,165 @@
+import { main } from "../main.js";
+
+const elementCode = ".mermaid";
+
+const saveOriginalData = function () {
+  return new Promise((resolve, reject) => {
+    try {
+      var els = document.querySelectorAll(elementCode),
+        count = els.length;
+      els.forEach((element) => {
+        element.setAttribute("data-original-code", element.innerHTML);
+        count--;
+        if (count == 0) {
+          resolve();
+        }
+      });
+    } catch (error) {
+      reject(error);
+    }
+  });
+};
+
+const resetProcessed = function () {
+  return new Promise((resolve, reject) => {
+    try {
+      var els = document.querySelectorAll(elementCode),
+        count = els.length;
+      els.forEach((element) => {
+        if (element.getAttribute("data-original-code") != null) {
+          element.removeAttribute("data-processed");
+          element.innerHTML = element.getAttribute("data-original-code");
+        }
+        count--;
+        if (count == 0) {
+          resolve();
+        }
+      });
+    } catch (error) {
+      reject(error);
+    }
+  });
+};
+export const ModeToggle = {
+  modeToggleButton_dom: null,
+  iconDom: null,
+  mermaidLightTheme: null,
+  mermaidDarkTheme: null,
+
+  async mermaidInit(theme) {
+    if (window.mermaid) {
+      await resetProcessed();
+      mermaid.initialize({ theme });
+      mermaid.init({ theme }, document.querySelectorAll(elementCode));
+    }
+  },
+
+  enableLightMode() {
+    document.body.classList.remove("dark-mode");
+    document.documentElement.classList.remove("dark");
+    document.body.classList.add("light-mode");
+    document.documentElement.classList.add("light");
+    this.iconDom.className = "fa-regular fa-moon";
+    main.styleStatus.isDark = false;
+    main.setStyleStatus();
+    this.mermaidInit(this.mermaidLightTheme);
+    this.setGiscusTheme();
+  },
+
+  enableDarkMode() {
+    document.body.classList.remove("light-mode");
+    document.documentElement.classList.remove("light");
+    document.body.classList.add("dark-mode");
+    document.documentElement.classList.add("dark");
+    this.iconDom.className = "fa-regular fa-brightness";
+    main.styleStatus.isDark = true;
+    main.setStyleStatus();
+    this.mermaidInit(this.mermaidDarkTheme);
+    this.setGiscusTheme();
+  },
+
+  async setGiscusTheme(theme) {
+    if (document.querySelector("#giscus-container")) {
+      let giscusFrame = document.querySelector("iframe.giscus-frame");
+      while (!giscusFrame) {
+        await new Promise((r) => setTimeout(r, 1000));
+        giscusFrame = document.querySelector("iframe.giscus-frame");
+      }
+      while (giscusFrame.classList.contains("giscus-frame--loading"))
+        await new Promise((r) => setTimeout(r, 1000));
+      theme ??= main.styleStatus.isDark ? "dark" : "light";
+      giscusFrame.contentWindow.postMessage(
+        {
+          giscus: {
+            setConfig: {
+              theme: theme,
+            },
+          },
+        },
+        "https://giscus.app",
+      );
+    }
+  },
+
+  isDarkPrefersColorScheme() {
+    return (
+      window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)")
+    );
+  },
+
+  initModeStatus() {
+    const styleStatus = main.getStyleStatus();
+
+    if (styleStatus) {
+      styleStatus.isDark ? this.enableDarkMode() : this.enableLightMode();
+    } else {
+      this.isDarkPrefersColorScheme().matches
+        ? this.enableDarkMode()
+        : this.enableLightMode();
+    }
+  },
+
+  initModeToggleButton() {
+    this.modeToggleButton_dom.addEventListener("click", () => {
+      const isDark = document.body.classList.contains("dark-mode");
+      isDark ? this.enableLightMode() : this.enableDarkMode();
+    });
+  },
+
+  initModeAutoTrigger() {
+    const isDarkMode = this.isDarkPrefersColorScheme();
+    isDarkMode.addEventListener("change", (e) => {
+      e.matches ? this.enableDarkMode() : this.enableLightMode();
+    });
+  },
+
+  async init() {
+    this.modeToggleButton_dom = document.querySelector(
+      ".tool-dark-light-toggle",
+    );
+    this.iconDom = document.querySelector(".tool-dark-light-toggle i");
+    this.mermaidLightTheme =
+      typeof theme.mermaid !== "undefined" &&
+      typeof theme.mermaid.style !== "undefined" &&
+      typeof theme.mermaid.style.light !== "undefined"
+        ? theme.mermaid.style.light
+        : "default";
+    this.mermaidDarkTheme =
+      typeof theme.mermaid !== "undefined" &&
+      typeof theme.mermaid.style !== "undefined" &&
+      typeof theme.mermaid.style.dark !== "undefined"
+        ? theme.mermaid.style.dark
+        : "dark";
+    this.initModeStatus();
+    this.initModeToggleButton();
+    this.initModeAutoTrigger();
+    try {
+      await saveOriginalData().catch(console.error);
+    } catch (error) {}
+  },
+};
+
+// Exported function
+export default function initModeToggle() {
+  ModeToggle.init();
+}