swapTiers...

src/App.svelte

@@ -14,6 +14,7 @@
   let hases = [];
   let hasesCandidates = [];
   let frontmatter = {};
+  let formaction = "edit";
   frontmatter["triad"] = [];
   frontmatter["ascription"] = [];
   frontmatter["journal"] = [];
@@ -65,6 +66,12 @@
     toggleNewTiersButtons();
   }
 
+  function swapTier(arrg) {
+    const [fmKeyType, fmKey, oldFmKey] = arrg.detail;
+    removeTier(fmKeyType, oldFmKey);
+    newTier(fmKeyType, fmKey, null);
+  }
+
   function newTier(fmKeyType, fmKey, fmValue) {
     let tiers = [];
     let candidates = [];
@@ -88,6 +95,7 @@
         tiers = [];
         candidates = METASP[fmKey].tiers;
       }
+
       frontmatter[fmKeyType].push({
         fmKey: fmKey,
         tiers: tiers,
@@ -95,6 +103,7 @@
       });
       frontmatter = { ...frontmatter };
     }
+
     hasesCandidates = [...new Set(reckonHasesCandidates())];
     toggleNewTiersButtons();
   }
@@ -109,7 +118,6 @@
 
       relpath = repo.path;
       relpermalink = repo.relpermalink;
-      protocol = document.location.protocol.substring(0, 4);
       const notSelf = Object.entries(METASP).filter((n) => n[1].singular == relpath.split("/")[0])[0][0];
       hases = Object.keys(METASP).filter((k) => k != notSelf);
       Object.entries(repo.frontmatter).forEach(([fmKey, fmValue]) => {
@@ -198,7 +206,6 @@
 
   function toggleNewTiersButtons() {
     hasesCandidates = [...new Set(reckonHasesCandidates())];
-
     if (hasesCandidates.length == 0) {
       document.querySelectorAll(".newtiers").forEach((button) => {
         button.style.display = "none";
@@ -216,13 +223,19 @@
   }
 
   function dispatchHash() {
+    protocol = document.location.protocol.substring(0, 4);
     const searchParams = new URLSearchParams(location.search);
     const editHash = searchParams.get("edit");
     if (editHash) {
       loadHugoPageMetadata(editHash);
     } else {
       let newPage = searchParams.get("new");
-      console.log({ newPage });
+      formaction = "new";
+      v = "waiting for your input here...";
+      title = "Please, change this title...";
+      relpath = `${newPage}/newfile.md`;
+      hases = Object.keys(METASP).filter((k) => k != newPage);
+      toggleNewTiersButtons();
     }
   }
 
@@ -239,7 +252,7 @@
 <main id="sandpoints">
   <form>
     <div class="formgrid">
-      <SpTitle {relpath} {title} />
+      <SpTitle {relpath} {title} {formaction} />
     </div>
     <div id="fmicon" on:click={toggleFold} class="fmCollapse">Frontmatter</div>
     <span id="frontmatter" class="fmHidden">
@@ -257,12 +270,11 @@
               </div>
               <div class="fmItem">
                 <SpKeys
-                  index={i}
                   fmKeyType={fmItems[0]}
                   {fmItem}
                   {hases}
                   {hasesCandidates}
-                  on:hasTiersSelected={newTier}
+                  on:hasTiersSelected={swapTier}
                 />
                 <SpTiers
                   on:addToCandidatesRemoveFromTiers={addToCandidatesRemoveFromTiers}
@@ -327,7 +339,7 @@
       </div>
     </span>
     <div class="formgrid">
-      <label for="pagecontent">Content:</label>
+      <label for="pagecontent" class="labelcontent">Content:</label>
       <textarea
         id="pagecontent"
         bind:value={v}
@@ -337,10 +349,9 @@
         <label for="publish">Publish</label>
         <input type="checkbox" id="publish" name="publish" />
       {/if}
-      <label for="offline">Offline</label>
-      <input type="checkbox" id="offline" name="offline" />
+      <label for="offline" class="labeloffline">Offline</label>
+      <input type="checkbox" id="offline" name="offline" checked={protocol == "file" ? true : false} />
       <input type="hidden" name="relpermalink" bind:value={relpermalink} />
-      <input type="hidden" name="relpath" bind:value={relpath} />
       <input type="hidden" name="protocol" bind:value={protocol} />
       <button id="sandpointsButton">COMMIT/SAVE</button>
     </div>

src/SpKeys.svelte

@@ -1,55 +1,38 @@
 <script>
-    import { createEventDispatcher } from "svelte";
-    import { onMount } from "svelte";
-    export let fmItem;
-    export let fmKeyType;
-    export let index;
-    export let hases;
-    export let hasesCandidates;
-    let value;
-    const dispatch = createEventDispatcher();
+  import { createEventDispatcher } from "svelte";
+  import { onMount } from "svelte";
+  export let fmItem;
+  export let fmKeyType;
+  export let hases;
+  export let hasesCandidates;
+  let value;
+  const dispatch = createEventDispatcher();
 
-    function optselName(has) {
-        return `_${has}_${fmKeyType}`;
+  function optselName(has) {
+    return `_${has}_${fmKeyType}`;
+  }
+
+  onMount(() => {
+    const selectEvent = document.getElementById(`${fmKeyType}_${fmItem.fmKey}`);
+    if (selectEvent) {
+      selectEvent.addEventListener("change", (e) => {
+        dispatch("hasTiersSelected", [fmKeyType, e.target.value.split("_")[1], fmItem]);
+      });
     }
-
-    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],
-                ]);
-            });
-        }
-    });
+  });
 </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
-            >
-        {/if}
-    {/each}
-    {#each hasesCandidates as has}
-        <option
-            id={optselName(has)}
-            class="hasoption"
-            title={has}
-            value={optselName(has)}
-            >{"triad" == fmKeyType ? "Has " : ""}{has}:</option
-        >
-    {/each}
+  {#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
+      >
+    {/if}
+  {/each}
+  {#each hasesCandidates as has}
+    <option id={optselName(has)} class="hasoption" title={has} value={optselName(has)}
+      >{"triad" == fmKeyType ? "Has " : ""}{has}:</option
+    >
+  {/each}
 </select>

src/SpTitle.svelte

@@ -1,9 +1,10 @@
 <script>
     export let title;
     export let relpath;
+    export let formaction;
 </script>
 
 <label for="relpath">File path:</label>
-<input type="text" name="relpath" value={relpath} />
+<input type="text" name="relpath" value={relpath} readonly={formaction == "new" ? false : true}/>
 <label for="title">Title:</label>
 <input type="text" name="title" value={title} />