Tabs : Tailwind Stimulus Components : Help Extending : Callbacks on selected/show? MutationObserver?

Donal O Duibhir
Hi, I am hackily using MutationObserver to search for data attributes of panels and then whether or not they contain a "hidden" class or not -> to get/show dynamic content (in tab panels) when they are clicked/viewed. Am not 100% on how to extend the Tabs Stimulus controller.... (in https://github.com/excid3/tailwindcss-stimulus-components it mentions https://github.com/excid3/tailwindcss-stimulus-components#extending-components )? 

In https://github.com/excid3/tailwindcss-stimulus-components/blob/master/src/tabs.js it looks like change and showTab could perhaps be overridden? Chris Oliver ?

How would one:
a) do this, would the below be correct?
a) limit behavior to a specific model/controller in Rails?
b) pass an instance of a model ID to the Tabs Stimulus controller (seems like a data attribute? https://stackoverflow.com/a/63984848 )?

Existing:
  showTab() {
    this.tabTargets.forEach((tab, index) => {
      const panel = this.panelTargets[index]

      if (index === this.index) {
        panel.classList.remove('hidden')
        tab.classList.remove(...this.inactiveTabClasses)
        tab.classList.add(...this.activeTabClasses)

        // Update URL with the tab ID if it has one
        // This will be automatically selected on page load
        if (tab.id) {
          location.hash = tab.id
        }
      } else {
        panel.classList.add('hidden')
        tab.classList.remove(...this.activeTabClasses)
        tab.classList.add(...this.inactiveTabClasses)
      }
    })
  }

Above from: https://github.com/excid3/tailwindcss-stimulus-components/blob/master/src/tabs.js am guessing in the positive sense of if (index === this.index) { I could add extra stuff? } but am very unsure how to add it. I would need to manually extend the Tabs controller by adding a tabs_controller.js and I would need to modify "app/javascript/controllers/index.js" by removing "Tabs" from being imported and comment out the application.register('tabs', Tabs)

// Load all the controllers within this directory and all subdirectories.
// Controller files must be named *_controller.js.

import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"

const application = Application.start()
const context = require.context("controllers", true, /_controller\.js$/)
application.load(definitionsFromContext(context))

import { Dropdown, Modal, **Tabs**, Popover, Toggle, Slideover } from "tailwindcss-stimulus-components"
application.register('dropdown', Dropdown)
application.register('modal', Modal)
** application.register('tabs', Tabs) **
application.register('popover', Popover)
application.register('toggle', Toggle)
application.register('slideover', Slideover)

then create a "tabs_controller.js" with the below?

import { Tabs } from "tailwindcss-stimulus-components"

export default class extends Tabs {

  showTab() {
    super.showTab();
    this.tabTargets.forEach((tab, index) => {
      if (index === this.index) {
        // Do extra Stuff? 
      }
    }
  }
}
Notifications
You’re not receiving notifications from this thread.
Subscribe
© 2021 GoRails, LLC