Flow update
parent
1480d111b1
commit
168446c12a
@ -1,181 +0,0 @@
|
||||
let tagroot = document.querySelector('.tag_input')
|
||||
let sel_tags = tagroot.querySelector('div.tags_selected')
|
||||
let predef_tags = tagroot.querySelector('div.tags_inpage') // Should be optional
|
||||
|
||||
let suggestroot = tagroot.querySelector('.tag_suggester')
|
||||
|
||||
suggestroot.insertAdjacentHTML("beforeend", `<input type="hidden" name="${suggestroot.dataset.inputname}">`)
|
||||
let suggest_hidden = suggestroot.querySelector(`input[name=${suggestroot.dataset.inputname}][type=hidden]`)
|
||||
|
||||
let suggest_input = suggestroot.querySelector(`input[name=${suggestroot.dataset.inputname}][type=text]`)
|
||||
suggest_input.removeAttribute('name')
|
||||
if (suggest_input.hasAttribute('required')) {
|
||||
suggest_input.removeAttribute('required')
|
||||
suggest_hidden.setAttribute('required', '')
|
||||
}
|
||||
// suggest_input.value = ''
|
||||
suggest_input.removeAttribute('value')
|
||||
|
||||
let tag_suggest_dropdown = suggestroot.querySelector('.tag_suggest_dropdown')
|
||||
|
||||
// https://stackoverflow.com/questions/8486099/how-do-i-parse-a-url-query-parameters-in-javascript
|
||||
function getJsonFromUrl(url) {
|
||||
if(!url) url = location.search;
|
||||
var query = url.substr(1);
|
||||
var result = {};
|
||||
query.split("&").forEach(function(part) {
|
||||
var item = part.split("=");
|
||||
result[item[0]] = decodeURIComponent(item[1]);
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
function create_selection_tag(tagname) {
|
||||
let tag = document.createElement("a")
|
||||
tag.classList.add("tagselected")
|
||||
tag.dataset.tagname = tagname
|
||||
|
||||
tag.insertAdjacentHTML("beforeend", `
|
||||
<span class="fa fa-tag"></span>
|
||||
<span class="name"></span>
|
||||
<span class="fa fa-close close"></span>
|
||||
`)
|
||||
tag.querySelector("span.name").textContent = tagname.replace(/_/g, ' ')
|
||||
// tag.querySelector("input[type=hidden]").setAttribute('name', `tag#${tagname}`)
|
||||
return tag
|
||||
}
|
||||
|
||||
function form_addtag(tagname) {
|
||||
let val = suggest_hidden.value.split(' ')
|
||||
val.push(tagname)
|
||||
suggest_hidden.value = val.join(' ').trim()
|
||||
}
|
||||
function form_removetag(tagname) {
|
||||
let val = suggest_hidden.value.split(' ')
|
||||
val.splice(val.indexOf(tagname), 1)
|
||||
suggest_hidden.value = val.join(' ').trim()
|
||||
}
|
||||
|
||||
function add_selected(tagname) {
|
||||
if (predef_tags) {
|
||||
let pagetag = predef_tags.querySelector(`a[data-tagname=${tagname}]`)
|
||||
if (pagetag) {
|
||||
pagetag.classList.add('tag_hide')
|
||||
}
|
||||
}
|
||||
let newtag = create_selection_tag(tagname)
|
||||
newtag.addEventListener('click', (event) => {
|
||||
remove_selected(event.target.dataset.tagname)
|
||||
// console.log(`Deselected: ${event.target.dataset.tagname}`)
|
||||
})
|
||||
|
||||
sel_tags.appendChild(newtag)
|
||||
form_addtag(tagname)
|
||||
}
|
||||
function remove_selected(tagname) {
|
||||
if (predef_tags) {
|
||||
let pagetag = predef_tags.querySelector(`a[data-tagname=${tagname}]`)
|
||||
if (pagetag) {
|
||||
pagetag.classList.remove('tag_hide')
|
||||
}
|
||||
}
|
||||
|
||||
sel_tags.querySelector(`a[data-tagname=${tagname}]`).remove()
|
||||
form_removetag(tagname)
|
||||
}
|
||||
|
||||
// Page tags click to select
|
||||
if (predef_tags) {
|
||||
predef_tags.querySelectorAll("a").forEach(element => {
|
||||
element.addEventListener('click', (event) => {
|
||||
add_selected(event.target.dataset.tagname)
|
||||
event.preventDefault()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// Generate selected by url query
|
||||
let query = getJsonFromUrl()
|
||||
if (query['tags']) {
|
||||
query['tags'].split('+').forEach((tag) => {
|
||||
add_selected(tag)
|
||||
})
|
||||
}
|
||||
|
||||
// Suggestions
|
||||
function create_suggestion_tag(tagname) {
|
||||
let tag = document.createElement("a")
|
||||
tag.classList.add("tagsuggestion")
|
||||
tag.dataset.tagname = tagname
|
||||
|
||||
tag.insertAdjacentHTML("beforeend", `
|
||||
<span class="fa fa-tag"></span>
|
||||
<span class="name"></span>
|
||||
<span class="fa fa-plus plus"></span>
|
||||
`)
|
||||
tag.querySelector("span.name").textContent = tagname.replace(/_/g, ' ')
|
||||
return tag
|
||||
}
|
||||
function render_suggestions(data) {
|
||||
tag_suggest_dropdown.innerHTML = ''
|
||||
|
||||
let tagnames = Array.from(sel_tags.querySelectorAll('a')).map(a => a.dataset.tagname)
|
||||
let i = 0
|
||||
data.forEach((el) => {
|
||||
if (i > 5) return
|
||||
if (tagnames.includes(el.content)) return
|
||||
|
||||
let sugtag = create_suggestion_tag(el.content)
|
||||
|
||||
sugtag.addEventListener('click', (event) => {
|
||||
add_selected(event.target.dataset.tagname)
|
||||
suggest_input.value = ''
|
||||
render_suggestions([])
|
||||
event.preventDefault()
|
||||
})
|
||||
|
||||
tag_suggest_dropdown.appendChild(sugtag)
|
||||
|
||||
i++
|
||||
});
|
||||
}
|
||||
|
||||
// Ajax suggestion handler
|
||||
var ajax_timeout
|
||||
suggest_input.addEventListener('input', (event) => {
|
||||
clearTimeout(ajax_timeout)
|
||||
|
||||
let value = suggest_input.value.replace(/ /g, '_').trim()
|
||||
|
||||
if (value.length < 2) {
|
||||
render_suggestions([])
|
||||
return
|
||||
}
|
||||
|
||||
ajax_timeout = setTimeout(() => {
|
||||
fetch('/post/tags?q='+value).then((response) => {
|
||||
console.log(response)
|
||||
return response.json()
|
||||
}).then((data) => {
|
||||
// fill suggestions
|
||||
// console.log(data)
|
||||
render_suggestions(data)
|
||||
})
|
||||
}, 500)
|
||||
})
|
||||
|
||||
// search_input.addEventListener('keypress', (event) => {
|
||||
// if (event.keyCode == 13) {
|
||||
// // event.preventDefault()
|
||||
// }
|
||||
// })
|
||||
// search_input.addEventListener('blur', (event) => {
|
||||
// if (event.explicitOriginalTarget != null) {
|
||||
// classlist = event.explicitOriginalTarget.parentNode.classList
|
||||
// if (classlist.contains('tags_selected') || classlist.contains('tags_inpage') || classlist.contains('search_dropdown')) {
|
||||
// setTimeout(() => search_input.focus(), 2)
|
||||
// }
|
||||
// }
|
||||
// console.log(event)
|
||||
// })
|
||||
// page_tags.querySelectorAll('a').forEach((el) => el.removeAttribute('href'))
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue