hexo-theme-gnix 7.0.0 → 9.0.0

package/source/js/components/theme-stacked.js

@@ -3,91 +3,95 @@
  * Displays themes as a stack of interactive cards with circular navigation
  */
 
+const PREVIEW_COLORS = [
+  "rosewater",
+  "flamingo",
+  "pink",
+  "mauve",
+  "red",
+  "maroon",
+  "peach",
+  "yellow",
+  "green",
+  "teal",
+  "sky",
+  "sapphire",
+  "blue",
+  "lavender",
+  "text",
+  "subtext1",
+  "subtext0",
+  "overlay2",
+  "overlay1",
+  "overlay0",
+  "surface2",
+  "surface1",
+  "surface0",
+];
+
+const THEMES = [
+  { id: "latte", name: "Catppuccin Latte" },
+  { id: "nord", name: "Nord Light" },
+  { id: "nord_night", name: "Nord Night" },
+  { id: "rose_pine", name: "Rosé Pine" },
+  { id: "mocha", name: "Catppuccin Mocha" },
+  { id: "tokyo_night", name: "Tokyo Night" },
+];
+
 class ThemeStackedElement extends HTMLElement {
   constructor() {
     super();
     this._currentIndex = 0;
-    this._isDragging = false;
-    this._startX = 0;
-    this._currentX = 0;
     this._cards = [];
-
-    this.attachShadow({ mode: "open" });
-
-    // All theme color variables to display
-    this.previewColors = [
-      "rosewater",
-      "flamingo",
-      "pink",
-      "mauve",
-      "red",
-      "maroon",
-      "peach",
-      "yellow",
-      "green",
-      "teal",
-      "sky",
-      "sapphire",
-      "blue",
-      "lavender",
-      "text",
-      "subtext1",
-      "subtext0",
-      "overlay2",
-      "overlay1",
-      "overlay0",
-      "surface2",
-      "surface1",
-      "surface0",
-    ];
-
-    this.themes = [
-      { id: "latte", name: "Catppuccin Latte" },
-      { id: "nord", name: "Nord Light" },
-      { id: "nord_night", name: "Nord Night" },
-      { id: "rose_pine", name: "Rosé Pine" },
-      { id: "mocha", name: "Catppuccin Mocha" },
-      { id: "tokyo_night", name: "Tokyo Night" },
-    ];
-
+    this._isVisible = false;
     this._themeData = {};
+    this.attachShadow({ mode: "open" });
   }
 
-  connectedCallback() {
-    this.loadThemeData().then(() => {
-      this.render();
-      this.init();
+  async connectedCallback() {
+    this._observer = new IntersectionObserver((e) => {
+      this._isVisible = e[0].isIntersecting;
     });
+    this._observer.observe(this);
+    await this.loadThemeData();
+    this.render();
+    this.init();
+  }
+
+  disconnectedCallback() {
+    this._observer?.disconnect();
+    document.removeEventListener("keydown", this._keyHandler);
+    document.removeEventListener("mouseup", this._mouseUpHandler);
   }
 
   async loadThemeData() {
-    // Try to get theme colors from CSS variables of existing themes
-    // Create a temporary container to extract color values
-    const tempContainer = document.createElement("div");
-    tempContainer.style.cssText = "position:absolute;left:-9999px;width:0;height:0;overflow:hidden;";
-    document.body.appendChild(tempContainer);
-
-    for (const theme of this.themes) {
-      const themeEl = document.createElement("div");
-      themeEl.setAttribute("data-theme", theme.id);
-      themeEl.style.cssText = "position:absolute;";
-      tempContainer.appendChild(themeEl);
-
-      // Extract computed colors for this theme
-      const colors = {};
-      const computedStyle = window.getComputedStyle(themeEl);
-
-      // Get each color variable
-      for (const colorVar of this.previewColors) {
-        const varValue = computedStyle.getPropertyValue(`--${colorVar}`).trim();
-        if (varValue) colors[colorVar] = varValue;
+    if (window.__cachedThemeData) {
+      this._themeData = window.__cachedThemeData;
+      return;
+    }
+    try {
+      const cached = localStorage.getItem("themeDataCache");
+      if (cached) {
+        this._themeData = window.__cachedThemeData = JSON.parse(cached);
+        return;
       }
-      this._themeData[theme.id] = colors;
+    } catch (_e) {}
+
+    const temp = document.createElement("div");
+    temp.style.cssText = "position:absolute;left:-9999px;width:0;height:0;overflow:hidden;";
+    document.body.appendChild(temp);
 
-      themeEl.remove();
+    for (const theme of THEMES) {
+      temp.setAttribute("data-theme", theme.id);
+      const computed = window.getComputedStyle(temp);
+      this._themeData[theme.id] = Object.fromEntries(PREVIEW_COLORS.map((c) => [c, computed.getPropertyValue(`--${c}`).trim()]).filter(([, v]) => v));
     }
 
-    tempContainer.remove();
+    temp.remove();
+    window.__cachedThemeData = this._themeData;
+    try {
+      localStorage.setItem("themeDataCache", JSON.stringify(this._themeData));
+    } catch (_e) {}
   }
 
   render() {
@@ -128,17 +132,18 @@ class ThemeStackedElement extends HTMLElement {
           position: relative;
           width: min(550px, 90%);
           background: var(--base);
-          border: 2px solid var(--surface0);
+          border: 2px solid color-mix(in oklch, var(--base) 80%, var(--text));
           border-radius: 16px;
           padding: 1.5rem;
           cursor: grab;
-          transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+          transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
           box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
           user-select: none;
           touch-action: pan-y;
           opacity: 0;
           transform: scale(0.8) translateX(200px);
           pointer-events: none;
+          contain: layout style;
 
           &.active {
             opacity: 1;
@@ -193,7 +198,7 @@ class ThemeStackedElement extends HTMLElement {
 
         .color-grid {
           display: grid;
-          grid-template-columns: repeat(8, 1fr);
+          grid-template-columns: repeat(9, 1fr);
           gap: 6px;
           margin-bottom: 1rem;
 
@@ -302,8 +307,6 @@ class ThemeStackedElement extends HTMLElement {
           &:active {
             transform: scale(0.95);
           }
-
-
         }
 
         .dots {
@@ -337,9 +340,7 @@ class ThemeStackedElement extends HTMLElement {
       </style>
 
       <div class="stacked-container">
-        <div class="card-stack" id="card-stack">
-          <!-- Cards will be generated here -->
-        </div>
+        <div class="card-stack" id="card-stack"></div>
 
         <div class="controls">
           <button class="nav-btn" id="prev-btn" aria-label="Previous theme">
@@ -368,137 +369,66 @@ class ThemeStackedElement extends HTMLElement {
 
     this.renderCards();
     this.renderDots();
-    this.updateStack();
     this.attachEvents();
 
-    // Set initial index based on current theme
-    const currentTheme = this.getCurrentTheme();
-    const initialIndex = this.themes.findIndex((t) => t.id === currentTheme);
-    if (initialIndex !== -1) {
-      this.goTo(initialIndex, false);
-    }
+    const idx = THEMES.findIndex((t) => t.id === this.getCurrentTheme());
+    this.goTo(idx !== -1 ? idx : 0, false);
   }
 
   renderCards() {
-    this._cardStack.innerHTML = "";
-    this._cards = [];
-
-    this.themes.forEach((theme, index) => {
-      const card = document.createElement("div");
-      card.className = "theme-card";
-      card.dataset.index = index;
-      card.dataset.theme = theme.id;
-
+    const current = this.getCurrentTheme();
+    this._cardStack.innerHTML = THEMES.map((theme, i) => {
       const colors = this._themeData[theme.id] || {};
-      const colorSwatches = this.previewColors
-        .map((color) => {
-          const colorValue = colors[color] || "transparent";
-          return `<div class="color-swatch" data-color="${color}" data-value="${colorValue}" style="--color: ${colorValue};"></div>`;
-        })
-        .join("");
-
-      const isActive = this.getCurrentTheme() === theme.id;
-
-      card.innerHTML = `
+      const themeVars = Object.entries(colors)
+        .map(([k, v]) => `--${k}: ${v}`)
+        .join(";");
+      const swatches = PREVIEW_COLORS.map((c) => {
+        const v = colors[c] || "transparent";
+        return `<div class="color-swatch" data-color="${c}" data-value="${v}" style="--color:${v}"></div>`;
+      }).join("");
+      const active = current === theme.id;
+      return `<div class="theme-card" data-index="${i}" data-theme="${theme.id}" style="${themeVars}">
         <h4 class="card-title">${theme.name}</h4>
-        <div class="color-grid">
-          ${colorSwatches}
-        </div>
+        <div class="color-grid">${swatches}</div>
         <div class="card-footer">
-          <button class="apply-btn ${isActive ? "applied" : ""}" data-theme="${theme.id}">
-            ${isActive ? "Applied ✓" : "Apply"}
+          <button class="apply-btn${active ? " applied" : ""}" data-theme="${theme.id}">
+            ${active ? "Applied ✓" : "Apply"}
           </button>
         </div>
-      `;
-
-      // Apply button click
-      const applyBtn = card.querySelector(".apply-btn");
-      applyBtn.addEventListener("click", (e) => {
-        e.stopPropagation();
-        this.applyTheme(theme.id);
-        applyBtn.textContent = "Applied";
-      });
-
-      // Card click to navigate
-      card.addEventListener("click", () => {
-        if (!card.classList.contains("active")) {
-          this.goTo(index);
-        }
-      });
-
-      this._cardStack.appendChild(card);
-      this._cards.push(card);
-    });
+      </div>`;
+    }).join("");
+    this._cards = [...this._cardStack.querySelectorAll(".theme-card")];
   }
 
   renderDots() {
-    this._dotsContainer.innerHTML = "";
-    this.themes.forEach((_, index) => {
-      const dot = document.createElement("button");
-      dot.className = "dot";
-      dot.dataset.index = index;
-      dot.setAttribute("aria-label", `Go to theme ${index + 1}`);
-      dot.addEventListener("click", () => this.goTo(index));
-      this._dotsContainer.appendChild(dot);
-    });
+    this._dotsContainer.innerHTML = THEMES.map((_, i) => `<button class="dot" data-index="${i}" aria-label="Go to theme ${i + 1}"></button>`).join("");
+    this._dotsContainer.querySelectorAll(".dot").forEach((dot, i) => dot.addEventListener("click", () => this.goTo(i)));
   }
 
   updateStack() {
     const total = this._cards.length;
-
-    this._cards.forEach((card, index) => {
-      card.classList.remove("active", "prev", "next", "hidden");
-
-      const dist = this.getDistance(index, this._currentIndex, total);
-
-      if (dist === 0) {
-        card.classList.add("active");
-      } else if (dist === -1 || (this._currentIndex === 0 && index === total - 1)) {
-        // Previous card (circular)
-        card.classList.add("prev");
-      } else if (dist === 1 || (this._currentIndex === total - 1 && index === 0)) {
-        // Next card (circular)
-        card.classList.add("next");
-      } else {
-        card.classList.add("hidden");
-      }
-    });
-
-    // Update dots
-    this._dotsContainer.querySelectorAll(".dot").forEach((dot, index) => {
-      dot.classList.toggle("active", index === this._currentIndex);
+    const distClass = { 0: "active", "-1": "prev", 1: "next" };
+    this._cards.forEach((card, i) => {
+      const cls = distClass[this.getDistance(i, this._currentIndex, total)] ?? "hidden";
+      card.className = `theme-card ${cls}`;
     });
+    this._dotsContainer.querySelectorAll(".dot").forEach((dot, i) => dot.classList.toggle("active", i === this._currentIndex));
   }
 
   getDistance(index, current, total) {
-    const diff = index - current;
-    if (Math.abs(diff) <= 1) return diff;
-    if (current === 0 && index === total - 1) return -1;
-    if (current === total - 1 && index === 0) return 1;
-    return 2;
+    const d = (index - current + total) % total;
+    return d === 0 ? 0 : d === 1 ? 1 : d === total - 1 ? -1 : 2;
   }
 
   goTo(index, animate = true) {
-    const total = this.themes.length;
-
-    // Handle circular wrapping for goTo as well
-    if (index < 0) {
-      index = total - 1;
-    } else if (index >= total) {
-      index = 0;
-    }
-
-    this._currentIndex = index;
+    this._currentIndex = ((index % THEMES.length) + THEMES.length) % THEMES.length;
     this.updateStack();
-
-    // Trigger animation
-    if (animate) {
+    if (animate)
       this.dispatchEvent(
         new CustomEvent("themeChange", {
-          detail: { index, theme: this.themes[index] },
+          detail: { index: this._currentIndex, theme: THEMES[this._currentIndex] },
         }),
       );
-    }
   }
 
   next() {
@@ -509,99 +439,88 @@ class ThemeStackedElement extends HTMLElement {
   }
 
   attachEvents() {
-    // Navigation buttons
     this._prevBtn.addEventListener("click", () => this.prev());
     this._nextBtn.addEventListener("click", () => this.next());
 
-    // Keyboard navigation
-    document.addEventListener("keydown", (e) => {
-      if (!this.isVisible()) return;
-
-      switch (e.key) {
-        case "ArrowLeft":
-          e.preventDefault();
-          this.prev();
-          break;
-        case "ArrowRight":
-        case " ":
-          e.preventDefault();
-          this.next();
-          break;
-        case "Enter":
-          if (this._cards[this._currentIndex].classList.contains("active")) {
-            this.applyTheme(this.themes[this._currentIndex].id);
-          }
-          break;
+    this._cardStack.addEventListener("click", (e) => {
+      const swatch = e.target.closest(".color-swatch");
+      if (swatch) {
+        e.stopPropagation();
+        const hex = (swatch.dataset.value || "").replace("#", "");
+        if (hex && hex !== "transparent") window.open(`https://www.colorhexa.com/${hex}`, "_blank");
+        return;
+      }
+      const applyBtn = e.target.closest(".apply-btn");
+      if (applyBtn) {
+        e.stopPropagation();
+        this.applyTheme(applyBtn.dataset.theme);
+        return;
       }
+      const card = e.target.closest(".theme-card");
+      if (card && !card.classList.contains("active")) this.goTo(Number(card.dataset.index));
     });
 
-    // Touch/drag support
-    let startX = 0;
-    let isDragging = false;
+    this._keyHandler = (e) => {
+      if (!this._isVisible) return;
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        this.prev();
+      } else if (e.key === "ArrowRight" || e.key === " ") {
+        e.preventDefault();
+        this.next();
+      } else if (e.key === "Enter") this.applyTheme(THEMES[this._currentIndex].id);
+    };
+    document.addEventListener("keydown", this._keyHandler);
 
-    const handleStart = (x) => {
+    let startX = 0,
+      dragging = false;
+    const onStart = (x) => {
+      if (!this._isVisible) return;
       startX = x;
-      isDragging = true;
+      dragging = true;
     };
-    const handleEnd = (x) => {
-      if (!isDragging) return;
-      isDragging = false;
+    const onEnd = (x) => {
+      if (!dragging) return;
+      dragging = false;
       const diff = startX - x;
       if (Math.abs(diff) > 50) diff > 0 ? this.next() : this.prev();
     };
 
-    this._cardStack.addEventListener("touchstart", (e) => handleStart(e.touches[0].clientX), { passive: true });
-    this._cardStack.addEventListener("touchend", (e) => handleEnd(e.changedTouches[0].clientX));
-
+    this._cardStack.addEventListener("touchstart", (e) => onStart(e.touches[0].clientX), { passive: true });
+    this._cardStack.addEventListener("touchend", (e) => onEnd(e.changedTouches[0].clientX));
     this._cardStack.addEventListener("mousedown", (e) => {
-      handleStart(e.clientX);
+      onStart(e.clientX);
       this._cardStack.style.cursor = "grabbing";
     });
-    document.addEventListener("mouseup", (e) => {
-      handleEnd(e.clientX);
+    this._mouseUpHandler = (e) => {
+      if (!this._isVisible) return;
+      onEnd(e.clientX);
       this._cardStack.style.cursor = "";
-    });
-  }
-
-  isVisible() {
-    const rect = this.getBoundingClientRect();
-    return rect.top < window.innerHeight && rect.bottom > 0;
+    };
+    document.addEventListener("mouseup", this._mouseUpHandler, { passive: true });
   }
 
   getCurrentTheme() {
-    if (typeof window !== "undefined") {
-      const stored = localStorage.getItem("themePreference");
-      if (stored) return stored;
-      return document.documentElement.getAttribute("data-theme") || "mocha";
-    }
-    return "mocha";
+    return localStorage.getItem("themePreference") || document.documentElement.getAttribute("data-theme") || "mocha";
   }
 
   applyTheme(themeId) {
-    if (typeof window !== "undefined" && window.applyTheme) {
-      window.applyTheme(themeId, true);
-
-      // Update all buttons
-      this._cards.forEach((card, idx) => {
-        const btn = card.querySelector(".apply-btn");
-        const isThisTheme = this.themes[idx].id === themeId;
-
-        btn.classList.toggle("applied", isThisTheme);
-        btn.textContent = isThisTheme ? "Applied ✓" : "Apply Theme";
-      });
-
-      // Visual feedback on active card
-      const activeCard = this._cards[this._currentIndex];
-      const activeBtn = activeCard.querySelector(".apply-btn");
-      activeBtn.style.transform = "scale(0.95)";
-      setTimeout(() => {
-        activeBtn.style.transform = "";
-      }, 150);
-    }
+    if (!window.applyTheme) return;
+    window.applyTheme(themeId, true);
+    this._cards.forEach((card, i) => {
+      const btn = card.querySelector(".apply-btn");
+      const match = THEMES[i].id === themeId;
+      btn.classList.toggle("applied", match);
+      btn.textContent = match ? "Applied ✓" : "Apply Theme";
+    });
+    const btn = this._cards[this._currentIndex].querySelector(".apply-btn");
+    btn.style.transform = "scale(0.95)";
+    setTimeout(() => {
+      btn.style.transform = "";
+    }, 150);
   }
 }
 
-// Register the custom element
 if (!customElements.get("theme-stacked")) {
   customElements.define("theme-stacked", ThemeStackedElement);
 }