demo-HTML-over-WebSockets-i.../apps/front/templates/partials/blog/all_articles.html
Andros Fenollosa 039778e9a9 Add paginator
2021-03-12 21:16:23 +01:00

67 lines
1.7 KiB
HTML

<div id="articles">
{% for post in posts %}
<article>
<h2>{{ post.title }}</h2>
<p>Author: {{ post.author }}</p>
<p><button data-id="{{ post.id }}" class="btn">More</button></p>
<hr>
</article>
{% endfor %}
</div>
<ul class="pagination">
<li class="page-item{% if pag == 1 %} disabled{% endif %}">
<a id="pag-previous" href="#">Previous</a>
</li>
<li class="page-item">
<a id="pag-next" href="#">Next</a>
</li>
</ul>
<script>
// Open article
buttons = document.querySelectorAll('.btn');
buttons.forEach((button) => {
button.addEventListener('click', event => {
document.$CHAT_SOCKET.send(JSON.stringify({
selector: "#main",
template: "partials/blog/single.html",
data: {
id: event.target.dataset.id
}
}))
});
});
// Paginator
pagPrevious = document.querySelector('#pag-previous');
pagNext = document.querySelector('#pag-next');
pagPrevious.addEventListener('click', (event) => {
event.preventDefault();
document.$CHAT_SOCKET.send(JSON.stringify({
selector: "#main",
template: "partials/blog/all_articles.html",
data: {
pag: {% if pag > 1 %}{{ pag }} - 1{% else %}1{% endif %}
}
}))
});
pagNext.addEventListener('click', (event) => {
event.preventDefault();
document.$CHAT_SOCKET.send(JSON.stringify({
selector: "#main",
template: "partials/blog/all_articles.html",
data: {
pag: {{ pag }} + 1
}
}))
});
</script>