Contents

import { Controller } from '@hotwired/stimulus'

export default class extends Controller {
  static classes = ['hide', 'active', 'inactive']
  static values = { currentActive: String }

  initialize() {
    let url = new URL(document.location)
    this.currentActiveValue = url.searchParams.get('tabName') ? url.searchParams.get('tabName') : ''
  }

  connect() {
    if (this.currentActiveValue != '') {
      this.navigate()
    }
  }

  navigateEvent(event) {
    let url = new URL(document.location)
    this.currentActiveValue = event.currentTarget.dataset.index
    url.searchParams.set('tabName', event.currentTarget.dataset.index)
    window.history.pushState({}, '', url)
    this.navigate()
  }

  navigate() {
    let navBodies = document.querySelectorAll('.navBody')
    navBodies.forEach((el) => {
      if (!el.classList.contains(this.hideClass)) {
        el.classList.add(this.hideClass)
      }
    })

    let navs = document.querySelectorAll('.nav')
    navs.forEach((nav) => {
      if (nav.classList.contains(...this.activeClasses)) {
        nav.classList.remove(...this.activeClasses)
        nav.classList.add(...this.inactiveClasses)
      }
    })

    navs.forEach((nav) => {
      if (nav.dataset.index == this.currentActiveValue) {
        nav.classList.remove(...this.inactiveClasses)
        nav.classList.add(...this.activeClasses)
      }
    })

    document.getElementById(this.currentActiveValue).classList.remove(this.hideClass)
  }
}

Version data entries

4 entries across 4 versions & 1 rubygems

Version	Path
simplecov-tailwindcss-2.2.0	dist/scripts/controllers/navigation_controller.js
simplecov-tailwindcss-2.1.2	dist/scripts/controllers/navigation_controller.js
simplecov-tailwindcss-2.1.1	dist/scripts/controllers/navigation_controller.js
simplecov-tailwindcss-2.1.0	dist/scripts/controllers/navigation_controller.js