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 {
|
||||
color: #333;
|
||||
background-color: #f4f4f4;
|
||||
background-color: #f4f4f463;
|
||||
outline: none;
|
||||
padding: 0.1rem 0.1rem;
|
||||
margin-left: 0.3rem;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
button:disabled:hover {
|
||||
cursor: default;
|
||||
}
|
||||
.button {
|
||||
color: #333;
|
||||
background-color: #f4f4f4;
|
||||
|
|
@ -67,6 +72,9 @@ button:focus {
|
|||
border-color: #666;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
/* custom part */
|
||||
|
||||
.formgrid {
|
||||
|
|
@ -160,11 +168,29 @@ select {
|
|||
}
|
||||
|
||||
.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;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-gap: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.fmCollapse, .fmExpand {
|
||||
|
|
@ -185,6 +211,7 @@ select {
|
|||
|
||||
#fmicon, #frontmatter, input.hasinput {
|
||||
background-color: #ffccbc;
|
||||
padding-right: 0.3rem;
|
||||
}
|
||||
|
||||
.newtiers {
|
||||
|
|
|
|||
160
src/App.svelte
160
src/App.svelte
|
|
@ -14,7 +14,7 @@
|
|||
let hasesCandidates = [];
|
||||
let frontmatter = {};
|
||||
frontmatter["triad"] = [];
|
||||
frontmatter["ascriptions"] = [];
|
||||
frontmatter["ascription"] = [];
|
||||
frontmatter["notsand"] = [];
|
||||
|
||||
function keyUp(e) {
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
...frontmatter["triad"].map((t) => {
|
||||
return t.fmKey;
|
||||
}),
|
||||
...frontmatter["ascriptions"].map((t) => {
|
||||
...frontmatter["ascription"].map((t) => {
|
||||
return t.fmKey;
|
||||
}),
|
||||
]);
|
||||
|
|
@ -46,21 +46,21 @@
|
|||
let tiers = [];
|
||||
let candidates = [];
|
||||
if (fmKey == "_new") {
|
||||
hasesCandidates = [... new Set(reckonHasesCandidates())]
|
||||
hasesCandidates = [...new Set(reckonHasesCandidates())];
|
||||
if (hasesCandidates.length > 0) {
|
||||
fmKey = hasesCandidates[0]
|
||||
fmKey = hasesCandidates[0];
|
||||
}
|
||||
}
|
||||
|
||||
if (fmKey != "_new") {
|
||||
if (fmValue) {
|
||||
METASP[fmKey].tiers.forEach((t) => {
|
||||
if (fmValue.includes(t.file)) {
|
||||
tiers.push(t);
|
||||
} else {
|
||||
candidates.push(t);
|
||||
}
|
||||
})
|
||||
METASP[fmKey].tiers.forEach((t) => {
|
||||
if (fmValue.includes(t.file)) {
|
||||
tiers.push(t);
|
||||
} else {
|
||||
candidates.push(t);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
tiers = [];
|
||||
candidates = METASP[fmKey].tiers;
|
||||
|
|
@ -72,8 +72,8 @@
|
|||
});
|
||||
frontmatter = { ...frontmatter };
|
||||
}
|
||||
hasesCandidates = [... new Set(reckonHasesCandidates())]
|
||||
toggleNewTiersButtons()
|
||||
hasesCandidates = [...new Set(reckonHasesCandidates())];
|
||||
toggleNewTiersButtons();
|
||||
}
|
||||
|
||||
function loadHugoPageMetadata(editHash) {
|
||||
|
|
@ -97,14 +97,14 @@
|
|||
fmKey = fmKey.substr(4);
|
||||
}
|
||||
} else if (hases.includes(fmKey.toLowerCase())) {
|
||||
fmKeyType = "ascriptions";
|
||||
fmKeyType = "ascription";
|
||||
} else if (["abstract", "keywords"].includes(fmKey.toLowerCase())) {
|
||||
fmKeyType = "journal";
|
||||
} else {
|
||||
fmKeyType = "notsand";
|
||||
}
|
||||
|
||||
if (["triad", "ascriptions"].includes(fmKeyType)) {
|
||||
if (["triad", "ascription"].includes(fmKeyType)) {
|
||||
if (Array.isArray(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() {
|
||||
let e = document.getElementById("frontmatter");
|
||||
if (e && e.classList.contains("fmHidden")) {
|
||||
|
|
@ -168,24 +181,24 @@
|
|||
}
|
||||
}
|
||||
|
||||
function toggleNewTiersButtons() {
|
||||
hasesCandidates = [... new Set(reckonHasesCandidates())]
|
||||
function toggleNewTiersButtons() {
|
||||
hasesCandidates = [...new Set(reckonHasesCandidates())];
|
||||
|
||||
if (hasesCandidates.length == 0) {
|
||||
document.querySelectorAll(".newtiers").forEach((button)=> {
|
||||
button.style.display = "none";
|
||||
})
|
||||
} else {
|
||||
document.querySelectorAll(".newtiers").forEach((button)=> {
|
||||
button.style.display = "block";
|
||||
})
|
||||
}
|
||||
if (hasesCandidates.length == 0) {
|
||||
document.querySelectorAll(".newtiers").forEach((button) => {
|
||||
button.style.display = "none";
|
||||
});
|
||||
} else {
|
||||
document.querySelectorAll(".newtiers").forEach((button) => {
|
||||
button.style.display = "block";
|
||||
});
|
||||
}
|
||||
|
||||
const ct = Object.entries(frontmatter).filter((i) => i[1].length == 0 && i[0] == "triad")[0];
|
||||
if (!ct) {
|
||||
document.getElementById("newtriad").style.display = "none";
|
||||
}
|
||||
}
|
||||
const ct = Object.entries(frontmatter).filter((i) => i[1].length == 0 && i[0] == "triad")[0];
|
||||
if (!ct) {
|
||||
document.getElementById("newtriad").style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
function dispatchHash() {
|
||||
const searchParams = new URLSearchParams(location.search);
|
||||
|
|
@ -194,17 +207,17 @@
|
|||
loadHugoPageMetadata(editHash);
|
||||
} else {
|
||||
let newPage = searchParams.get("new");
|
||||
console.log({newPage});
|
||||
console.log({ newPage });
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
dispatchHash();
|
||||
// loadHugoPageMetadata();
|
||||
console.dir({frontmatter});
|
||||
console.dir({ frontmatter });
|
||||
});
|
||||
|
||||
$: hashChanged = () => dispatchHash();
|
||||
$: hashChanged = () => dispatchHash();
|
||||
</script>
|
||||
|
||||
<svelte:window on:keyup={keyUp} on:hashchange={hashChanged} />
|
||||
|
|
@ -217,36 +230,65 @@
|
|||
<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={newTier}
|
||||
|
||||
/>
|
||||
<SpTiers
|
||||
on:addToCandidatesRemoveFromTiers={addToCandidatesRemoveFromTiers}
|
||||
index={i}
|
||||
fmKeyType={fmItems[0]}
|
||||
{fmItem}
|
||||
/>
|
||||
<SpCandidates
|
||||
on:addToTiersRemoveFromCandidates={addToTiersRemoveFromCandidates}
|
||||
index={i}
|
||||
fmKeyType={fmItems[0]}
|
||||
{fmItem}
|
||||
/>
|
||||
{#if ["ascription", "triad"].includes(fmItems[0])}
|
||||
<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">
|
||||
<SpKeys
|
||||
index={i}
|
||||
fmKeyType={fmItems[0]}
|
||||
{fmItem}
|
||||
{hases}
|
||||
{hasesCandidates}
|
||||
on:hasTiersSelected={newTier}
|
||||
/>
|
||||
<SpTiers
|
||||
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"}
|
||||
<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}
|
||||
{/each}
|
||||
{/each}
|
||||
<div class="buttons news">
|
||||
<div id="newtriad" class="newtiers button" on:click={()=> newTier("triad", "_new", null)}>NEW TIER</div>
|
||||
<div id="newascription" class="newtiers button" on:click={() => newTier("ascriptions", "_new", null)}>
|
||||
<div id="newtriad" class="newtiers button" on:click={() => newTier("triad", "_new", null)}>
|
||||
NEW TIER
|
||||
</div>
|
||||
<div
|
||||
id="newascription"
|
||||
class="newtiers button"
|
||||
on:click={() => newTier("ascription", "_new", null)}
|
||||
>
|
||||
NEW ASCRIPTION
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue