Sha256: ac1a06c4a32c480b1212ca22f894221e1a870a21fbd812a5db72a166451f7b9b

Contents?: true

Size: 1.06 KB

Versions: 24

Compression:

Stored size: 1.06 KB

Contents

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "button", "tab" ]
  static values  = { index: Number }

  connect() {
    this.#showCurrentTab()
  }

  select({ target }) {
    this.indexValue = this.buttonTargets.indexOf(target)
    this.#showCurrentTab()
  }

  prev() {
    if (this.indexValue > 0) {
      this.indexValue--
      this.#showCurrentTab()
      this.#focusCurrentButton()
    }
  }

  next() {
    if (this.indexValue < this.#lastIndex) {
      this.indexValue++
      this.#showCurrentTab()
      this.#focusCurrentButton()
    }
  }

  #showCurrentTab(shouldFocus) {
    this.buttonTargets.forEach((element, index) => {
      element.ariaSelected = index === this.indexValue
      element.tabIndex = index === this.indexValue ? 0 : -1
    })

    this.tabTargets.forEach((element, index) => {
      element.hidden = index !== this.indexValue
    })
  }

  #focusCurrentButton() {
    this.buttonTargets[this.indexValue].focus()
  }

  get #lastIndex() {
    return this.tabTargets.length -1
  }
}

Version data entries

24 entries across 24 versions & 1 rubygems

Version Path
css-zero-0.0.73 lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js
css-zero-0.0.72 lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js
css-zero-0.0.71 lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js
css-zero-0.0.70 lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js
css-zero-0.0.69 lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js
css-zero-0.0.68 lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js
css-zero-0.0.67 lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js
css-zero-0.0.66 lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js
css-zero-0.0.65 lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js
css-zero-0.0.64 lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js
css-zero-0.0.63 lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js
css-zero-0.0.62 lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js
css-zero-0.0.61 lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js
css-zero-0.0.60 lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js
css-zero-0.0.59 lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js
css-zero-0.0.58 lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js
css-zero-0.0.57 lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js
css-zero-0.0.56 lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js
css-zero-0.0.55 lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js
css-zero-0.0.54 lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js