ruby_cms 0.2.1.1 → 1.0.1

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

@@ -0,0 +1,153 @@
+import { Controller } from "@hotwired/stimulus";
+import tippy from "tippy.js";
+
+export default class extends Controller {
+  static targets = ["trigger", "content", "menuItem"];
+  static values = {
+    options: {
+      type: Object,
+      default: {},
+    },
+    // make content width of the trigger element (true/false)
+    matchWidth: {
+      type: Boolean,
+      default: false,
+    },
+  };
+
+  connect() {
+    this.boundHandleKeydown = this.handleKeydown.bind(this); // Bind the function so we can remove it later
+    this.initializeTippy();
+    this.selectedIndex = -1;
+  }
+
+  disconnect() {
+    this.destroyTippy();
+  }
+
+  initializeTippy() {
+    const defaultOptions = {
+      content: this.contentTarget.innerHTML,
+      allowHTML: true,
+      interactive: true,
+      onShow: (instance) => {
+        // Defer width calculation to avoid forced reflow
+        if (this.matchWidthValue) {
+          requestAnimationFrame(() => {
+            this.setContentWidth(instance);
+          });
+        }
+        this.addEventListeners();
+      },
+      onHide: () => {
+        this.removeEventListeners();
+        this.deselectAll();
+      },
+      popperOptions: {
+        modifiers: [
+          {
+            name: "offset",
+            options: {
+              offset: [0, 4],
+            },
+          },
+        ],
+      },
+    };
+
+    const mergedOptions = { ...this.optionsValue, ...defaultOptions };
+    this.tippy = tippy(this.triggerTarget, mergedOptions);
+  }
+
+  destroyTippy() {
+    if (this.tippy) {
+      this.tippy.destroy();
+    }
+  }
+
+  setContentWidth(instance) {
+    // box-sizing: border-box
+    const content = instance.popper.querySelector(".tippy-content");
+    if (content) {
+      content.style.width = `${instance.reference.offsetWidth}px`;
+    }
+  }
+
+  handleContextMenu(event) {
+    event.preventDefault();
+    this.open();
+  }
+
+  open() {
+    this.tippy.show();
+  }
+
+  close() {
+    this.tippy.hide();
+  }
+
+  handleKeydown(e) {
+    // return if no menu items (one line fix for)
+    if (this.menuItemTargets.length === 0) {
+      return;
+    }
+
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      this.updateSelectedItem(1);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      this.updateSelectedItem(-1);
+    } else if (e.key === "Enter" && this.selectedIndex !== -1) {
+      e.preventDefault();
+      this.menuItemTargets[this.selectedIndex].click();
+    }
+  }
+
+  updateSelectedItem(direction) {
+    // Check if any of the menuItemTargets have aria-selected="true" and set the selectedIndex to that index
+    this.menuItemTargets.forEach((item, index) => {
+      if (item.getAttribute("aria-selected") === "true") {
+        this.selectedIndex = index;
+      }
+    });
+
+    if (this.selectedIndex >= 0) {
+      this.toggleAriaSelected(this.menuItemTargets[this.selectedIndex], false);
+    }
+
+    this.selectedIndex += direction;
+
+    if (this.selectedIndex < 0) {
+      this.selectedIndex = this.menuItemTargets.length - 1;
+    } else if (this.selectedIndex >= this.menuItemTargets.length) {
+      this.selectedIndex = 0;
+    }
+
+    this.toggleAriaSelected(this.menuItemTargets[this.selectedIndex], true);
+  }
+
+  toggleAriaSelected(element, isSelected) {
+    // Add or remove attribute
+    if (isSelected) {
+      element.setAttribute("aria-selected", "true");
+    } else {
+      element.removeAttribute("aria-selected");
+    }
+  }
+
+  deselectAll() {
+    this.menuItemTargets.forEach((item) =>
+      this.toggleAriaSelected(item, false)
+    );
+    this.selectedIndex = -1;
+  }
+
+  addEventListeners() {
+    document.addEventListener("keydown", this.boundHandleKeydown);
+  }
+
+  removeEventListeners() {
+    document.removeEventListener("keydown", this.boundHandleKeydown);
+  }
+}

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

@@ -0,0 +1,9 @@
+import { Controller } from "@hotwired/stimulus";
+import { MaskInput } from "maska";
+
+// Connects to data-controller="ruby-ui--masked-input"
+export default class extends Controller {
+  connect() {
+    new MaskInput(this.element)
+  }
+}

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

@@ -0,0 +1,45 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="ruby-ui--modal"
+export default class extends Controller {
+  static targets = ["overlay"];
+  static values = { open: { type: Boolean, default: false } };
+
+  connect() {
+    this.openValue ? this.show() : this.hide();
+  }
+
+  open(event) {
+    if (event) event.preventDefault();
+    this.show();
+  }
+
+  dismiss(event) {
+    if (event) event.preventDefault();
+    this.hide();
+  }
+
+  close(event) {
+    this.dismiss(event);
+  }
+
+  stopPropagation(event) {
+    event?.stopPropagation();
+  }
+
+  show() {
+    if (!this.hasOverlayTarget) return;
+    const overlay = this.overlayTarget;
+
+    overlay.classList.remove("hidden");
+    document.body.classList.add("overflow-hidden");
+  }
+
+  hide() {
+    if (!this.hasOverlayTarget) return;
+    const overlay = this.overlayTarget;
+
+    overlay.classList.add("hidden");
+    document.body.classList.remove("overflow-hidden");
+  }
+}

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

@@ -0,0 +1,107 @@
+import { Controller } from "@hotwired/stimulus";
+import {
+  computePosition,
+  flip,
+  shift,
+  offset,
+  autoUpdate,
+} from "@floating-ui/dom";
+
+export default class extends Controller {
+  static targets = ["trigger", "content"];
+  static values = {
+    open: { type: Boolean, default: false },
+    options: { type: Object, default: {} },
+    trigger: { type: String, default: "hover" },
+  };
+
+  connect() {
+    this.closeTimeout = null;
+    this.cleanup = null;
+    this.addEventListeners();
+  }
+
+  disconnect() {
+    this.removeEventListeners();
+    if (this.cleanup) {
+      this.cleanup();
+    }
+  }
+
+  addEventListeners() {
+    if (this.triggerValue === "hover") {
+      this.triggerTarget.addEventListener("mouseenter", this.handleMouseEnter);
+      this.triggerTarget.addEventListener("mouseleave", this.handleMouseLeave);
+      this.contentTarget.addEventListener("mouseenter", this.handleMouseEnter);
+      this.contentTarget.addEventListener("mouseleave", this.handleMouseLeave);
+    } else if (this.triggerValue === "click") {
+      this.triggerTarget.addEventListener("click", this.handleClick);
+      document.addEventListener("click", this.handleOutsideClick);
+    }
+  }
+
+  removeEventListeners() {
+    this.triggerTarget.removeEventListener("mouseenter", this.handleMouseEnter);
+    this.triggerTarget.removeEventListener("mouseleave", this.handleMouseLeave);
+    this.contentTarget.removeEventListener("mouseenter", this.handleMouseEnter);
+    this.contentTarget.removeEventListener("mouseleave", this.handleMouseLeave);
+    this.triggerTarget.removeEventListener("click", this.handleClick);
+    document.removeEventListener("click", this.handleOutsideClick);
+  }
+
+  handleMouseEnter = () => {
+    clearTimeout(this.closeTimeout);
+    this.openValue = true;
+    this.showPopover();
+  };
+
+  handleMouseLeave = () => {
+    this.closeTimeout = setTimeout(() => {
+      this.openValue = false;
+      this.hidePopover();
+    }, 100);
+  };
+
+  handleClick = (event) => {
+    event.stopPropagation();
+    this.openValue = !this.openValue;
+    this.openValue ? this.showPopover() : this.hidePopover();
+  };
+
+  handleOutsideClick = (event) => {
+    if (!this.element.contains(event.target) && this.openValue) {
+      this.openValue = false;
+      this.hidePopover();
+    }
+  };
+
+  showPopover() {
+    this.contentTarget.classList.remove("hidden");
+    this.updatePosition();
+  }
+
+  hidePopover() {
+    this.contentTarget.classList.add("hidden");
+    if (this.cleanup) {
+      this.cleanup();
+    }
+  }
+
+  updatePosition() {
+    if (this.cleanup) {
+      this.cleanup();
+    }
+
+    this.cleanup = autoUpdate(this.triggerTarget, this.contentTarget, () => {
+      computePosition(this.triggerTarget, this.contentTarget, {
+        placement: this.optionsValue.placement || "bottom",
+        middleware: [flip(), shift(), offset(8)],
+      }).then(({ x, y }) => {
+        Object.assign(this.contentTarget.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        });
+      });
+    });
+  }
+}

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

@@ -0,0 +1,192 @@
+import { Controller } from "@hotwired/stimulus";
+import { computePosition, autoUpdate, offset, flip } from "@floating-ui/dom";
+
+export default class extends Controller {
+  static targets = ["trigger", "content", "input", "value", "item"];
+  static values = { open: Boolean };
+  static outlets = ["ruby-ui--select-item"];
+
+  constructor(...args) {
+    super(...args);
+    this.cleanup;
+  }
+
+  connect() {
+    this.setFloatingElement();
+    this.generateItemsIds();
+    this.initializeValue();
+  }
+
+  disconnect() {
+    this.cleanup();
+  }
+
+  selectItem(event) {
+    event.preventDefault();
+
+    this.rubyUiSelectItemOutlets.forEach((item) =>
+      item.handleSelectItem(event),
+    );
+
+    const oldValue = this.inputTarget.value;
+    const newValue = event.target.dataset.value;
+
+    this.inputTarget.value = newValue;
+    this.valueTarget.innerText = event.target.innerText;
+
+    this.dispatchOnChange(oldValue, newValue);
+    this.closeContent();
+  }
+
+  onClick() {
+    this.toogleContent();
+
+    if (this.openValue) {
+      this.setFocusAndCurrent();
+    } else {
+      this.resetCurrent();
+    }
+  }
+
+  handleKeyDown(event) {
+    event.preventDefault();
+
+    const currentIndex = this.itemTargets.findIndex(
+      (item) => item.getAttribute("aria-current") === "true",
+    );
+
+    if (currentIndex + 1 < this.itemTargets.length) {
+      this.itemTargets[currentIndex].removeAttribute("aria-current");
+      this.setAriaCurrentAndActiveDescendant(currentIndex + 1);
+    }
+  }
+
+  handleKeyUp(event) {
+    event.preventDefault();
+
+    const currentIndex = this.itemTargets.findIndex(
+      (item) => item.getAttribute("aria-current") === "true",
+    );
+
+    if (currentIndex > 0) {
+      this.itemTargets[currentIndex].removeAttribute("aria-current");
+      this.setAriaCurrentAndActiveDescendant(currentIndex - 1);
+    }
+  }
+
+  handleEsc(event) {
+    event.preventDefault();
+    this.closeContent();
+  }
+
+  setFocusAndCurrent() {
+    const selectedItem = this.itemTargets.find(
+      (item) => item.getAttribute("aria-selected") === "true",
+    );
+
+    if (selectedItem) {
+      selectedItem.focus({ preventScroll: true });
+      selectedItem.setAttribute("aria-current", "true");
+      this.triggerTarget.setAttribute(
+        "aria-activedescendant",
+        selectedItem.getAttribute("id"),
+      );
+    } else {
+      this.itemTarget.focus({ preventScroll: true });
+      this.itemTarget.setAttribute("aria-current", "true");
+      this.triggerTarget.setAttribute(
+        "aria-activedescendant",
+        this.itemTarget.getAttribute("id"),
+      );
+    }
+  }
+
+  resetCurrent() {
+    this.itemTargets.forEach((item) => item.removeAttribute("aria-current"));
+  }
+
+  clickOutside(event) {
+    if (!this.openValue) return;
+    if (this.element.contains(event.target)) return;
+
+    event.preventDefault();
+    this.toogleContent();
+  }
+
+  toogleContent() {
+    this.openValue = !this.openValue;
+    this.contentTarget.classList.toggle("hidden");
+    this.triggerTarget.setAttribute("aria-expanded", this.openValue);
+  }
+
+  setFloatingElement() {
+    this.cleanup = autoUpdate(this.triggerTarget, this.contentTarget, () => {
+      computePosition(this.triggerTarget, this.contentTarget, {
+        middleware: [offset(4), flip()],
+      }).then(({ x, y }) => {
+        Object.assign(this.contentTarget.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        });
+      });
+    });
+  }
+
+  generateItemsIds() {
+    const contentId = this.contentTarget.getAttribute("id");
+    this.triggerTarget.setAttribute("aria-controls", contentId);
+
+    this.itemTargets.forEach((item, index) => {
+      item.id = `${contentId}-${index}`;
+    });
+  }
+
+  setAriaCurrentAndActiveDescendant(currentIndex) {
+    const currentItem = this.itemTargets[currentIndex];
+    currentItem.focus({ preventScroll: true });
+    currentItem.setAttribute("aria-current", "true");
+    this.triggerTarget.setAttribute(
+      "aria-activedescendant",
+      currentItem.getAttribute("id"),
+    );
+  }
+
+  closeContent() {
+    this.toogleContent();
+    this.resetCurrent();
+
+    this.triggerTarget.setAttribute("aria-activedescendant", true);
+    this.triggerTarget.focus({ preventScroll: true });
+  }
+
+  dispatchOnChange(oldValue, newValue) {
+    if (oldValue === newValue) return;
+
+    const event = new InputEvent("change", {
+      bubbles: true,
+      cancelable: true,
+    });
+
+    this.inputTarget.dispatchEvent(event);
+  }
+
+  initializeValue() {
+    const currentValue = this.inputTarget.value;
+    const selectedItem = this.itemTargets.find(
+      (item) => item.getAttribute("aria-selected") === "true",
+    );
+
+    if (selectedItem && this.valueTarget) {
+      this.valueTarget.innerText = selectedItem.innerText.trim();
+    } else if (currentValue) {
+      // Fallback: find item by value and set text
+      const matchingItem = this.itemTargets.find(
+        (item) => item.dataset.value === currentValue,
+      );
+      if (matchingItem && this.valueTarget) {
+        this.valueTarget.innerText = matchingItem.innerText.trim();
+        matchingItem.setAttribute("aria-selected", "true");
+      }
+    }
+  }
+}

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

@@ -0,0 +1,11 @@
+import { Controller } from "@hotwired/stimulus";
+export default class extends Controller {
+
+  handleSelectItem({ target }) {
+    if (this.element.dataset.value == target.dataset.value) {
+      this.element.setAttribute("aria-selected", true);
+    } else {
+      this.element.removeAttribute("aria-selected");
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  close() {
+    this.element.remove()
+  }
+}

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

@@ -0,0 +1,9 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["content"]
+
+  open() {
+    document.body.insertAdjacentHTML("beforeend", this.contentTarget.innerHTML)
+  }
+}

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

@@ -0,0 +1,67 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="ruby-ui--tabs"
+export default class extends Controller {
+  static targets = ["trigger", "content"];
+  static values = { active: String };
+
+  connect() {
+    if (!this.hasActiveValue && this.triggerTargets.length > 0) {
+      this.activeValue = this.triggerTargets[0].dataset.value;
+    }
+  }
+
+  show(e) {
+    this.activeValue = e.currentTarget.dataset.value;
+  }
+
+  activeValueChanged(currentValue, previousValue) {
+    if (currentValue == "" || currentValue == previousValue) return;
+
+    this.contentTargets.forEach((el) => {
+      el.classList.add("hidden");
+    });
+
+    this.triggerTargets.forEach((el) => {
+      el.dataset.state = "inactive";
+    });
+
+    this.activeContentTarget() &&
+      this.activeContentTarget().classList.remove("hidden");
+    this.activeTriggerTarget().dataset.state = "active";
+
+    if (currentValue === "timetable") {
+      this.scrollToTimetable();
+    }
+  }
+
+  activeTriggerTarget() {
+    return this.triggerTargets.find(
+      (el) => el.dataset.value == this.activeValue
+    );
+  }
+
+  activeContentTarget() {
+    return this.contentTargets.find(
+      (el) => el.dataset.value == this.activeValue
+    );
+  }
+
+  scrollToTimetable() {
+    setTimeout(() => {
+      const timetableElement = this.activeContentTarget()?.querySelector(
+        '[data-controller="schedule"]'
+      );
+      if (timetableElement) {
+        const elementRect = timetableElement.getBoundingClientRect();
+        const absoluteElementTop = elementRect.top + window.pageYOffset;
+        const offset = 100;
+
+        window.scrollTo({
+          top: absoluteElementTop - offset,
+          behavior: "smooth",
+        });
+      }
+    }, 100);
+  }
+}

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

@@ -0,0 +1,30 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  initialize() {
+    this.setTheme()
+  }
+
+  setTheme() {
+    // On page load or when changing themes, best to add inline in `head` to avoid FOUC
+    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+      document.documentElement.classList.add('dark')
+      document.documentElement.classList.remove('light')
+    } else {
+      document.documentElement.classList.remove('dark')
+      document.documentElement.classList.add('light')
+    }
+  }
+
+  setLightTheme() {
+    // Whenever the user explicitly chooses light mode
+    localStorage.theme = 'light'
+    this.setTheme()
+  }
+
+  setDarkTheme() {
+    // Whenever the user explicitly chooses dark mode
+    localStorage.theme = 'dark'
+    this.setTheme()
+  }
+}

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

@@ -0,0 +1,38 @@
+import { Controller } from "@hotwired/stimulus";
+import { computePosition, autoUpdate, offset, shift } from "@floating-ui/dom";
+
+export default class extends Controller {
+  static targets = ["trigger", "content"];
+  static values = { placement: String }
+
+  constructor(...args) {
+    super(...args);
+    this.cleanup;
+  }
+
+  connect() {
+    this.setFloatingElement();
+
+    const tooltipId = this.contentTarget.getAttribute("id");
+    this.triggerTarget.setAttribute("aria-describedby", tooltipId);
+
+  }
+
+  disconnect() {
+    this.cleanup();
+  }
+
+  setFloatingElement() {
+    this.cleanup = autoUpdate(this.triggerTarget, this.contentTarget, () => {
+      computePosition(this.triggerTarget, this.contentTarget, {
+        placement: this.placementValue,
+        middleware: [offset(4), shift()]
+      }).then(({ x, y }) => {
+        Object.assign(this.contentTarget.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        });
+      });
+    });
+  }
+}