Some form styling + fixed tag input logic
parent
47add9d8e8
commit
1480d111b1
@ -0,0 +1,211 @@
|
||||
// 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) { // CLEAR
|
||||
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
|
||||
}
|
||||
|
||||
// Suggestions
|
||||
function create_suggestion_tag(tagname) { // CLEAR
|
||||
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
|
||||
}
|
||||
|
||||
let taginputs = document.querySelectorAll('.tag-input')
|
||||
taginputs.forEach(function (tinput) {
|
||||
'use strict'
|
||||
|
||||
try {
|
||||
let selected = tinput.querySelector('.tags-selected')
|
||||
let predef = tinput.querySelector('.tags-inpage')
|
||||
|
||||
let suggestroot = tinput.querySelector('.tag-suggester')
|
||||
|
||||
suggestroot.insertAdjacentHTML("beforeend", `<input type="hidden" name="${suggestroot.dataset.inputname}">`)
|
||||
let hidden_input = 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')
|
||||
hidden_input.setAttribute('required', '')
|
||||
}
|
||||
suggest_input.removeAttribute('value') // Disable prefill by browser
|
||||
|
||||
let suggest_dropdown = suggestroot.querySelector('.suggest-dropdown')
|
||||
|
||||
|
||||
function hidden_addtag(tagname) { // 1 reference
|
||||
let hid_input = hidden_input
|
||||
|
||||
let val = hid_input.value.split(' ')
|
||||
val.push(tagname)
|
||||
hid_input.value = val.join(' ').trim()
|
||||
}
|
||||
function hidden_removetag(tagname) { // 1 reference
|
||||
let hid_input = hidden_input
|
||||
|
||||
let val = hid_input.value.split(' ')
|
||||
val.splice(val.indexOf(tagname), 1)
|
||||
hid_input.value = val.join(' ').trim()
|
||||
}
|
||||
|
||||
function add_selected(tagname) { // 2 references
|
||||
let predf = predef
|
||||
let sel = selected
|
||||
|
||||
if (predf) {
|
||||
let pagetag = predf.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.appendChild(newtag)
|
||||
hidden_addtag(tagname)
|
||||
}
|
||||
function remove_selected(tagname) { // 2 references
|
||||
let predf = predef
|
||||
let sel = selected
|
||||
|
||||
if (predf) {
|
||||
let pagetag = predf.querySelector(`a[data-tagname=${tagname}]`)
|
||||
if (pagetag) {
|
||||
pagetag.classList.remove('tag_hide')
|
||||
}
|
||||
}
|
||||
|
||||
sel.querySelector(`a[data-tagname=${tagname}]`).remove()
|
||||
hidden_removetag(tagname)
|
||||
}
|
||||
|
||||
|
||||
// Page tags click to select
|
||||
if (predef) {
|
||||
predef.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)
|
||||
})
|
||||
}
|
||||
|
||||
function render_suggestions(data) { // 3 references
|
||||
let drop = suggest_dropdown
|
||||
let sel = selected
|
||||
let sug_input = suggest_input
|
||||
|
||||
drop.innerHTML = ''
|
||||
|
||||
let tagnames = Array.from(sel.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)
|
||||
sug_input.value = ''
|
||||
render_suggestions([])
|
||||
event.preventDefault()
|
||||
})
|
||||
|
||||
drop.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'))
|
||||
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue