https://www.kyoto-station-building.co.jp/app/themes/kyoto-station-building/common/js/tab.js?ver=20260924-2115

1const TAB_MANAGER = {
2  tabs: document.querySelectorAll('[role="tab"]'),
3  tabList: document.querySelectorAll('[role="tablist"]')
4}
5
6TAB_MANAGER.changetabs = (el, cel, e) => {
7  const target = el;
8  const parent = target.parentNode;
9  const grandparent = parent.closest('.tabs');
10
11  parent
12    .querySelectorAll('[aria-selected="true"]')
13    .forEach((t) => t.setAttribute("aria-selected", false));
14
15  target.setAttribute("aria-selected", true);
16
17  for (let e of grandparent.children) {
18    if (e.hasAttribute('aria-labelledby')) {
19      e.setAttribute("hidden", true);
20    }
21  }
22
23  grandparent.parentNode
24    .querySelector(`#${target.getAttribute("aria-controls")}`)
25    .removeAttribute("hidden");
26}
27
28TAB_MANAGER.on = (selecters, event, callback) => {
29  if (event == 'scroll') {
30    document.querySelector(selecters).addEventListener('scroll', (e) => {
31      let el = e.target;
32      let cel = e.target;
33      callback(el, cel, e)
34    });
35  } else {
36    document.addEventListener(event, (e) => {
37      let el = e.target;
38      let cel = e.target;
39      while (el && el !== document) {
40        if (el.matches(selecters)) {
41          callback(el, cel, e);
42          break;
43        }
44        el = el.parentNode;
45      }
46    }, false);
47  }
48}
49
50TAB_MANAGER.setUiEvent = () => {
51  TAB_MANAGER.on('[role="tab"]', 'click', (el, cel, e) => {
52    TAB_MANAGER.changetabs(el, cel, e);
53    document.querySelectorAll('[data-tabele_json] .table_outer').forEach((v, i) => {
54      TABLE_MANAGER.toggleScrollShadow(v);
55    });
56  });
57
58  TAB_MANAGER.on('[role="tablist"]', 'keydown', (el, cel, e) => {
59    let dom_tabs = el.querySelectorAll('[role="tab"]');
60    let tabFocus = (el.dataset.tabfocus) ? el.dataset.tabfocus : 0;
61    if (e.keyCode === 39 || e.keyCode === 37) {
62      dom_tabs[tabFocus].setAttribute("tabindex", -1);
63      if (e.keyCode === 39) {
64        tabFocus++;
65        if (tabFocus >= dom_tabs.length) {
66          tabFocus = 0;
67        }
68      } else if (e.keyCode === 37) {
69        tabFocus--;
70        if (tabFocus < 0) {
71          tabFocus = dom_tabs.length - 1;
72        }
73      }
74      el.dataset.tabfocus = tabFocus;
75      dom_tabs[tabFocus].setAttribute("tabindex", 0);
76      dom_tabs[tabFocus].focus();
77    }
78  });
79}
80
81TAB_MANAGER.init = () => {
82  TAB_MANAGER.setUiEvent();
83  let param = PARTS.getParam();
84  if (param.tab) {
85    let evt = new Event('click', { bubbles: true });
86    document.querySelector(`[role="tab"]#${param.tab}`).dispatchEvent(evt);
87  }
88}
89
90TAB_MANAGER.init();