136 lines
4.7 KiB
Svelte
136 lines
4.7 KiB
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>
|