has_tiers form almost there...

public/global.css

@@ -77,7 +77,7 @@ label {
   text-transform: capitalize;
 }
 
-input, button, textarea {
+input, button, textarea, .selecttier {
   grid-column: 2/3;
 }
 

src/App.svelte

@@ -2,14 +2,15 @@
  import { onMount } from 'svelte';
  let v = "loading...";
  let path = "loading...";
+ var couldhave = []
 
  function disableButtons() {
-   let listbox = [...document.querySelector(".listbox").children]
+   let tierbox = [...document.querySelector(".tierbox").children]
    let buttonUps = document.querySelectorAll(".buttonup")
    let buttonDowns = document.querySelectorAll(".buttondown")
 
    buttonUps.forEach((up)=>{
-     if (listbox.indexOf(up.parentNode) == 0) {
+     if (tierbox.indexOf(up.parentNode) == 0) {
        up.disabled = true;
      } else {
        up.disabled = false;
@@ -17,7 +18,7 @@
    })
 
    buttonDowns.forEach((down)=> {
-     if (listbox.indexOf(down.parentNode) == (listbox.length -1)) {
+     if (tierbox.indexOf(down.parentNode) == (tierbox.length -1)) {
        down.disabled = true;
      } else {
        down.disabled = false;
@@ -25,16 +26,73 @@
    })
  }
 
- function couldHave(i, couldhave) {
+ function newTierMenu() {
-   couldhave.push(i)
+   let select = document.querySelector('.selecttier')
-   let select = document.querySelector('select')
    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 generateFrontMatter(frontmatter, path, relpermalink, protocol, couldhave) {
+ 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')
@@ -54,79 +112,37 @@
    hiddenProtocol.setAttribute('name', 'protocol')
    hiddenProtocol.value = protocol
    dvm.prepend(hiddenProtocol)
-   var c = 0;
+
    Object.keys(frontmatter).forEach((fm)=>{
      if (Array.isArray(frontmatter[fm])) {
        console.log("Array:", frontmatter[fm])
-       var listBox = document.createElement('div')
-       listBox.classList.add('listbox')
-       frontmatter[fm].reverse().forEach((i)=>{
-         var itemLine = document.createElement('div')
-         itemLine.classList.add('itemline')
-         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(e.target.parentNode.querySelector("input").value, couldhave)
-           disableButtons()
-         })
        
-         removeItem.textContent = "×"
+       var tierBox = document.createElement('div')
+       tierBox.classList.add('tierbox')
 
-         moveUpItem.textContent = "⇑"
+       frontmatter[fm].reverse().forEach((tier)=>{
-         moveUpItem.setAttribute('type', 'button')
+         tierBox.prepend(addNewTier(tier, fm))
-         moveUpItem.classList.add('buttonup')
+         let removeTier = couldhave.indexOf(tier)
-         moveUpItem.addEventListener('click', (e) => {
+         if (removeTier != -1) {
-           let lb = document.querySelector(".listbox")
+           couldhave.splice(removeTier, 1)
-           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(".listbox")
-           let lblength = lb.children.length
-           lb.insertBefore(e.currentTarget.parentNode, e.currentTarget.parentNode.nextSibling.nextSibling)
-           disableButtons()
-         })
-
-         if (c==0) {
-           moveDownItem.disabled = true;
          }
-
-         if ((c+1) == frontmatter[fm].length) {
-           moveUpItem.disabled = true;
-         }
-         c++
-
-         itemLine.prepend(moveUpItem)
-         itemLine.prepend(moveDownItem)
-         var input = document.createElement('input')
-         input.setAttribute('type', 'text')
-         input.setAttribute('name', `${fm}[]`)
-         input.classList.add("hasinput")
-         input.title = "[remove on click]"
-         input.value = i
-         let r = couldhave.indexOf(i)
-         if (r != -1) {
-           couldhave.splice(r, 1)
-         }
-         itemLine.prepend(input) 
-         itemLine.prepend(removeItem)
-         listBox.prepend(itemLine)
        })
 
        let select = document.createElement('select')
-       couldhave.forEach((c)=> {
+       select.addEventListener('change', (e) => {
-         select.options[select.options.length] = new Option(c,c)
+         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()
        })
-       listBox.append(select)
+       select.classList.add('selecttier')
-
+       dvm.prepend(select)
-       dvm.prepend(listBox)
+       newTierMenu(fm)
+       dvm.prepend(tierBox)
        let label = document.createElement('label')
        label.setAttribute('for', `${fm}[]`)
        label.innerHTML = fm + ": "
@@ -153,6 +169,11 @@
          dvm.prepend(label)
        }
      }
+
+     if (document.querySelector('.tierbox')) {
+       console.log("What about tierbox?")
+       disableButtons()
+     }
    })
  }
  
@@ -165,8 +186,9 @@
        v = v.substring(1)
      }
      path = repo.path;
+     couldhave = repo.couldhave;
      console.log(JSON.stringify(repo))
-     generateFrontMatter(repo.frontmatter, path, repo.relpermalink,  document.location.protocol.substring(0,4), repo.couldhave)
+     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)