Drawwell/SandpointsEditPage
Drawwell
/
SandpointsEditPage
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

more of a form stuff...

This commit is contained in:
Marcell Mars 2021-06-02 02:02:20 +02:00
parent 46a4decd1e
commit b0f35832ec
5 changed files with 123 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
public/global.css
View File

@ -72,12 +72,12 @@ form {
margin-top: 1rem;
}
label {
label, .filepath {
grid-column: 1/2;
text-transform: capitalize;
}
input, button, textarea, .selecttier {
input, button, textarea, .selecttier, .relpath {
grid-column: 2/3;
}
@ -99,6 +99,7 @@ textarea {
.tierline {
display: flex;
align-items: baseline;
}
.tiertitle {
@ -110,3 +111,38 @@ textarea {
margin-left: auto;
padding-left: 0.2rem;
}
select {
align-self: start;
border: 0;
padding: 0.1rem;
}
.selecttier {
margin-top: 0.5rem;
}
.buttons button {
border: solid #999 1px;
padding: 0;
padding-left: 0.1rem;
padding-right: 0.1rem;
margin: 1px;
}
.filepath {
font-size: large;
font-style: italic;
margin-bottom: 1rem;
}
.relpath {
font-size: large;
font-weight: bold;
}
.tierbox, #selecthas {
margin-top: 0.5rem;
}

99
src/App.svelte
View File

@ -9,12 +9,12 @@
let relpermalink = "";
let protocol = "";
let title = "Foo bar";
let tiers = [];
let tier = {};
let hastiers = "";
let candidates = [];
let hases = [];
let frontmatter = {}
frontmatter['triad'] = {};
frontmatter['ascriptions'] = {};
function keyUp(e) {
if (e.key == "Escape") {
window.history.back()
@ -29,14 +29,12 @@
return Array.from(diff)
}
function newHasTiers(h) {
hastiers = h.detail.substring(1)
tiers = []
if (hastiers != "Has new") {
candidates = METASP[hastiers].tiers
}
function newHasTiers(arrgs) {
let [fmKeyType, oldFmKey, newFmKey] = arrgs.detail;
frontmatter[fmKeyType][oldFmKey]['candidates'] = METASP[newFmKey].tiers;
frontmatter[fmKeyType][oldFmKey]['tiers'] = [];
}
function loadHugoPageMetadata() {
var el = document.createElement('script');
el.onload = ()=> {
@ -49,40 +47,55 @@
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)
}
} else if (hases.includes(fmKey.toLowerCase())) {
fmKeyType = 'ascriptions'
}
if (fmKeyType != "") {
if (Array.isArray(fmValue)) {
METASP[fmKey].tiers.forEach(t => {
(fmKey in frontmatter[fmKeyType]) || (frontmatter[fmKeyType][fmKey] = {});
('tiers' in frontmatter[fmKeyType][fmKey]) || (frontmatter[fmKeyType][fmKey]['tiers'] = []);
('candidates' in frontmatter[fmKeyType][fmKey]) || (frontmatter[fmKeyType][fmKey]['candidates'] = []);
if (fmValue.includes(t.file)) {
frontmatter[fmKeyType][fmKey]['tiers'].push(t)
} else {
frontmatter[fmKeyType][fmKey]['candidates'].push(t)
}
})
}
}
}
)
let tkey = Object.keys(repo.frontmatter).filter(t => t.toLowerCase() == "title")[0]
title = repo.frontmatter[tkey]
let xastiers = Object.keys(repo.frontmatter).filter(t => t.toLowerCase().startsWith("has_"))
if (xastiers.length == 1) {
hastiers = xastiers[0].substr(4)
tiers = []
repo.frontmatter[xastiers[0]].forEach(t => {
METASP[hastiers].tiers.forEach(f => {
if (f.file == t) {
tiers.push(f)
}
})
})
candidates = diffArrr(METASP[hastiers].tiers, tiers)
}
}
el.src = `../js/repo/${location.hash.substring(1)}.js`
document.body.appendChild(el)
}
function addToCandidatesRemoveFromTiers(tier) {
console.log("addToCandidates", tier.detail)
tiers = tiers.filter(t => t !== tier.detail);
candidates = [...candidates, tier.detail]
function addToCandidatesRemoveFromTiers(arrgs) {
const [tier, fmKeyType, fmKey] = arrgs.detail
frontmatter[fmKeyType][fmKey]['tiers'] = frontmatter[fmKeyType][fmKey]['tiers'].filter(t => t !== tier);
frontmatter[fmKeyType][fmKey]['candidates'] = [...frontmatter[fmKeyType][fmKey]['candidates'], tier]
}
function addToTiersRemoveFromCandidates(v) {
console.log("addToTiers", v.detail)
let value = v.detail
const tier = candidates.filter(t => t.file == value)
if (tier.length > 0) {
tiers = [...tiers, tier[0]]
candidates = candidates.filter(t=> t != tier[0])
}
function addToTiersRemoveFromCandidates(arrgs) {
const [value, fmKeyType, fmKey] = arrgs.detail
const tier = frontmatter[fmKeyType][fmKey]['candidates'].filter(t => t.file == value)
if (tier.length > 0) {
frontmatter[fmKeyType][fmKey]['tiers'] = [...frontmatter[fmKeyType][fmKey]['tiers'], tier[0]]
frontmatter[fmKeyType][fmKey]['candidates'] = frontmatter[fmKeyType][fmKey]['candidates'].filter(t=> t != tier[0])
}
}
onMount(()=> {loadHugoPageMetadata()})
@ -92,9 +105,15 @@
<main id="sandpoints">
<form>
<SpTitle relpath={relpath} title={title} />
<SpHasWhat on:hasTiersSelected={newHasTiers} hases={hases} hastiers={hastiers} />
<SpHasTiers on:addToCandidatesRemoveFromTiers={addToCandidatesRemoveFromTiers} hastiers={hastiers} candidates={candidates} tiers={tiers}/>
<SpHasCandidates on:addToTiersRemoveFromCandidates={addToTiersRemoveFromCandidates} candidates={candidates} />
{#each Object.entries(frontmatter) as fmItems}
{#if ['ascriptions', 'triad'].includes(fmItems[0])}
{#each Object.entries(fmItems[1]) as fmItem}
<SpHasWhat fmKeyType="{fmItems[0]}" fmKey="{fmItem[0] || ''}" fmValues={fmItem[1]} hases={hases} on:hasTiersSelected={newHasTiers} />
<SpHasTiers on:addToCandidatesRemoveFromTiers={addToCandidatesRemoveFromTiers} fmKeyType="{fmItems[0]}" fmKey={fmItem[0] || ''} tiers={fmItem[1].tiers || []} />
<SpHasCandidates on:addToTiersRemoveFromCandidates={addToTiersRemoveFromCandidates} fmKeyType="{fmItems[0]}" fmKey={fmItem[0] || ''} candidates={fmItem[1].candidates || []} />
{/each}
{/if}
{/each}
<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"}

6
src/SpHasCandidates.svelte
View File

@ -2,6 +2,8 @@
import { createEventDispatcher } from 'svelte';
import { afterUpdate } from 'svelte';
export let candidates;
export let fmKeyType;
export let fmKey;
export let value;
const dispatch = createEventDispatcher();
@ -14,12 +16,12 @@
});
$: {
dispatch("addToTiersRemoveFromCandidates", value)
dispatch("addToTiersRemoveFromCandidates", [value, fmKeyType, fmKey])
value = 1;
}
</script>
{#if candidates.length > 0}
{#if candidates && candidates.length > 0}
<select class="selecttier" bind:value>
<option id="addnew" value="1" disabled selected>Add new...</option>
{#each candidates as tier (tier.file)}

11
src/SpHasTiers.svelte
View File

@ -1,11 +1,12 @@
<script>
import { createEventDispatcher } from 'svelte';
export let hastiers;
export let tiers;
export let fmKey;
export let fmKeyType;
const dispatch = createEventDispatcher();
function removeTier(tier) {
dispatch("addToCandidatesRemoveFromTiers", tier)
dispatch("addToCandidatesRemoveFromTiers", [tier, fmKeyType, fmKey])
}
function swapTier(tier, n) {
@ -20,12 +21,12 @@
</script>
{#if tiers.length >0}
<div class="tierbox">
{#if tiers && tiers.length >0}
<div class="tierbox">
{#each tiers as tier, i (tier.file)}
<div class="tierline">
<div class="filetitle">
<input readonly type="text" name="has_{hastiers}[]" class="hasinput" value="{tier.file}"><span class="tiertitle">({tier.title})</span>
<input readonly type="text" name="{'triad' == fmKey ? "has_":"" }{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 == tiers.length ? true:false}>⇓</button>

36
src/SpHasWhat.svelte
View File

@ -1,35 +1,31 @@
<script>
import { createEventDispatcher } from 'svelte';
import { afterUpdate } from 'svelte';
export let fmKeyType;
export let fmKey;
export let fmValues;
export let hases;
export let hastiers;
let value;
let toggleFmKey = ''
const dispatch = createEventDispatcher();
afterUpdate(() => {
let optsel = document.getElementById('hasNew')
if (hastiers=="" && optsel) {
optsel.selected = 'selected';
optsel.disabled = 'disabled'
} else if (hastiers != "") {
let optsel = document.getElementById('_' + hastiers)
optsel.selected = 'selected'
}
});
function optselName(has) {
return `_${has}_${fmKeyType}`
}
$: {
console.log("hases", hases)
if (value && value.startsWith("_")) {
dispatch("hasTiersSelected", value)
if (value && value.split("_")[1] != fmKey) {
toggleFmKey = fmKey;
dispatch("hasTiersSelected", [fmKeyType, fmKey, value.split("_")[1]])
} else if (toggleFmKey == fmKey) {
dispatch("hasTiersSelected", [fmKeyType, fmKey, value.split("_")[1]])
toggleFmKey = ''
}
}
</script>
<select id="selecthas" bind:value>
{#if hastiers == ""}
<option id="hasNew" title="Has new" value="hasNew">Has new...</option>
{/if}
<select class="{fmKeyType}_{fmKey}" bind:value>
{#each hases as has}
<option id="{'_' + has}" class="hasoption" title="{has}" value={'_' + has}>Has {has}:</option>
<option id="{optselName(has)}" class="hasoption" selected={has == fmKey ? "selected":""} title="{has}" value={optselName(has)}>{'triad' == fmKeyType ? "Has ":""}{has}:</option>
{/each}
</select>