SandpointsEditPage/src/App.svelte

<script>
  import SpTitle from "./SpTitle.svelte";
  import SpTiers from "./SpTiers.svelte";
  import SpKeys from "./SpKeys.svelte";
  import SpCandidates from "./SpCandidates.svelte";
  import SpJournal from "./SpJournal.svelte";
  import { onMount } from "svelte";
  let v = "loading...";
  let relpath = "";
  let relpermalink = "";
  let protocol = "";
  let title = "Foo bar";
  let hases = [];
  let hasesCandidates = [];
  let frontmatter = {};
  frontmatter["triad"] = [];
  frontmatter["ascriptions"] = [];
  frontmatter["notsand"] = [];

  function keyUp(e) {
    if (e.key == "Escape") {
      window.history.back();
    }
  }

  function diffArrr(arr, arrr) {
    let diff = new Set(arr);
    for (let e of arrr) {
      diff.delete(e);
    }
    return Array.from(diff);
  }

  function newTier(fmKeyType, fmKey, fmValue = "") {
    console.log("newTier", fmKeyType, fmKey);
    let tiers = [];
    let candidates = [];
    METASP[fmKey].tiers.forEach((t) => {
      if (fmValue.includes(t.file)) {
        tiers.push(t);
      } else {
        candidates.push(t);
      }
    });
    frontmatter[fmKeyType].push({
      fmKey: fmKey,
      tiers: tiers,
      candidates: candidates,
    });
    frontmatter = { ...frontmatter };
  }

  function newHasTiers(arrgs) {
    const [fmKeyType, index, oldFmKey, newFmKey] = arrgs.detail;
    frontmatter[fmKeyType][index] = {
      fmKey: newFmKey,
      tiers: [],
      candidates: METASP[newFmKey].tiers,
    };
    hasesCandidates = hasesCandidates.filter((h) => h != newFmKey);
    hasesCandidates = [...hasesCandidates, oldFmKey];
    toggleNewTriadButton();
  }

  function loadHugoPageMetadata(editHash) {
    let el = document.createElement("script");
    el.onload = () => {
      v = repo.content;
      if (v.startsWith("\n")) {
        v = v.substring(1);
      }

      relpath = repo.path;
      relpermalink = repo.relpermalink;
      protocol = document.location.protocol.substring(0, 4);
      const notSelf = Object.entries(METASP).filter((n) => n[1].singular == relpath.split("/")[0])[0][0];
      hases = Object.keys(METASP).filter((k) => k != notSelf);
      Object.entries(repo.frontmatter).forEach(([fmKey, fmValue]) => {
        let fmKeyType = "";
        if (fmKey.toLowerCase().startsWith("has_")) {
          if (hases.includes(fmKey.substr(4))) {
            fmKeyType = "triad";
            fmKey = fmKey.substr(4);
          }
        } else if (hases.includes(fmKey.toLowerCase())) {
          fmKeyType = "ascriptions";
        } else if (["abstract", "keywords"].includes(fmKey.toLowerCase())) {
          fmKeyType = "journal";
        } else {
          fmKeyType = "notsand";
        }

        if (["triad", "ascriptions"].includes(fmKeyType)) {
          if (Array.isArray(fmValue)) {
            newTier(fmKeyType, fmKey, fmValue);
          }
        } else if (fmKeyType == "journal") {
          frontmatter["journal"] || (frontmatter["journal"] = []);
          if (Array.isArray(fmValue)) {
            let fmValueArray = [];
            fmValue.forEach((v) => fmValueArray.push(v));
            frontmatter[fmKeyType].push({ fmKey: fmKey, fmValue: fmValueArray });
          } else {
            frontmatter[fmKeyType].push({ fmKey: fmKey, fmValue: fmValue });
          }
        }
      });
      hasesCandidates = reckonHasesCandidates();
      const tkey = Object.keys(repo.frontmatter).filter((t) => t.toLowerCase() == "title")[0];
      title = repo.frontmatter[tkey];

      toggleNewTriadButton();
    };
    el.src = `../js/repo/${editHash}.js`;
    document.body.appendChild(el);
  }

  function reckonHasesCandidates() {
    return diffArrr(hases, [
      ...frontmatter["triad"].map((t) => {
        return t.fmKey;
      }),
      ...frontmatter["ascriptions"].map((t) => {
        return t.fmKey;
      }),
    ]);
  }
  function addToCandidatesRemoveFromTiers(arrgs) {
    const [fmKeyType, index, fmKey, tier] = arrgs.detail;
    frontmatter[fmKeyType][index]["fmKey"] = fmKey;
    frontmatter[fmKeyType][index]["tiers"] = frontmatter[fmKeyType][index]["tiers"].filter(
      (t) => t !== tier
    );
    frontmatter[fmKeyType][index]["candidates"] = [...frontmatter[fmKeyType][index]["candidates"], tier];
  }

  function addToTiersRemoveFromCandidates(arrgs) {
    const [fmKeyType, index, , value] = arrgs.detail;
    const tier = frontmatter[fmKeyType][index]["candidates"].filter((t) => t.file == value);
    if (tier.length > 0) {
      frontmatter[fmKeyType][index]["tiers"] = [...frontmatter[fmKeyType][index]["tiers"], tier[0]];
      frontmatter[fmKeyType][index]["candidates"] = frontmatter[fmKeyType][index]["candidates"].filter(
        (t) => t != tier[0]
      );
    }
  }

  function toggleFold() {
    let e = document.getElementById("frontmatter");
    if (e && e.classList.contains("fmHidden")) {
      e.classList.remove("fmHidden");
      e.classList.add("fmShown");
    } else if (e && e.classList.contains("fmShown")) {
      e.classList.remove("fmShown");
      e.classList.add("fmHidden");
    }
    let i = document.getElementById("fmicon");
    if (i && i.classList.contains("fmCollapse")) {
      i.classList.remove("fmCollapse");
      i.classList.add("fmExpand");
    } else if (i && i.classList.contains("fmExpand")) {
      i.classList.remove("fmExpand");
      i.classList.add("fmCollapse");
    }
  }

  function newFrontmatter() {
    return Object.entries(frontmatter)
      .filter((val) => val[1].length == 0)
      .map((key) => key[0]);
  }

  function toggleNewTriadButton() {
    const ct = Object.entries(frontmatter).filter((i) => i[1].length == 0 && i[0] == "triad");
    if (document.getElementById("newtier")) {
      if (ct.length == 0) {
        document.getElementById("newtier").style.display = "none";
      } else {
        document.getElementById("newtier").style.display = "block";
      }
    }
  }

  function newTriad() {
    newHasTiers({ detail: ["triad", 0, "authors", "editors"] });
  }

  function dispatchHash() {
    const searchParams = new URLSearchParams(location.search);
    const editHash = searchParams.get("edit");
    if (editHash) {
      loadHugoPageMetadata(editHash);
    } else {
      let newPage = searchParams.get("new");
      console.log(newPage);
    }
  }

  onMount(() => {
    dispatchHash();
    // loadHugoPageMetadata();
    console.dir(frontmatter);
  });

  $: hashChanged = () => dispatchHash();
</script>

<svelte:window on:keyup={keyUp} on:hashchange={hashChanged} />
<main id="sandpoints">
  <form>
    <div class="formgrid">
      <SpTitle {relpath} {title} />
    </div>
    <div id="fmicon" on:click={toggleFold} class="fmCollapse">Frontmatter</div>
    <span id="frontmatter" class="fmHidden">
      {#each Object.entries(frontmatter) as fmItems}
        {#each fmItems[1] as fmItem, i}
          {#if ["ascriptions", "triad"].includes(fmItems[0])}
            <SpKeys
              index={i}
              fmKeyType={fmItems[0]}
              {fmItem}
              {hases}
              {hasesCandidates}
              on:hasTiersSelected={newHasTiers}
            />
            <SpTiers
              on:addToCandidatesRemoveFromTiers={addToCandidatesRemoveFromTiers}
              index={i}
              fmKeyType={fmItems[0]}
              {fmItem}
            />
            <SpCandidates
              on:addToTiersRemoveFromCandidates={addToTiersRemoveFromCandidates}
              index={i}
              fmKeyType={fmItems[0]}
              {fmItem}
            />
          {:else if fmItems[0] == "journal"}
            <SpJournal {fmItem} />
          {/if}
        {/each}
      {/each}
      <div class="buttons news">
        <div id="newtier" class="button" on:click={newTriad}>NEW TIER</div>
        <div id="newascription" class="button" on:click={() => newTier("ascriptions", "editors")}>
          NEW ASCRIPTION
        </div>
      </div>
    </span>
    <div class="formgrid">
      <label for="pagecontent">Content:</label>
      <textarea
        id="pagecontent"
        bind:value={v}
        oninput="this.style.height = '';this.style.height = this.scrollHeight + 3 + 'px'"
      />
      {#if document.location.protocol.substring(0, 4) != "file"}
        <label for="publish">Publish</label>
        <input type="checkbox" id="publish" name="publish" />
      {/if}
      <label for="offline">Offline</label>
      <input type="checkbox" id="offline" name="offline" />
      <input type="hidden" name="relpermalink" bind:value={relpermalink} />
      <input type="hidden" name="relpath" bind:value={relpath} />
      <input type="hidden" name="protocol" bind:value={protocol} />
      <button id="sandpointsButton">COMMIT/SAVE</button>
    </div>
  </form>
</main>