ruby_cms 0.2.1.1 → 1.0.1

data/lib/generators/ruby_cms/templates/javascript/controllers/admin/visual_editor_page_select_controller.js

@@ -0,0 +1,174 @@
+import { Controller } from "@hotwired/stimulus"
+
+const ACTIVE_CLASSES = ["bg-blue-50", "text-blue-700"]
+const INACTIVE_HOVER = ["hover:bg-[#faf8f3]"]
+
+export default class extends Controller {
+  static targets = ["pageInput", "variantInput", "triggerLabel", "panel", "flyout", "searchInput", "pageRow", "emptyState", "pageCount"]
+
+  connect() {
+    this._onOutsideClick = (e) => {
+      if (!this.element.contains(e.target)) this.closePanel()
+    }
+    this._onKey = (e) => {
+      if (this.panelTarget.classList.contains("hidden")) return
+      if (e.key === "Escape") { this.closePanel(); return }
+      if (e.key === "ArrowDown") { e.preventDefault(); this.moveActive(1); return }
+      if (e.key === "ArrowUp")   { e.preventDefault(); this.moveActive(-1); return }
+      if (e.key === "Enter")     { e.preventDefault(); this.activateActive(); return }
+    }
+    this.activeIndex = 0
+  }
+
+  disconnect() {
+    document.removeEventListener("click", this._onOutsideClick)
+    document.removeEventListener("keydown", this._onKey)
+  }
+
+  toggle(event) {
+    event.stopPropagation()
+    this.panelTarget.classList.contains("hidden") ? this.openPanel() : this.closePanel()
+  }
+
+  openPanel() {
+    this.panelTarget.classList.remove("hidden")
+    document.addEventListener("click", this._onOutsideClick)
+    document.addEventListener("keydown", this._onKey)
+    if (this.hasSearchInputTarget) {
+      requestAnimationFrame(() => this.searchInputTarget.focus())
+    }
+    this.filter("")
+  }
+
+  closePanel() {
+    this.panelTarget.classList.add("hidden")
+    this.flyoutTargets.forEach(f => f.classList.add("hidden"))
+    if (this.hasSearchInputTarget) {
+      this.searchInputTarget.value = ""
+      this.filter("")
+    }
+    document.removeEventListener("click", this._onOutsideClick)
+    document.removeEventListener("keydown", this._onKey)
+  }
+
+  search(event) {
+    this.filter(event.target.value)
+  }
+
+  filter(query) {
+    const q = (query || "").trim().toLowerCase()
+    let visible = 0
+    this.pageRowTargets.forEach((row) => {
+      const text = (row.dataset.searchText || "").toLowerCase()
+      const match = q === "" || text.includes(q)
+      row.classList.toggle("hidden", !match)
+      if (match) visible++
+    })
+    if (this.hasPageCountTarget) {
+      this.pageCountTarget.textContent = String(visible)
+    }
+    if (this.hasEmptyStateTarget) {
+      this.emptyStateTarget.classList.toggle("hidden", visible !== 0)
+      const queryEl = this.emptyStateTarget.querySelector("[data-empty-query]")
+      if (queryEl) queryEl.textContent = q
+    }
+    this.activeIndex = 0
+    this.refreshActive()
+  }
+
+  clearSearch(event) {
+    if (event) event.preventDefault()
+    if (this.hasSearchInputTarget) {
+      this.searchInputTarget.value = ""
+      this.filter("")
+      this.searchInputTarget.focus()
+    }
+  }
+
+  visibleRows() {
+    return this.pageRowTargets.filter((r) => !r.classList.contains("hidden"))
+  }
+
+  rowActionTarget(row) {
+    // For pages with variants, the clickable button is the first <button>; same for plain pages.
+    return row.matches("button") ? row : row.querySelector("button")
+  }
+
+  moveActive(delta) {
+    const rows = this.visibleRows()
+    if (rows.length === 0) return
+    this.activeIndex = (this.activeIndex + delta + rows.length) % rows.length
+    this.refreshActive()
+  }
+
+  refreshActive() {
+    const rows = this.visibleRows()
+    rows.forEach((row, idx) => {
+      const btn = this.rowActionTarget(row)
+      if (!btn) return
+      if (idx === this.activeIndex) {
+        ACTIVE_CLASSES.forEach((c) => btn.classList.add(c))
+        INACTIVE_HOVER.forEach((c) => btn.classList.remove(c))
+        // Scroll into view inside the scroll container
+        btn.scrollIntoView({ block: "nearest", inline: "nearest" })
+      } else {
+        // Only remove the highlight we added (the currently-active page may have its own bg).
+        if (!btn.dataset.activePage) {
+          ACTIVE_CLASSES.forEach((c) => btn.classList.remove(c))
+        }
+        INACTIVE_HOVER.forEach((c) => btn.classList.add(c))
+      }
+    })
+  }
+
+  activateActive() {
+    const rows = this.visibleRows()
+    const row = rows[this.activeIndex]
+    if (!row) return
+    const btn = this.rowActionTarget(row)
+    if (btn) btn.click()
+  }
+
+  showFlyout(event) {
+    this.flyoutTargets.forEach(f => { f.classList.add("hidden"); f.removeAttribute("style") })
+    const row = event.currentTarget
+    const flyout = row.querySelector("[data-admin--visual-editor-page-select-target='flyout']")
+    if (!flyout) return
+    flyout.classList.remove("hidden")
+    // Measure after un-hiding, then position fixed so it escapes the scroll container.
+    const rowRect = row.getBoundingClientRect()
+    // Default to opening to the LEFT of the panel (right-full behavior).
+    const panel = this.panelTarget.getBoundingClientRect()
+    const desiredWidth = flyout.offsetWidth || 220
+    flyout.style.setProperty("position", "fixed", "important")
+    flyout.style.setProperty("top", `${rowRect.top}px`, "important")
+    flyout.style.setProperty("left", `${panel.left - desiredWidth - 6}px`, "important")
+    flyout.style.setProperty("right", "auto", "important")
+    flyout.style.setProperty("margin", "0", "important")
+    flyout.style.setProperty("z-index", "61", "important")
+  }
+
+  hideFlyout(event) {
+    const flyout = event.currentTarget.querySelector("[data-admin--visual-editor-page-select-target='flyout']")
+    if (!flyout) return
+    flyout.classList.add("hidden")
+    flyout.removeAttribute("style")
+  }
+
+  selectPage(event) {
+    event.stopPropagation()
+    this.pageInputTarget.value = event.currentTarget.dataset.page
+    this.variantInputTarget.value = ""
+    this.closePanel()
+    this.element.requestSubmit()
+  }
+
+  selectVariant(event) {
+    event.stopPropagation()
+    const { page, variant } = event.currentTarget.dataset
+    this.pageInputTarget.value = page
+    this.variantInputTarget.value = variant
+    this.closePanel()
+    this.element.requestSubmit()
+  }
+}

data/lib/generators/ruby_cms/templates/javascript/controllers/application.js

@@ -0,0 +1,10 @@
+import { Application } from "@hotwired/stimulus"
+import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
+
+const application = Application.start()
+application.debug = false
+window.Stimulus = application
+
+eagerLoadControllersFrom("controllers", application)
+
+export { application }

data/lib/generators/ruby_cms/templates/javascript/controllers/index.js

@@ -0,0 +1,2 @@
+// Side-effect: loads controllers/application (Stimulus app + RubyCMS + eager app controllers)
+import "controllers/application"

data/lib/generators/ruby_cms/templates/javascript/controllers/ruby_ui/accordion_controller.js

@@ -0,0 +1,97 @@
+import { Controller } from "@hotwired/stimulus";
+import { animate } from "motion";
+
+// Connects to data-controller="ruby-ui--accordion"
+export default class extends Controller {
+  static targets = ["icon", "content"];
+  static values = {
+    open: {
+      type: Boolean,
+      default: false,
+    },
+    animationDuration: {
+      type: Number,
+      default: 0.15, // Default animation duration (in seconds)
+    },
+    animationEasing: {
+      type: String,
+      default: "ease-in-out", // Default animation easing
+    },
+    rotateIcon: {
+      type: Number,
+      default: 180, // Default icon rotation (in degrees)
+    },
+  };
+
+  connect() {
+    // Set the initial state of the accordion
+    let originalAnimationDuration = this.animationDurationValue;
+    this.animationDurationValue = 0;
+    this.openValue ? this.open() : this.close();
+    this.animationDurationValue = originalAnimationDuration;
+  }
+
+  // Toggle the 'open' value
+  toggle() {
+    this.openValue = !this.openValue;
+  }
+
+  // Handle changes in the 'open' value
+  openValueChanged(isOpen, wasOpen) {
+    if (isOpen) {
+      this.open();
+    } else {
+      this.close();
+    }
+  }
+
+  // Open the accordion content
+  open() {
+    if (this.hasContentTarget) {
+      this.revealContent();
+      this.hasIconTarget && this.rotateIcon();
+      this.openValue = true;
+    }
+  }
+
+  // Close the accordion content
+  close() {
+    if (this.hasContentTarget) {
+      this.hideContent();
+      this.hasIconTarget && this.rotateIcon();
+      this.openValue = false;
+    }
+  }
+
+  // Reveal the accordion content with animation
+  revealContent() {
+    const contentHeight = this.contentTarget.scrollHeight;
+    animate(
+      this.contentTarget,
+      { height: `${contentHeight}px` },
+      {
+        duration: this.animationDurationValue,
+        easing: this.animationEasingValue,
+      },
+    );
+  }
+
+  // Hide the accordion content with animation
+  hideContent() {
+    animate(
+      this.contentTarget,
+      { height: 0 },
+      {
+        duration: this.animationDurationValue,
+        easing: this.animationEasingValue,
+      },
+    );
+  }
+
+  // Rotate the accordion icon 180deg using animate function
+  rotateIcon() {
+    animate(this.iconTarget, {
+      rotate: `${this.openValue ? this.rotateIconValue : 0}deg`,
+    });
+  }
+}