f0bm/public/s/js/user.js

(async () => {
  // Helper to get dynamic context from the DOM
  const getContext = () => {
    const idLink = document.querySelector("a.id-link");
    if (!idLink) return null;
    return {
      postid: +idLink.innerText,
      poster: document.querySelector("a#a_username")?.innerText,
      tags: [...document.querySelectorAll("#tags > .badge")].map(t => t.innerText.slice(0, -2))
    };
  };

  const queryapi = async (url, data, method = 'GET') => {
    let req;
    if (method == 'POST') {
      req = await fetch(url, {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify(data)
      });
    }
    else {
      let s = [];
      for (const [key, val] of Object.entries(data))
        s.push(encodeURIComponent(key) + "=" + encodeURIComponent(val));
      req = await fetch(url + '?' + s.join('&'));
    }
    return await req.json();
  };

  const get = async (url, data) => queryapi(url, data, 'GET');
  const post = async (url, data) => queryapi(url, data, 'POST');

  const renderTags = _tags => {
    [...document.querySelectorAll("#tags > .badge")].forEach(tag => tag.parentElement.removeChild(tag));
    _tags.reverse().forEach(tag => {
      const a = document.createElement("a");
      a.href = `/tag/${tag.normalized}`;
      a.style = "color: inherit !important";
      a.innerHTML = tag.tag;

      const span = document.createElement("span");
      span.classList.add("badge", "mr-2");
      span.setAttribute('tooltip', tag.user);

      tag.badge.split(" ").forEach(b => span.classList.add(b));

      span.insertAdjacentElement("beforeend", a);

      document.querySelector("#tags").insertAdjacentElement("afterbegin", span);
    });
  };

  const addtagClick = (e) => {
    if (e) e.preventDefault();
    const ctx = getContext();
    if (!ctx) return;
    const { postid, tags } = ctx;

    const insert = document.querySelector("a#a_addtag");
    // Check if input already exists to prevent duplicates
    if (insert.previousElementSibling && insert.previousElementSibling.querySelector('input')) {
      insert.previousElementSibling.querySelector('input').focus();
      return;
    }

    const span = document.createElement("span");
    span.classList.add("badge", "badge-light", "mr-2");

    const input = document.createElement("input");
    input.size = "10";
    input.value = "";
    input.setAttribute("list", "testlist");
    input.setAttribute("autoComplete", "off");

    span.insertAdjacentElement("afterbegin", input);
    insert.insertAdjacentElement("beforebegin", span);

    input.focus();

    let tt = null;
    let lastInput = '';
    const testList = document.querySelector('#testlist');

    input.addEventListener("keyup", async e => {
      if (e.key === "Enter") {
        const tmptag = input.value?.trim();
        // Check fresh tags from DOM just in case? Or use captured tags?
        // Using captured 'tags' from when clicked is safe enough for immediate check.
        if (tags.includes(tmptag))
          return alert("tag already exists");

        const res = await post("/api/v2/admin/" + postid + "/tags", {
          tagname: tmptag
        });
        if (!res.success) {
          alert(res.msg);
          return false;
        }
        // No need to update 'tags' local var, renderTags updates DOM, and next click reads DOM.
        renderTags(res.tags);

        // Remove input and reset
        span.parentElement.removeChild(span);
        testList.innerText = "";

        // Re-open input? Original code called addtagClick() again.
        addtagClick();
      }
      else if (e.key === "Escape") {
        span.parentElement.removeChild(span);
        testList.innerText = "";
      }
      else {
        if (tt != null)
          clearTimeout(tt);

        tt = setTimeout(async () => {
          tt = null;

          const tmptag = input.value?.trim();

          if (tmptag == lastInput || tmptag.length <= 1)
            return false;

          testList.innerText = "";
          lastInput = tmptag;

          const res = await get('/api/v2/admin/tags/suggest', {
            q: tmptag
          });

          for (const entry of res.suggestions) {
            const option = document.createElement('option');
            option.value = entry.tag;

            if (!/fox/.test(navigator.userAgent))
              option.innerText = `tagged ${entry.tagged} times (score: ${entry.score.toFixed(2)})`;

            testList.insertAdjacentElement('beforeEnd', option);
          };
        }, 500);
      }
      return true;
    });

    input.addEventListener("focusout", ie => {
      // Small delay to allow click events on suggestions or other checks?
      // Original code:
      if (input.value.length === 0)
        input.parentElement.parentElement.removeChild(input.parentElement);
    });
  };

  const toggleEvent = async (e) => {
    if (e) e.preventDefault();
    const ctx = getContext();
    if (!ctx) return;
    const { postid } = ctx;

    const res = await (await fetch('/api/v2/admin/' + encodeURIComponent(postid) + '/tags/toggle', {
      method: 'PUT'
    })).json();

    renderTags(res.tags);
  };

  const toggleFavEvent = async (e) => {
    // e is the click event or undefined
    const ctx = getContext();
    if (!ctx) return;
    const { postid } = ctx;

    const res = await post('/api/v2/admin/togglefav', {
      postid: postid
    });
    if (res.success) {
      const fav = document.querySelector("svg#a_favo > use").href;
      fav.baseVal = '/s/img/iconset.svg#heart_' + (fav.baseVal.match(/heart_(regular|solid)$/)[1] == "solid" ? "regular" : "solid");

      // span#favs
      const favcontainer = document.querySelector('span#favs');
      favcontainer.innerHTML = "";

      favcontainer.hidden = !(favcontainer.hidden || res.favs.length > 0);

      res.favs.forEach(f => {
        const a = document.createElement('a');
        a.href = `/user/${f.user}/favs`;
        a.setAttribute('tooltip', f.user);
        a.setAttribute('flow', 'up');

        const img = document.createElement('img');
        img.src = `/t/${f.avatar}.webp`;
        img.style.height = "32px";
        img.style.width = "32px";

        a.insertAdjacentElement('beforeend', img);
        favcontainer.insertAdjacentElement('beforeend', a);
        favcontainer.innerHTML += "&nbsp;";
      });
    }
    else {
      // lul
    }
  };

  // Event Delegation
  document.addEventListener("click", e => {
    if (e.target.matches("a#a_addtag")) {
      addtagClick(e);
    } else if (e.target.matches("a#a_toggle")) {
      toggleEvent(e);
    } else if (e.target.closest("svg#a_favo")) {
      toggleFavEvent(e);
    }
  });

  document.addEventListener("keyup", e => {
    if (e.target.tagName === "INPUT" || e.target.tagName === "TEXTAREA")
      return;
    const ctx = getContext();
    if (!ctx) return; // Only trigger if on an item page

    if (e.key === "p")
      toggleEvent();
    else if (e.key === "i")
      addtagClick();
    else if (e.key === "f")
      toggleFavEvent();
  });

  // Settings page logic (unchanged essentially, but kept inside IIFE scope)
  if (document.location.pathname === '/settings') {
    const saveAvatar = async e => {
      e.preventDefault();

      const avatar = +document.querySelector('input[name="i_avatar"]').value;
      let res = await fetch('/api/v2/settings/setAvatar', {
        method: 'PUT',
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({ avatar })
      });
      const code = res.status;
      res = await res.json();

      switch (code) {
        case 200:
          document.querySelector('#img_avatar').src = `/t/${avatar}.webp`;
          document.querySelector('img.avatar').src = `/t/${avatar}.webp`;
          break;
        default:
          console.log(res);
          break;
      }
    };

    const sAvatar = document.querySelector('input#s_avatar');
    if (sAvatar) sAvatar.addEventListener('click', saveAvatar);

    const iAvatar = document.querySelector('input[name="i_avatar"]');
    if (iAvatar) iAvatar.addEventListener('keyup', async e => {
      if (e.key === 'Enter')
        await saveAvatar(e);
    });
  }
})();