ruby_cms 0.2.1.0 → 1.0.0

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

@@ -0,0 +1,47 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Two-key navigation shortcuts: press `g` then a letter to jump to a section.
+// Bound at window level via `keydown@window->admin--nav-shortcuts#onKey`.
+//
+// Mapping comes from `data-admin--nav-shortcuts-map-value` (JSON: { letter: url }).
+// Skips when focus is in an editable element or any modifier key is held.
+export default class extends Controller {
+  static values = {
+    map: { type: Object, default: {} },
+    timeout: { type: Number, default: 1500 }
+  }
+
+  connect() {
+    this._waiting = false
+    this._timer = null
+  }
+
+  disconnect() {
+    if (this._timer) clearTimeout(this._timer)
+  }
+
+  onKey(event) {
+    // Ignore when typing in inputs/textareas/contenteditable.
+    const t = event.target
+    if (t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.tagName === "SELECT" || t.isContentEditable)) return
+    if (event.metaKey || event.ctrlKey || event.altKey) return
+
+    if (!this._waiting) {
+      if (event.key !== "g" && event.key !== "G") return
+      event.preventDefault()
+      this._waiting = true
+      this._timer = setTimeout(() => { this._waiting = false }, this.timeoutValue)
+      return
+    }
+
+    // Second key: look up in map.
+    const letter = (event.key || "").toLowerCase()
+    this._waiting = false
+    if (this._timer) { clearTimeout(this._timer); this._timer = null }
+
+    const url = this.mapValue[letter]
+    if (!url) return
+    event.preventDefault()
+    window.Turbo ? window.Turbo.visit(url) : (window.location.href = url)
+  }
+}

data/{app/javascript/controllers/ruby_cms → lib/generators/ruby_cms/templates/javascript/controllers/admin}/page_preview_controller.js

@@ -9,12 +9,65 @@ export default class extends Controller {
   connect() {
     if (this.editModeValue) {
       this.enableEditMode();
+      // Report coverage + the block outline once the page has rendered.
+      requestAnimationFrame(() => {
+        this.reportTranslationStats();
+        this.reportBlockList();
+      });
     }
 
     this.boundHandleMessage = this.handleMessage.bind(this);
     window.addEventListener("message", this.boundHandleMessage);
   }
 
+  // Send the page's editable blocks (key, occurrence index, text, missing flag)
+  // to the editor so it can render an outline.
+  reportBlockList() {
+    const seen = {};
+    const blocks = [];
+    this.element.querySelectorAll("[data-content-key], [data-block-id]").forEach((el) => {
+      const key = el.dataset.contentKey || el.dataset.blockId;
+      if (!key) return;
+      const index = seen[key] || 0;
+      seen[key] = index + 1;
+      blocks.push({
+        key,
+        index,
+        text: (el.textContent || "").trim().slice(0, 80),
+        missing: el.hasAttribute("data-cb-missing"),
+      });
+    });
+
+    if (window.parent && window.parent !== window) {
+      window.parent.postMessage(
+        { type: "BLOCK_LIST", blocks },
+        window.location.origin,
+      );
+    }
+  }
+
+  // Count editable blocks vs. those missing a translation in this locale,
+  // and send the tally to the editor chrome in the parent window.
+  reportTranslationStats() {
+    const blocks = this.element.querySelectorAll("[data-content-key], [data-block-id]");
+    const total = blocks.length;
+    let missing = 0;
+    blocks.forEach((b) => { if (b.hasAttribute("data-cb-missing")) missing += 1; });
+
+    if (window.parent && window.parent !== window) {
+      window.parent.postMessage(
+        {
+          type: "TRANSLATION_STATS",
+          locale: document.documentElement.lang || null,
+          total,
+          translated: total - missing,
+          missing,
+        },
+        window.location.origin,
+      );
+    }
+  }
+
   disconnect() {
     window.removeEventListener("message", this.boundHandleMessage);
     this.disableEditMode();
@@ -33,7 +86,7 @@ export default class extends Controller {
 
   handleBlockClick(event) {
     const blockElement =
-      event.target.closest(".ruby_cms-content-block") ||
+      event.target.closest(".admin-content-block") ||
       event.target.closest(".content-block");
     if (!blockElement) return;
 
@@ -41,7 +94,7 @@ export default class extends Controller {
     event.stopPropagation();
 
     const blockId =
-      blockElement.dataset.blockId || blockElement.dataset.contentKey;
+      blockElement.dataset.contentKey || blockElement.dataset.blockId;
     if (!blockId) {
       console.warn(
         "Content block found but no blockId or contentKey data attribute",
@@ -61,6 +114,7 @@ export default class extends Controller {
           blockId,
           blockIndex,
           page: this.getCurrentPage(),
+          locale: document.documentElement.lang || null,
         },
         window.location.origin,
       );
@@ -79,6 +133,11 @@ export default class extends Controller {
       this.handleContentUpdate(event.data);
     } else if (type === "UPDATE_BLOCK_CONTENT") {
       this.updateBlockContent(event.data);
+    } else if (type === "SET_THEME") {
+      document.documentElement.setAttribute("data-theme", event.data.theme || "light");
+    } else if (type === "REQUEST_BLOCKS") {
+      this.reportBlockList();
+      this.reportTranslationStats();
     }
   }
 
@@ -91,12 +150,14 @@ export default class extends Controller {
     if (target) {
       target.classList.add("editing");
       target.scrollIntoView({ behavior: "smooth", block: "center" });
+      target.classList.add("cb-pulse");
+      setTimeout(() => target.classList.remove("cb-pulse"), 900);
     }
   }
 
   clearHighlight() {
     this.element
-      .querySelectorAll(".content-block.editing, .ruby_cms-content-block.editing")
+      .querySelectorAll(".content-block.editing, .admin-content-block.editing")
       .forEach((el) => el.classList.remove("editing"));
   }
 

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

@@ -0,0 +1,49 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Permission × User matrix.
+// - `toggle` posts to PATCH /admin/permissions/:id/toggle_user as JSON.
+// - `filter` hides rows / columns that don't match the search query.
+export default class extends Controller {
+  static targets = ["search", "table", "row", "userHeader", "cell"]
+  static values  = { csrf: String }
+
+  toggle(event) {
+    const button = event.currentTarget
+    const url = button.dataset.url
+    button.disabled = true
+
+    fetch(url, {
+      method: "PATCH",
+      headers: {
+        "Accept": "application/json",
+        "X-CSRF-Token": this.csrfValue,
+        "Content-Type": "application/json"
+      }
+    })
+      .then(r => r.ok ? r.json() : Promise.reject(r))
+      .then(data => {
+        const granted = data.granted
+        button.dataset.granted = granted
+        if (granted) {
+          button.className = "inline-flex items-center justify-center w-9 h-9 m-1 rounded-md border transition-all cursor-pointer bg-blue-600 border-blue-700 text-white hover:bg-blue-700"
+        } else {
+          button.className = "inline-flex items-center justify-center w-9 h-9 m-1 rounded-md border transition-all cursor-pointer bg-white border-[#e9e4d4] text-transparent hover:bg-blue-50 hover:border-blue-200"
+        }
+      })
+      .catch(() => { button.classList.add("ring-2", "ring-red-400") })
+      .finally(() => { button.disabled = false })
+  }
+
+  filter() {
+    const q = this.searchTarget.value.trim().toLowerCase()
+    this.rowTargets.forEach(row => {
+      const key = row.dataset.permissionKey || ""
+      const name = row.dataset.permissionName || ""
+      row.hidden = q && !key.includes(q) && !name.includes(q)
+    })
+    this.userHeaderTargets.forEach(th => {
+      const email = th.dataset.userEmail || ""
+      th.hidden = q && !email.includes(q) && this.rowTargets.every(r => r.hidden)
+    })
+  }
+}

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

@@ -0,0 +1,24 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Focuses the form's [type=search] input on Cmd+K / Ctrl+K.
+// Attach via: data-controller="admin--search-shortcut"
+export default class extends Controller {
+  connect() {
+    this._onKey = this.onKey.bind(this)
+    document.addEventListener("keydown", this._onKey)
+  }
+
+  disconnect() {
+    document.removeEventListener("keydown", this._onKey)
+  }
+
+  onKey(event) {
+    if ((event.metaKey || event.ctrlKey) && event.key && event.key.toLowerCase() === "k") {
+      const input = this.element.querySelector('input[type="search"]')
+      if (!input) return
+      event.preventDefault()
+      input.focus()
+      input.select()
+    }
+  }
+}

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

@@ -0,0 +1,17 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Filters the rail items (anchor tags inside the rail nav) by matching against
+// each item's data-settings-rail-label attribute. Cleared input restores all.
+export default class extends Controller {
+  filter(e) {
+    const q = (e.target.value || "").trim().toLowerCase()
+    const aside = this.element.closest("aside")
+    if (!aside) return
+    const items = aside.querySelectorAll("[data-settings-rail-label]")
+    items.forEach((el) => {
+      const label = (el.dataset.settingsRailLabel || "").toLowerCase()
+      const match = !q || label.includes(q)
+      el.style.display = match ? "" : "none"
+    })
+  }
+}

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

@@ -0,0 +1,39 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Keyboard shortcuts dialog. Opens on `?` (outside editable elements),
+// closes on ESC or backdrop click.
+export default class extends Controller {
+  static targets = ["backdrop", "modKey"]
+
+  connect() {
+    const isMac = /Mac|iPhone|iPad|iPod/i.test(navigator.platform || "")
+    this.modKeyTargets.forEach(el => { el.textContent = isMac ? "⌘" : "Ctrl" })
+  }
+
+  open(event) {
+    if (event) event.preventDefault()
+    this.backdropTarget.hidden = false
+  }
+
+  close() {
+    this.backdropTarget.hidden = true
+  }
+
+  stop(event) {
+    event.stopPropagation()
+  }
+
+  onWindowKey(event) {
+    if (event.key === "Escape" && !this.backdropTarget.hidden) {
+      event.preventDefault()
+      this.close()
+      return
+    }
+    if (event.key !== "?") return
+    const t = event.target
+    const editable = t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.tagName === "SELECT" || t.isContentEditable)
+    if (editable) return
+    event.preventDefault()
+    this.backdropTarget.hidden ? this.open() : this.close()
+  }
+}

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

@@ -0,0 +1,135 @@
+import { Controller } from "@hotwired/stimulus"
+
+const STORAGE_KEY = "admin:sidebar-collapsed"
+
+// Toggles the sidebar between full and icon-only mode.
+// Sets data-sidebar-collapsed on the controller element. CSS reacts via that attribute.
+// Persists via localStorage. When collapsed, hovering a nav group <details> opens a
+// fixed-position flyout next to it showing its children.
+export default class extends Controller {
+  connect() {
+    const saved = localStorage.getItem(STORAGE_KEY)
+    this.element.dataset.sidebarCollapsed = saved === "true" ? "true" : "false"
+
+    // Listen for toggle requests dispatched from the AdminPageHeader trigger.
+    this._onExternalToggle = () => this.toggle()
+    document.addEventListener("admin:sidebar:toggle", this._onExternalToggle)
+
+    // Delegated click for the AdminPageHeader toggle button. Survives Turbo nav.
+    // Guard the event so one click toggles once even if multiple controller
+    // instances (Turbo reconnects) each bound a document listener.
+    this._delegatedToggleClick = (e) => {
+      const btn = e.target.closest && e.target.closest(".js-sidebar-toggle")
+      if (!btn || e.__sidebarToggleHandled) return
+      e.__sidebarToggleHandled = true
+      e.preventDefault()
+      this.toggle()
+    }
+    document.addEventListener("click", this._delegatedToggleClick)
+
+    this._groups  = Array.from(this.element.querySelectorAll("details"))
+    this._flyouts = []
+    this._originalParents = new Map()
+    this._enterHandlers = new Map()
+    this._leaveHandlers = new Map()
+
+    this._closeTimers = new Map()
+
+    this._groups.forEach((g) => {
+      const flyout = g.querySelector(":scope > div")
+      if (!flyout) return
+      this._flyouts.push(flyout)
+      this._originalParents.set(flyout, { parent: flyout.parentNode, nextSibling: flyout.nextSibling })
+
+      const cancelClose = () => {
+        const t = this._closeTimers.get(flyout)
+        if (t) { clearTimeout(t); this._closeTimers.delete(flyout) }
+      }
+      const scheduleClose = () => {
+        cancelClose()
+        const t = setTimeout(() => this.closeFlyout(flyout), 200)
+        this._closeTimers.set(flyout, t)
+      }
+
+      const onEnter = () => {
+        cancelClose()
+        this.openFlyout(g, flyout)
+      }
+      const onLeave = () => scheduleClose()
+
+      this._enterHandlers.set(g, onEnter)
+      this._leaveHandlers.set(g, onLeave)
+      g.addEventListener("mouseenter", onEnter)
+      g.addEventListener("mouseleave", onLeave)
+      // Hovering the popped-out menu keeps it open.
+      flyout.addEventListener("mouseenter", cancelClose)
+      flyout.addEventListener("mouseleave", scheduleClose)
+    })
+  }
+
+  disconnect() {
+    document.removeEventListener("admin:sidebar:toggle", this._onExternalToggle)
+    if (this._delegatedToggleClick) document.removeEventListener("click", this._delegatedToggleClick)
+    this._groups?.forEach((g) => {
+      const onEnter = this._enterHandlers.get(g)
+      const onLeave = this._leaveHandlers.get(g)
+      if (onEnter) g.removeEventListener("mouseenter", onEnter)
+      if (onLeave) g.removeEventListener("mouseleave", onLeave)
+    })
+    // Restore any portaled flyouts.
+    this._flyouts?.forEach((f) => this.restoreFlyout(f))
+  }
+
+  toggle(event) {
+    if (event) event.preventDefault()
+    const next = this.element.dataset.sidebarCollapsed !== "true"
+    this.element.dataset.sidebarCollapsed = String(next)
+    localStorage.setItem(STORAGE_KEY, String(next))
+    // Close any open flyout when switching modes.
+    this._flyouts?.forEach((f) => this.closeFlyout(f))
+  }
+
+  isCollapsed() {
+    return this.element.dataset.sidebarCollapsed === "true"
+  }
+
+  openFlyout(group, flyout) {
+    if (!this.isCollapsed()) return
+    // Portal to body so position:fixed isn't trapped by the sidebar's transform.
+    if (flyout.parentNode !== document.body) {
+      document.body.appendChild(flyout)
+    }
+    const rect = group.getBoundingClientRect()
+    flyout.style.setProperty("position", "fixed", "important")
+    flyout.style.setProperty("left", `${rect.right + 6}px`, "important")
+    flyout.style.setProperty("top", `${rect.top}px`, "important")
+    flyout.style.setProperty("margin", "0", "important")
+    flyout.style.setProperty("min-width", "200px", "important")
+    flyout.style.setProperty("background", "white", "important")
+    flyout.style.setProperty("border", "1px solid #e9e4d4", "important")
+    flyout.style.setProperty("border-radius", "10px", "important")
+    flyout.style.setProperty("padding", "4px", "important")
+    flyout.style.setProperty("box-shadow", "0 12px 32px rgba(28,25,23,0.10)", "important")
+    flyout.style.setProperty("z-index", "1000", "important")
+    flyout.style.setProperty("display", "block", "important")
+    flyout.dataset.sidebarFlyoutOpen = "true"
+  }
+
+  closeFlyout(flyout) {
+    if (!flyout) return
+    delete flyout.dataset.sidebarFlyoutOpen
+    flyout.removeAttribute("style")
+    this.restoreFlyout(flyout)
+  }
+
+  restoreFlyout(flyout) {
+    const orig = this._originalParents?.get(flyout)
+    if (!orig) return
+    if (flyout.parentNode === orig.parent) return
+    if (orig.nextSibling && orig.nextSibling.parentNode === orig.parent) {
+      orig.parent.insertBefore(flyout, orig.nextSibling)
+    } else {
+      orig.parent.appendChild(flyout)
+    }
+  }
+}

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

@@ -0,0 +1,48 @@
+import { Controller } from "@hotwired/stimulus"
+
+const STORAGE_KEY = "admin.sidebar_nav.groups"
+
+// Persists <details> open state for sidebar accordion groups in sessionStorage
+// (cleared when the browser session ends).
+export default class extends Controller {
+  static targets = ["group"]
+
+  connect() {
+    this._onToggle = () => this.persist()
+    this.applyStoredState()
+    this.groupTargets.forEach((el) => el.addEventListener("toggle", this._onToggle))
+  }
+
+  disconnect() {
+    this.groupTargets.forEach((el) => el.removeEventListener("toggle", this._onToggle))
+  }
+
+  applyStoredState() {
+    let map = {}
+    try {
+      map = JSON.parse(sessionStorage.getItem(STORAGE_KEY) || "{}")
+    } catch (_) {
+      map = {}
+    }
+    if (typeof map !== "object" || map === null) return
+
+    this.groupTargets.forEach((el) => {
+      const key = el.dataset.groupKey
+      if (!key || !Object.prototype.hasOwnProperty.call(map, key)) return
+      el.open = Boolean(map[key])
+    })
+  }
+
+  persist() {
+    const map = {}
+    this.groupTargets.forEach((el) => {
+      const key = el.dataset.groupKey
+      if (key) map[key] = el.open
+    })
+    try {
+      sessionStorage.setItem(STORAGE_KEY, JSON.stringify(map))
+    } catch (_) {
+      // Private mode / quota — ignore
+    }
+  }
+}

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

@@ -0,0 +1,10 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Lightweight trigger. Dispatches `admin:sidebar:toggle` on document.
+// sidebar_collapse_controller listens for that event and flips state.
+export default class extends Controller {
+  toggle(event) {
+    if (event) event.preventDefault()
+    document.dispatchEvent(new CustomEvent("admin:sidebar:toggle"))
+  }
+}

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

@@ -0,0 +1,88 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Controls the topbar dropdowns: notifications bell + profile menu.
+// Outside click + ESC close. Only one panel open at a time.
+//
+// Also fills in the platform-appropriate modifier key (⌘ on Mac, Ctrl elsewhere)
+// inside the search trigger's keyboard hint.
+export default class extends Controller {
+  static targets = ["bellButton", "bellPanel", "menuButton", "menuPanel", "modKey"]
+
+  connect() {
+    if (this.hasModKeyTarget) {
+      const isMac = /Mac|iPhone|iPad|iPod/i.test(navigator.platform || "")
+      this.modKeyTarget.textContent = isMac ? "⌘" : "Ctrl"
+    }
+    // Re-open the profile menu after a locale switch reload, so it feels like it stayed open.
+    if (sessionStorage.getItem("admin:reopen-profile") && this.hasMenuPanelTarget) {
+      sessionStorage.removeItem("admin:reopen-profile")
+      requestAnimationFrame(() => this.openPanel(this.menuPanelTarget, this.menuButtonTarget))
+    }
+  }
+
+  toggleBell(event) {
+    event.stopPropagation()
+    const open = this.bellPanelTarget.hidden
+    this.closeAll()
+    if (open) this.openPanel(this.bellPanelTarget, this.bellButtonTarget)
+  }
+
+  toggleMenu(event) {
+    event.stopPropagation()
+    const open = this.menuPanelTarget.hidden
+    this.closeAll()
+    if (open) this.openPanel(this.menuPanelTarget, this.menuButtonTarget)
+  }
+
+  closeAll() {
+    if (this.hasBellPanelTarget) {
+      this.bellPanelTarget.hidden = true
+      this.bellButtonTarget.dataset.active = "false"
+    }
+    if (this.hasMenuPanelTarget) {
+      this.menuPanelTarget.hidden = true
+      this.menuButtonTarget.dataset.active = "false"
+    }
+  }
+
+  openPanel(panel, button) {
+    panel.hidden = false
+    button.dataset.active = "true"
+  }
+
+  onKey(event) {
+    if (event.key === "Escape") this.closeAll()
+  }
+
+  onOutsideClick(event) {
+    if (!this.element.contains(event.target)) this.closeAll()
+  }
+
+  // Switch the admin UI locale without closing the menu or reloading.
+  // Sets the session locale server-side; applies on the next navigation.
+  async setLocale(event) {
+    event.preventDefault()
+    event.stopPropagation()
+    const btn = event.currentTarget
+    if (btn.dataset.active === "true") return
+
+    const group = btn.closest("[data-locale-url]")
+    const url = group?.dataset.localeUrl
+    const locale = btn.dataset.locale
+    if (!url || !locale) return
+
+    try {
+      await fetch(url, {
+        method: "PATCH",
+        headers: {
+          "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]')?.content || "",
+          "Accept": "text/html"
+        },
+        body: new URLSearchParams({ locale })
+      })
+      // Reload so the new locale actually applies; re-open the menu afterwards.
+      sessionStorage.setItem("admin:reopen-profile", "1")
+      window.location.reload()
+    } catch (_e) { /* swallow — user can retry */ }
+  }
+}