Drawwell/SandpointsEditPage
Drawwell
/
SandpointsEditPage
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

has_tiers form almost there...

This commit is contained in:
Marcell Mars 2021-04-14 02:14:39 +02:00
parent 82e429689a
commit 129e2ba1c7
2 changed files with 99 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/global.css
View File

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

174
src/App.svelte
View File

@ -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) {
couldhave.push(i)
let select = document.querySelector('select')
function newTierMenu() {
let select = document.querySelector('.selecttier')
select.innerHTML = ""
couldhave.forEach((c)=> {
select.options[select.options.length] = new Option(c,c)
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, couldhave) {
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 = "×"
moveUpItem.textContent = "⇑"
moveUpItem.setAttribute('type', 'button')
moveUpItem.classList.add('buttonup')
moveUpItem.addEventListener('click', (e) => {
let lb = document.querySelector(".listbox")
lb.insertBefore(e.currentTarget.parentNode, e.currentTarget.parentNode.previousSibling)
disableButtons()
})
var tierBox = document.createElement('div')
tierBox.classList.add('tierbox')
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;
frontmatter[fm].reverse().forEach((tier)=>{
tierBox.prepend(addNewTier(tier, fm))
let removeTier = couldhave.indexOf(tier)
if (removeTier != -1) {
couldhave.splice(removeTier, 1)
}
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.options[select.options.length] = new Option(c,c)
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()
})
listBox.append(select)
dvm.prepend(listBox)
select.classList.add('selecttier')
dvm.prepend(select)
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)
@ -182,8 +204,8 @@
<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>
<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" />