https://cnhc.org.uk/assets/controllers/admin_tabs_controller-96b49…8218a57358b6270285a7cedca922a37ae9cb2416.js

1import { Controller } from "@hotwired/stimulus"
2
3// Connects to data-controller="admin-tabs"
4export default class extends Controller {
5  static targets = ["tab"]
6
7  connect() {
8    // This is to make the tabs display based on the url for pages using tabs
9    let urls = this.urlTarget();
10    if (urls.length > 0){
11      let url = urls[0];
12      this.tabTargets.forEach(button => {
13        if(button.attributes.getNamedItem('href').value.split("#")[1] == url){
14          let toUpdate = this.element.querySelector(`#${url}`);
15          toUpdate.classList.add("active")
16          toUpdate.classList.remove("fade");
17        }
18      })
19    } else {
20      //if there is no # in the url, show the first tab
21      let toUpdate = this.element.querySelector(`.tab-pane`);
22      toUpdate.classList.add("active")
23      toUpdate.classList.remove("fade");
24    }
25  }
26
27  openTab(e){
28    let newUrl;
29    let url = location.href.replace(/\/$/, "");
30    const hash = e.target.getAttribute('href');
31    if (hash == "#home") {
32      newUrl = url.split("#")[0];
33    } else {
34      newUrl = url.split("#")[0] + hash;
35    }
36    history.replaceState(null, null, newUrl);
37    this.element.querySelectorAll(`.tab-pane`).forEach(tab => {
38      tab.classList.add("fade");
39      tab.classList.remove("active");
40    })
41    this.element.querySelector(`${hash}`).classList.add("active")
42    this.element.querySelector(`${hash}`).classList.remove("fade")
43  }
44
45  urlTarget() {
46    let url = location.href.replace(/\/$/, "");
47    if (location.hash) {
48      const hash = url.split("#");
49      return [hash[1]];
50    }else {
51      return [];
52    }
53  }
54};