more sveltejs.. it's just better this way..

public/index.html

@@ -7,7 +7,7 @@
 	<title>Sandpoints Edit Page</title>
 
 	<link rel='stylesheet' href='global.css'>
-	<link rel='stylesheet' href='build/bundle.css'>
+	<script defer src='metasp.js'></script>
 	<script defer src='build/bundle.js'></script>
 </head>
 

src/App.svelte

@@ -1,218 +1,88 @@
 <script>
+ import SpTitle from './SpTitle.svelte'
+ import SpHasTiers from './SpHasTiers.svelte'
+ import SpHasCandidates from './SpHasCandidates.svelte'
  import { onMount } from 'svelte';
  let v = "loading...";
- let path = "loading...";
+ let relpath = "";
- let couldhave = []
+ let relpermalink = "";
-
+ let protocol = "";
- function disableButtons() {
+ let title = "Foo bar";
-   let tierbox = [...document.querySelector(".tierbox").children]
+ let tiers = [{file:"", title:""}];
-   let buttonUps = document.querySelectorAll(".buttonup")
+ let tier = {};
-   let buttonDowns = document.querySelectorAll(".buttondown")
+ let hastiers = "";
-
+ let candidates = [];
-   buttonUps.forEach((up)=>{
-     if (tierbox.indexOf(up.parentNode) == 0) {
-       up.disabled = true;
-     } else {
-       up.disabled = false;
-     }
-   })
-
-   buttonDowns.forEach((down)=> {
-     if (tierbox.indexOf(down.parentNode) == (tierbox.length -1)) {
-       down.disabled = true;
-     } else {
-       down.disabled = false;
-     }
-   })
- }
-
- function newTierMenu() {
-   let select = document.querySelector('.selecttier')
-   select.innerHTML = ""
-   if (couldhave.length > 0) {
-     select.style.display = 'block'
-     select.options[0] = new Option("Add new...", "")
-     select.options[0].hidden = true
-     select.options[0].selected = true
-     select.options[0].disabled = true
-
-     couldhave.forEach((c)=> {
-       select.options[select.options.length] = new Option(c,c)
-     })
-   } else {
-     select.style.display = 'none'
-   }
- } 
-
- function addNewTier(tier, fm) {
-   var tierLine = document.createElement('div')
-   tierLine.classList.add('tierline')
-   let removeItem = document.createElement('button')
-   let moveUpItem = document.createElement('button')
-   let moveDownItem = document.createElement('button')
-   removeItem.setAttribute('type', 'button')
-   removeItem.addEventListener('click', (e) => {
-     e.target.parentNode.remove()
-     couldhave.push(e.target.parentNode.querySelector("input").value)
-     newTierMenu()
-     disableButtons()
-   })   
-   removeItem.textContent = "×"
-
-   moveUpItem.textContent = "⇑"
-   moveUpItem.setAttribute('type', 'button')
-   moveUpItem.classList.add('buttonup')
-   moveUpItem.addEventListener('click', (e) => {
-     let lb = document.querySelector(".tierbox")
-     lb.insertBefore(e.currentTarget.parentNode, e.currentTarget.parentNode.previousSibling)
-     disableButtons()
-   })
-
-   moveDownItem.textContent = "⇓"
-   moveDownItem.setAttribute('type', 'button')
-   moveDownItem.classList.add('buttondown')
-   moveDownItem.addEventListener('click', (e) => {
-     let lb = document.querySelector(".tierbox")
-     let lblength = lb.children.length
-     lb.insertBefore(e.currentTarget.parentNode, e.currentTarget.parentNode.nextSibling.nextSibling)
-     disableButtons()
-   })
-
-   tierLine.prepend(moveUpItem)
-   tierLine.prepend(moveDownItem)
-
-   var input = document.createElement('input')
-   input.setAttribute('type', 'text')
-   input.setAttribute('name', `${fm}[]`)
-   input.classList.add("hasinput")
-   input.value = tier
-
-   tierLine.prepend(input)
-   tierLine.prepend(removeItem)
-   return tierLine
- }
-
- function generateFrontMatter(frontmatter, path, relpermalink, protocol) {
-   let dvm = document.querySelector('form')
-
-   var hiddenRelPath = document.createElement('input')
-   hiddenRelPath.setAttribute('type', 'hidden')
-   hiddenRelPath.setAttribute('name', 'relpermalink')
-   hiddenRelPath.value = relpermalink
-   dvm.prepend(hiddenRelPath)
-   
-   var hiddenPath = document.createElement('input')
-   hiddenPath.setAttribute('type', 'hidden')
-   hiddenPath.setAttribute('name', 'relpath')
-   hiddenPath.value = path
-   dvm.prepend(hiddenPath)
-   
-   var hiddenProtocol = document.createElement('input')
-   hiddenProtocol.setAttribute('type', 'hidden')
-   hiddenProtocol.setAttribute('name', 'protocol')
-   hiddenProtocol.value = protocol
-   dvm.prepend(hiddenProtocol)
-
-   Object.keys(frontmatter).forEach((fm)=>{
-     if (Array.isArray(frontmatter[fm])) {
-       console.log("Array:", frontmatter[fm])
-       
-       var tierBox = document.createElement('div')
-       tierBox.classList.add('tierbox')
-
-       frontmatter[fm].reverse().forEach((tier)=>{
-         tierBox.prepend(addNewTier(tier, fm))
-         let removeTier = couldhave.indexOf(tier)
-         if (removeTier != -1) {
-           couldhave.splice(removeTier, 1)
-         }
-       })
-
-       let select = document.createElement('select')
-       select.addEventListener('change', (e) => {
-         let tier = select.options[select.selectedIndex].value
-         let i = couldhave.indexOf(tier)
-         if (i != -1) {
-           couldhave.splice(i, 1)
-         }
-         newTierMenu()
-         document.querySelector('.tierbox').append(addNewTier(tier, fm))
-         disableButtons()
-       })
-       select.classList.add('selecttier')
-       dvm.prepend(select)
-       newTierMenu(fm)
-       dvm.prepend(tierBox)
-       let label = document.createElement('label')
-       label.setAttribute('for', `${fm}[]`)
-       label.innerHTML = fm + ": "
-       dvm.prepend(label)
-     } else {
-       var input = document.createElement('input')
-       console.log(fm, frontmatter[fm])
-       let l = true
-       if (["draft", "iscjklanguage"].includes(fm)){
-         if (frontmatter[fm] == false) {
-           input.setAttribute('type', 'hidden')
-           l = false
-         } else {
-           input.setAttribute('type', 'text')   
-         }
-       }
-       input.setAttribute('name', fm)
-       input.value = frontmatter[fm]
-       dvm.prepend(input)
-       if (l == true) {
-         let label = document.createElement('label')
-         label.setAttribute('for', fm)
-         label.innerHTML = fm + ": "
-         dvm.prepend(label)
-       }
-     }
-
-     if (document.querySelector('.tierbox')) {
-       console.log("What about tierbox?")
-       disableButtons()
-     }
-   })
- }
  
- function dispatchHash() {
-   var el = document.createElement('script');
-   el.onload = ()=> {
-     console.log("loading...")
-     v = repo.content;
-     if (v.startsWith("\n")) {
-       v = v.substring(1)
-     }
-     path = repo.path;
-     let hastiers = Object.keys(repo.frontmatter).filter(t => t.startsWith("has_"))
-     if (hastiers.length == 1) {
-       couldhave = METASP[hastiers[0].split("has_")[1]].tiers
-     }
-     console.log(JSON.stringify(repo))
-     generateFrontMatter(repo.frontmatter, path, repo.relpermalink, document.location.protocol.substring(0,4))
-   }
-   el.src = `../js/repo/${location.hash.substring(1)}.js`
-   document.body.appendChild(el) 
- }
-
  function keyUp(e) {
    if (e.key == "Escape") {
      window.history.back()
    }
  }
 
+ function diffArrr(arr, arrr) {
+    let diff = new Set(arr)
+    for (let e of arrr) {
+        diff.delete(e)
+    }
+   return Array.from(diff)
+ }
+ 
+ function dispatchHashMock() {
+   var el = document.createElement('script');
+   el.onload = ()=> {
+     v = repo.content;
+     if (v.startsWith("\n")) {
+       v = v.substring(1)
+     }
+
+     relpath = repo.path;
+     relpermalink = repo.relpermalink
+     protocol = document.location.protocol.substring(0,4)
+    
+     let xastiers = Object.keys(repo.frontmatter).filter(t => t.startsWith("has_"))
+     let tkey = Object.keys(repo.frontmatter).filter(t => t.toLowerCase() == "title")[0]
+     title = repo.frontmatter[tkey]
+     hastiers = xastiers[0].substr(4)
+     tiers = METASP[xastiers[0].split("has_")[1]].tiers.filter(t => repo.frontmatter[xastiers].includes(t.file)).reverse()
+     if (xastiers.length == 1) {
+       candidates = diffArrr(METASP[xastiers[0].split("has_")[1]].tiers, tiers)
+     }
+   }
+   // el.src = `mocka.js`
+   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 addToTiersRemoveFromCandidates(v) {
+   console.log("addToTiers", v.detail)
+   let value = v.detail
+   // if (value != 1) {
+     const tier = candidates.filter(t => t.file == value)
+     if (tier.length > 0) {
+       tiers = [...tiers, tier[0]]
+       candidates = candidates.filter(t=> t != tier[0])
+     }
+   // }
+ }
+ 
  onMount(()=> {
-   dispatchHash()
+   dispatchHashMock()
  })
  
- $: hashChanged = ()=> dispatchHash();
 </script>
 
-<svelte:window on:hashchange={hashChanged} on:keyup={keyUp}/>
+<svelte:window on:keyup={keyUp}/>
 <main id="sandpoints">
   <form>
+    <SpTitle title={title} />
+    <SpHasTiers on:addToCandidatesRemoveFromTiers={addToCandidatesRemoveFromTiers} hastiers={hastiers} candidates={candidates} tiers={tiers}/>
+    <SpHasCandidates on:addToTiersRemoveFromCandidates={addToTiersRemoveFromCandidates} candidates={candidates} />
     <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"}
@@ -221,6 +91,9 @@
     {/if}
     <label for="offline">Offline</label>
     <input type="checkbox" id="offline" name="offline" />
+    <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>
   </form>
 </main>

src/SpHasCandidates.svelte

@@ -0,0 +1,28 @@
+<script>
+ import { createEventDispatcher } from 'svelte';
+ import { afterUpdate } from 'svelte';
+ export let candidates;
+
+ export let value;
+ const dispatch = createEventDispatcher();
+
+ afterUpdate(() => {
+   let addnew = document.getElementById('addnew')
+   if (addnew) {
+     addnew.selected = 'selected';
+   }
+ });
+ 
+ $: {
+   dispatch("addToTiersRemoveFromCandidates", value)
+   value = 1;
+ }
+</script>
+
+
+<select class="selecttier" bind:value>
+  <option id="addnew" value="1" disabled selected>Add new...</option>
+  {#each candidates as tier (tier.file)}
+    <option value={tier.file}>{tier.file}</option>
+  {/each}
+</select>

src/SpHasTiers.svelte

@@ -0,0 +1,33 @@
+<script>
+ import { createEventDispatcher } from 'svelte';
+ export let hastiers;
+ export let tiers;
+ const dispatch = createEventDispatcher();
+ 
+ function removeTier(tier) {
+   dispatch("addToCandidatesRemoveFromTiers", tier)
+ }
+
+ function swapTier(tier, n) {
+   tiers.some((t, i)=> {
+     if (t==tier) {
+       tiers[i] = tiers[i+n]
+       tiers[i+n] = tier
+       return true
+     }
+   })
+ }
+
+</script>
+
+<label for="hastiers">Has {hastiers}:</label>
+<div class="tierbox">
+  {#each tiers as tier, i (tier.file)}
+    <div class="tierline">
+      <input type="text" name="has_{hastiers}[]" class="hasinput" value="{tier.file}">
+      <button type="button" class="buttondown" on:click="{swapTier(tier, 1)}" disabled={i+1 == tiers.length ? true:false}>⇓</button>
+      <button type="button" class="buttonup" on:click="{swapTier(tier, -1)}" disabled={i == 0  ? true:false}>⇑</button>
+      <button type="button" on:click="{removeTier(tier)}">×</button>
+    </div>
+  {/each}
+</div>

src/SpTitle.svelte

@@ -0,0 +1,6 @@
+<script>
+ export let title;
+</script>
+
+<label for="title">Title:</label>
+<input type="text" value="{title}">