ruby_cms 0.1.0

data/app/javascript/controllers/ruby_cms/index.js

@@ -0,0 +1,104 @@
+// RubyCms Stimulus Controllers
+// This file exports all controllers for registration in the host application
+
+import VisualEditorController from "ruby_cms/visual_editor_controller";
+import PagePreviewController from "ruby_cms/page_preview_controller";
+import MobileMenuController from "ruby_cms/mobile_menu_controller";
+import FlashMessagesController from "ruby_cms/flash_messages_controller";
+import BulkActionTableController from "ruby_cms/bulk_action_table_controller";
+import ToggleController from "ruby_cms/toggle_controller";
+import LocaleTabsController from "ruby_cms/locale_tabs_controller";
+import ClickableRowController from "ruby_cms/clickable_row_controller";
+import AutoSavePreferenceController from "ruby_cms/auto_save_preference_controller";
+import NavOrderSortableController from "ruby_cms/nav_order_sortable_controller";
+
+export {
+  VisualEditorController,
+  PagePreviewController,
+  MobileMenuController,
+  FlashMessagesController,
+  BulkActionTableController,
+  ToggleController,
+  LocaleTabsController,
+  ClickableRowController,
+  AutoSavePreferenceController,
+  NavOrderSortableController,
+};
+
+// Helper function to register all RubyCms controllers with a Stimulus application
+export function registerRubyCmsControllers(application) {
+  application.register("ruby-cms--visual-editor", VisualEditorController);
+  application.register("ruby-cms--page-preview", PagePreviewController);
+  application.register("ruby-cms--mobile-menu", MobileMenuController);
+  application.register("ruby-cms--flash-messages", FlashMessagesController);
+  application.register(
+    "ruby-cms--bulk-action-table",
+    BulkActionTableController,
+  );
+  application.register("ruby-cms--toggle", ToggleController);
+  application.register("ruby-cms--locale-tabs", LocaleTabsController);
+  application.register("clickable-row", ClickableRowController);
+  application.register(
+    "ruby-cms--auto-save-preference",
+    AutoSavePreferenceController,
+  );
+  application.register(
+    "ruby-cms--nav-order-sortable",
+    NavOrderSortableController,
+  );
+}
+
+// Auto-register controllers when this module is imported
+// Works with Rails 7+ importmap setup where Stimulus is loaded via @hotwired/stimulus
+if (typeof window !== "undefined") {
+  let registered = false;
+
+  const registerControllers = (app) => {
+    if (registered || !app || typeof app.register !== "function") return false;
+    registerRubyCmsControllers(app);
+    registered = true;
+    return true;
+  };
+
+  // Try to get Stimulus from the standard Rails 7+ location
+  const tryRegister = () => {
+    // Check window.Stimulus (standard Rails 7+ pattern with @hotwired/stimulus-loading)
+    if (window.Stimulus) {
+      return registerControllers(window.Stimulus);
+    }
+    // Fallback: check for application export
+    if (window.application) {
+      return registerControllers(window.application);
+    }
+    return false;
+  };
+
+  // Try immediately
+  if (!tryRegister()) {
+    // Wait for turbo:load which fires after Stimulus is initialized
+    const onTurboLoad = () => {
+      if (tryRegister()) {
+        document.removeEventListener("turbo:load", onTurboLoad);
+      }
+    };
+    document.addEventListener("turbo:load", onTurboLoad);
+
+    // Also try on DOMContentLoaded as fallback
+    const onDOMReady = () => {
+      setTimeout(() => {
+        if (tryRegister()) {
+          document.removeEventListener("DOMContentLoaded", onDOMReady);
+        }
+      }, 50);
+    };
+
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", onDOMReady);
+    } else {
+      // DOM already loaded, try after a short delay
+      setTimeout(tryRegister, 50);
+      setTimeout(tryRegister, 200);
+      setTimeout(tryRegister, 500);
+    }
+  }
+}

data/app/javascript/controllers/ruby_cms/locale_tabs_controller.js

@@ -0,0 +1,34 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["tab"];
+
+  switchTab(event) {
+    const tab = event.currentTarget;
+    const panelId = tab.dataset.panelId;
+    if (!panelId) return;
+
+    const hideClass = "is-hidden";
+
+    // Hide all panels
+    this.tabTargets.forEach((t) => {
+      const pid = t.dataset.panelId;
+      if (pid) {
+        const panel = document.getElementById(pid);
+        if (panel) panel.classList.add(hideClass);
+      }
+      t.classList.remove("is-active");
+    });
+
+    // Show selected panel
+    const panel = document.getElementById(panelId);
+    if (panel) panel.classList.remove(hideClass);
+
+    // Highlight selected tab
+    tab.classList.add("is-active");
+    tab.setAttribute("aria-selected", "true");
+    this.tabTargets
+      .filter((t) => t !== tab)
+      .forEach((t) => t.setAttribute("aria-selected", "false"));
+  }
+}

data/app/javascript/controllers/ruby_cms/mobile_menu_controller.js

@@ -0,0 +1,55 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="ruby-cms--mobile-menu"
+export default class extends Controller {
+  static targets = ["sidebar", "overlay"]
+
+  connect() {
+    // Close menu when clicking outside (only on mobile)
+    if (window.innerWidth < 1024) {
+      document.addEventListener("click", this.handleOutsideClick.bind(this))
+    }
+  }
+
+  disconnect() {
+    document.removeEventListener("click", this.handleOutsideClick.bind(this))
+  }
+
+  toggle() {
+    const isOpen = this.hasSidebarTarget && this.sidebarTarget.classList.contains("translate-x-0")
+    isOpen ? this.close() : this.open()
+  }
+
+  close() {
+    if (this.hasSidebarTarget) {
+      this.sidebarTarget.classList.remove("translate-x-0")
+      this.sidebarTarget.classList.add("-translate-x-full")
+    }
+    if (this.hasOverlayTarget) {
+      this.overlayTarget.classList.add("hidden")
+    }
+  }
+
+  open() {
+    if (this.hasSidebarTarget) {
+      this.sidebarTarget.classList.remove("-translate-x-full")
+      this.sidebarTarget.classList.add("translate-x-0")
+    }
+    if (this.hasOverlayTarget) {
+      this.overlayTarget.classList.remove("hidden")
+    }
+  }
+
+  handleOutsideClick(event) {
+    if (!this.hasSidebarTarget || !this.sidebarTarget.classList.contains("translate-x-0")) {
+      return
+    }
+
+    // Don't close if clicking inside sidebar or toggle button
+    if (this.sidebarTarget.contains(event.target) || this.element.contains(event.target)) {
+      return
+    }
+
+    this.close()
+  }
+}

data/app/javascript/controllers/ruby_cms/nav_order_sortable_controller.js

@@ -0,0 +1,192 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Makes the nav order list sortable via native HTML5 drag and drop.
+// Shows a blue indicator line for drop position; supports dropping at the top.
+export default class extends Controller {
+  static values = {
+    settingsUrl: { type: String, default: "/admin/settings/nav_order" }
+  }
+
+  connect() {
+    this.list = this.element
+    this.items = () => Array.from(this.list.querySelectorAll("[draggable='true']"))
+    this.boundDragstart = this.dragstart.bind(this)
+    this.boundDragend = this.dragend.bind(this)
+    this.boundDragover = this.dragover.bind(this)
+    this.boundDrop = this.drop.bind(this)
+    this.boundDragleave = this.dragleave.bind(this)
+    this.boundListDragover = this.listDragover.bind(this)
+    this.boundListDrop = this.listDrop.bind(this)
+    this.list.addEventListener("dragover", this.boundListDragover)
+    this.list.addEventListener("drop", this.boundListDrop)
+    this.list.addEventListener("dragleave", this.boundDragleave)
+    this.items().forEach((item) => {
+      item.addEventListener("dragstart", this.boundDragstart)
+      item.addEventListener("dragend", this.boundDragend)
+      item.addEventListener("dragover", this.boundDragover)
+      item.addEventListener("dragleave", this.boundDragleave)
+      item.addEventListener("drop", this.boundDrop)
+    })
+  }
+
+  disconnect() {
+    this.removeIndicator()
+    this.list.removeEventListener("dragover", this.boundListDragover)
+    this.list.removeEventListener("drop", this.boundListDrop)
+    this.list.removeEventListener("dragleave", this.boundDragleave)
+    this.items().forEach((item) => {
+      item.removeEventListener("dragstart", this.boundDragstart)
+      item.removeEventListener("dragend", this.boundDragend)
+      item.removeEventListener("dragover", this.boundDragover)
+      item.removeEventListener("dragleave", this.boundDragleave)
+      item.removeEventListener("drop", this.boundDrop)
+    })
+  }
+
+  getIndicator() {
+    if (!this._indicator) {
+      this._indicator = document.createElement("div")
+      this._indicator.setAttribute("data-nav-order-indicator", "")
+      this._indicator.className = "h-0.5 w-full bg-blue-500 flex-shrink-0 pointer-events-none"
+      this._indicator.setAttribute("aria-hidden", "true")
+    }
+    return this._indicator
+  }
+
+  removeIndicator() {
+    this._indicator?.remove()
+    this._indicator = null
+    this.dropIndex = null
+    this.items().forEach((item) => item.classList.remove("ring-2", "ring-inset", "ring-blue-400"))
+  }
+
+  placeIndicator(insertIndex) {
+    const items = this.items()
+    if (insertIndex < 0 || insertIndex > items.length) return
+    const indicator = this.getIndicator()
+    if (insertIndex === 0) {
+      this.list.insertBefore(indicator, items[0])
+    } else {
+      this.list.insertBefore(indicator, items[insertIndex])
+    }
+    this.dropIndex = insertIndex
+  }
+
+  dragleave(e) {
+    // Only remove ring from items; indicator stays until drop/dragend or leave list
+    if (e.currentTarget.getAttribute("draggable") === "true") {
+      e.currentTarget.classList.remove("ring-2", "ring-inset", "ring-blue-400")
+    }
+    const list = this.list
+    const related = e.relatedTarget
+    if (!related || !list.contains(related)) {
+      this.removeIndicator()
+    }
+  }
+
+  dragstart(e) {
+    this.dragged = e.currentTarget
+    e.dataTransfer.effectAllowed = "move"
+    e.dataTransfer.setData("text/html", e.currentTarget.innerHTML)
+    e.currentTarget.classList.add("opacity-50")
+  }
+
+  dragend(e) {
+    e.currentTarget.classList.remove("opacity-50")
+    this.dragged = null
+    this.removeIndicator()
+    this.saveOrder()
+  }
+
+  listDragover(e) {
+    if (!this.dragged) return
+    e.preventDefault()
+    e.dataTransfer.dropEffect = "move"
+    const items = this.items()
+    const first = items[0]
+    if (!first) return
+    const firstRect = first.getBoundingClientRect()
+    if (e.clientY < firstRect.top + firstRect.height / 2) {
+      this.placeIndicator(0)
+    }
+  }
+
+  listDrop(e) {
+    e.preventDefault()
+    if (!this.dragged || this.dropIndex == null) return
+    const items = this.items()
+    const insertBefore = items[this.dropIndex]
+    if (insertBefore && insertBefore !== this.dragged) {
+      this.list.insertBefore(this.dragged, insertBefore)
+    } else if (!insertBefore) {
+      this.list.appendChild(this.dragged)
+    }
+    this.removeIndicator()
+    this.saveOrder()
+  }
+
+  dragover(e) {
+    e.preventDefault()
+    e.dataTransfer.dropEffect = "move"
+    const target = e.currentTarget
+    if (target === this.dragged) return
+    const items = this.items()
+    const index = items.indexOf(target)
+    if (index === -1) return
+    const rect = target.getBoundingClientRect()
+    const mid = rect.top + rect.height / 2
+    const insertIndex = e.clientY < mid ? index : index + 1
+    this.placeIndicator(insertIndex)
+  }
+
+  drop(e) {
+    e.preventDefault()
+    if (!this.dragged || this.dragged === e.currentTarget) return
+    const items = this.items()
+    const insertBefore = this.dropIndex != null ? items[this.dropIndex] : e.currentTarget.nextElementSibling
+    if (insertBefore && insertBefore !== this.dragged) {
+      this.list.insertBefore(this.dragged, insertBefore)
+    } else if (!insertBefore) {
+      this.list.appendChild(this.dragged)
+    }
+    this.removeIndicator()
+    this.saveOrder()
+  }
+
+  saveOrder() {
+    const form = this.element.closest("form")
+    if (!form) return
+    const mainList = form.querySelector("[data-list-type='main']")
+    const bottomList = form.querySelector("[data-list-type='bottom']")
+    const mainOrder = mainList ? Array.from(mainList.querySelectorAll("input[name='nav_order_main[]']")).map((i) => i.value) : []
+    const bottomOrder = bottomList ? Array.from(bottomList.querySelectorAll("input[name='nav_order_bottom[]']")).map((i) => i.value) : []
+    const url = this.settingsUrlValue || "/admin/settings/nav_order"
+    const csrf = document.querySelector('meta[name="csrf-token"]')
+    fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-CSRF-Token": csrf ? csrf.content : "",
+        Accept: "application/json"
+      },
+      body: JSON.stringify({
+        tab: "navigation",
+        nav_order_main: mainOrder,
+        nav_order_bottom: bottomOrder
+      })
+    })
+      .then((res) => (res.ok ? res.json() : Promise.reject(res)))
+      .then(() => this.showToast("Order saved.", "success"))
+      .catch(() => this.showToast("Failed to save order.", "error"))
+  }
+
+  showToast(message, type = "info") {
+    const toast = document.createElement("div")
+    toast.className = `fixed top-4 right-4 z-50 rounded-lg px-4 py-2.5 text-sm font-medium text-white shadow-lg ${
+      type === "success" ? "bg-emerald-600" : type === "error" ? "bg-red-600" : "bg-gray-800"
+    }`
+    toast.textContent = message
+    document.body.appendChild(toast)
+    setTimeout(() => toast.remove(), 2500)
+  }
+}

data/app/javascript/controllers/ruby_cms/page_preview_controller.js

@@ -0,0 +1,135 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static values = {
+    page: String,
+    editMode: Boolean,
+  };
+
+  connect() {
+    if (this.editModeValue) {
+      this.enableEditMode();
+    }
+
+    this.boundHandleMessage = this.handleMessage.bind(this);
+    window.addEventListener("message", this.boundHandleMessage);
+  }
+
+  disconnect() {
+    window.removeEventListener("message", this.boundHandleMessage);
+    this.disableEditMode();
+  }
+
+  enableEditMode() {
+    this.boundHandleBlockClick = this.handleBlockClick.bind(this);
+    this.element.addEventListener("click", this.boundHandleBlockClick);
+  }
+
+  disableEditMode() {
+    if (this.boundHandleBlockClick) {
+      this.element.removeEventListener("click", this.boundHandleBlockClick);
+    }
+  }
+
+  handleBlockClick(event) {
+    const blockElement =
+      event.target.closest(".ruby_cms-content-block") ||
+      event.target.closest(".content-block");
+    if (!blockElement) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    const blockId =
+      blockElement.dataset.blockId || blockElement.dataset.contentKey;
+    if (!blockId) {
+      console.warn(
+        "Content block found but no blockId or contentKey data attribute",
+      );
+      return;
+    }
+
+    const allWithSameId = this.element.querySelectorAll(
+      `[data-block-id="${blockId}"], [data-content-key="${blockId}"]`,
+    );
+    const blockIndex = Array.from(allWithSameId).indexOf(blockElement);
+
+    if (window.parent && window.parent !== window) {
+      window.parent.postMessage(
+        {
+          type: "CONTENT_BLOCK_CLICKED",
+          blockId,
+          blockIndex,
+          page: this.getCurrentPage(),
+        },
+        window.location.origin,
+      );
+    }
+  }
+
+  handleMessage(event) {
+    if (event.origin !== window.location.origin) return;
+    const { type, blockId, blockIndex = 0 } = event.data;
+
+    if (type === "HIGHLIGHT_BLOCK") {
+      this.highlightBlock(blockId, blockIndex);
+    } else if (type === "CLEAR_HIGHLIGHT") {
+      this.clearHighlight();
+    } else if (type === "content-updated") {
+      this.handleContentUpdate(event.data);
+    } else if (type === "UPDATE_BLOCK_CONTENT") {
+      this.updateBlockContent(event.data);
+    }
+  }
+
+  highlightBlock(blockId, blockIndex = 0) {
+    this.clearHighlight();
+
+    const selector = `[data-block-id="${blockId}"], [data-content-key="${blockId}"]`;
+    const matching = this.element.querySelectorAll(selector);
+    const target = matching[blockIndex] || matching[0];
+    if (target) {
+      target.classList.add("editing");
+      target.scrollIntoView({ behavior: "smooth", block: "center" });
+    }
+  }
+
+  clearHighlight() {
+    this.element
+      .querySelectorAll(".content-block.editing, .ruby_cms-content-block.editing")
+      .forEach((el) => el.classList.remove("editing"));
+  }
+
+  handleContentUpdate(data) {
+    const blockIndex = data.blockIndex ?? 0;
+    const key = data.key;
+    const elements = this.element.querySelectorAll(
+      `[data-content-key="${key}"], [data-block-id="${key}"]`,
+    );
+    const element = elements[blockIndex] || elements[0];
+    if (element) {
+      const contentEl =
+        element.querySelector("[data-content-target]") || element;
+      contentEl.innerHTML = data.content ?? "";
+    }
+  }
+
+  updateBlockContent({ blockId, content, contentType }) {
+    const blockElement = this.element.querySelector(
+      `[data-block-id="${blockId}"], [data-content-key="${blockId}"]`,
+    );
+    if (blockElement) {
+      if (contentType === "rich_text") {
+        blockElement.innerHTML = content;
+      } else {
+        blockElement.textContent = content;
+      }
+    }
+  }
+
+  getCurrentPage() {
+    if (this.hasPageValue) return this.pageValue;
+    const urlParams = new URLSearchParams(window.location.search);
+    return urlParams.get("page") || "home";
+  }
+}

data/app/javascript/controllers/ruby_cms/toggle_controller.js

@@ -0,0 +1,39 @@
+// Toggle visibility controller for simple show/hide functionality
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["toggleable"]
+
+  toggle(event) {
+    event.preventDefault()
+    const targetId = event.currentTarget.dataset.toggleTargetId
+    if (targetId) {
+      const element = document.getElementById(targetId)
+      if (element) {
+        element.classList.toggle("hidden")
+      }
+    }
+  }
+
+  hide(event) {
+    event.preventDefault()
+    const targetId = event.currentTarget.dataset.toggleTargetId
+    if (targetId) {
+      const element = document.getElementById(targetId)
+      if (element) {
+        element.classList.add("hidden")
+      }
+    }
+  }
+
+  show(event) {
+    event.preventDefault()
+    const targetId = event.currentTarget.dataset.toggleTargetId
+    if (targetId) {
+      const element = document.getElementById(targetId)
+      if (element) {
+        element.classList.remove("hidden")
+      }
+    }
+  }
+}