https://blandfordblenheim.ca/scripts/widgetTabs.js

1class TabsAutomatic {
2  constructor(groupNode) {
3    this.tablistNode = groupNode;
4
5    this.tabs = [];
6
7    this.firstTab = null;
8    this.lastTab = null;
9
10    this.tabs = Array.from(this.tablistNode.querySelectorAll('.Tabs .Tabs__TabList .Tabs__TabButton'));
11    this.tabpanels = [];
12
13    for (var i = 0; i < this.tabs.length; i += 1) {
14      var tab = this.tabs[i];
15      var tabpanel = document.getElementById(tab.getAttribute('aria-controls'));
16
17      tab.tabIndex = -1;
18      tab.setAttribute('aria-selected', 'false');
19      this.tabpanels.push(tabpanel);
20
21      tab.addEventListener('keydown', this.onKeydown.bind(this));
22      tab.addEventListener('click', this.onClick.bind(this));
23
24      if (!this.firstTab) {
25        this.firstTab = tab;
26      }
27      this.lastTab = tab;
28    }
29
30    this.setSelectedTab(this.firstTab, false);
31  }
32
33  setSelectedTab(currentTab, setFocus) {
34    if (typeof setFocus !== 'boolean') {
35      setFocus = true;
36    }
37    for (var i = 0; i < this.tabs.length; i += 1) {
38      var tab = this.tabs[i];
39      if (currentTab === tab) {
40        tab.setAttribute('aria-selected', 'true');
41        tab.removeAttribute('tabindex');
42        this.tabpanels[i].classList.remove('Tabs__TabPanel--hidden');
43        if (setFocus) {
44          tab.focus();
45        }
46      } else {
47        tab.setAttribute('aria-selected', 'false');
48        tab.tabIndex = -1;
49        this.tabpanels[i].classList.add('Tabs__TabPanel--hidden');
50      }
51    }
52  }
53
54  setSelectedToPreviousTab(currentTab) {
55    var index;
56
57    if (currentTab === this.firstTab) {
58      this.setSelectedTab(this.lastTab);
59    } else {
60      index = this.tabs.indexOf(currentTab);
61      this.setSelectedTab(this.tabs[index - 1]);
62    }
63  }
64
65  setSelectedToNextTab(currentTab) {
66    var index;
67
68    if (currentTab === this.lastTab) {
69      this.setSelectedTab(this.firstTab);
70    } else {
71      index = this.tabs.indexOf(currentTab);
72      this.setSelectedTab(this.tabs[index + 1]);
73    }
74  }
75
76  /* EVENT HANDLERS */
77
78  onKeydown(event) {
79    var tgt = event.currentTarget,
80      flag = false;
81
82    switch (event.key) {
83      case 'ArrowLeft':
84        this.setSelectedToPreviousTab(tgt);
85        flag = true;
86        break;
87
88      case 'ArrowRight':
89        this.setSelectedToNextTab(tgt);
90        flag = true;
91        break;
92
93      case 'Home':
94        this.setSelectedTab(this.firstTab);
95        flag = true;
96        break;
97
98      case 'End':
99        this.setSelectedTab(this.lastTab);
100        flag = true;
101        break;
102
103      default:
104        break;
105    }
106
107    if (flag) {
108      event.stopPropagation();
109      event.preventDefault();
110    }
111  }
112
113  onClick(event) {
114    this.setSelectedTab(event.currentTarget);
115  }
116}
117        
118// Initialize tablist
119
120window.addEventListener('load', function () {
121    var tablists = document.querySelectorAll('.Tabs .Tabs__TabList.Tabs__TabList--automatic');
122    console.log(tablists)
123    for (var i = 0; i < tablists.length; i++) {
124        new TabsAutomatic(tablists[i]);
125    }
126});