https://matplotlib.org/_static/script.js

1// accessible JavaScript tab switcher
2// modified from https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role
3
4function getRandomInt(max) {
5  return Math.floor(Math.random() * max);
6}
7
8document.addEventListener("DOMContentLoaded", function(event) {
9  const tabs = document.querySelectorAll('[role="tab"]');
10  const tabList = document.querySelector('[role="tablist"]');
11
12  // set currently active tab to 0
13  tabList.setAttribute("data-current-tab", 0);
14
15  // Add a click event handler to each tab
16  tabs.forEach((tab, i) => {
17    tab.addEventListener("click", changeTabs);
18    tab.setAttribute("data-tab-count", i);
19  });
20
21  // Enable arrow navigation between tabs in the tab list
22  let tabFocus = 0;
23
24  tabList.addEventListener("keydown", e => {
25    // Move right
26    if (e.keyCode === 39 || e.keyCode === 37) {
27      tabs[tabFocus].setAttribute("tabindex", -1);
28      if (e.keyCode === 39) {
29        tabFocus++;
30        // If we're at the end, go to the start
31        if (tabFocus >= tabs.length) {
32          tabFocus = 0;
33        }
34        // Move left
35      } else if (e.keyCode === 37) {
36        tabFocus--;
37        // If we're at the start, move to the end
38        if (tabFocus < 0) {
39          tabFocus = tabs.length - 1;
40        }
41      }
42
43      tabs[tabFocus].setAttribute("tabindex", 0);
44      tabs[tabFocus].focus();
45    }
46  });
47
48  ///////////////////////////////////////
49  // rotate images in images-rotate directory:
50  var ind = getRandomInt(images_rotate.length);
51  var info = images_rotate[ind];
52  var img_src = "_static/images-rotate/" + info.image;
53  var caption = info.caption;
54  var link = "https://matplotlib.org/stable/" + info.link;
55  var html = '<a href="' + link + '">' +
56    '<img class="imrot-img" src="' + img_src + '" aria-labelledby="sample-plot-caption"/>' +
57    '<div class="imrot-cap" id="sample-plot-caption">' + caption + '</div>' +
58    '</a>';
59  document.getElementById('image_rotator').innerHTML = html;
60
61});
62
63function changeTabs(e) {
64  const target = e.target;
65  const parent = target.parentNode;
66  const grandparent = parent.parentNode;
67
68  // set attribute for currently active tab for setting the location of the pointer triangle
69  parent.setAttribute("data-current-tab", e.target.getAttribute("data-tab-count"));
70
71  // Remove all current selected tabs
72  parent
73    .querySelectorAll('[aria-selected="true"]')
74    .forEach(t => t.setAttribute("aria-selected", false));
75
76  // Set this tab as selected
77  target.setAttribute("aria-selected", true);
78
79  // Hide all tab panels
80  grandparent
81    .querySelectorAll('[role="tabpanel"]')
82    .forEach(p => p.setAttribute("hidden", true));
83
84  // Show the selected panel
85  grandparent.parentNode
86    .querySelector(`#${target.getAttribute("aria-controls")}`)
87    .removeAttribute("hidden");
88}