https://www.gladia.io/js/bento-detail.js

1(function () {
2  var root = document.getElementById('bentoDetail');
3  if (!root) return;
4
5  var panel = root.querySelector('.bento-detail__panel');
6  var closeBtn = root.querySelector('.bento-detail__close');
7  var panes = root.querySelectorAll('[data-bento-detail-pane]');
8  var triggers = document.querySelectorAll('[data-bento-detail]');
9  var lastFocus = null;
10
11  var titleIds = {
12    languages: 'bentoTitleLanguages',
13    accuracy: 'bentoTitleAccuracy',
14    'audio-intelligence': 'bentoTitleAudio',
15    infrastructure: 'bentoTitleInfra',
16    integrations: 'bentoTitleIntegrations',
17  };
18
19  function showPane(key) {
20    panes.forEach(function (p) {
21      var match = p.getAttribute('data-bento-detail-pane') === key;
22      p.hidden = !match;
23    });
24    var id = titleIds[key];
25    if (id && panel) panel.setAttribute('aria-labelledby', id);
26  }
27
28  function open(key) {
29    if (!titleIds[key]) return;
30    lastFocus = document.activeElement;
31    showPane(key);
32    root.setAttribute('aria-hidden', 'false');
33    document.documentElement.classList.add('bento-detail-lock');
34    requestAnimationFrame(function () {
35      root.classList.add('is-open');
36    });
37    if (closeBtn) closeBtn.focus();
38  }
39
40  function close() {
41    if (!root.classList.contains('is-open')) return;
42    root.classList.remove('is-open');
43    root.setAttribute('aria-hidden', 'true');
44    document.documentElement.classList.remove('bento-detail-lock');
45
46    var restored = false;
47    function restoreFocus() {
48      if (restored) return;
49      restored = true;
50      if (lastFocus && typeof lastFocus.focus === 'function') lastFocus.focus();
51    }
52
53    var done = function (e) {
54      if (e.target !== root || e.propertyName !== 'opacity') return;
55      root.removeEventListener('transitionend', done);
56      restoreFocus();
57    };
58    root.addEventListener('transitionend', done);
59    window.setTimeout(restoreFocus, 400);
60  }
61
62  triggers.forEach(function (btn) {
63    btn.addEventListener('click', function () {
64      var key = btn.getAttribute('data-bento-detail');
65      open(key);
66    });
67  });
68
69  root.querySelectorAll('[data-bento-detail-close]').forEach(function (el) {
70    el.addEventListener('click', function () {
71      close();
72    });
73  });
74
75  document.addEventListener('keydown', function (e) {
76    if (e.key === 'Escape' && root.classList.contains('is-open')) {
77      e.preventDefault();
78      close();
79    }
80  });
81})();