plutonium 0.64.0 → 0.65.0

data/src/js/controllers/slim_select_controller.js

@@ -1,4 +1,5 @@
 import { Controller } from "@hotwired/stimulus";
+import { t } from "../i18n.js";
 
 // Connects to data-controller="slim-select"
 //
@@ -33,28 +34,33 @@ export default class extends Controller {
 
   #setupSlimSelect() {
     const settings = {};
-    const modal = document.querySelector('[data-controller="remote-modal"]');
 
-    if (modal) {
-      // Create a dedicated container div right after the select element
-      this.dropdownContainer = document.createElement("div");
-      this.dropdownContainer.className = "ss-dropdown-container";
-
-      // Make the select wrapper position relative to contain the absolute dropdown
-      const selectWrapper = this.element.parentNode;
-      const originalPosition = getComputedStyle(selectWrapper).position;
-      if (originalPosition === "static") {
-        selectWrapper.style.position = "relative";
-        this.modifiedSelectWrapper = selectWrapper;
-      }
-
-      // Insert the container right after the select element
-      this.element.parentNode.insertBefore(
-        this.dropdownContainer,
-        this.element.nextSibling
-      );
+    // Optional locale passthrough: plutonium.js.libraries.slim_select may
+    // define placeholderText, searchText, searchPlaceholder and searchingText.
+    const strings = t("plutonium.js.libraries.slim_select");
+    if (strings && typeof strings === "object") {
+      const { placeholderText, searchText, searchPlaceholder, searchingText } = strings;
+      Object.assign(settings, { placeholderText, searchText, searchPlaceholder, searchingText });
+      Object.keys(settings).forEach((k) => settings[k] === undefined && delete settings[k]);
+    }
 
-      settings.contentLocation = this.dropdownContainer;
+    this.modal = this.element.closest('[data-controller="remote-modal"]');
+
+    if (this.modal) {
+      // Inside a <dialog> opened via showModal(), the dialog lives in the
+      // browser's top layer: anything rendered outside it (e.g. on
+      // document.body) paints BEHIND it regardless of z-index, and the
+      // dialog is transform-animated (slide/scale), so position:fixed
+      // descendants are rebased to the dialog's box rather than the
+      // viewport. Rendering the dropdown into the select's own container
+      // (SlimSelect's other default) instead leaves it clipped by the
+      // form section's overflow.
+      //
+      // So attach the dropdown to the dialog itself and position it
+      // absolutely relative to the dialog's box (see #applyModalPositioning).
+      // It then escapes every section's overflow while staying inside the
+      // top layer, on top of the form. Mirrors the flatpickr controller.
+      settings.contentLocation = this.modal;
       settings.contentPosition = "absolute";
       settings.openPosition = "auto";
     }
@@ -73,125 +79,58 @@ export default class extends Controller {
       events: events,
     });
 
-    // Add event listeners for better positioning
-    this.handleDropdownPosition();
-
-    // Bind event handlers for proper cleanup
-    this.boundHandleDropdownOpen = this.handleDropdownOpen.bind(this);
-    this.boundHandleDropdownClose = this.handleDropdownClose.bind(this);
-
-    // Add event listeners to properly handle dropdown visibility
-    this.element.addEventListener("ss:open", this.boundHandleDropdownOpen);
-    this.element.addEventListener("ss:close", this.boundHandleDropdownClose);
-
-    // Add mutation observer to track aria-expanded attribute
-    this.setupAriaObserver();
-  }
-
-  handleDropdownPosition() {
-    if (this.dropdownContainer) {
-      // Reposition dropdown when window resizes or scrolls
-      const repositionDropdown = () => {
-        const selectRect = this.element.getBoundingClientRect();
-
-        // Calculate if there's enough space below
-        const spaceBelow = window.innerHeight - selectRect.bottom;
-        const spaceAbove = selectRect.top;
-
-        if (spaceBelow < 200 && spaceAbove > spaceBelow) {
-          // Position above if not enough space below
-          this.dropdownContainer.style.top = "auto";
-          this.dropdownContainer.style.bottom = "100%";
-          this.dropdownContainer.style.borderRadius = "0.375rem 0.375rem 0 0";
-        } else {
-          // Position below (default)
-          this.dropdownContainer.style.bottom = "auto";
-          this.dropdownContainer.style.borderRadius = "0 0 0.375rem 0.375rem";
-        }
-      };
-
-      // Initial positioning
-      setTimeout(repositionDropdown, 0);
-
-      // Reposition on events
-      window.addEventListener("resize", repositionDropdown);
-      window.addEventListener("scroll", repositionDropdown);
-
-      // Store references for cleanup
-      this.repositionDropdown = repositionDropdown;
-    }
-  }
-
-  handleDropdownOpen() {
-    if (this.dropdownContainer) {
-      // When dropdown opens, ensure our container is properly sized
-      this.dropdownContainer.style.height = "auto";
-      this.dropdownContainer.style.overflow = "visible";
-
-      // Add open class for better CSS targeting
-      this.dropdownContainer.classList.add("ss-active");
-
-      // Ensure this dropdown appears above others
-      const allContainers = document.querySelectorAll(".ss-dropdown-container");
-      allContainers.forEach((container) => {
-        if (container !== this.dropdownContainer) {
-          container.style.zIndex = "9999";
-        }
-      });
-      this.dropdownContainer.style.zIndex = "10000";
+    if (this.modal) {
+      this.#applyModalPositioning();
     }
   }
 
-  handleDropdownClose() {
-    if (this.dropdownContainer) {
-      // Remove active class
-      this.dropdownContainer.classList.remove("ss-active");
-    }
-  }
-
-  setupAriaObserver() {
-    // Track aria-expanded attribute on the select element or its wrapper
-    if (this.element) {
-      this.ariaObserver = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          if (mutation.attributeName === "aria-expanded") {
-            const expanded =
-              mutation.target.getAttribute("aria-expanded") === "true";
-            if (expanded) {
-              this.handleDropdownOpen();
-            } else {
-              this.handleDropdownClose();
-            }
-          }
-        });
-      });
-
-      // Look for the actual element that gets the aria-expanded attribute
-      const possibleTargets = [
-        this.element,
-        this.element.parentNode.querySelector(".ss-main"),
-        this.element.parentNode.querySelector("[aria-expanded]"),
-      ];
-
-      const target = possibleTargets.find(
-        (el) => el && el.hasAttribute && el.hasAttribute("aria-expanded")
-      );
-
-      if (target) {
-        this.ariaObserver.observe(target, {
-          attributes: true,
-          attributeFilter: ["aria-expanded"],
-        });
-
-        // Check initial state
-        const expanded = target.getAttribute("aria-expanded") === "true";
-        if (expanded) {
-          this.handleDropdownOpen();
-        } else {
-          this.handleDropdownClose();
-        }
+  // Re-base SlimSelect's dropdown positioning onto the modal's coordinate
+  // system. SlimSelect computes document coordinates (rect + window scroll),
+  // which are wrong for content parented to a transform-animated <dialog>:
+  // an absolutely-positioned child is placed relative to the dialog's box,
+  // not the document. We override the two leaf positioners so SlimSelect
+  // keeps deciding up-vs-down (and its own open/scroll/resize triggers keep
+  // firing), but the actual offsets are measured against the dialog. A
+  // capture-phase scroll listener covers scrolls of the dialog's own
+  // content, which never reach SlimSelect's window-level scroll listener.
+  #applyModalPositioning() {
+    const render = this.slimSelect.render;
+    const openAbove = render.classes.openAbove;
+    const openBelow = render.classes.openBelow;
+
+    const place = (above) => {
+      const mainEl = render.main.main;
+      const content = render.content.main;
+      const mainHeight = mainEl.offsetHeight;
+      const contentHeight = content.offsetHeight;
+
+      mainEl.classList.remove(openAbove, openBelow);
+      content.classList.remove(openAbove, openBelow);
+      mainEl.classList.add(above ? openAbove : openBelow);
+      content.classList.add(above ? openAbove : openBelow);
+
+      const inputRect = mainEl.getBoundingClientRect();
+      const modalRect = this.modal.getBoundingClientRect();
+
+      content.style.margin = above
+        ? "-" + (mainHeight + contentHeight - 1) + "px 0px 0px 0px"
+        : "-1px 0px 0px 0px";
+      content.style.top =
+        inputRect.top + inputRect.height - modalRect.top + "px";
+      content.style.left = inputRect.left - modalRect.left + "px";
+      content.style.width = inputRect.width + "px";
+    };
+
+    render.moveContentAbove = () => place(true);
+    render.moveContentBelow = () => place(false);
+
+    this.boundModalReposition = () => {
+      if (!this.slimSelect) return;
+      if (this.slimSelect.settings.isOpen || this.slimSelect.settings.isFullOpen) {
+        this.slimSelect.render.moveContent();
       }
-    }
+    };
+    document.addEventListener("scroll", this.boundModalReposition, true);
   }
 
   disconnect() {
@@ -224,7 +163,7 @@ export default class extends Controller {
         headers: { Accept: "application/json" },
         signal: signal,
       });
-      if (!res.ok) return "Search failed";
+      if (!res.ok) return t("plutonium.js.slim_select.search_failed");
       const json = await res.json();
       const results = Array.isArray(json.results) ? json.results : [];
       return results.map((row) => ({
@@ -234,7 +173,7 @@ export default class extends Controller {
     } catch (e) {
       if (e.name === "AbortError") return [];
       console.warn("[slim-select] typeahead error", e);
-      return "Search failed";
+      return t("plutonium.js.slim_select.search_failed");
     }
   }
 
@@ -249,50 +188,14 @@ export default class extends Controller {
   }
 
   #cleanupSlimSelect() {
-    // Clean up event listeners
-    if (this.element) {
-      if (this.boundHandleDropdownOpen) {
-        this.element.removeEventListener(
-          "ss:open",
-          this.boundHandleDropdownOpen
-        );
-      }
-      if (this.boundHandleDropdownClose) {
-        this.element.removeEventListener(
-          "ss:close",
-          this.boundHandleDropdownClose
-        );
-      }
-    }
-
-    // Disconnect observer
-    if (this.ariaObserver) {
-      this.ariaObserver.disconnect();
-      this.ariaObserver = null;
+    if (this.boundModalReposition) {
+      document.removeEventListener("scroll", this.boundModalReposition, true);
+      this.boundModalReposition = null;
     }
 
     if (this.slimSelect) {
       this.slimSelect.destroy();
       this.slimSelect = null;
     }
-
-    // Clean up event listeners
-    if (this.repositionDropdown) {
-      window.removeEventListener("resize", this.repositionDropdown);
-      window.removeEventListener("scroll", this.repositionDropdown);
-      this.repositionDropdown = null;
-    }
-
-    // Clean up the dropdown container if it exists
-    if (this.dropdownContainer && this.dropdownContainer.parentNode) {
-      this.dropdownContainer.parentNode.removeChild(this.dropdownContainer);
-      this.dropdownContainer = null;
-    }
-
-    // Restore original positioning if we modified it
-    if (this.modifiedSelectWrapper) {
-      this.modifiedSelectWrapper.style.position = "";
-      this.modifiedSelectWrapper = null;
-    }
   }
 }

data/src/js/core.js

@@ -1,4 +1,12 @@
 import registerControllers from "./controllers/register_controllers.js"
-export { registerControllers }
+import { t } from "./i18n.js"
+export { registerControllers, t }
+
+// Expose the translator so host apps (and inline scripts) can reuse the
+// `plutonium.js.*` strings without importing the bundle.
+if (typeof window !== "undefined") {
+  window.Plutonium = window.Plutonium || {}
+  window.Plutonium.t = t
+}
 
 import "./turbo"

data/src/js/i18n.js

@@ -0,0 +1,69 @@
+// Translations for Plutonium's bundled JavaScript.
+//
+// Rails serialises the `plutonium.js` subtree of the current locale into
+// `<meta name="pu-i18n" content="...">` in the layout head (see
+// Plutonium::UI::Layout::Base#render_i18n). This module reads that blob
+// lazily, so host apps override any string by defining the key in their own
+// config/locales, exactly as they do for Plutonium's Ruby-side strings.
+//
+//   t("plutonium.js.clipboard.copied")                       // "Copied!"
+//   t("plutonium.js.attachment_input.delete_all", {count: 3}) // "Delete 3"
+//   t("plutonium.js.libraries.slim_select")                   // {placeholderText: ...} or the key
+//
+// Lookup rules mirror I18n: `%{name}` placeholders are interpolated from
+// `params`; a `count` param picks the `one` / `other` subkey when the value
+// is a plural object; a missing key falls back to the key itself.
+
+const PREFIX = "plutonium.js."
+const BLOB_SELECTOR = 'meta[name="pu-i18n"]'
+
+let dictionary = null
+
+function load() {
+  if (typeof document === "undefined") return {}
+  const el = document.querySelector(BLOB_SELECTOR)
+  if (!el) return {}
+  try {
+    return JSON.parse(el.content) || {}
+  } catch (e) {
+    console.warn("[plutonium] could not parse the pu-i18n locale blob", e)
+    return {}
+  }
+}
+
+// Raw value for a key (string, plural object, library object) or undefined.
+export function lookup(key) {
+  if (dictionary === null) dictionary = load()
+  const path = key.startsWith(PREFIX) ? key.slice(PREFIX.length) : key
+  return path.split(".").reduce(
+    (node, part) => (node != null && typeof node === "object" ? node[part] : undefined),
+    dictionary
+  )
+}
+
+function interpolate(text, params) {
+  return text.replace(/%\{(\w+)\}/g, (match, name) =>
+    Object.prototype.hasOwnProperty.call(params, name) ? String(params[name]) : match
+  )
+}
+
+export function t(key, params = {}) {
+  let value = lookup(key)
+
+  if (value != null && typeof value === "object" && "count" in params) {
+    value = params.count === 1 ? value.one : value.other
+  }
+
+  if (typeof value === "string") return interpolate(value, params)
+  return value === undefined ? key : value
+}
+
+// Turbo Drive replaces the head's <meta> elements on navigation, so the blob
+// changes when the locale does; drop the cache after each render.
+if (typeof document !== "undefined") {
+  const reset = () => { dictionary = null }
+  document.addEventListener("turbo:load", reset)
+  document.addEventListener("turbo:render", reset)
+}
+
+export default t

data/src/js/plutonium-charts.js

@@ -0,0 +1,15 @@
+// The on-demand charts bundle: Chart.js wired into Chartkick.
+//
+// Built as its own entry point (app/assets/plutonium-charts.js) and NOT
+// imported by plutonium.js, so pages without a chart never download it. The
+// `chart` Stimulus controller injects this script the first time a chart card
+// connects (its URL rides the card's data-chart-script-value) and then draws
+// through `window.Chartkick`.
+import Chartkick from "chartkick"
+import "chartkick/chart.js"
+
+if (typeof window !== "undefined") {
+  window.Chartkick = Chartkick
+}
+
+export default Chartkick

data/src/js/turbo/turbo_confirm.js

@@ -1,6 +1,8 @@
 // Themed replacement for Turbo's default window.confirm. The dialog is
 // built lazily and reused so per-call cost is just a textContent swap.
 
+import { t } from "../i18n.js";
+
 let dialog;
 let messageEl;
 let confirmButton;
@@ -55,12 +57,12 @@ function ensureDialog() {
   cancelButton = document.createElement("button");
   cancelButton.type = "button";
   cancelButton.className = "pu-btn pu-btn-md pu-btn-outline";
-  cancelButton.textContent = "Cancel";
+  cancelButton.textContent = t("plutonium.js.turbo_confirm.cancel");
 
   confirmButton = document.createElement("button");
   confirmButton.type = "button";
   confirmButton.className = "pu-btn pu-btn-md pu-btn-primary";
-  confirmButton.textContent = "Confirm";
+  confirmButton.textContent = t("plutonium.js.turbo_confirm.confirm");
 
   footer.appendChild(cancelButton);
   footer.appendChild(confirmButton);
@@ -79,7 +81,7 @@ async function animateClose() {
 
 function themedConfirm(message) {
   ensureDialog();
-  messageEl.textContent = message || "Are you sure?";
+  messageEl.textContent = message || t("plutonium.js.are_you_sure");
 
   return new Promise((resolve) => {
     let settled = false;