70 lines
1.9 KiB
HTML
70 lines
1.9 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_TEMPLATE = "partials/blog/single.html";
|
|
document.$CHAT_SOCKET.send(JSON.stringify({
|
|
selector: "#main",
|
|
template: document.$CHAT_TEMPLATE,
|
|
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_TEMPLATE = "partials/blog/all_articles.html";
|
|
document.$CHAT_SOCKET.send(JSON.stringify({
|
|
selector: "#main",
|
|
template: document.$CHAT_TEMPLATE,
|
|
data: {
|
|
pag: {% if pag > 1 %}{{ pag }} - 1{% else %}1{% endif %}
|
|
}
|
|
}))
|
|
});
|
|
|
|
|
|
pagNext.addEventListener('click', (event) => {
|
|
event.preventDefault();
|
|
document.$CHAT_TEMPLATE = "partials/blog/all_articles.html";
|
|
document.$CHAT_SOCKET.send(JSON.stringify({
|
|
selector: "#main",
|
|
template: document.$CHAT_TEMPLATE,
|
|
data: {
|
|
pag: {{ pag }} + 1
|
|
}
|
|
}))
|
|
});
|
|
|
|
|
|
|
|
</script>
|