active_admin_prism 0.1.2 → 0.1.4

data/js-src/prism.js

@@ -75,6 +75,73 @@
   });
 })();
 
+// Desktop sidebar rail-collapse toggle (ActiveAdminPrism::Configuration
+// #sidebar_collapsible) — separate from the mobile off-canvas toggle above:
+// that one slides the whole sidebar on/off screen below 900px; this one
+// shrinks it to a narrow icon-only rail on desktop instead, and the two
+// don't interact (scss-src/_sidebar.scss scopes rail-collapse to nothing in
+// particular, but the mobile media query's own `transform`/`position: fixed`
+// rules take over below 900px regardless of this class). State persists to
+// localStorage under its own key, same convention as the nav-group state
+// above, so a returning visitor keeps their last choice.
+(function () {
+  "use strict";
+
+  var STORAGE_KEY = "prism_sidebar_collapsed";
+
+  function setCollapsed(toggle, collapsed) {
+    document.body.classList.toggle("prism-sidebar-collapsed", collapsed);
+    toggle.setAttribute("aria-expanded", collapsed ? "false" : "true");
+    toggle.setAttribute("aria-label", collapsed ? "Expand sidebar" : "Collapse sidebar");
+    try {
+      window.localStorage.setItem(STORAGE_KEY, collapsed ? "1" : "0");
+    } catch (e) {
+      // localStorage unavailable — degrade to in-memory only, no
+      // persistence across reloads.
+    }
+  }
+
+  document.addEventListener("DOMContentLoaded", function () {
+    var toggle = document.querySelector("[data-prism-toggle-sidebar-collapse]");
+    if (!toggle) return;
+
+    var stored;
+    try {
+      stored = window.localStorage.getItem(STORAGE_KEY);
+    } catch (e) {
+      stored = null;
+    }
+    if (stored === "1") setCollapsed(toggle, true);
+
+    toggle.addEventListener("click", function () {
+      setCollapsed(toggle, !document.body.classList.contains("prism-sidebar-collapsed"));
+    });
+    toggle.addEventListener("keydown", function (event) {
+      if (event.key !== "Enter" && event.key !== " ") return;
+      event.preventDefault();
+      setCollapsed(toggle, !document.body.classList.contains("prism-sidebar-collapsed"));
+    });
+
+    // Clicking into the nav while collapsed to the icon-only rail expands
+    // it back out — the collapsed rail exists to save width while
+    // *browsing* the current page, not as a standing preference that
+    // should keep the destination page's own labels (or, for a parent
+    // item, its whole submenu) hidden too. Covers both a leaf link (real
+    // `<a href>`, about to navigate away) and a parent's own
+    // ".prism-nav-group-toggle" — that one never navigates, but while
+    // collapsed its submenu is force-hidden regardless of the "open"
+    // class the sidebar's own separate click handler still toggles on it
+    // (scss-src/_sidebar.scss's ".prism-nav-submenu { display: none
+    // !important; }" under body.prism-sidebar-collapsed), so without
+    // this, clicking a parent like "School" silently did nothing visible.
+    document.addEventListener("click", function (event) {
+      if (!document.body.classList.contains("prism-sidebar-collapsed")) return;
+      if (!event.target.closest("a.prism-nav-link, .prism-nav-group-toggle")) return;
+      setCollapsed(toggle, false);
+    });
+  });
+})();
+
 // Sidebar menu search box (lib/active_admin/views/prism_sidebar.rb
 // #render_search_box) — filters the "Pages" nav as the visitor types,
 // matching an item's own label at ANY nesting depth, not just top-level
@@ -222,7 +289,9 @@
   });
 })();
 
-// Flash messages: dismiss button + auto-hide. See
+// Flash messages: dismiss button + auto-hide, toast-style (see
+// scss-src/_base.scss for the floating card layout and the
+// ".prism-flash-progress" countdown bar this keeps in sync with). See
 // lib/active_admin/views/flash_messages.rb, which renders the
 // ".prism-flash-dismiss" button markup this responds to, and two data
 // attributes this reads at runtime so Ruby-side config controls behavior
@@ -249,6 +318,36 @@
     }, transitionMs);
   }
 
+  // Hovering a toast pauses both its countdown bar (CSS
+  // "animation-play-state: paused" on :hover, in scss-src/_base.scss) and
+  // the actual removal timer here, tracking whatever time was left rather
+  // than restarting from the full duration — a flash a visitor is
+  // mid-read shouldn't silently vanish out from under them just because
+  // its timer happened to elapse while their mouse was still over it.
+  function armAutoDismiss(flash, totalMs, transitionMs) {
+    var remainingMs = totalMs;
+    var timer = null;
+    var startedAt = null;
+
+    function start() {
+      startedAt = Date.now();
+      timer = setTimeout(function () {
+        dismiss(flash, transitionMs);
+      }, remainingMs);
+    }
+
+    function pause() {
+      if (!timer) return;
+      clearTimeout(timer);
+      timer = null;
+      remainingMs -= Date.now() - startedAt;
+    }
+
+    flash.addEventListener("mouseenter", pause);
+    flash.addEventListener("mouseleave", start);
+    start();
+  }
+
   document.addEventListener("DOMContentLoaded", function () {
     var flashesWrapper = document.querySelector(".flashes");
     var flashes = document.querySelectorAll(".flashes .flash");
@@ -259,9 +358,7 @@
 
     if (autoDismissMs) {
       flashes.forEach(function (flash) {
-        setTimeout(function () {
-          dismiss(flash, transitionMs);
-        }, autoDismissMs);
+        armAutoDismiss(flash, autoDismissMs, transitionMs);
       });
     }
 
@@ -273,46 +370,249 @@
   });
 })();
 
-// "Filters" sidebar panel: collapses to a single icon button, expanding to
-// the full form on click. See scss-src/_panels.scss (#filters_sidebar_section)
-// for the actual collapse/expand styling — this only toggles the ".open"
-// class an inline click responds to. Skipped entirely when
+// Shared by the "consolidated sidebar panels" (below) and "consolidated
+// action items" (further down) features — both are independent top-level
+// IIFEs, so this is their one shared meeting point rather than a closure:
+// each wants its own Select2 "jump menu" sitting in the *same* row, in
+// the title bar, rather than the sidebar one living separately down in
+// #sidebar. Whichever feature's DOMContentLoaded handler runs first
+// creates the row; the other just finds and reuses it. Declared with
+// `function` (not `const`/an IIFE-local var) so it's hoisted and visible
+// to every IIFE below it in this same file regardless of registration
+// order.
+function prismTitlebarActionsRow() {
+  var right = document.getElementById("titlebar_right");
+  if (!right) return null;
+
+  var row = document.getElementById("prism-titlebar-actions-row");
+  if (row) return row;
+
+  var actionItems = right.querySelector(":scope > .action_items") || right;
+
+  row = document.createElement("span");
+  row.id = "prism-titlebar-actions-row";
+  row.className = "prism-titlebar-actions-row";
+  actionItems.appendChild(row);
+
+  // ActiveAdmin's own auto-added "New <Resource>" button (marked
+  // ".prism-action-item-new" — see lib/active_admin/views/action_items.rb)
+  // is excluded from consolidation below (it's the single most-used
+  // action on an index page, unlike the bulk-action/CSV-upload links this
+  // feature actually exists to tidy away) — re-appended here, after the
+  // row, so it keeps its traditional spot at the very top-right corner
+  // (text-align:right on #titlebar_right means the *last* child sits at
+  // the true right edge) with the consolidated dropdown(s) landing just
+  // to its left instead of displacing it. Harmless no-op if there's no
+  // such button on this page (a custom `register_page`, say).
+  var newItem = actionItems.querySelector(":scope > .action_item.prism-action-item-new");
+  if (newItem) actionItems.appendChild(newItem);
+
+  return row;
+}
+
+// Collapsible sidebar sections: collapse to a single icon button by
+// default, expanding to the full panel on click. See
+// scss-src/_panels.scss (.prism-collapsible-panel) for the actual
+// collapse/expand styling — this only toggles a section's own ".open"
+// class an inline click responds to. Applies to Filters this way exactly
+// as it always has; any *other* collapsible section (a host's own
+// `sidebar "Title" do ... end` block) never actually opens in place at
+// all — buildOtherSectionsDropdown below immediately flattens its
+// links into the "Sidebar Actions" dropdown and discards the rest of the
+// section outright, so the wireUp() call each one still gets here (for
+// consistency/simplicity, not because it matters) attaches to an element
+// that's about to be removed. Skipped entirely when
 // ActiveAdminPrism.configuration.collapsible_filters is false (the
 // "prism-filters-collapsible-disabled" body class, set in
 // lib/active_admin/views/flash_messages.rb#body_classes).
 (function () {
   "use strict";
 
-  document.addEventListener("DOMContentLoaded", function () {
-    if (document.body.classList.contains("prism-filters-collapsible-disabled")) return;
-
-    var section = document.getElementById("filters_sidebar_section");
-    if (!section) return;
+  function setOpen(section, toggle, open) {
+    section.classList.toggle("open", open);
+    toggle.setAttribute("aria-expanded", open ? "true" : "false");
+    // The Filters section specifically also mirrors its state onto
+    // <body> — #main_content (the table/grid area) is a *sibling* of
+    // #sidebar, not a descendant of this section, so CSS can't reach
+    // across siblings any other way. scss-src/_panels.scss's own
+    // #sidebar width reflow no longer needs this (that rule now reacts
+    // to ANY section's ".open" via ":has()" instead of this one
+    // specifically), but a host's own CSS may already key off this
+    // documented class, so it's kept.
+    if (section.id === "filters_sidebar_section") {
+      document.body.classList.toggle("prism-filters-open", open);
+    }
+  }
 
+  function wireUp(section) {
     var toggle = section.querySelector(":scope > h3");
-    if (!toggle) return;
+    if (!toggle) return null;
 
     toggle.setAttribute("role", "button");
     toggle.setAttribute("tabindex", "0");
     toggle.setAttribute("aria-expanded", section.classList.contains("open") ? "true" : "false");
-    // Mirrored onto <body> because #main_content (the table/grid area)
-    // is a *sibling* of #sidebar, not a descendant of this section — CSS
-    // can't reach across siblings, so scss-src/_panels.scss keys the
-    // #main_content/#sidebar width reflow off this body class instead.
-    document.body.classList.toggle("prism-filters-open", section.classList.contains("open"));
 
-    function toggleOpen() {
-      var open = section.classList.toggle("open");
-      toggle.setAttribute("aria-expanded", open ? "true" : "false");
-      document.body.classList.toggle("prism-filters-open", open);
-    }
-
-    toggle.addEventListener("click", toggleOpen);
+    toggle.addEventListener("click", function () {
+      setOpen(section, toggle, !section.classList.contains("open"));
+    });
     toggle.addEventListener("keydown", function (event) {
       if (event.key !== "Enter" && event.key !== " ") return;
       event.preventDefault();
-      toggleOpen();
+      setOpen(section, toggle, !section.classList.contains("open"));
+    });
+
+    return toggle;
+  }
+
+  // Every OTHER collapsible section — anything besides Filters, e.g. a
+  // host's own custom `sidebar "..." do ... end` block — gets consolidated
+  // into a single "Sidebar Actions" Select2 dropdown instead of each
+  // rendering its own individually collapsed icon button; every
+  // link/button inside is flattened into that dropdown as its own option
+  // (see buildOtherSectionsDropdown below), and the section itself is
+  // discarded outright rather than ever opening in place. Filters is
+  // deliberately excluded from this and always keeps its own plain icon
+  // button exactly as before, whether or not any other sections exist —
+  // see ActiveAdminPrism::Configuration#collapsible_filters.
+  //
+  // Rendered in the title bar (prismTitlebarActionsRow, shared with the
+  // consolidated action_items dropdown below) rather than inside #sidebar
+  // itself — sitting next to that dropdown, styled the same way, reads as
+  // one coherent "more stuff lives here" row rather than two separate,
+  // disconnected mechanisms in different parts of the page.
+  //
+  // Deliberately flattened to match that other dropdown's own click-and-
+  // reset "jump menu" flow instead of a nested reveal-a-panel-then-pick-
+  // a-link one: every actual link/button/submit inside every non-Filters
+  // section's content becomes its own flat option here (a section that
+  // groups a few related links, the common case, disappears entirely as
+  // a grouping level) — moved into a hidden holding area, same technique
+  // and same reason as .prism-action-items-holding below (an element
+  // fully removed from the document can't bubble a click up to where
+  // Rails UJS's own document-level listener is, breaking any
+  // data-method/data-confirm link; staying attached-but-hidden avoids
+  // that). Each non-Filters section itself (now an empty shell once its
+  // content's been moved out) is discarded outright either way, so
+  // #sidebar never has to make room for anything beyond Filters alone.
+  function buildOtherSectionsDropdown(entries) {
+    if (typeof jQuery === "undefined" || !jQuery.fn.select2) return;
+
+    var row = prismTitlebarActionsRow();
+    if (!row) return;
+
+    var holding = document.createElement("div");
+    holding.className = "prism-sidebar-panel-holding";
+    holding.hidden = true;
+
+    var labels = [];
+    entries.forEach(function (entry) {
+      var contents = entry.section.querySelector(":scope > .panel_contents");
+      if (contents) {
+        Array.prototype.forEach.call(contents.querySelectorAll("a, button, input[type=submit]"), function (trigger) {
+          trigger.dataset.prismSidebarActionsIndex = String(labels.length);
+          labels.push((trigger.value || trigger.textContent || "").trim());
+        });
+        holding.appendChild(contents);
+      }
+      entry.section.remove();
+    });
+
+    if (!labels.length) return;
+
+    var wrapper = document.createElement("span");
+    wrapper.className = "prism-sidebar-panel-select-wrapper";
+
+    var select = document.createElement("select");
+    select.className = "prism-sidebar-panel-select";
+    // A real leading <option value=""> (kept selected, non-removable) is
+    // what lets Select2 show a placeholder on a *single* select at all.
+    select.appendChild(document.createElement("option"));
+
+    labels.forEach(function (label, index) {
+      var option = document.createElement("option");
+      option.value = String(index);
+      option.textContent = label;
+      select.appendChild(option);
+    });
+
+    wrapper.appendChild(select);
+    wrapper.appendChild(holding);
+    // Appended, not inserted first — whichever of this feature or the
+    // action_items one below runs first (DOMContentLoaded handlers fire
+    // in registration order, and this file registers this one first)
+    // claims the left slot in the row; the other lands to its right.
+    row.appendChild(wrapper);
+
+    var $select = jQuery(select).select2({
+      width: "220px",
+      placeholder: "Sidebar Actions (" + labels.length + ")",
+      // 0, not some higher threshold: always show the search box, even
+      // with only a couple of options — that's the one visual cue that
+      // reads unambiguously as "this is Select2, not a plain dropdown"
+      // regardless of how many links a host's sidebar block happens to
+      // have right now, and it's what keeps this usable once it does
+      // grow rather than needing to cross a threshold first.
+      minimumResultsForSearch: 0
+    });
+
+    $select.on("select2:select", function (event) {
+      var index = event.params.data.id;
+      var trigger = holding.querySelector('[data-prism-sidebar-actions-index="' + index + '"]');
+      if (trigger) trigger.click();
+      // Resets to the placeholder right away, same as the action_items
+      // dropdown — this fires an action, it isn't a persistent selection.
+      $select.val("").trigger("change");
+    });
+  }
+
+  document.addEventListener("DOMContentLoaded", function () {
+    if (document.body.classList.contains("prism-filters-collapsible-disabled")) return;
+
+    var filtersSection = document.getElementById("filters_sidebar_section");
+    var filtersToggle = null;
+    var otherEntries = [];
+
+    document.querySelectorAll(".prism-collapsible-panel").forEach(function (section) {
+      var toggle = wireUp(section);
+      if (!toggle) return;
+
+      if (section === filtersSection) {
+        filtersToggle = toggle;
+        return;
+      }
+
+      otherEntries.push({ section: section, toggle: toggle });
     });
+
+    if (filtersSection) {
+      document.body.classList.toggle("prism-filters-open", filtersSection.classList.contains("open"));
+    }
+
+    if (otherEntries.length > 0) buildOtherSectionsDropdown(otherEntries);
+
+    // The active-filters bar (see lib/active_admin/views/active_filters_bar.rb,
+    // ActiveAdminPrism::Configuration#active_filters_bar) is a shortcut
+    // straight to the Filters form itself — clicking anywhere on it toggles
+    // the panel open/closed, same as the funnel icon, and scrolls it into
+    // view on open, since #sidebar isn't sticky the way the left nav is and
+    // can scroll out of view on a long table.
+    var activeFiltersBar = document.getElementById("prism_active_filters_bar");
+    if (activeFiltersBar && filtersSection && filtersToggle) {
+      activeFiltersBar.setAttribute("role", "button");
+      activeFiltersBar.setAttribute("tabindex", "0");
+      activeFiltersBar.setAttribute("aria-label", "Toggle filters");
+
+      var toggleFromBar = function (event) {
+        if (event.type === "keydown" && event.key !== "Enter" && event.key !== " ") return;
+        if (event.type === "keydown") event.preventDefault();
+        var open = !filtersSection.classList.contains("open");
+        setOpen(filtersSection, filtersToggle, open);
+        if (open) filtersSection.scrollIntoView({ behavior: "smooth", block: "nearest" });
+      };
+
+      activeFiltersBar.addEventListener("click", toggleFromBar);
+      activeFiltersBar.addEventListener("keydown", toggleFromBar);
+    }
   });
 })();
 
@@ -393,3 +693,241 @@
     });
   });
 })();
+
+// Consolidates a title bar with many `action_item` buttons (a resource
+// that registers a dozen+ CSV upload / bulk-action links is a real
+// example this was built for) into a single Select2 "jump menu" instead
+// of a multi-row wall of individual buttons. See
+// ActiveAdminPrism::Configuration#action_items_dropdown/
+// #action_items_dropdown_threshold and lib/active_admin/views/title_bar.rb
+// for the Ruby side (the "data-prism-action-items-threshold" attribute
+// this reads — its mere presence also means #action_items_dropdown is
+// on). Purely client-side DOM restructuring: each existing `.action_item`
+// element is moved as-is (not a clone) into a hidden holding area, so
+// whatever Ruby/Arbre content a host's own `action_item` block rendered —
+// a plain link, a `button_to` form (its own data-method/data-confirm
+// included), anything — keeps working completely unmodified; selecting an
+// option here just finds and `.click()`s the real trigger inside it,
+// rather than this file trying to reimplement navigation/submission
+// itself. Select2 (vendor/select2/select2.full.min.js) is concatenated
+// into this same compiled asset regardless of
+// ActiveAdminPrism.configuration.select2 (that flag only controls
+// auto-enhancing a *host's own* selects) — jQuery itself is always
+// present too, since ActiveAdmin's own base.js already depends on it —
+// so both are always available here with no extra host setup.
+(function () {
+  "use strict";
+
+  document.addEventListener("DOMContentLoaded", function () {
+    var right = document.getElementById("titlebar_right");
+    if (!right || !right.dataset.prismActionItemsThreshold) return;
+    if (typeof jQuery === "undefined" || !jQuery.fn.select2) return;
+
+    // Not "!threshold" — 0 is this option's own default (see
+    // ActiveAdminPrism::Configuration#action_items_dropdown_threshold)
+    // and would be wrongly treated as falsy/absent otherwise.
+    var threshold = parseInt(right.dataset.prismActionItemsThreshold, 10);
+    var container = right.querySelector(":scope > .action_items");
+    if (isNaN(threshold) || !container) return;
+
+    // ":not(.prism-action-item-new)" — the "New <Resource>" button (see
+    // lib/active_admin/views/action_items.rb for where that class comes
+    // from) is excluded from consolidation and left inline in its
+    // original spot: it's the single most-used action on an index page,
+    // unlike the bulk-action/CSV-upload links this feature actually
+    // exists to tidy away, so sweeping it into a dropdown too would bury
+    // the one button visitors reach for constantly.
+    var items = Array.prototype.slice.call(
+      container.querySelectorAll(":scope > .action_item:not(.prism-action-item-new)")
+    );
+    if (items.length <= threshold) return;
+
+    var row = prismTitlebarActionsRow();
+    if (!row) return;
+
+    var wrapper = document.createElement("span");
+    wrapper.className = "prism-action-items-dropdown";
+
+    var holding = document.createElement("div");
+    holding.className = "prism-action-items-holding";
+    holding.hidden = true;
+
+    var select = document.createElement("select");
+    select.className = "prism-action-items-select";
+    // A real leading <option value=""> (kept selected, non-removable via
+    // Select2's "x") is what lets Select2 show a placeholder on a
+    // *single* select at all — see its own docs on this requirement.
+    select.appendChild(document.createElement("option"));
+
+    items.forEach(function (item, index) {
+      var trigger = item.querySelector("a, button, input[type=submit]");
+      var label = trigger ? (trigger.value || trigger.textContent) : item.textContent;
+
+      var option = document.createElement("option");
+      option.value = String(index);
+      option.textContent = (label || "").trim();
+      select.appendChild(option);
+
+      item.dataset.prismActionItemsIndex = String(index);
+      holding.appendChild(item);
+    });
+
+    wrapper.appendChild(select);
+    wrapper.appendChild(holding);
+    // Appended, not inserted first — this feature's DOMContentLoaded
+    // handler is registered after the "consolidated sidebar panels" one
+    // (prismTitlebarActionsRow's other caller), so its own "Sidebar Actions"
+    // dropdown (if any) has already claimed the left slot in the shared
+    // row by the time this runs; this one lands to its right.
+    row.appendChild(wrapper);
+
+    var $select = jQuery(select).select2({
+      width: "220px",
+      placeholder: "Actions (" + items.length + ")",
+      // See the matching comment in buildOtherSectionsDropdown above —
+      // always-visible search box, not gated behind a result-count
+      // threshold, is what makes this read as Select2 from the first item.
+      minimumResultsForSearch: 0
+    });
+
+    $select.on("select2:select", function (event) {
+      var index = event.params.data.id;
+      var item = holding.querySelector('[data-prism-action-items-index="' + index + '"]');
+      var trigger = item && item.querySelector("a, button, input[type=submit]");
+      if (trigger) trigger.click();
+      // Resets to the placeholder right away rather than showing the just-
+      // picked label — this is a jump menu (fires an action), not a
+      // persistent filter/setting, so there's nothing meaningful for it to
+      // stay "set" to.
+      $select.val("").trigger("change");
+    });
+  });
+})();
+
+// Aligns the shared title bar "jump menu" row (prismTitlebarActionsRow,
+// above — the consolidated action_items dropdown and/or the consolidated
+// "Sidebar Actions" sidebar-panels dropdown, whichever of those exist) with
+// the index table's own right edge instead of #title_bar's: a table's
+// columns don't necessarily stretch to fill the full content width, so
+// those two edges often don't line up, and #title_bar itself spans wider
+// than the table's own container to begin with (it sits above the
+// #main_content/#sidebar split, not inside it). A separate, later IIFE
+// rather than living inside either dropdown's own setup — either one, or
+// both, might be the reason the row exists, and this only needs to run
+// once regardless of which.
+(function () {
+  "use strict";
+
+  document.addEventListener("DOMContentLoaded", function () {
+    var row = document.getElementById("prism-titlebar-actions-row");
+    var table = document.querySelector("#main_content table");
+    if (!row || !table) return;
+
+    // `transform: translateX` shifts the row left from wherever it
+    // already renders in normal flow — deliberately not `position:
+    // absolute/fixed`, which would need a containing block that actually
+    // shares the table's right edge, and none of this element's ancestors
+    // do. Staying in normal flow (just visually shifted) is also what
+    // keeps it aligned with the top of #title_bar for free, reading as a
+    // top-level menu rather than something floating at an offset.
+    function alignToTable() {
+      row.style.transform = "none";
+      var rowRect = row.getBoundingClientRect();
+      var tableRect = table.getBoundingClientRect();
+      if (!tableRect.width || !rowRect.width) return;
+
+      var shift = rowRect.right - tableRect.right;
+      row.style.transform = shift > 0 ? "translateX(-" + shift + "px)" : "none";
+    }
+
+    // Run once immediately, but layout isn't necessarily final yet at
+    // DOMContentLoaded — a scrollbar appearing/disappearing, webfonts, or
+    // anything else nudging the table's own width afterward all happen
+    // without the *window* itself ever resizing, so plain "resize"/"load"
+    // listeners can miss them (observed in practice: the table shrank by
+    // ~40px sometime after both had already fired). A ResizeObserver on
+    // the table itself sidesteps guessing which event actually catches
+    // it — it re-runs on any future width change, from any cause,
+    // including ones years from now this comment didn't anticipate.
+    alignToTable();
+
+    if (typeof ResizeObserver !== "undefined") {
+      new ResizeObserver(alignToTable).observe(table);
+    } else {
+      window.addEventListener("load", alignToTable);
+      var resizeTimer = null;
+      window.addEventListener("resize", function () {
+        clearTimeout(resizeTimer);
+        resizeTimer = setTimeout(alignToTable, 150);
+      });
+    }
+  });
+})();
+
+// Horizontal-scroll affordance for the index table. ActiveAdmin renders
+// the table (or grid/block index) inside ".index_content"
+// (lib/active_admin/views/pages/index.rb#render_index) — a sibling of
+// the pagination/download-links footer (`#index_footer`), not an
+// ancestor of it, both nested inside a shared outer container
+// (".paginated_collection_contents"). Scoping the scroll to
+// ".index_content" itself (scss-src/_tables.scss), rather than that
+// outer container, is what keeps the footer in place instead of
+// dragging it sideways out of view along with the table — it has no
+// columns to align with anything anyway. A table simply cut off flush
+// at ".index_content"'s edge otherwise looks identical whether there's
+// one hidden column past it or ten, with nothing telling a visitor
+// scrolling is even possible — so this also toggles two classes
+// (".prism-scroll-left"/".prism-scroll-right") that scss-src/_tables.scss
+// fades a shadow in/out on, on whichever edge(s) still have more to
+// scroll toward, same "scroll shadow" pattern as Gmail/Trello's own
+// tables. That part has to be class-toggling JS, not a pure-CSS trick,
+// since it depends on the *current* scroll position, not just whether
+// the element happens to be scrollable at all.
+(function () {
+  "use strict";
+
+  function updateShadows(el) {
+    var maxScroll = el.scrollWidth - el.clientWidth;
+    // A 1px tolerance, not a bare 0/maxScroll comparison — fractional
+    // scrollLeft values (sub-pixel positions at some zoom levels/DPRs)
+    // mean it can land a hair short of either end, which would otherwise
+    // leave a shadow that never fully clears at that edge.
+    el.classList.toggle("prism-scroll-left", el.scrollLeft > 1);
+    el.classList.toggle("prism-scroll-right", el.scrollLeft < maxScroll - 1);
+  }
+
+  function wire(el) {
+    updateShadows(el);
+    el.addEventListener("scroll", function () {
+      updateShadows(el);
+    });
+
+    // Same reasoning as alignToTable's own ResizeObserver above: the
+    // table's width can settle after DOMContentLoaded (a scrollbar
+    // appearing, webfonts, a column's content changing after a filter)
+    // without the window itself ever resizing, so plain "resize"/"load"
+    // listeners can miss it. Observing its content, not just the
+    // container (whose own box size is unaffected by its scrollable
+    // content growing), is what actually catches that.
+    if (typeof ResizeObserver !== "undefined") {
+      var observer = new ResizeObserver(function () {
+        updateShadows(el);
+      });
+      observer.observe(el);
+      Array.prototype.forEach.call(el.children, function (child) {
+        observer.observe(child);
+      });
+    } else {
+      window.addEventListener("load", function () {
+        updateShadows(el);
+      });
+      window.addEventListener("resize", function () {
+        updateShadows(el);
+      });
+    }
+  }
+
+  document.addEventListener("DOMContentLoaded", function () {
+    document.querySelectorAll(".paginated_collection_contents > .index_content").forEach(wire);
+  });
+})();