more sveltejs.. it's just better this way..
This commit is contained in:
parent
1f34c9019b
commit
79ab558529
|
@ -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>
|
||||
|
||||
|
|
269
src/App.svelte
269
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 couldhave = []
|
||||
|
||||
function disableButtons() {
|
||||
let tierbox = [...document.querySelector(".tierbox").children]
|
||||
let buttonUps = document.querySelectorAll(".buttonup")
|
||||
let buttonDowns = document.querySelectorAll(".buttondown")
|
||||
|
||||
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()
|
||||
}
|
||||
})
|
||||
}
|
||||
let relpath = "";
|
||||
let relpermalink = "";
|
||||
let protocol = "";
|
||||
let title = "Foo bar";
|
||||
let tiers = [{file:"", title:""}];
|
||||
let tier = {};
|
||||
let hastiers = "";
|
||||
let candidates = [];
|
||||
|
||||
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>
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -0,0 +1,6 @@
|
|||
<script>
|
||||
export let title;
|
||||
</script>
|
||||
|
||||
<label for="title">Title:</label>
|
||||
<input type="text" value="{title}">
|
Loading…
Reference in New Issue