more of a form stuff...

public/global.css

@@ -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;
+}
+
+

src/App.svelte

@@ -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) {
+ function newHasTiers(arrgs) {
-   hastiers = h.detail.substring(1)
+   let [fmKeyType, oldFmKey, newFmKey] = arrgs.detail;
-   tiers = []
+   frontmatter[fmKeyType][oldFmKey]['candidates'] = METASP[newFmKey].tiers;
-   if (hastiers != "Has new") {
+   frontmatter[fmKeyType][oldFmKey]['tiers'] = [];
-     candidates = METASP[hastiers].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) {
+ function addToCandidatesRemoveFromTiers(arrgs) {
-   console.log("addToCandidates", tier.detail)
+   const [tier, fmKeyType, fmKey] = arrgs.detail
-   tiers = tiers.filter(t => t !== tier.detail);
+   frontmatter[fmKeyType][fmKey]['tiers'] = frontmatter[fmKeyType][fmKey]['tiers'].filter(t => t !== tier);
-   candidates = [...candidates, tier.detail]
+   frontmatter[fmKeyType][fmKey]['candidates'] = [...frontmatter[fmKeyType][fmKey]['candidates'], tier]
  }
 
- function addToTiersRemoveFromCandidates(v) {
+ function addToTiersRemoveFromCandidates(arrgs) {
-   console.log("addToTiers", v.detail)
+   const [value, fmKeyType, fmKey] = arrgs.detail
-   let value = v.detail
+   const tier = frontmatter[fmKeyType][fmKey]['candidates'].filter(t => t.file == value)
-     const tier = candidates.filter(t => t.file == value)
+   if (tier.length > 0) {
-     if (tier.length > 0) {
+     frontmatter[fmKeyType][fmKey]['tiers'] = [...frontmatter[fmKeyType][fmKey]['tiers'], tier[0]]
-       tiers = [...tiers, tier[0]]
+     frontmatter[fmKeyType][fmKey]['candidates'] = frontmatter[fmKeyType][fmKey]['candidates'].filter(t=> t != tier[0])
-       candidates = 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} />
+    {#each Object.entries(frontmatter) as fmItems}
-    <SpHasTiers on:addToCandidatesRemoveFromTiers={addToCandidatesRemoveFromTiers} hastiers={hastiers} candidates={candidates} tiers={tiers}/>
+      {#if ['ascriptions', 'triad'].includes(fmItems[0])}
-    <SpHasCandidates on:addToTiersRemoveFromCandidates={addToTiersRemoveFromCandidates} candidates={candidates} />
+        {#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"}

src/SpHasCandidates.svelte

@@ -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)}

src/SpHasTiers.svelte

@@ -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}
+{#if tiers && tiers.length >0}
-<div class="tierbox">
+  <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>

src/SpHasWhat.svelte

@@ -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(() => {
+ function optselName(has) {
-   let optsel = document.getElementById('hasNew')
+   return `_${has}_${fmKeyType}`
-   if (hastiers=="" && optsel) {
+ }
-     optsel.selected = 'selected';
+  
-     optsel.disabled = 'disabled'
-   } else if (hastiers != "") {
-     let optsel = document.getElementById('_' + hastiers)
-     optsel.selected = 'selected'
-   }
- });
-
  $: {
-   console.log("hases", hases)
+   if (value && value.split("_")[1] != fmKey) {
-   if (value && value.startsWith("_")) {
+     toggleFmKey = fmKey;
-     dispatch("hasTiersSelected", value)
+     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>
+<select class="{fmKeyType}_{fmKey}" bind:value>
-  {#if hastiers == ""}
-    <option id="hasNew" title="Has new" value="hasNew">Has new...</option>
-  {/if}
   {#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>