We've moved discussions to Discord

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? 
      }
    }
  }
}
Kips Davenport
Hi Donal, 

Did you ever get this working?

I basically need to extend Modal close but i can't quite work out where to import the new controller file or how to override the original action.

Any pointers from you or Chris would be appreciated.

Thanks
Donal O Duibhir
Sorry,  Kips Davenport  am still using my hacky approach with vanilla javascript due to my lack of familiarity with stimulus :(
Kips Davenport
Chris Oliver Can you add anything to this. It would be great if you could add a Jumpstart specific version of this outlining the steps to override a stimulus controller action. 

Thanks

Kips


Chris Oliver
Just define your Stimulus controller in the controllers folder and extend the new class from the existing one. Basically the same as inheriting from another class in Ruby.

Or just copy the code into your own controller and make as many modifications as you want. 👍
Notifications
You’re not receiving notifications from this thread.