towards has_children interactive ui to add, remove and change the
sorting order...
This commit is contained in:
parent
1788c27ef0
commit
91695e27f3
|
@ -84,3 +84,12 @@ input, button, textarea {
|
|||
textarea {
|
||||
height: 10rem;
|
||||
}
|
||||
|
||||
.hasinput {
|
||||
line-height: 0.2rem;
|
||||
border: 0px;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
width: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
@ -27,13 +27,32 @@
|
|||
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.addEventListener('click', (e) => { e.target.parentNode.remove() })
|
||||
removeItem.textContent = "×"
|
||||
moveUpItem.textContent = "⇑"
|
||||
moveDownItem.textContent = "⇓"
|
||||
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
|
||||
dvm.prepend(input)
|
||||
// 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 + ": "
|
||||
|
|
Loading…
Reference in New Issue