add and remove fmItems from the form...
This commit is contained in:
parent
6339510cb8
commit
b56620686f
2 changed files with 131 additions and 62 deletions
|
|
@ -42,14 +42,19 @@ input:disabled {
|
||||||
|
|
||||||
button {
|
button {
|
||||||
color: #333;
|
color: #333;
|
||||||
background-color: #f4f4f4;
|
background-color: #f4f4f463;
|
||||||
outline: none;
|
outline: none;
|
||||||
|
padding: 0.1rem 0.1rem;
|
||||||
|
margin-left: 0.3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:disabled {
|
button:disabled {
|
||||||
color: #999;
|
color: #999;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
button:disabled:hover {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
.button {
|
.button {
|
||||||
color: #333;
|
color: #333;
|
||||||
background-color: #f4f4f4;
|
background-color: #f4f4f4;
|
||||||
|
|
@ -67,6 +72,9 @@ button:focus {
|
||||||
border-color: #666;
|
border-color: #666;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
/* custom part */
|
/* custom part */
|
||||||
|
|
||||||
.formgrid {
|
.formgrid {
|
||||||
|
|
@ -160,11 +168,29 @@ select {
|
||||||
}
|
}
|
||||||
|
|
||||||
.fmShown {
|
.fmShown {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fmMetaTitle {
|
||||||
|
margin-bottom: 0.3rem;
|
||||||
|
text-transform: capitalize;
|
||||||
|
display: block;
|
||||||
|
background: #00000008;
|
||||||
|
text-align: right;
|
||||||
|
font-size: smaller;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fmMeta {
|
||||||
|
border-bottom: 2px #0000001a solid;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
background: #ffffff1c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fmItem {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: auto 1fr;
|
grid-template-columns: auto 1fr;
|
||||||
grid-gap: 1rem;
|
grid-gap: 1rem;
|
||||||
padding-bottom: 1rem;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.fmCollapse, .fmExpand {
|
.fmCollapse, .fmExpand {
|
||||||
|
|
@ -185,6 +211,7 @@ select {
|
||||||
|
|
||||||
#fmicon, #frontmatter, input.hasinput {
|
#fmicon, #frontmatter, input.hasinput {
|
||||||
background-color: #ffccbc;
|
background-color: #ffccbc;
|
||||||
|
padding-right: 0.3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.newtiers {
|
.newtiers {
|
||||||
|
|
|
||||||
160
src/App.svelte
160
src/App.svelte
|
|
@ -14,7 +14,7 @@
|
||||||
let hasesCandidates = [];
|
let hasesCandidates = [];
|
||||||
let frontmatter = {};
|
let frontmatter = {};
|
||||||
frontmatter["triad"] = [];
|
frontmatter["triad"] = [];
|
||||||
frontmatter["ascriptions"] = [];
|
frontmatter["ascription"] = [];
|
||||||
frontmatter["notsand"] = [];
|
frontmatter["notsand"] = [];
|
||||||
|
|
||||||
function keyUp(e) {
|
function keyUp(e) {
|
||||||
|
|
@ -28,7 +28,7 @@
|
||||||
...frontmatter["triad"].map((t) => {
|
...frontmatter["triad"].map((t) => {
|
||||||
return t.fmKey;
|
return t.fmKey;
|
||||||
}),
|
}),
|
||||||
...frontmatter["ascriptions"].map((t) => {
|
...frontmatter["ascription"].map((t) => {
|
||||||
return t.fmKey;
|
return t.fmKey;
|
||||||
}),
|
}),
|
||||||
]);
|
]);
|
||||||
|
|
@ -46,21 +46,21 @@
|
||||||
let tiers = [];
|
let tiers = [];
|
||||||
let candidates = [];
|
let candidates = [];
|
||||||
if (fmKey == "_new") {
|
if (fmKey == "_new") {
|
||||||
hasesCandidates = [... new Set(reckonHasesCandidates())]
|
hasesCandidates = [...new Set(reckonHasesCandidates())];
|
||||||
if (hasesCandidates.length > 0) {
|
if (hasesCandidates.length > 0) {
|
||||||
fmKey = hasesCandidates[0]
|
fmKey = hasesCandidates[0];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (fmKey != "_new") {
|
if (fmKey != "_new") {
|
||||||
if (fmValue) {
|
if (fmValue) {
|
||||||
METASP[fmKey].tiers.forEach((t) => {
|
METASP[fmKey].tiers.forEach((t) => {
|
||||||
if (fmValue.includes(t.file)) {
|
if (fmValue.includes(t.file)) {
|
||||||
tiers.push(t);
|
tiers.push(t);
|
||||||
} else {
|
} else {
|
||||||
candidates.push(t);
|
candidates.push(t);
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
} else {
|
} else {
|
||||||
tiers = [];
|
tiers = [];
|
||||||
candidates = METASP[fmKey].tiers;
|
candidates = METASP[fmKey].tiers;
|
||||||
|
|
@ -72,8 +72,8 @@
|
||||||
});
|
});
|
||||||
frontmatter = { ...frontmatter };
|
frontmatter = { ...frontmatter };
|
||||||
}
|
}
|
||||||
hasesCandidates = [... new Set(reckonHasesCandidates())]
|
hasesCandidates = [...new Set(reckonHasesCandidates())];
|
||||||
toggleNewTiersButtons()
|
toggleNewTiersButtons();
|
||||||
}
|
}
|
||||||
|
|
||||||
function loadHugoPageMetadata(editHash) {
|
function loadHugoPageMetadata(editHash) {
|
||||||
|
|
@ -97,14 +97,14 @@
|
||||||
fmKey = fmKey.substr(4);
|
fmKey = fmKey.substr(4);
|
||||||
}
|
}
|
||||||
} else if (hases.includes(fmKey.toLowerCase())) {
|
} else if (hases.includes(fmKey.toLowerCase())) {
|
||||||
fmKeyType = "ascriptions";
|
fmKeyType = "ascription";
|
||||||
} else if (["abstract", "keywords"].includes(fmKey.toLowerCase())) {
|
} else if (["abstract", "keywords"].includes(fmKey.toLowerCase())) {
|
||||||
fmKeyType = "journal";
|
fmKeyType = "journal";
|
||||||
} else {
|
} else {
|
||||||
fmKeyType = "notsand";
|
fmKeyType = "notsand";
|
||||||
}
|
}
|
||||||
|
|
||||||
if (["triad", "ascriptions"].includes(fmKeyType)) {
|
if (["triad", "ascription"].includes(fmKeyType)) {
|
||||||
if (Array.isArray(fmValue)) {
|
if (Array.isArray(fmValue)) {
|
||||||
newTier(fmKeyType, fmKey, fmValue);
|
newTier(fmKeyType, fmKey, fmValue);
|
||||||
}
|
}
|
||||||
|
|
@ -149,6 +149,19 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function fmItemDottedBorder(e) {
|
||||||
|
e.target.parentNode.parentNode.style.border = "2px #ff000075 dotted";
|
||||||
|
}
|
||||||
|
|
||||||
|
function fmItemNoBorder(e) {
|
||||||
|
e.target.parentNode.parentNode.style.border = "0px";
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeTier(fmKey, fmValue) {
|
||||||
|
frontmatter[fmKey] = frontmatter[fmKey].filter((v) => v["fmKey"] != fmValue["fmKey"]);
|
||||||
|
toggleNewTiersButtons();
|
||||||
|
}
|
||||||
|
|
||||||
function toggleFold() {
|
function toggleFold() {
|
||||||
let e = document.getElementById("frontmatter");
|
let e = document.getElementById("frontmatter");
|
||||||
if (e && e.classList.contains("fmHidden")) {
|
if (e && e.classList.contains("fmHidden")) {
|
||||||
|
|
@ -168,24 +181,24 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleNewTiersButtons() {
|
function toggleNewTiersButtons() {
|
||||||
hasesCandidates = [... new Set(reckonHasesCandidates())]
|
hasesCandidates = [...new Set(reckonHasesCandidates())];
|
||||||
|
|
||||||
if (hasesCandidates.length == 0) {
|
if (hasesCandidates.length == 0) {
|
||||||
document.querySelectorAll(".newtiers").forEach((button)=> {
|
document.querySelectorAll(".newtiers").forEach((button) => {
|
||||||
button.style.display = "none";
|
button.style.display = "none";
|
||||||
})
|
});
|
||||||
} else {
|
} else {
|
||||||
document.querySelectorAll(".newtiers").forEach((button)=> {
|
document.querySelectorAll(".newtiers").forEach((button) => {
|
||||||
button.style.display = "block";
|
button.style.display = "block";
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
const ct = Object.entries(frontmatter).filter((i) => i[1].length == 0 && i[0] == "triad")[0];
|
const ct = Object.entries(frontmatter).filter((i) => i[1].length == 0 && i[0] == "triad")[0];
|
||||||
if (!ct) {
|
if (!ct) {
|
||||||
document.getElementById("newtriad").style.display = "none";
|
document.getElementById("newtriad").style.display = "none";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function dispatchHash() {
|
function dispatchHash() {
|
||||||
const searchParams = new URLSearchParams(location.search);
|
const searchParams = new URLSearchParams(location.search);
|
||||||
|
|
@ -194,17 +207,17 @@
|
||||||
loadHugoPageMetadata(editHash);
|
loadHugoPageMetadata(editHash);
|
||||||
} else {
|
} else {
|
||||||
let newPage = searchParams.get("new");
|
let newPage = searchParams.get("new");
|
||||||
console.log({newPage});
|
console.log({ newPage });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
dispatchHash();
|
dispatchHash();
|
||||||
// loadHugoPageMetadata();
|
// loadHugoPageMetadata();
|
||||||
console.dir({frontmatter});
|
console.dir({ frontmatter });
|
||||||
});
|
});
|
||||||
|
|
||||||
$: hashChanged = () => dispatchHash();
|
$: hashChanged = () => dispatchHash();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:window on:keyup={keyUp} on:hashchange={hashChanged} />
|
<svelte:window on:keyup={keyUp} on:hashchange={hashChanged} />
|
||||||
|
|
@ -217,36 +230,65 @@
|
||||||
<span id="frontmatter" class="fmHidden">
|
<span id="frontmatter" class="fmHidden">
|
||||||
{#each Object.entries(frontmatter) as fmItems}
|
{#each Object.entries(frontmatter) as fmItems}
|
||||||
{#each fmItems[1] as fmItem, i}
|
{#each fmItems[1] as fmItem, i}
|
||||||
{#if ["ascriptions", "triad"].includes(fmItems[0])}
|
{#if ["ascription", "triad"].includes(fmItems[0])}
|
||||||
<SpKeys
|
<div class="fmMeta">
|
||||||
index={i}
|
<div class="fmMetaTitle">
|
||||||
fmKeyType={fmItems[0]}
|
{fmItems[0]}<button
|
||||||
{fmItem}
|
type="button"
|
||||||
{hases}
|
on:click={() => removeTier(fmItems[0], fmItem)}
|
||||||
{hasesCandidates}
|
on:mouseover={fmItemDottedBorder}
|
||||||
on:hasTiersSelected={newTier}
|
on:mouseout={fmItemNoBorder}>×</button
|
||||||
|
>
|
||||||
/>
|
</div>
|
||||||
<SpTiers
|
<div class="fmItem">
|
||||||
on:addToCandidatesRemoveFromTiers={addToCandidatesRemoveFromTiers}
|
<SpKeys
|
||||||
index={i}
|
index={i}
|
||||||
fmKeyType={fmItems[0]}
|
fmKeyType={fmItems[0]}
|
||||||
{fmItem}
|
{fmItem}
|
||||||
/>
|
{hases}
|
||||||
<SpCandidates
|
{hasesCandidates}
|
||||||
on:addToTiersRemoveFromCandidates={addToTiersRemoveFromCandidates}
|
on:hasTiersSelected={newTier}
|
||||||
index={i}
|
/>
|
||||||
fmKeyType={fmItems[0]}
|
<SpTiers
|
||||||
{fmItem}
|
on:addToCandidatesRemoveFromTiers={addToCandidatesRemoveFromTiers}
|
||||||
/>
|
index={i}
|
||||||
|
fmKeyType={fmItems[0]}
|
||||||
|
{fmItem}
|
||||||
|
/>
|
||||||
|
<SpCandidates
|
||||||
|
on:addToTiersRemoveFromCandidates={addToTiersRemoveFromCandidates}
|
||||||
|
index={i}
|
||||||
|
fmKeyType={fmItems[0]}
|
||||||
|
{fmItem}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
{:else if fmItems[0] == "journal"}
|
{:else if fmItems[0] == "journal"}
|
||||||
<SpJournal {fmItem} />
|
<div class="fmMeta">
|
||||||
|
<div class="fmMetaTitle">
|
||||||
|
{fmItems[0]}<button
|
||||||
|
type="button"
|
||||||
|
on:click={() => removeTier(fmItems[0], fmItem)}
|
||||||
|
on:mouseover={fmItemDottedBorder}
|
||||||
|
on:mouseout={fmItemNoBorder}>×</button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="fmItem">
|
||||||
|
<SpJournal {fmItem} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{/each}
|
{/each}
|
||||||
{/each}
|
{/each}
|
||||||
<div class="buttons news">
|
<div class="buttons news">
|
||||||
<div id="newtriad" class="newtiers button" on:click={()=> newTier("triad", "_new", null)}>NEW TIER</div>
|
<div id="newtriad" class="newtiers button" on:click={() => newTier("triad", "_new", null)}>
|
||||||
<div id="newascription" class="newtiers button" on:click={() => newTier("ascriptions", "_new", null)}>
|
NEW TIER
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
id="newascription"
|
||||||
|
class="newtiers button"
|
||||||
|
on:click={() => newTier("ascription", "_new", null)}
|
||||||
|
>
|
||||||
NEW ASCRIPTION
|
NEW ASCRIPTION
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue