Scriptable/mobile-menu.js at Master · CaseyCZ/Scriptable · GitHub

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
function setupMobileMenu() {
  const header = document.querySelector('.topbar');
  const nav = header?.querySelector('.nav');
  const actions = header?.querySelector('.nav-actions');
  if (!header || !nav || !actions || document.getElementById('mobileMenuButton')) return;

  const button = document.createElement('button');
  button.id = 'mobileMenuButton';
  button.className = 'icon-btn mobile-menu-button';
  button.type = 'button';
  button.setAttribute('aria-label', 'Menu');
  button.setAttribute('aria-expanded', 'false');
  button.setAttribute('aria-controls', 'mobileNavPanel');
  button.innerHTML = '<span class="mobile-menu-icon" aria-hidden="true"></span>';
  actions.appendChild(button);

  const panel = document.createElement('div');
  panel.id = 'mobileNavPanel';
  panel.className = 'mobile-nav-panel';
  panel.setAttribute('aria-hidden', 'true');
  panel.innerHTML = '<div class="wrap mobile-nav-inner"><nav class="mobile-nav-links" aria-label="Mobile navigation">' + nav.innerHTML + '</nav></div>';
  header.appendChild(panel);

  const setOpen = (open, restoreFocus = false) => {
    const wasOpen = header.classList.contains('mobile-menu-open');
    header.classList.toggle('mobile-menu-open', open);
    panel.setAttribute('aria-hidden', String(!open));
    button.setAttribute('aria-expanded', String(open));
    document.body.classList.toggle('mobile-menu-visible', open);
    if (!open && wasOpen && restoreFocus) requestAnimationFrame(() => button.focus());
  };

  button.addEventListener('click', event => {
    event.stopPropagation();
    const settingsMenu = document.querySelector('.settings-menu');
    const settingsPanel = document.getElementById('settingsPanel');
    settingsMenu?.classList.remove('open');
    settingsPanel?.classList.remove('open');
    document.getElementById('settingsBtn')?.setAttribute('aria-expanded', 'false');
    settingsPanel?.setAttribute('aria-hidden', 'true');
    setOpen(!header.classList.contains('mobile-menu-open'));
  });

  panel.addEventListener('click', event => {
    if (event.target.closest('a')) setOpen(false);
  });

  document.addEventListener('click', event => {
    if (!header.contains(event.target)) setOpen(false);
  });

  document.addEventListener('keydown', event => {
    if (event.key === 'Escape' && header.classList.contains('mobile-menu-open')) {
      event.preventDefault();
      setOpen(false, true);
    }
  });

  window.addEventListener('resize', () => {
    if (window.innerWidth > 900) setOpen(false);
  });
}

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', setupMobileMenu, { once: true });
} else {
  setupMobileMenu();
}