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}

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)

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

Parameters:
NameTypeDescription
eventEvent

Click event from tab button

Source

tabBtnTargetConnected(event)

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

Parameters:
NameTypeDescription
eventHTMLElement

Connected tab button element

Source

tabBtnTargetDisconnected(event)

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

Parameters:
NameTypeDescription
eventHTMLElement

Disconnected tab button element

Source