sdr_view_components 0.12.1 → 0.13.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 27d09062e51eb9ab9697ca9caa7d192eb21556ed459a772dc91d87c36dca16f7
-  data.tar.gz: 82116285f4e62913f9e9ae85e95e0272a3b1fdd928142c511a9de32721bacd90
+  metadata.gz: a345126e4b1ae936afb830c142944b842691edbf460fd2092136905f4035a1b2
+  data.tar.gz: 4dcce16061ff42a6d46fc74fa91b432b60298fb96aa22860ed752d43c09aefa1
 SHA512:
-  metadata.gz: 0ae59ed8026d5b6fade7ae12f2ea8cd22e807dd0a849c6cf776358b3f6c6567ef93ee8fa12af7f8d8f387fdbac3a1b848dce0583fb72f1e6f3629cbfce58662e
-  data.tar.gz: 04e8b8442faea9693c4fb34e7496477c1a694739852438ee85fe24cbc5f5120cc492cdfdedb7b23076cdd82f6cd0d6549ca6137f78c13b4318a31ff8569f3174
+  metadata.gz: d1e085e557f9a045c2915b8f944db1ebac286fd6245e6e22b80202bf1ee87cbe1efc2e74f0c2f9650959c9ea40a35c63049d6085a67e9a9485fc623b1bad90e3
+  data.tar.gz: 1ebaa46555633944bbe4a301193fde11929668392dad3457559991ca0d279774f0a0e56b0ce3dda08f34690db49d6cd13054e8a057fc8e3796a1fbb40725382b

data/README.md

@@ -29,6 +29,11 @@ with the most recent date tagged release to your `application.html.erb` layout f
 
 Some components require JavaScript. The gem ships Stimulus controllers under `app/javascript/sdr_view_components/` and registers that path with the asset pipeline automatically.
 
+The controllers that use Bootstrap's JavaScript import it as an ES module (`import * as bootstrap from "bootstrap"`), so `bootstrap` must be pinned to an ES module build of Bootstrap. The UMD `bootstrap.bundle.min.js` has no ES module exports and won't work. For example, in `config/importmap.rb`:
+```ruby
+pin "bootstrap", to: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/+esm"
+```
+
 Here is an example of how to add a Stimulus controller:
 
 The disappearing toast uses `sdr_view_components/toast_controller` to remove itself from the DOM after its fade-out animation completes.
@@ -78,6 +83,19 @@ import TabSelectController from "sdr_view_components/tab_select_controller"
 application.register("sdr-tab-select", TabSelectController)
 ```
 
+Its `overflow_menu` option similarly ships `sdr_view_components/tab_overflow_controller`, registered as `sdr-tab-overflow`:
+
+```ruby
+pin "sdr_view_components/tab_overflow_controller", to: "sdr_view_components/tab_overflow_controller.js"
+```
+
+```javascript
+import { application } from "controllers/application"
+import TabOverflowController from "sdr_view_components/tab_overflow_controller"
+
+application.register("sdr-tab-overflow", TabOverflowController)
+```
+
 ## Usage
 
 ### Form components
@@ -185,6 +203,8 @@ See the Lookbook preview for `SdrViewComponents::TabForm::TabListComponent` for
 <% end %>
 ```
 
+`TabListComponent` also accepts `overflow_menu: true`. When given, tabs that don't fit on a single row are moved into a trailing "More" dropdown tab instead of wrapping, and moved back out as space allows. It can be combined with `collapse_below:`. This requires the `sdr-tab-overflow` controller -- see [JavaScript](#javascript) above.
+
 ```
 <% render SdrViewComponent::....>
 ```

data/app/components/sdr_view_components/elements/tabs/tab_list_component.html.erb

@@ -1,17 +1,25 @@
+<% tab_list = capture do %>
+  <%= tag.ul class: classes, role: 'tablist', data: tab_list_data do %>
+    <% tabs.each do |tab| %><%= tab %><% end %>
+    <% if overflow_menu? %>
+      <li class="nav-item dropdown d-none" role="presentation" data-sdr-tab-overflow-target="more">
+        <button class="nav-link dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">More</button>
+        <ul class="dropdown-menu dropdown-menu-end" data-sdr-tab-overflow-target="menu"></ul>
+      </li>
+    <% end %>
+  <% end %>
+<% end %>
+
 <% if collapse_below? %>
   <div data-controller="sdr-tab-select" data-action="shown.bs.tab->sdr-tab-select#sync">
-    <%= tag.select class: select_classes, 'aria-label': 'Select a tab', data: { sdr_tab_select_target: 'select', action: 'sdr-tab-select#change' } do %>
+    <%= tag.select class: select_classes, 'aria-label': 'Select a tab', data: { sdr_tab_select_target: 'select', action: 'sdr-tab-select#change turbo:before-morph-element->sdr-tab-select#preventMorph' } do %>
       <% tabs.each do |tab| %><%= tag.option(tab.label, value: tab.id, selected: tab.active?) %><% end %>
     <% end %>
 
-    <%= tag.ul class: classes, role: 'tablist' do %>
-      <% tabs.each do |tab| %><%= tab %><% end %>
-    <% end %>
+    <%= tab_list %>
   </div>
 <% else %>
-  <%= tag.ul class: classes, role: 'tablist' do %>
-    <% tabs.each do |tab| %><%= tab %><% end %>
-  <% end %>
+  <%= tab_list %>
 <% end %>
 
 <%= header %>

data/app/components/sdr_view_components/elements/tabs/tab_list_component.rb

@@ -19,11 +19,14 @@ module SdrViewComponents
         #   fully functional (the `<select>` drives the same Bootstrap tab JavaScript) -- this
         #   only changes how they're presented at narrow viewports. Leave nil (the default) to
         #   always render the tabs.
-        def initialize(classes: [], content_classes: [], variant: :default, collapse_below: nil)
+        # @param overflow_menu [Boolean] if true, tabs that don't fit on a single row are moved into a
+        #   trailing "More" dropdown tab (by the `sdr-tab-overflow` controller).
+        def initialize(classes: [], content_classes: [], variant: :default, collapse_below: nil, overflow_menu: false)
           @classes = classes
           @content_classes = content_classes
           @variant = variant
           @collapse_below = collapse_below
+          @overflow_menu = overflow_menu
 
           raise ArgumentError, "Invalid variant: #{variant}" unless %i[underline default].include?(variant)
           if collapse_below && BREAKPOINTS.exclude?(collapse_below)
@@ -37,6 +40,17 @@ module SdrViewComponents
           @collapse_below.present?
         end
 
+        def overflow_menu?
+          @overflow_menu
+        end
+
+        def tab_list_data
+          return {} unless overflow_menu?
+
+          { controller: 'sdr-tab-overflow', action: 'shown.bs.tab->sdr-tab-overflow#syncMoreActive ' \
+                                                    'turbo:before-morph-element->sdr-tab-overflow#preventMorph' }
+        end
+
         def classes
           merge_classes('nav', @classes, variant_classes, collapse_below? ? ['d-none', "d-#{@collapse_below}-flex"] : nil)
         end

data/app/javascript/sdr_view_components/lookbook.js

@@ -0,0 +1,20 @@
+// Registers the gem's Stimulus controllers for Lookbook previews (see layouts/lookbook.html.erb).
+import * as bootstrap from 'bootstrap'
+import { Application } from '@hotwired/stimulus'
+import TabErrorController from RAILS_ASSET_URL('./tab_error_controller.js')
+import TabLinkController from RAILS_ASSET_URL('./tab_link_controller.js')
+import TabNavController from RAILS_ASSET_URL('./tab_nav_controller.js')
+import TabOverflowController from RAILS_ASSET_URL('./tab_overflow_controller.js')
+import TabSelectController from RAILS_ASSET_URL('./tab_select_controller.js')
+import ToastController from RAILS_ASSET_URL('./toast_controller.js')
+
+// Previews' inline scripts use the global (e.g., to initialize tooltips).
+window.bootstrap = bootstrap
+
+const application = Application.start()
+application.register('sdr-tab-error', TabErrorController)
+application.register('sdr-tab-link', TabLinkController)
+application.register('sdr-tab-nav', TabNavController)
+application.register('sdr-tab-overflow', TabOverflowController)
+application.register('sdr-tab-select', TabSelectController)
+application.register('sdr-toast', ToastController)

data/app/javascript/sdr_view_components/tab_overflow_controller.js

@@ -0,0 +1,76 @@
+import { Controller } from '@hotwired/stimulus'
+
+// Moves tabs that don't fit on a single row into a trailing "More" dropdown tab (see
+// TabListComponent's `overflow_menu` option). The tab list is laid out again whenever
+// its width changes.
+//
+// The tab list is excluded from Turbo morphs (e.g., page refreshes): morphing would move the
+// tabs back to their server-rendered positions, close an open "More" menu, and replace the
+// menu element out from under Bootstrap's Dropdown instance.
+export default class extends Controller {
+  static targets = ['more', 'menu']
+
+  connect () {
+    this.resizeObserver = new window.ResizeObserver(() => {
+      if (this.element.offsetWidth === this.lastWidth) return
+
+      this.lastWidth = this.element.offsetWidth
+      this.layout()
+    })
+    this.resizeObserver.observe(this.element)
+    document.fonts?.ready.then(this.layout)
+  }
+
+  disconnect () {
+    this.resizeObserver.disconnect()
+  }
+
+  layout = () => {
+    this.restore()
+    const items = this.tabItems()
+    // Hidden (e.g., collapsed into a select) or everything fits on one row.
+    if (this.element.offsetWidth === 0 || items.length === 0) return
+    if (!this.isWrapped(items.at(-1), items[0])) return
+
+    this.moreTarget.classList.remove('d-none')
+    while (items.length > 1 && this.isWrapped(this.moreTarget, items[0])) {
+      this.overflow(items.pop())
+    }
+    this.syncMoreActive()
+  }
+
+  syncMoreActive = () => {
+    const toggle = this.moreTarget.querySelector('.dropdown-toggle')
+    toggle.classList.toggle('active', this.menuTarget.querySelector('.active') !== null)
+  }
+
+  preventMorph (event) {
+    if (event.target === this.element) event.preventDefault()
+  }
+
+  // Moves all tabs back into the tab list (in their original order) and hides "More".
+  restore () {
+    this.tabItems().forEach((item) => {
+      if (item.parentElement === this.element) return
+
+      this.element.insertBefore(item, this.moreTarget)
+      item.querySelector('[role="tab"]').classList.replace('dropdown-item', 'nav-link')
+    })
+    this.moreTarget.classList.add('d-none')
+    this.syncMoreActive()
+  }
+
+  overflow (item) {
+    this.menuTarget.prepend(item)
+    item.querySelector('[role="tab"]').classList.replace('nav-link', 'dropdown-item')
+  }
+
+  // The tab <li>s, in document order (tab list first, then the "More" menu).
+  tabItems () {
+    return Array.from(this.element.querySelectorAll('[role="tab"]'), (tab) => tab.closest('li'))
+  }
+
+  isWrapped (item, firstItem) {
+    return item.offsetTop > firstItem.offsetTop
+  }
+}

data/app/javascript/sdr_view_components/tab_select_controller.js

@@ -1,22 +1,25 @@
 import { Controller } from '@hotwired/stimulus'
+import * as bootstrap from 'bootstrap'
 
 // Drives a <select> that stands in for a tab list on narrow viewports (see
 // TabListComponent's `collapse_below` option). Selecting an option shows the
 // corresponding tab; activating a tab some other way (e.g. clicking the tab
 // list above the collapse breakpoint) keeps the select's value in sync.
 //
-// Uses window.bootstrap rather than `import * as bootstrap from 'bootstrap'`:
-// the UMD bootstrap.bundle.min.js has no ES module exports, so an ESM import
-// of it resolves to an empty namespace object even though the script itself
-// still assigns the real API to window.bootstrap as a side effect.
+// The select is excluded from Turbo morphs (e.g., page refreshes), which would otherwise reset
+// its value to the server-rendered selected option regardless of which tab is active.
 export default class extends Controller {
   static targets = ['select']
 
   change (event) {
-    window.bootstrap.Tab.getOrCreateInstance(document.getElementById(event.target.value)).show()
+    bootstrap.Tab.getOrCreateInstance(document.getElementById(event.target.value)).show()
   }
 
   sync (event) {
     this.selectTarget.value = event.target.id
   }
+
+  preventMorph (event) {
+    if (event.target === this.selectTarget) event.preventDefault()
+  }
 }

data/app/views/layouts/lookbook.html.erb

@@ -34,12 +34,29 @@
 
     <%= stylesheet_link_tag 'sdr_view_components', 'data-turbo-track': 'reload' %>
     <%= tag.link rel: 'stylesheet', href: "#{SdrViewComponents.configuration.component_library_url}/styles/sul.css" %>
+    <%# Bootstrap is loaded as a module (rather than the UMD bundle) so the gem's Stimulus controllers can import it
+        without a second copy registering Bootstrap's data-API handlers twice. The import map must precede any module
+        script or preload, so it's in the head and the module isn't preloaded via a Link header. %>
+    <%= tag.script type: 'importmap', nonce: content_security_policy_nonce do %>
+      {
+        "imports": {
+          "@hotwired/stimulus": "https://cdn.jsdelivr.net/npm/@hotwired/stimulus@3.2.2/dist/stimulus.js",
+          "bootstrap": "https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.esm.min.js",
+          "@popperjs/core": "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/esm/index.js"
+        },
+        "integrity": {
+          "https://cdn.jsdelivr.net/npm/@hotwired/stimulus@3.2.2/dist/stimulus.js": "sha384-Z9ISq680E84zQ7uFT7Pw8g/TlnoyCUECFycQz5aZs9IlrNFR56FhXoVi5U7bVi+l",
+          "https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.esm.min.js": "sha384-xBDFeCIxnhwUVfUb/XJFZZE66HuOkWrQ1ob02jFh5jhEJR9Kxx1KBEv3WvMColVg",
+          "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/esm/index.js": "sha384-oIbyZ0FNSTCT8v7EkK3fFXaiJMESE5k4eUKo9fAynJEhjl0JzMYoJa5pTPQUP4+g"
+        }
+      }
+    <% end %>
+    <%= javascript_include_tag 'sdr_view_components/lookbook', type: 'module', nonce: true, preload_links_header: false %>
   </head>
 
   <body>
     <div class="container-fluid py-4">
       <%= yield %>
     </div>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
   </body>
 </html>

data/lib/sdr_view_components/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module SdrViewComponents
-  VERSION = '0.12.1'
+  VERSION = '0.13.0'
 end

data/spec/components/previews/sdr_view_components/elements/tabs/tab_list_component_preview/collapsible.html.erb

@@ -1,5 +1,4 @@
 <%# Resize the preview frame below the sm breakpoint to see the tabs collapse into a select. %>
-<%# The sdr-tab-select controller isn't registered in this dummy app, so the select won't switch panes here -- see the consuming app for a working example. %>
 <%= render SdrViewComponents::Elements::Tabs::TabListComponent.new(variant: :underline, collapse_below: :sm) do |tab_list| %>
   <% tab_list.with_tab(label: 'Details', id: 'details-tab', pane_id: 'details-pane', active: true) %>
   <% tab_list.with_tab(label: 'History', id: 'history-tab', pane_id: 'history-pane') %>

data/spec/components/previews/sdr_view_components/elements/tabs/tab_list_component_preview/overflow_menu.html.erb

@@ -0,0 +1,10 @@
+<%# Narrow the preview frame to see tabs that don't fit move into a "More" dropdown. %>
+<% labels = %w[Overview Description Files History Events Metadata Workflows Versions Releases Tags] %>
+<%= render SdrViewComponents::Elements::Tabs::TabListComponent.new(variant: :underline, overflow_menu: true) do |tab_list| %>
+  <% labels.each_with_index do |label, index| %>
+    <% tab_list.with_tab(label:, id: "#{label.downcase}-tab", pane_id: "#{label.downcase}-pane", active: index.zero?) %>
+    <% tab_list.with_pane(id: "#{label.downcase}-pane", tab_id: "#{label.downcase}-tab", active: index.zero?) do %>
+      <p><%= label %> pane content.</p>
+    <% end %>
+  <% end %>
+<% end %>

data/spec/components/previews/sdr_view_components/elements/tabs/tab_list_component_preview.rb

@@ -12,6 +12,8 @@ module SdrViewComponents
         def with_header; end
 
         def collapsible; end
+
+        def overflow_menu; end
       end
     end
   end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: sdr_view_components
 version: !ruby/object:Gem::Version
-  version: 0.12.1
+  version: 0.13.0
 platform: ruby
 authors:
 - Aaron Collier
@@ -175,9 +175,11 @@ files:
 - app/components/sdr_view_components/tables/row_component.html.erb
 - app/components/sdr_view_components/tables/row_component.rb
 - app/components/sdr_view_components/tables/table_component.rb
+- app/javascript/sdr_view_components/lookbook.js
 - app/javascript/sdr_view_components/tab_error_controller.js
 - app/javascript/sdr_view_components/tab_link_controller.js
 - app/javascript/sdr_view_components/tab_nav_controller.js
+- app/javascript/sdr_view_components/tab_overflow_controller.js
 - app/javascript/sdr_view_components/tab_select_controller.js
 - app/javascript/sdr_view_components/toast_controller.js
 - app/views/layouts/lookbook.html.erb
@@ -214,6 +216,7 @@ files:
 - spec/components/previews/sdr_view_components/elements/tabs/tab_list_component_preview.rb
 - spec/components/previews/sdr_view_components/elements/tabs/tab_list_component_preview/collapsible.html.erb
 - spec/components/previews/sdr_view_components/elements/tabs/tab_list_component_preview/default_variant.html.erb
+- spec/components/previews/sdr_view_components/elements/tabs/tab_list_component_preview/overflow_menu.html.erb
 - spec/components/previews/sdr_view_components/elements/tabs/tab_list_component_preview/underline_variant.html.erb
 - spec/components/previews/sdr_view_components/elements/tabs/tab_list_component_preview/with_header.html.erb
 - spec/components/previews/sdr_view_components/elements/toast_component_preview.rb