DetailTabsController

DetailTabsController

DetailTabs Stimulus Controller

Manages tabbed interfaces with URL state management and browser history integration. Automatically handles tab activation, URL updates, and Turbo frame reloading for dynamic content management.

Features:

  • URL-based tab selection and state persistence
  • Browser history integration with pushState
  • Automatic first tab activation
  • Turbo frame reloading on tab change
  • Configurable URL update behavior
  • Scroll management for better UX

Values:

  • updateUrl: Boolean (default: true) - Whether to update URL on tab change

Targets:

  • tabBtn: Tab button elements for navigation
  • tabContent: Tab content panels (optional)

Usage:

... ...

Constructor

new DetailTabsController()

Source:

Methods

getFirstTabByOrder() → {HTMLElement|null}

Description:

  • Get the first tab button based on CSS order attribute Respects the data-tab-order attribute for mixed plugin/template tabs

Source:
Returns:

First tab button by order, or null if none found

Type
HTMLElement | null

tabBtnClicked(event)

Description:

  • Handle tab button clicks Updates URL history and triggers frame reloading for dynamic content

Source:
Parameters:
Name Type Description
event Event

Click event from tab button

tabBtnTargetConnected(event)

Description:

  • Handle tab button connection to DOM Sets up tab activation based on URL parameters or defaults to first tab

Source:
Parameters:
Name Type Description
event HTMLElement

Connected tab button element

tabBtnTargetDisconnected(event)

Description:

  • Handle tab button disconnection from DOM Cleans up event listeners to prevent memory leaks

Source:
Parameters:
Name Type Description
event HTMLElement

Disconnected tab button element