runtimePanelsJs top-level constant

String const runtimePanelsJs

Implementation

const String runtimePanelsJs = r'''
function setPanelState(groupId, panelId, expanded) {
  const trigger = document.querySelector(
    '[data-arcane-panel-group="' + cssEscape(groupId) +
    '"][data-arcane-panel="' + cssEscape(panelId) + '"]'
  );
  const content = document.querySelector(
    '[data-arcane-panel-group="' + cssEscape(groupId) +
    '"][data-arcane-panel-content="' + cssEscape(panelId) + '"]'
  );
  if (trigger) {
    trigger.setAttribute('data-arcane-state', expanded ? 'expanded' : 'collapsed');
    trigger.setAttribute('aria-expanded', expanded ? 'true' : 'false');
  }
  if (content) {
    content.setAttribute('data-arcane-state', expanded ? 'expanded' : 'collapsed');
    if (expanded) content.removeAttribute('hidden');
    else content.setAttribute('hidden', '');
  }
}

function expandPanel(groupId, panelId) {
  const trigger = document.querySelector(
    '[data-arcane-panel-group="' + cssEscape(groupId) +
    '"][data-arcane-panel="' + cssEscape(panelId) + '"]'
  );
  if (trigger && trigger.getAttribute('data-arcane-panel-exclusive') === 'true') {
    const all = document.querySelectorAll(
      '[data-arcane-panel-group="' + cssEscape(groupId) +
      '"][data-arcane-panel][data-arcane-state="expanded"]'
    );
    for (let i = 0; i < all.length; i++) {
      const id = all[i].getAttribute('data-arcane-panel');
      if (id !== panelId) setPanelState(groupId, id, false);
    }
  }
  setPanelState(groupId, panelId, true);
  fireEvent(document, 'arcane:panel-change', {
    groupId: groupId, panelId: panelId, expanded: true
  });
}

function collapsePanel(groupId, panelId) {
  setPanelState(groupId, panelId, false);
  fireEvent(document, 'arcane:panel-change', {
    groupId: groupId, panelId: panelId, expanded: false
  });
}

function togglePanel(groupId, panelId) {
  const trigger = document.querySelector(
    '[data-arcane-panel-group="' + cssEscape(groupId) +
    '"][data-arcane-panel="' + cssEscape(panelId) + '"]'
  );
  if (!trigger) return;
  const expanded = trigger.getAttribute('data-arcane-state') === 'expanded';
  if (expanded) collapsePanel(groupId, panelId);
  else expandPanel(groupId, panelId);
}

ARCANE.panels.expand = expandPanel;
ARCANE.panels.collapse = collapsePanel;
ARCANE.panels.toggle = togglePanel;
''';