ID Generator — Confluence Cloud Macro

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<div class="aui-page-panel-content">
  <div style="display: flex; align-items: center; gap: 14px;">
    <button id="idGeneratorButton" class="aui-button aui-button-primary">
      Generate ID
    </button>

    <span id="generatedId" style="
      display: none;
      border-radius: 3px;
      padding: 2.5px 5px;
      font-size: 14px;
      border: 1px solid var(--ds-border-input, #8C8F97);
      align-items: center;
      gap: 6px;"
      role="status"
      aria-live="polite">
      <strong>ID:</strong>
      <span id="idValue" style="font-family:monospace"></span>


      <button id="copyIdBtn"
        type="button"
        title="Copy ID"
        aria-label="Copy ID"
        style="border: none; background: transparent; padding: 4px; cursor:pointer; display: inline-flex; align-items: center;">
        <iconify-icon id="copyIcon" icon="mdi:content-copy" width="16" height="16"></iconify-icon>
      </button>
    </span>
  </div>
</div>

<script>

  const base32_encode = (data) => {
    const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ234567";
    let binary = [...data].map(c => c.charCodeAt(0).toString(2).padStart(8, '0')).join('');
    while (binary.length % 5) binary += '0';
    let out = '';
    for (let i = 0; i < binary.length; i += 5) out += alphabet[parseInt(binary.slice(i, i+5), 2)];
    return out;
  };

  const generateId = () => base32_encode(Date.now().toString());


  const genBtn = document.getElementById('idGeneratorButton');
  const wrap = document.getElementById('generatedId');
  const valEl = document.getElementById('idValue');
  const copyBtn = document.getElementById('copyIdBtn');
  const copyIcon = document.getElementById('copyIcon');


  genBtn.addEventListener('click', () => {
    const id = generateId();
    valEl.textContent = id;
    wrap.style.display = 'inline-flex';
    copyIcon.setAttribute('icon', 'mdi:content-copy');
  });


  function execCommandCopy(text) {
    try {
      const ta = document.createElement('textarea');
      ta.value = text;
      ta.setAttribute('readonly', '');
      ta.style.position = 'fixed';
      ta.style.top = '-9999px';
      ta.style.left = '-9999px';
      document.body.appendChild(ta);

      ta.select();
      ta.setSelectionRange(0, ta.value.length);
      const ok = document.execCommand('copy');
      document.body.removeChild(ta);

      return !!ok;
    } catch (e) {
      console.warn('execCommand copy failed', e);
      return false;
    }
  }


  copyBtn.addEventListener('click', () => {
    const value = valEl.textContent || '';
    if (!value) return;

    const success = execCommandCopy(value);

    if (success) {
      copyIcon.setAttribute('icon', 'mdi:check');
      setTimeout(() => {
        copyIcon.setAttribute('icon', 'mdi:content-copy');
      }, 1200);
    }
  });
</script>