From 129e2ba1c722704be01534c1230b88b320a83782 Mon Sep 17 00:00:00 2001 From: Marcell Mars Date: Wed, 14 Apr 2021 02:14:39 +0200 Subject: [PATCH] has_tiers form almost there... --- public/global.css | 2 +- src/App.svelte | 174 ++++++++++++++++++++++++++-------------------- 2 files changed, 99 insertions(+), 77 deletions(-) diff --git a/public/global.css b/public/global.css index f82689e..6d23231 100644 --- a/public/global.css +++ b/public/global.css @@ -77,7 +77,7 @@ label { text-transform: capitalize; } -input, button, textarea { +input, button, textarea, .selecttier { grid-column: 2/3; } diff --git a/src/App.svelte b/src/App.svelte index 1ef6339..99fedd9 100644 --- a/src/App.svelte +++ b/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) { - 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 @@
- - + + {#if document.location.protocol.substring(0,4) != "file"}