SandpointsEditPage/src/App.svelte

<script>
 import { onMount } from 'svelte';
 let v = "loading...";
 let path = "loading...";

 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 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() })
         
         removeItem.textContent = "×"
         
         moveUpItem.textContent = "⇑"
         moveUpItem.setAttribute('type', 'button')
         moveUpItem.addEventListener('click', (e) => {
           let lb = document.querySelector(".listbox")
           lb.insertBefore(e.currentTarget.parentNode, e.currentTarget.parentNode.previousSibling )
         })

         moveDownItem.textContent = "⇓"
         moveDownItem.setAttribute('type', 'button')
         moveDownItem.addEventListener('click', (e) => {
           let lb = document.querySelector(".listbox")
           lb.insertBefore(e.currentTarget.parentNode, e.currentTarget.parentNode.nextSibling.nextSibling )
         })

         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
         // input.addEventListener('focus', (e) => { e.target.parentNode.removeChild(e.target) })
         itemLine.prepend(input) 
         itemLine.prepend(removeItem)
         listBox.prepend(itemLine)
       })
       dvm.prepend(listBox)
       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)
       }
     }
   })
 }
 
 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;
     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) 
 }

 onMount(()=> {
   dispatchHash()
 })
 
 $: hashChanged = ()=> dispatchHash();
</script>

<svelte:window on:hashchange={hashChanged} />
<main id="sandpoints">
  <form>
      <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"}
      <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" />
    <button id="sandpointsButton">COMMIT/SAVE</button>
  </form>
</main>