active_admin_prism 0.1.0 → 0.1.2

data/js-src/prism.js

@@ -75,6 +75,103 @@
   });
 })();
 
+// 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
+// entries. A submenu item that matches keeps every one of its ancestors
+// visible and forced open; a parent whose own label matches instead keeps
+// its *entire* subtree visible and expanded, even children that don't
+// match on their own — either way via ".prism-search-open", distinct from
+// the persisted/manual ".open" class above so clearing the search can't
+// clobber a group the visitor had manually pinned open.
+(function () {
+  "use strict";
+
+  function normalize(text) {
+    return (text || "").trim().toLowerCase();
+  }
+
+  function ownLabel(li) {
+    var el = li.querySelector(
+      ":scope > .prism-nav-link .prism-nav-label, :scope > .prism-nav-group-toggle .prism-nav-label"
+    );
+    return el ? normalize(el.textContent) : "";
+  }
+
+  function directChildItems(li) {
+    var submenu = li.querySelector(":scope > .prism-nav-submenu");
+    if (!submenu) return [];
+    return Array.prototype.filter.call(submenu.children, function (child) {
+      return child.classList.contains("prism-nav-item");
+    });
+  }
+
+  // Recurses depth-first, carrying `ancestorOwnMatch` down (true once any
+  // ancestor's own label has matched) so a matched group reveals its whole
+  // subtree, not just itself — and returns whether this node's own label
+  // or any descendant's matched (ignoring ancestorOwnMatch), so that signal
+  // keeps bubbling up to open every group on the path to a deep match
+  // regardless of how many submenu levels separate it from the top.
+  function matchItem(li, query, ancestorOwnMatch) {
+    var ownMatch = !!query && ownLabel(li).indexOf(query) !== -1;
+    var childMatch = false;
+
+    directChildItems(li).forEach(function (child) {
+      if (matchItem(child, query, ancestorOwnMatch || ownMatch)) childMatch = true;
+    });
+
+    var visible = !query || ancestorOwnMatch || ownMatch || childMatch;
+    li.classList.toggle("prism-nav-hidden", !visible);
+    li.classList.toggle("prism-search-open", !!query && (ownMatch || childMatch || ancestorOwnMatch));
+
+    return ownMatch || childMatch;
+  }
+
+  function applySearch(sidebar, query) {
+    var nav = sidebar.querySelector(".prism-sidebar-scroll > .prism-nav");
+    if (!nav) return;
+
+    var anyVisible = false;
+    Array.prototype.forEach.call(nav.children, function (li) {
+      if (!li.classList.contains("prism-nav-item")) return;
+      if (matchItem(li, query, false)) anyVisible = true;
+    });
+
+    var empty = sidebar.querySelector(".prism-nav-empty");
+    if (empty) empty.classList.toggle("prism-nav-empty-visible", !!query && !anyVisible);
+
+    var clear = sidebar.querySelector("[data-prism-nav-search-clear]");
+    if (clear) clear.classList.toggle("prism-nav-search-clear-visible", !!query);
+  }
+
+  document.addEventListener("DOMContentLoaded", function () {
+    var sidebar = document.getElementById("header");
+    if (!sidebar || !sidebar.classList.contains("prism-sidebar")) return;
+
+    var input = sidebar.querySelector("[data-prism-nav-search]");
+    if (!input) return;
+
+    input.addEventListener("input", function () {
+      applySearch(sidebar, normalize(input.value));
+    });
+
+    input.addEventListener("keydown", function (event) {
+      if (event.key !== "Escape" || !input.value) return;
+      input.value = "";
+      applySearch(sidebar, "");
+    });
+
+    var clearBtn = sidebar.querySelector("[data-prism-nav-search-clear]");
+    if (clearBtn) {
+      clearBtn.addEventListener("click", function () {
+        input.value = "";
+        applySearch(sidebar, "");
+        input.focus();
+      });
+    }
+  });
+})();
+
 // Routes every plain `data-confirm` link (row-level View/Edit/Delete
 // actions, any other rails-ujs confirm) through ActiveAdmin's own styled
 // jQuery UI dialog — the same one it already uses for Batch Actions —
@@ -268,3 +365,31 @@
     });
   });
 })();
+
+// Auto-enhances every plain <select> ActiveAdmin renders (filters, form
+// inputs, association pickers) into a searchable Select2 widget when
+// ActiveAdminPrism.configuration.select2 is true (the
+// "prism-select2-enabled" body class, set in
+// lib/active_admin/views/flash_messages.rb#body_classes). Select2 itself
+// (vendor/select2/select2.full.min.js, MIT licensed) is concatenated just
+// above this file in the compiled asset (see bin/build-js) — turning this
+// flag on needs no host-side JS/npm setup of its own. Skips any <select>
+// a host already initialized manually (the per-field
+// input_html: { class: "..." } + own .select2() call approach predating
+// this flag, still documented in INTEGRATION.md) so the two can coexist
+// without double-initializing the same element.
+(function () {
+  "use strict";
+
+  document.addEventListener("DOMContentLoaded", function () {
+    if (!document.body.classList.contains("prism-select2-enabled")) return;
+    if (typeof jQuery === "undefined" || !jQuery.fn.select2) return;
+
+    var $ = jQuery;
+    $("select").each(function () {
+      var $select = $(this);
+      if ($select.data("select2")) return;
+      $select.select2({ width: "100%" });
+    });
+  });
+})();

data/lib/active_admin/views/flash_messages.rb

@@ -47,10 +47,11 @@ module ActiveAdmin
 
         # Read by prism.js / scss-src's CSS to decide whether to route
         # data-confirm links through the styled dialog, whether the Filters
-        # sidebar panel collapses to an icon, and whether ActiveAdmin's
-        # original #footer should stay hidden (see
+        # sidebar panel collapses to an icon, whether ActiveAdmin's
+        # original #footer should stay hidden, and whether every plain
+        # <select> should be auto-enhanced into Select2 (see
         # ActiveAdminPrism::Configuration #styled_confirms /
-        # #collapsible_filters / #sidebar_footer).
+        # #collapsible_filters / #sidebar_footer / #select2).
         #
         # Can't call `super` here — #body_classes is defined directly on
         # this same class (not a superclass), so reopening and redefining
@@ -69,6 +70,7 @@ module ActiveAdmin
           classes << "prism-styled-confirms-disabled" unless config.styled_confirms
           classes << "prism-filters-collapsible-disabled" unless config.collapsible_filters
           classes << "prism-sidebar-footer-disabled" unless config.sidebar_footer
+          classes << "prism-select2-enabled" if config.select2
           classes
         end
       end

data/lib/active_admin/views/prism_sidebar.rb

@@ -42,9 +42,11 @@ module ActiveAdmin
         div class: "prism-sidebar-inner" do
           div(class: "prism-sidebar-brand") { site_title @namespace }
           render_language_switcher if ActiveAdminPrism.configuration.language_switcher
+          render_search_box if ActiveAdminPrism.configuration.menu_search
           div(class: "prism-sidebar-scroll") do
             div "Pages", class: "prism-nav-section-label"
             render_menu @menu, class: "prism-nav"
+            div("No matching menu items", class: "prism-nav-empty")
           end
           if @utility_menu.items.any?
             div(class: "prism-sidebar-utility") do
@@ -111,6 +113,30 @@ module ActiveAdmin
         end
       end
 
+      # A text input that filters the "Pages" nav below as the visitor
+      # types (see js-src/prism.js) — matching happens purely client-side,
+      # against every item's own label regardless of nesting level, so a
+      # long menu with several submenus doesn't force a scroll to find one
+      # item. The actual show/hide + submenu auto-expand logic lives in JS
+      # because the whole menu is already rendered up front here; there's
+      # nothing server-side left to decide once the markup exists.
+      def render_search_box
+        div(class: "prism-sidebar-search") do
+          text_node ActiveAdminPrism::Icons.svg(:search, css_class: "prism-nav-icon prism-search-icon").html_safe
+          input(
+            type: "search",
+            class: "prism-nav-search-input",
+            placeholder: "Search menu",
+            autocomplete: "off",
+            "aria-label": "Search menu",
+            data: { "prism-nav-search": true }
+          )
+          span(class: "prism-nav-search-clear", data: { "prism-nav-search-clear": true }, "aria-label": "Clear search") do
+            text_node ActiveAdminPrism::Icons.svg(:x, css_class: "prism-nav-icon").html_safe
+          end
+        end
+      end
+
       # Each language entry's own :url (String/Proc/Symbol — same
       # nil/String/Proc/Symbol convention as config.login_logo etc.,
       # evaluated the same way item.url is above) wins when given, e.g. to

data/lib/active_admin_prism/configuration.rb

@@ -136,6 +136,31 @@ module ActiveAdminPrism
     # as it would be if you'd wired up the utility_navigation menu by hand.
     attr_accessor :languages
 
+    # Whether a search box renders at the top of the sidebar's "Pages" nav,
+    # letting a visitor filter menu items by label without scrolling —
+    # matching against every item regardless of nesting (a top-level item,
+    # or one buried in a submenu). A submenu item that matches keeps its
+    # parent visible (and expanded) even though the parent's own label
+    # doesn't match; a parent that matches shows all of its children. See
+    # lib/active_admin/views/prism_sidebar.rb#render_search_box for the
+    # markup and js-src/prism.js for the filtering itself (pure client-side
+    # DOM filtering — no server round trip, no change to how menu do |m|
+    # ... end is authored in app/admin/*.rb). false renders no search box at
+    # all.
+    attr_accessor :menu_search
+
+    # Whether every plain <select> ActiveAdmin renders (filters, form
+    # inputs, association pickers — anything, no per-field opt-in needed)
+    # is automatically enhanced into a searchable Select2 widget. false
+    # (the default) leaves every select exactly as ActiveAdmin renders it;
+    # you can still opt individual fields into Select2 yourself either way
+    # (see INTEGRATION.md's Select2 section) — this flag only controls the
+    # blanket, no-setup-needed behavior. Select2 itself (JS + its own base
+    # CSS) ships vendored inside this gem's assets either way — turning
+    # this on requires no extra gem/npm dependency or JS of your own;
+    # see js-src/prism.js and vendor/select2/.
+    attr_accessor :select2
+
     def initialize
       @sidebar = true
       @colorize_action_icons = true
@@ -156,6 +181,8 @@ module ActiveAdminPrism
         { label: "Español", locale: :es },
         { label: "Français", locale: :fr }
       ]
+      @menu_search = true
+      @select2 = false
     end
   end
 

data/lib/active_admin_prism/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ActiveAdminPrism
-  VERSION = "0.1.0"
+  VERSION = "0.1.2"
 end

data/scss-src/_forms.scss

@@ -162,12 +162,28 @@ form {
     }
   }
 
+  // ActiveAdmin's own CSS lays these out via `float: left` on each `li`
+  // (mixins/_buttons.scss's basic-button + _forms.scss's `fieldset.buttons
+  // li, fieldset.actions li { float: left; }`) — fragile in practice: it
+  // only takes one host app's own CSS reset (or a form with an unusually
+  // long submit label, or a differently-structured actions bar) for that
+  // float to be lost, at which point every `li` (a block-level list item
+  // by default) stacks vertically instead of sitting in a row. Flexbox
+  // sidesteps this rather than trying to out-specificity AA's float rule:
+  // per spec, `float` has no effect on a flex item at all, so this simply
+  // wins outright regardless of load order/specificity, and doesn't
+  // depend on every button happening to fit on one line the way floats do.
   .buttons,
   .actions {
-    input[type="submit"],
-    input[type="button"],
-    button {
-      margin-right: 10px;
+    > ol {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 10px;
+    }
+
+    li {
+      padding: 0;
     }
   }
 }

data/scss-src/_panels.scss

@@ -156,6 +156,15 @@ body:has(.prism-collapsible-panel):not(.prism-filters-open) {
   }
 
   &.open {
+    // Both this element and .panel_contents inherit overflow:hidden from
+    // the collapsed state above (needed there to clip the height-0
+    // content and, on .panel itself, to keep the base .panel rule's
+    // rounded-corner clipping) — reset to visible once open, otherwise a
+    // filter using a Select2 dropdown (e.g. a belongs_to filter's
+    // .select_and_search field) gets its open dropdown list clipped/
+    // garbled against this panel's own bounds, since Select2 renders its
+    // dropdown as a sibling near the input rather than inside it.
+    overflow: visible;
     background: $prism-bg-card;
     border-color: $prism-border-color;
     box-shadow: $prism-shadow-card;
@@ -186,6 +195,7 @@ body:has(.prism-collapsible-panel):not(.prism-filters-open) {
     }
 
     .panel_contents {
+      overflow: visible;
       max-height: 1200px;
       opacity: 1;
       padding-top: 20px;
@@ -200,6 +210,7 @@ body:has(.prism-collapsible-panel):not(.prism-filters-open) {
 // filters_sidebar.rb skips adding the icon/label markup entirely, so this
 // rule is mostly a no-op safety net rather than the primary mechanism).
 body.prism-filters-collapsible-disabled .prism-collapsible-panel {
+  overflow: visible;
   background: $prism-bg-card;
   border-color: $prism-border-color;
   box-shadow: $prism-shadow-card;

data/scss-src/_select2.scss

@@ -0,0 +1,264 @@
+// Reskins Select2 (https://select2.org) — the jQuery widget commonly wired
+// up for searchable belongs_to filters/inputs (host apps opt individual
+// selects in with `input_html: { class: "your-select2-class" }` plus their
+// own `.select2()` call; this gem does not ship the JS itself, only the
+// CSS, since Select2 is an opt-in add-on rather than something AA bundles).
+//
+// Select2 replaces the (now hidden) <select> with its own
+// `.select2-container` markup, so the plain `select { ... }` rules in
+// _forms.scss (and the `.sidebar_section select` / `.filter_form_field`
+// width rules) never reach it — every width/sizing/theming rule the
+// original select relied on needs a `.select2-container` equivalent here.
+// Without this file, a Select2-enhanced select renders at its unstyled
+// default size (far narrower than the surrounding fields) and its open
+// dropdown can visually clash with the theme entirely.
+.select2-container {
+  display: block;
+  font-family: $prism-font-family;
+
+  .select2-selection--single {
+    height: auto;
+    border: 1px solid $prism-border-color-strong;
+    border-radius: $prism-radius-sm;
+    background: $prism-bg-card;
+    padding: 9px 32px 9px 12px;
+    transition: border-color $prism-transition-fast, box-shadow $prism-transition-fast;
+
+    .select2-selection__rendered {
+      padding: 0;
+      color: $prism-text-heading;
+      line-height: 1.4;
+    }
+
+    .select2-selection__placeholder {
+      color: $prism-text-muted;
+    }
+
+    .select2-selection__arrow {
+      height: 100%;
+      top: 0;
+      right: 8px;
+
+      b {
+        border-color: $prism-text-muted transparent transparent transparent;
+      }
+    }
+  }
+
+  &--open .select2-selection--single {
+    border-color: $prism-color-primary;
+    box-shadow: 0 0 0 3px rgba($prism-color-primary, 0.15);
+
+    .select2-selection__arrow b {
+      border-color: transparent transparent $prism-text-muted transparent;
+    }
+  }
+
+  &--disabled .select2-selection--single {
+    background: $prism-bg-page;
+    color: $prism-text-muted;
+    cursor: not-allowed;
+  }
+
+  .select2-selection__clear {
+    position: static;
+    margin: 0 4px 0 0;
+    height: auto;
+    color: $prism-text-muted;
+    font-weight: 700;
+
+    &:hover {
+      color: $prism-color-danger;
+    }
+  }
+
+  // Multi-select ("tags") mode — e.g. `f.input :subjects, as: :select2,
+  // multiple: true` in place of `as: :check_boxes`. Select2's own default
+  // theme lays this out with absolute-positioned remove buttons and
+  // per-choice margins (see its own select2-selection--multiple rules) —
+  // overridden wholesale here with a flex-wrapped row of pill chips,
+  // consistent with the toggle/badge look elsewhere in this theme, rather
+  // than patched piecemeal on top of that positioning.
+  .select2-selection--multiple {
+    min-height: auto;
+    border: 1px solid $prism-border-color-strong;
+    border-radius: $prism-radius-sm;
+    background: $prism-bg-card;
+    padding: 6px 8px;
+    cursor: text;
+    transition: border-color $prism-transition-fast, box-shadow $prism-transition-fast;
+
+    .select2-selection__rendered {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 6px;
+      padding: 0;
+    }
+
+    .select2-selection__placeholder {
+      color: $prism-text-muted;
+    }
+
+    .select2-selection__choice {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      position: static;
+      max-width: 100%;
+      margin: 0;
+      padding: 3px 6px 3px 10px;
+      border: none;
+      border-radius: $prism-radius-pill;
+      background: $prism-color-primary-light;
+      overflow: hidden;
+    }
+
+    .select2-selection__choice__display {
+      padding: 0;
+      color: $prism-color-primary-dark;
+      font-weight: 600;
+      font-size: 0.85em;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .select2-selection__choice__remove {
+      position: static;
+      border: none;
+      border-radius: 50%;
+      background: transparent;
+      color: $prism-color-primary-dark;
+      font-weight: 700;
+      line-height: 1;
+      padding: 2px;
+
+      &:hover,
+      &:focus {
+        background: rgba($prism-color-primary-dark, 0.15);
+        color: $prism-color-primary-dark;
+        outline: none;
+      }
+    }
+
+    .select2-selection__clear {
+      position: static;
+      margin: 0 0 0 auto;
+      height: auto;
+      color: $prism-text-muted;
+      font-weight: 700;
+
+      &:hover {
+        color: $prism-color-danger;
+      }
+    }
+
+    .select2-search--inline .select2-search__field {
+      margin: 0;
+      padding: 3px 2px;
+      min-height: 0;
+      height: auto;
+      color: $prism-text-heading;
+      font-family: $prism-font-family;
+    }
+  }
+
+  &--focus .select2-selection--multiple,
+  &--open .select2-selection--multiple {
+    border-color: $prism-color-primary;
+    box-shadow: 0 0 0 3px rgba($prism-color-primary, 0.15);
+  }
+
+  &--disabled .select2-selection--multiple {
+    background: $prism-bg-page;
+
+    .select2-selection__choice {
+      opacity: 0.75;
+    }
+
+    .select2-selection__choice__remove {
+      display: none;
+    }
+  }
+}
+
+// Sidebar Filters panel and the standalone filter form both stack the
+// label above the field (no float) and size the underlying <select> to
+// fill it — same treatment for its Select2 replacement (see the
+// equivalent `select` rules in _forms.scss).
+.sidebar_section .select2-container,
+form.filter_form .select2-container {
+  width: 100% !important;
+  box-sizing: border-box;
+  max-width: 100%;
+}
+
+form.filter_form .filter_form_field.select_and_search .select2-container {
+  width: auto !important;
+  min-width: 0;
+  flex: 1 1 0;
+}
+
+// Main "fieldset.inputs" form: ActiveAdmin's own _forms.scss floats the
+// label left at 20% width and gives text inputs an explicit
+// width: calc(80% - padding) so they sit in the remaining space beside it
+// — a value this gem has no access to at compile time (it's compiled
+// standalone, without AA's own SCSS variables/mixins in its load path; see
+// bin/build-css). Rather than hardcode an equivalent, giving the container
+// its own block formatting context (overflow: hidden, no explicit width)
+// gets the same result for free: per the CSS spec, a BFC-establishing box
+// must not overlap a preceding float's margin box, so the browser sizes it
+// to exactly the remaining space automatically. Without this, the default
+// 100% width above would render full-width *underneath* the floated
+// label, visually painting over it — this is the fix for that, not just a
+// visual nicety.
+fieldset.inputs .select2-container {
+  overflow: hidden;
+}
+
+// The dropdown panel itself is appended to <body> (or wherever
+// `dropdownParent` points), not inside the field/panel — its own popover
+// styling, independent of whatever container it happens to render in.
+.select2-dropdown {
+  border: 1px solid $prism-border-color;
+  border-radius: $prism-radius-sm;
+  box-shadow: $prism-shadow-popover;
+  overflow: hidden;
+}
+
+.select2-search--dropdown {
+  padding: 8px;
+
+  .select2-search__field {
+    border: 1px solid $prism-border-color-strong;
+    border-radius: $prism-radius-sm;
+    padding: 7px 10px;
+    color: $prism-text-heading;
+
+    &:focus {
+      border-color: $prism-color-primary;
+      box-shadow: 0 0 0 3px rgba($prism-color-primary, 0.15);
+    }
+  }
+}
+
+.select2-results__option {
+  padding: 8px 12px;
+  color: $prism-text-body;
+
+  &--highlighted {
+    background: $prism-color-primary-light !important;
+    color: $prism-color-primary-dark !important;
+  }
+
+  &[aria-selected="true"] {
+    background: $prism-bg-page;
+    color: $prism-text-heading;
+    font-weight: 600;
+  }
+}
+
+.select2-results__message {
+  color: $prism-text-muted;
+  padding: 8px 12px;
+}