folding unfolding frontmatter..
This commit is contained in:
parent
0c7164b05e
commit
b24f80e496
7 changed files with 361 additions and 236 deletions
|
|
@ -60,7 +60,7 @@ button:focus {
|
|||
|
||||
/* custom part */
|
||||
|
||||
form {
|
||||
.formgrid {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-gap: 1rem;
|
||||
|
|
@ -145,4 +145,17 @@ select {
|
|||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.fmHidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fmShown {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-gap: 1rem;
|
||||
}
|
||||
|
||||
.togglefold {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
|
|
|||
189
src/App.svelte
189
src/App.svelte
|
|
@ -1,128 +1,194 @@
|
|||
<script>
|
||||
import SpTitle from './SpTitle.svelte'
|
||||
import SpTiers from './SpTiers.svelte'
|
||||
import SpKeys from './SpKeys.svelte'
|
||||
import SpCandidates from './SpCandidates.svelte'
|
||||
import { onMount } from 'svelte';
|
||||
import SpTitle from "./SpTitle.svelte";
|
||||
import SpJournal from "./SpJournal.svelte";
|
||||
import SpTiers from "./SpTiers.svelte";
|
||||
import SpKeys from "./SpKeys.svelte";
|
||||
import SpCandidates from "./SpCandidates.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'] = [];
|
||||
let frontmatter = {};
|
||||
frontmatter["triad"] = [];
|
||||
frontmatter["ascriptions"] = [];
|
||||
frontmatter["notsand"] = [];
|
||||
|
||||
function keyUp(e) {
|
||||
if (e.key == "Escape") {
|
||||
window.history.back()
|
||||
window.history.back();
|
||||
}
|
||||
}
|
||||
|
||||
function diffArrr(arr, arrr) {
|
||||
let diff = new Set(arr)
|
||||
let diff = new Set(arr);
|
||||
for (let e of arrr) {
|
||||
diff.delete(e)
|
||||
diff.delete(e);
|
||||
}
|
||||
return Array.from(diff)
|
||||
return Array.from(diff);
|
||||
}
|
||||
|
||||
function newHasTiers(arrgs) {
|
||||
let [fmKeyType, index, oldFmKey, newFmKey] = arrgs.detail;
|
||||
frontmatter[fmKeyType][index] = {'fmKey': newFmKey, 'tiers': [], 'candidates': METASP[newFmKey].tiers}
|
||||
frontmatter[fmKeyType][index] = {
|
||||
fmKey: newFmKey,
|
||||
tiers: [],
|
||||
candidates: METASP[newFmKey].tiers,
|
||||
};
|
||||
hasesCandidates = [...hasesCandidates, oldFmKey];
|
||||
hasesCandidates = hasesCandidates.filter(h => h != newFmKey);
|
||||
hasesCandidates = hasesCandidates.filter((h) => h != newFmKey);
|
||||
}
|
||||
|
||||
function loadHugoPageMetadata() {
|
||||
var el = document.createElement('script');
|
||||
el.onload = ()=> {
|
||||
var el = document.createElement("script");
|
||||
el.onload = () => {
|
||||
v = repo.content;
|
||||
if (v.startsWith("\n")) {
|
||||
v = v.substring(1)
|
||||
v = v.substring(1);
|
||||
}
|
||||
|
||||
relpath = repo.path;
|
||||
relpermalink = repo.relpermalink
|
||||
protocol = document.location.protocol.substring(0,4)
|
||||
hases = Object.keys(METASP)
|
||||
Object.entries(repo.frontmatter).forEach(([fmKey,fmValue]) =>
|
||||
{
|
||||
let fmKeyType = ''
|
||||
relpermalink = repo.relpermalink;
|
||||
protocol = document.location.protocol.substring(0, 4);
|
||||
hases = Object.keys(METASP);
|
||||
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)
|
||||
fmKeyType = "triad";
|
||||
fmKey = fmKey.substr(4);
|
||||
}
|
||||
} else if (hases.includes(fmKey.toLowerCase())) {
|
||||
fmKeyType = 'ascriptions'
|
||||
fmKeyType = "ascriptions";
|
||||
} else if (["abstract", "keywords"].includes(fmKey.toLowerCase())) {
|
||||
fmKeyType = "journal";
|
||||
} else {
|
||||
fmKeyType = 'notSandpoints'
|
||||
fmKeyType = "notsand";
|
||||
}
|
||||
|
||||
if (['triad', 'ascriptions'].includes(fmKeyType)) {
|
||||
if (["triad", "ascriptions"].includes(fmKeyType)) {
|
||||
if (Array.isArray(fmValue)) {
|
||||
let tiers = []
|
||||
let candidates = []
|
||||
METASP[fmKey].tiers.forEach(t => {
|
||||
let tiers = [];
|
||||
let candidates = [];
|
||||
METASP[fmKey].tiers.forEach((t) => {
|
||||
if (fmValue.includes(t.file)) {
|
||||
tiers.push(t)
|
||||
tiers.push(t);
|
||||
} else {
|
||||
candidates.push(t)
|
||||
candidates.push(t);
|
||||
}
|
||||
})
|
||||
frontmatter[fmKeyType].push({'fmKey': fmKey, 'tiers': tiers, 'candidates': candidates})
|
||||
});
|
||||
frontmatter[fmKeyType].push({
|
||||
fmKey: fmKey,
|
||||
tiers: tiers,
|
||||
candidates: candidates,
|
||||
});
|
||||
}
|
||||
} else if (fmKeyType == "journal") {
|
||||
frontmatter["journal"] || (frontmatter["journal"] = []);
|
||||
frontmatter[fmKeyType].push({ fmKey: fmKey, fmValue: JSON.stringify(fmValue) });
|
||||
}
|
||||
}
|
||||
)
|
||||
hasesCandidates = diffArrr(hases, [...frontmatter['triad'].map(t => { return t.fmKey }), ...frontmatter['ascriptions'].map(t => { return t.fmKey })])
|
||||
});
|
||||
hasesCandidates = diffArrr(hases, [
|
||||
...frontmatter["triad"].map((t) => {
|
||||
return t.fmKey;
|
||||
}),
|
||||
...frontmatter["ascriptions"].map((t) => {
|
||||
return t.fmKey;
|
||||
}),
|
||||
]);
|
||||
|
||||
let tkey = Object.keys(repo.frontmatter).filter(t => t.toLowerCase() == "title")[0]
|
||||
title = repo.frontmatter[tkey]
|
||||
}
|
||||
el.src = `../js/repo/${location.hash.substring(1)}.js`
|
||||
document.body.appendChild(el)
|
||||
let tkey = Object.keys(repo.frontmatter).filter((t) => t.toLowerCase() == "title")[0];
|
||||
title = repo.frontmatter[tkey];
|
||||
};
|
||||
el.src = `../js/repo/${location.hash.substring(1)}.js`;
|
||||
document.body.appendChild(el);
|
||||
}
|
||||
|
||||
function addToCandidatesRemoveFromTiers(arrgs) {
|
||||
let [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]
|
||||
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) {
|
||||
let [fmKeyType, index, fmKey, value] = arrgs.detail;
|
||||
const tier = frontmatter[fmKeyType][index]['candidates'].filter(t => t.file == value)
|
||||
let [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])
|
||||
frontmatter[fmKeyType][index]["tiers"] = [...frontmatter[fmKeyType][index]["tiers"], tier[0]];
|
||||
frontmatter[fmKeyType][index]["candidates"] = frontmatter[fmKeyType][index]["candidates"].filter(
|
||||
(t) => t != tier[0]
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
onMount(()=> {loadHugoPageMetadata()})
|
||||
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");
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
loadHugoPageMetadata();
|
||||
console.dir(frontmatter);
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:window on:keyup={keyUp}/>
|
||||
<svelte:window on:keyup={keyUp} />
|
||||
<main id="sandpoints">
|
||||
<form>
|
||||
<SpTitle relpath={relpath} title={title} />
|
||||
<div class="formgrid">
|
||||
<SpTitle {relpath} {title} />
|
||||
</div>
|
||||
<div on:click={toggleFold} class="togglefold">[fold/unfold frontmatter]</div>
|
||||
<span id="frontmatter" class="fmHidden">
|
||||
{#each Object.entries(frontmatter) as fmItems}
|
||||
{#if ['ascriptions', 'triad'].includes(fmItems[0])}
|
||||
{#each fmItems[1] as fmItem, i}
|
||||
<SpKeys index={i} fmKeyType={fmItems[0]} fmItem={fmItem} hases={hases} hasesCandidates={hasesCandidates} on:hasTiersSelected={newHasTiers} />
|
||||
<SpTiers on:addToCandidatesRemoveFromTiers={addToCandidatesRemoveFromTiers} index={i} fmKeyType={fmItems[0]} fmItem={fmItem} />
|
||||
<SpCandidates on:addToTiersRemoveFromCandidates={addToTiersRemoveFromCandidates} index={i} fmKeyType={fmItems[0]} fmItem={fmItem} />
|
||||
{/each}
|
||||
{#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"}
|
||||
<label for={fmItem.fmKey}>{fmItem.fmKey}:</label>
|
||||
<input type="text" name="journal.fmKey" value={fmItem.fmValue} />
|
||||
{/if}
|
||||
{/each}
|
||||
{/each}
|
||||
</span>
|
||||
<div class="formgrid">
|
||||
<label for="content">Content:</label>
|
||||
<textarea bind:value={v} oninput='this.style.height = "";this.style.height = this.scrollHeight + 3 + "px"'></textarea>
|
||||
{#if document.location.protocol.substring(0,4) != "file"}
|
||||
<textarea
|
||||
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}
|
||||
|
|
@ -132,5 +198,6 @@
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script>
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { afterUpdate } from 'svelte';
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import { afterUpdate } from "svelte";
|
||||
export let index;
|
||||
export let fmItem;
|
||||
export let fmKeyType;
|
||||
|
|
@ -9,23 +9,34 @@
|
|||
const dispatch = createEventDispatcher();
|
||||
|
||||
afterUpdate(() => {
|
||||
let addnew = document.getElementById('addnew')
|
||||
let addnew = document.getElementById("addnew");
|
||||
if (addnew) {
|
||||
addnew.selected = 'selected';
|
||||
addnew.selected = "selected";
|
||||
}
|
||||
});
|
||||
|
||||
$: {
|
||||
dispatch("addToTiersRemoveFromCandidates", [fmKeyType, index, fmItem.fmKey, value])
|
||||
dispatch("addToTiersRemoveFromCandidates", [
|
||||
fmKeyType,
|
||||
index,
|
||||
fmItem.fmKey,
|
||||
value,
|
||||
]);
|
||||
value = 1;
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if fmItem.candidates && fmItem.candidates.length > 0}
|
||||
<select class="selecttier" bind:value>
|
||||
<select class="selecttier" bind:value>
|
||||
<option id="addnew" value="1" disabled selected>Add new...</option>
|
||||
{#each fmItem.candidates as tier (tier.file)}
|
||||
<option title="{tier.title}" value={tier.file}>{tier.file} {#if tier.title.length < 70}({tier.title}){:else}({tier.title.slice(0, 68) + '…'}){/if}</option>
|
||||
<option title={tier.title} value={tier.file}
|
||||
>{tier.file}
|
||||
{#if tier.title.length < 70}({tier.title}){:else}({tier.title.slice(
|
||||
0,
|
||||
68
|
||||
) + "…"}){/if}</option
|
||||
>
|
||||
{/each}
|
||||
</select>
|
||||
</select>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script>
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import { onMount } from "svelte";
|
||||
export let fmItem;
|
||||
export let fmKeyType;
|
||||
export let index;
|
||||
|
|
@ -9,28 +9,47 @@
|
|||
let value;
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
|
||||
function optselName(has) {
|
||||
return `_${has}_${fmKeyType}`
|
||||
return `_${has}_${fmKeyType}`;
|
||||
}
|
||||
|
||||
onMount(()=> {
|
||||
const selectEvent = document.getElementById(`${fmKeyType}_${fmItem.fmKey}`)
|
||||
onMount(() => {
|
||||
const selectEvent = document.getElementById(
|
||||
`${fmKeyType}_${fmItem.fmKey}`
|
||||
);
|
||||
if (selectEvent) {
|
||||
selectEvent.addEventListener('change', (e) => {
|
||||
dispatch("hasTiersSelected", [fmKeyType, index, fmItem.fmKey, e.target.value.split("_")[1]]);})
|
||||
selectEvent.addEventListener("change", (e) => {
|
||||
dispatch("hasTiersSelected", [
|
||||
fmKeyType,
|
||||
index,
|
||||
fmItem.fmKey,
|
||||
e.target.value.split("_")[1],
|
||||
]);
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<select id="{fmKeyType}_{fmItem.fmKey}" bind:value>
|
||||
{#each hases as has}
|
||||
{#if has == fmItem.fmKey}
|
||||
<option id="{optselName(has)}" class="hasoption" selected title="{has}" value={optselName(has)}>{'triad' == fmKeyType ? "Has ":""}{has}:</option>
|
||||
<option
|
||||
id={optselName(has)}
|
||||
class="hasoption"
|
||||
selected
|
||||
title={has}
|
||||
value={optselName(has)}
|
||||
>{"triad" == fmKeyType ? "Has " : ""}{has}:</option
|
||||
>
|
||||
{/if}
|
||||
{/each}
|
||||
{#each hasesCandidates as has}
|
||||
<option id="{optselName(has)}" class="hasoption" title="{has}" value={optselName(has)}>{'triad' == fmKeyType ? "Has ":""}{has}:</option>
|
||||
<option
|
||||
id={optselName(has)}
|
||||
class="hasoption"
|
||||
title={has}
|
||||
value={optselName(has)}
|
||||
>{"triad" == fmKeyType ? "Has " : ""}{has}:</option
|
||||
>
|
||||
{/each}
|
||||
</select>
|
||||
|
|
|
|||
|
|
@ -1,39 +1,54 @@
|
|||
<script>
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { createEventDispatcher } from "svelte";
|
||||
export let index;
|
||||
export let fmItem;
|
||||
export let fmKeyType;
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function removeTier(tier) {
|
||||
dispatch("addToCandidatesRemoveFromTiers", [fmKeyType, index, fmItem.fmKey, tier])
|
||||
dispatch("addToCandidatesRemoveFromTiers", [fmKeyType, index, fmItem.fmKey, tier]);
|
||||
}
|
||||
|
||||
function swapTier(tier, n) {
|
||||
fmItem.tiers.some((t, i)=> {
|
||||
if (t==tier) {
|
||||
fmItem.tiers[i] = fmItem.tiers[i+n]
|
||||
fmItem.tiers[i+n] = tier
|
||||
return true
|
||||
fmItem.tiers.some((t, i) => {
|
||||
if (t == tier) {
|
||||
fmItem.tiers[i] = fmItem.tiers[i + n];
|
||||
fmItem.tiers[i + n] = tier;
|
||||
return true;
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
{#if fmItem.tiers && fmItem.tiers.length >0}
|
||||
{#if fmItem.tiers && fmItem.tiers.length > 0}
|
||||
<div class="tierbox">
|
||||
{#each fmItem.tiers as tier, i (tier.file)}
|
||||
<div class="tierline">
|
||||
<div class="filetitle">
|
||||
<input readonly type="text" name="{'triad' == fmKeyType ? "has_":"" }{fmItem.fmKey}[]" class="hasinput" value="{tier.file}"><span class="tiertitle">({tier.title})</span>
|
||||
<input
|
||||
readonly
|
||||
type="text"
|
||||
name="{'triad' == fmKeyType ? 'has_' : ''}{fmItem.fmKey}[]"
|
||||
class="hasinput"
|
||||
value={tier.file}
|
||||
/><span class="tiertitle">({tier.title})</span>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button type="button" class="buttondown" on:click="{swapTier(tier, 1)}" disabled={i+1 == fmItem.tiers.length ? true:false}>⇓</button>
|
||||
<button type="button" class="buttonup" on:click="{swapTier(tier, -1)}" disabled={i == 0 ? true:false}>⇑</button>
|
||||
<button type="button" on:click="{removeTier(tier)}">×</button>
|
||||
<button
|
||||
type="button"
|
||||
class="buttondown"
|
||||
on:click={swapTier(tier, 1)}
|
||||
disabled={i + 1 == fmItem.tiers.length ? true : false}>⇓</button
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="buttonup"
|
||||
on:click={swapTier(tier, -1)}
|
||||
disabled={i == 0 ? true : false}>⇑</button
|
||||
>
|
||||
<button type="button" on:click={removeTier(tier)}>×</button>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,6 @@
|
|||
</script>
|
||||
|
||||
<label for="relpath">File path:</label>
|
||||
<input type="text" name="relpath" value="{relpath}">
|
||||
<input type="text" name="relpath" value={relpath} />
|
||||
<label for="title">Title:</label>
|
||||
<input type="text" name="title" value="{title}">
|
||||
<input type="text" name="title" value={title} />
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue