pyrom/data/static/js/bits/ui.js

export const b = {
  babycodePreviewEndpoint: '/api/babycode-preview/',
}

export function setTab(_, sender, el) {
  if (sender.ariaSelected === 'true') {
    return;
  }
  if (!el.contains(sender)) {
    return;
  }
  const tabIndex = parseInt(sender.dataset.tabIndex);
  const tabPanels = el.querySelectorAll('.tab-content');
  const tabButtons = el.querySelectorAll('.tab-bar button');

  for (let i = 0; i < tabPanels.length; i++) {
    const tabPanel = tabPanels[i];
    const tabButton = tabButtons[i];
    if (i === tabIndex) {
      tabPanel.classList.remove('hidden');
      tabButton.ariaSelected = 'true';
    } else if (!tabPanel.classList.contains('hidden')) {
      tabPanel.classList.add('hidden');
      tabButton.ariaSelected = 'false';
    }
  }
}

export function insertBabycode(_, sender, el) {
  if (!el.parentNode.contains(sender)) {
    return;
  }

  const tagStart = sender.dataset.babycodeTag;
  const breakLine = 'breakLine' in sender.dataset;
  const prefill = 'prefill' in sender.dataset ? sender.dataset.prefill : '';

  const hasAttr = tagStart[tagStart.length - 1] === '=';

  let tagEnd = tagStart;
  let tagInsertStart = `[${tagStart}]${breakLine ? '\n' : ''}`;
  if (hasAttr) {
    tagEnd = tagEnd.slice(0, -1);
  }
  const tagInsertEnd = `${breakLine ? '\n' : ''}[/${tagEnd}]`;
  const hasSelection = el.selectionStart !== el.selectionEnd;
  const text = el.value;

  if (hasSelection) {
    const realStart = Math.min(el.selectionStart, el.selectionEnd);
    const realEnd = Math.max(el.selectionStart, el.selectionEnd);
    const selectionLength = realEnd - realStart;

    const strStart = text.slice(0, realStart);
    const strEnd = text.substring(realEnd);
    const frag = `${tagInsertStart}${text.slice(realStart, realEnd)}${tagInsertEnd}`;
    const reconst = `${strStart}${frag}${strEnd}`;
    el.value = reconst;
    if (!hasAttr) {
      el.setSelectionRange(realStart + tagInsertStart.length, realStart + tagInsertEnd.length + selectionLength - 1);
    } else {
      const attrCursor = realStart + tagInsertEnd.length - (1 + (breakLine ? 1 : 0))
      el.setSelectionRange(attrCursor, attrCursor); // cursor on attr
    }
  } else {
    if (hasAttr) {
      tagInsertStart += prefill;
    }
    const cursor = el.selectionStart;
    const strStart = text.slice(0, cursor);
    const strEnd = text.substring(cursor);

    let newCursor = strStart.length + tagInsertStart.length;
    if (hasAttr) {
      newCursor = cursor + tagInsertStart.length - prefill.length - (1 + (breakLine ? 1 : 0)); //cursor on attr
    }
    const reconst = `${strStart}${tagInsertStart}${tagInsertEnd}${strEnd}`;
    el.value = reconst;
    el.setSelectionRange(newCursor, newCursor);
  }
  el.focus();
}

export function babycodePreviewInit(ev, sender, el) {
  if (!sender.parentNode.parentNode.contains(el)) { // tab container > tab bar > button
    return;
  }

  b.send({ text: el.value, sender: sender, bannedTags: JSON.parse(el.dataset.bannedTags) }, 'babycodePreview');
}

export async function babycodePreview(payload, _, el) {
  if (!payload.sender.parentNode.parentNode.contains(el)) {
    return;
  }

  if (!payload.text.trim()) {
    b.send({ plain: 'Type something to get a preview.', sender: el }, 'showBabycodePreview');
    return;
  }
  const options = {
    method: 'POST',
    headers: {
      'content-type': 'application/json',
    },
    body: JSON.stringify({
      markup: payload.text,
      banned_tags: payload.bannedTags,
    }),
  }

  const f = await fetch(b.babycodePreviewEndpoint, options);
  try {
    if (!f.ok) {
      console.error(f);
      let msg = '';
      switch (f.status) {
        case 429:
          return;
        default:
          msg = '(Something went wrong. Try again later.)'
      }
      b.send({ plain: msg, sender: el }, 'showBabycodePreview');
      return;
    }
    b.send({ ...(await f.json()), sender: el }, 'showBabycodePreview');
  } catch (error) {
    b.send({ plain: '(Something went wrong. Try again later.)', sender: el }, 'showBabycodePreview');
    console.error(error);
    return;
  }
}

export function showBabycodePreview(payload, _, el) {
  if (!payload.sender.parentNode.contains(el)) {
    return;
  }
  if (payload.plain) {
    el.innerHTML = `<p>${payload.plain}</p>`;
  } else {
    el.innerHTML = payload.html;
  }
}