https://mybuh.kz/media/script/tabs.js

1"use strict";
2
3class TabsManual {
4  constructor(groupNode) {
5    this.tablistNode = groupNode;
6    this.tabs = [];
7    this.firstTab = null;
8    this.lastTab = null;
9    this.initialSelectedTab = null;
10    this.tabs = Array.from(this.tablistNode.querySelectorAll("[role=tab]"));
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      tab.tabIndex = -1;
17
18      if (tab.getAttribute("aria-selected") === "true") {
19        this.initialSelectedTab = tab;
20      }
21
22      tab.setAttribute("aria-selected", "false");
23      this.tabpanels.push(tabpanel);
24      tab.addEventListener("keydown", this.onKeydown.bind(this));
25      tab.addEventListener("click", this.onClick.bind(this));
26
27      if (!this.firstTab) {
28        this.firstTab = tab;
29      }
30
31      this.lastTab = tab;
32    }
33
34    this.setSelectedTab(this.initialSelectedTab);
35  }
36
37  setSelectedTab(currentTab) {
38    const scrollLists = document.querySelectorAll(".popular-news__list.scroll");
39
40    for (var i = 0; i < this.tabs.length; i += 1) {
41      var tab = this.tabs[i];
42
43      if (currentTab === tab) {
44        tab.setAttribute("aria-selected", "true");
45        tab.removeAttribute("tabindex");
46        this.tabpanels[i].classList.remove("is-hidden"); // refresh scrolllist
47
48        scrollLists && scrollLists.forEach((list) => (list.scrollTop = 0));
49      } else {
50        tab.setAttribute("aria-selected", "false");
51        tab.tabIndex = -1;
52        this.tabpanels[i].classList.add("is-hidden");
53      }
54    }
55  }
56
57  moveFocusToTab(currentTab) {
58    currentTab.focus();
59  }
60
61  moveFocusToPreviousTab(currentTab) {
62    var index;
63
64    if (currentTab === this.firstTab) {
65      this.moveFocusToTab(this.lastTab);
66    } else {
67      index = this.tabs.indexOf(currentTab);
68      this.moveFocusToTab(this.tabs[index - 1]);
69    }
70  }
71
72  moveFocusToNextTab(currentTab) {
73    var index;
74
75    if (currentTab === this.lastTab) {
76      this.moveFocusToTab(this.firstTab);
77    } else {
78      index = this.tabs.indexOf(currentTab);
79      this.moveFocusToTab(this.tabs[index + 1]);
80    }
81  }
82  /* EVENT HANDLERS */
83
84  onKeydown(event) {
85    var tgt = event.currentTarget,
86      flag = false;
87
88    switch (event.key) {
89      case "ArrowLeft":
90        this.moveFocusToPreviousTab(tgt);
91        flag = true;
92        break;
93
94      case "ArrowRight":
95        this.moveFocusToNextTab(tgt);
96        flag = true;
97        break;
98
99      case "Home":
100        this.moveFocusToTab(this.firstTab);
101        flag = true;
102        break;
103
104      case "End":
105        this.moveFocusToTab(this.lastTab);
106        flag = true;
107        break;
108
109      default:
110        break;
111    }
112
113    if (flag) {
114      event.stopPropagation();
115      event.preventDefault();
116    }
117  } // Since this example uses buttons for the tabs, the click onr also is activated
118  // with the space and enter keys
119
120  onClick(event) {
121    this.setSelectedTab(event.currentTarget);
122  }
123} // Initialize tablist
124
125var tablists = document.querySelectorAll("[role=tablist]");
126
127for (var i = 0; i < tablists.length; i++) {
128  new TabsManual(tablists[i]);
129}
130// window.addEventListener('load', );