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