runtimeTabsJs top-level constant

String const runtimeTabsJs

Implementation

const String runtimeTabsJs = r'''
function activateTab(groupId, tabId) {
  const triggers = document.querySelectorAll(
    '[data-arcane-tabs-group="' + cssEscape(groupId) +
    '"][data-arcane-tab]'
  );
  for (let i = 0; i < triggers.length; i++) {
    const t = triggers[i];
    const id = t.getAttribute('data-arcane-tab');
    const active = id === tabId;
    t.setAttribute('data-arcane-state', active ? 'active' : 'inactive');
    if (t.getAttribute('role') === 'tab') {
      t.setAttribute('aria-selected', active ? 'true' : 'false');
      t.setAttribute('tabindex', active ? '0' : '-1');
    }
  }
  const panels = document.querySelectorAll(
    '[data-arcane-tabs-group="' + cssEscape(groupId) +
    '"][data-arcane-tab-panel]'
  );
  for (let i = 0; i < panels.length; i++) {
    const p = panels[i];
    const id = p.getAttribute('data-arcane-tab-panel');
    const active = id === tabId;
    p.setAttribute('data-arcane-state', active ? 'active' : 'inactive');
    if (active) p.removeAttribute('hidden');
    else p.setAttribute('hidden', '');
  }
  const containers = document.querySelectorAll(
    '[data-arcane-tabs-group="' + cssEscape(groupId) +
    '"]:not([data-arcane-tab]):not([data-arcane-tab-panel])'
  );
  for (let i = 0; i < containers.length; i++) {
    containers[i].setAttribute('data-arcane-tabs-active', tabId);
    fireEvent(containers[i], 'arcane:tabs-change', {
      groupId: groupId, tabId: tabId
    });
  }
}

ARCANE.tabs.activate = activateTab;
''';