SandpointsEditPage/src/App.svelte

293 lines
9.1 KiB
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);
if (fmKeyType == "ascriptions" && fmKey == "_new") {
hasesCandidates = [... new Set(reckonHasesCandidates())]
if (hasesCandidates.length > 0) {
fmKey = hasesCandidates[0]
console.log(hasesCandidates, 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: [...new Set(candidates)],
});
frontmatter = { ...frontmatter };
}
function newHasTiers(arrgs) {
let [fmKeyType, index, oldFmKey, newFmKey] = arrgs.detail;
hasesCandidates = [... new Set(reckonHasesCandidates())]
console.log(hasesCandidates)
if (fmKeyType=="triad" && oldFmKey == "_new") {
if (hasesCandidates.length > 0) {
newFmKey = hasesCandidates[0];
if (hasesCandidates.length > 1) {
oldFmKey = hasesCandidates[1]
}
} else {
return
}
}
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, "_new", ""] });
}
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", "_new")}>
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>