Bin
2025-12-17 1d710f844b65d9bfdf986a71a3b924cd70598a41
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
/* This script makes tabs for <div class="code-tabs"> <div data-name="First"> </div> </div>.
Example code for .md file:
<div class="code-tabs">
  <div data-name="First">
  It's a test It's a test It's a test
  It's a test
  It's a test
  It's a test
```bash
Test 1!
Test 1!
Test 1!
```
  </div>
  <div data-name="Second">
    ```bash
    Test 2!
    Test 2!
    Test 2!
    Test 2!
    Test 2!
    Test 2!
    Test 2!
    Test 2!Test 2!
    Test 2!
    Test 2!
    ```
  </div>
</div>
 */
 
 
 
function escapeHTML(str) {
  return str.replace(/[&<>"']/g, function (char) {
    return {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#39;'
    }[char];
  });
}
 
function openCodeTab(id, event) {
  const tabObj = document.querySelector(`${'#' + id}`);
  const anchorObj = document.querySelector(`${'#' + id + '-anchor'}`);
 
  // hide all tabs
  const divs = tabObj.parentNode.querySelectorAll("[data-name]")
  divs.forEach(div => div.style.display = 'none')
 
  // show only selected tab
  tabObj.style.display = 'block';
 
  // un-activate all <a>
  const anchors = [...anchorObj.parentNode.children].filter((child) => child !== anchorObj);
  anchors.forEach(anchor => anchor.classList.remove('active'))
 
  // make anchor active
  anchorObj.classList.add('active');
 
  if (event) {
    event.preventDefault();
    event.stopPropagation();
    //window.location.hash = id;
  }
}
 
(function() {
 
  const tabs = document.querySelectorAll('.code-tabs');
 
  tabs.forEach(function (codeTab, o1) {
 
    var buttons = '<div class="close-tabs buttons">';
    const panels = codeTab.querySelectorAll("[data-name]");
    panels.forEach(function (tab, o2) {
      const name = tab.dataset.name;
      const id = 'code-tab-' + o1 + '-' + o2;
 
      tab.setAttribute("id", id);
 
      buttons += '<a ' +
              'id="'+ id +'-anchor" ' +
              'class="Heading XXSmall"' +
              'onclick="openCodeTab(\'' + id + '\', event)" ' +
              'href="#' + id + '-anchor">' +
              escapeHTML(name) +
            '</a>';
    })
 
    buttons += '</div>';
 
    codeTab.insertAdjacentHTML("afterBegin", buttons);
 
    openCodeTab('code-tab-' + o1 + '-0', null);
  })
 
 
})();