1
1
Fork 0

Search tag input finalization goddamn it

dev
Jan Kužílek 5 years ago
parent 18791cc77c
commit d9cb0b996a

@ -19,5 +19,5 @@ def tag_autocomplete():
tags = Tag.query.filter(Tag.content.like("%{}%".format(query))).limit(5).all()
return jsonify([{"id": t.id, "content": t.content, "content_deser": t.content_deser, "category": {"id": t.category.value, "name": t.category.name}} for t in tags])
return jsonify({'error': 'not found'})
return jsonify()
# tags = request.args.get('tags', '')

File diff suppressed because one or more lines are too long

@ -310,7 +310,9 @@ header {
flex-flow: column nowrap;
align-items: start;
width: 100%;
// width: 100%;
top: 100%;
left: 0;
position: absolute;
z-index: 10;
overflow: auto;

@ -2,8 +2,25 @@ let tagroot = document.querySelector('article.tags')
let sel_tags = tagroot.querySelector('div.tag_container.tags_selected')
let page_tags = tagroot.querySelector('div.tag_container.tags_inpage')
let search_input = tagroot.querySelector('.searchbox > input[name=tagsearch]')
let search_dropdown = tagroot.querySelector('.searchbox > .search_dropdown')
let searchroot = tagroot.querySelector('.searchbox')
searchroot.insertAdjacentHTML("beforeend", `<input type="hidden" name="tags">`)
let search_input = searchroot.querySelector('input[name=tags][type=text]')
search_input.removeAttribute('name')
search_input.value = ''
let search_hidden = document.querySelector('input[name=tags][type=hidden]')
let search_dropdown = searchroot.querySelector('.search_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 newseltag(tagname) {
let tag = document.createElement("a")
@ -16,8 +33,23 @@ function newseltag(tagname) {
<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 tags_input_addtag(tagname) {
let val = search_hidden.value.split(' ')
val.push(tagname)
search_hidden.value = val.join(' ').trim()
// console.log(search_hidden.value)
}
function tags_input_removetag(tagname) {
let val = search_hidden.value.split(' ')
val.splice(val.indexOf(tagname), 1)
search_hidden.value = val.join(' ').trim()
// console.log(search_hidden.value)
}
function addseltag(tagname) {
// let pagetag = page_tags.querySelector("a.tag-"+tagname)
let pagetag = page_tags.querySelector(`a[data-tagname=${tagname}]`)
@ -27,25 +59,37 @@ function addseltag(tagname) {
let newtag = newseltag(tagname)
newtag.addEventListener('click', (event) => {
removeseltag(event.target.dataset.tagname)
console.log(`Deselected: ${event.target.dataset.tagname}`)
// console.log(`Deselected: ${event.target.dataset.tagname}`)
})
sel_tags.appendChild(newtag)
tags_input_addtag(tagname)
}
function removeseltag(tagname) {
let pagetag = page_tags.querySelector(`a[data-tagname=${tagname}]`)
if (pagetag) {
pagetag.classList.remove('tag_hide')
}
sel_tags.querySelector(`a[data-tagname=${tagname}]`).remove()
tags_input_removetag(tagname)
}
page_tags.querySelectorAll("a").forEach(element => {
element.addEventListener('click', (event) => {
addseltag(event.target.dataset.tagname)
console.log(`Selected: ${event.target.dataset.tagname}`)
// console.log(`Selected: ${event.target.dataset.tagname}`)
event.preventDefault()
})
})
let query = getJsonFromUrl()
if (query['tags']) {
query['tags'].split('+').forEach((tag) => {
addseltag(tag)
})
}
// Suggestions
function newsugtag(tagname) {
let tag = document.createElement("a")
tag.classList.add("tagsuggestion")
@ -77,13 +121,19 @@ function rendersuggestions(data) {
search_dropdown.appendChild(sugtag)
});
}
var search_timeout
search_input.addEventListener('input', (event) => {
clearTimeout(search_timeout)
let value = search_input.value.trim()
if (value.length < 2) {
rendersuggestions([])
return
}
search_timeout = setTimeout(() => {
fetch('/api/tags?q='+search_input.value).then((response) => {
fetch('/api/tags?q='+value).then((response) => {
console.log(response)
return response.json()
}).then((data) => {
@ -94,11 +144,22 @@ search_input.addEventListener('input', (event) => {
}, 500)
})
search_input.addEventListener('keypress', (event) => {
if (event.keyCode == 13) {
event.preventDefault()
}
})
// 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'))
// console.log(page_tags)
// console.log(sel_tags)

@ -8,8 +8,6 @@
{% endassets %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="{{ url_for('static', filename="base.js") }}"></script>
<script src="{{ url_for('static', filename="management.js") }}"></script>
<title>{{ config.get('INSTANCE_NAME') }}</title>
</head>
<body>
@ -62,5 +60,7 @@
<footer>
Produced by KuxaBeast
</footer>
<script src="{{ url_for('static', filename="base.js") }}"></script>
<script src="{{ url_for('static', filename="management.js") }}"></script>
</body>
</html>

@ -1,21 +1,25 @@
{% extends 'layout/base_sidebar.html' %}
{% block sidebar %}
<!-- <article class="search">
<h3>Search</h3>
<script>
</script>
</article> -->
<article class="tags">
<form action="{{ url_for('api.post_index') }}" method="get">
<h3>Tags</h3>
<form action="{{ url_for('post.posts') }}" method="get">
<h3>Search</h3>
<div class="searchbox">
<input type="text" name="tagsearch" id="search" autocomplete="off">
<input type="text" name="tags" id="search" autocomplete="off" value="{{ request.args.get('tags') }}">
<div class="search_dropdown"></div>
</div>
<input type="submit" value="Search">
<div class="rating">
{% for rating in ('safe', 'questionable', 'explicit') %}
<input type="radio" name="rating" id="rating-{{ rating }}" value="{{ rating }}" {%
if (rating == request.args.get('rating') if request.args.get('rating') in ('safe', 'explicit', 'questionable') else rating == 'safe')
%}checked{% endif %}>
<label for="rating-{{ rating }}">{{ rating.capitalize() }}</label>
{% endfor %}
</div>
<h3>Tags</h3>
<div class="tag_container tags_selected"></div>
<div class="tag_container tags_inpage">
{% for tag in tags %}

Loading…
Cancel
Save