1
1
Fork 0

Flow update

dev
Jan Kužílek 5 years ago
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…
Cancel
Save