44 lines
1.7 KiB
HTML
44 lines
1.7 KiB
HTML
|
{% extends "base.html" %}
|
||
|
|
{% block title %}Добавить пост{% endblock %}
|
||
|
|
|
||
|
|
{% block content %}
|
||
|
|
<h2>Добавить пост</h2>
|
||
|
|
<form method="post" id="addform">
|
||
|
|
<div><input name="title" placeholder="Заголовок (необязательно)" style="width:100%"></div>
|
||
|
|
<div><textarea name="body" rows="10" style="width:100%" placeholder="Текст"></textarea></div>
|
||
|
|
<div>
|
||
|
|
<input id="tagsinput" name="tags" placeholder="Теги через запятую" style="width:100%" />
|
||
|
|
<div id="suggestions" class="suggestions"></div>
|
||
|
|
</div>
|
||
|
|
<div><button type="submit">Опубликовать</button></div>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
(async function(){
|
||
|
|
const input = document.getElementById("tagsinput");
|
||
|
|
const sugg = document.getElementById("suggestions");
|
||
|
|
let last = "";
|
||
|
|
input.addEventListener("input", async (e) => {
|
||
|
|
const val = input.value.split(",").pop().trim();
|
||
|
|
if (!val || val === last) { sugg.innerHTML=""; return; }
|
||
|
|
last = val;
|
||
|
|
try {
|
||
|
|
const res = await fetch('/_tags?q=' + encodeURIComponent(val));
|
||
|
|
const arr = await res.json();
|
||
|
|
sugg.innerHTML = arr.slice(0,10).map(t => `<button class="tag-sugg" type="button" data-tag="${t}">#${t}</button>`).join(" ");
|
||
|
|
document.querySelectorAll(".tag-sugg").forEach(b => {
|
||
|
|
b.addEventListener("click",(ev)=>{
|
||
|
|
const tag = ev.currentTarget.dataset.tag;
|
||
|
|
const parts = input.value.split(",");
|
||
|
|
parts[parts.length-1] = " " + tag;
|
||
|
|
input.value = parts.map(p=>p.trim()).filter(Boolean).join(", ") + ", ";
|
||
|
|
input.focus();
|
||
|
|
sugg.innerHTML = "";
|
||
|
|
});
|
||
|
|
});
|
||
|
|
} catch(e) { console.warn(e); }
|
||
|
|
});
|
||
|
|
})();
|
||
|
|
</script>
|
||
|
|
{% endblock %}
|