add post navigation buttons

master
Aevann 2024-01-31 01:29:09 +02:00
parent 66727e5b97
commit eaff4f61e2
4 changed files with 32 additions and 2 deletions

View File

@ -6,6 +6,7 @@
.fa-align-left:before{content:"\f036"}
.fa-long-arrow-left:before{content:"\f177"}
.fa-arrow-left:before{content:"\f060"}
.fa-arrow-right:before{content:"\f061"}
.fa-sign-out:before{content:"\f08b"}
.fa-long-arrow-right:before{content:"\f178"}

View File

@ -34,7 +34,7 @@ if (fake_textarea) {
}
//KEYBOARD ARROW NAVIGATION
//POST NAVIGATION
const post_ids = localStorage.getItem("post_ids").split(', ');
const current_index = post_ids.indexOf(`'${location.href}'`)
@ -42,6 +42,20 @@ if (current_index > -1) {
const id_after = post_ids[current_index+1]
const id_before = post_ids[current_index-1]
if (id_before || id_after) {
document.getElementById('post_navigation').classList.remove('d-none')
}
if (id_before) {
document.getElementById('post_before').classList.remove('disabled')
document.getElementById('post_before').href = id_before.slice(1, -1)
}
if (id_after) {
document.getElementById('post_after').classList.remove('disabled')
document.getElementById('post_after').href = id_after.slice(1, -1)
}
document.addEventListener('keydown', (e) => {
if (document.activeElement.tagName != 'TEXTAREA' && document.activeElement.tagName != 'INPUT') {
if (id_before && e.key == 'ArrowLeft') {

View File

@ -1,2 +1,2 @@
const post_ids = document.getElementById('post_ids').value.slice(1, -1)
localStorage.setItem("post_ids", post_ids);
sessionStorage.setItem("post_ids", post_ids);

View File

@ -294,6 +294,21 @@
<div autocomplete="off" class="markdown d-none border my-2 p-3 rounded" id="markdown-{{p.fullname}}" readonly>{{p.body.strip()}}</div>
{% endif %}
<div id="post_navigation" class="d-none my-4" style="top: 0px; transition: top cubic-bezier(0, 0, 0.2, 1) 220ms; position: relative; z-index: 1029">
<div id="post_navigation-tabs" class="row" style="justify-content: center">
<a id="post_before" class="disabled btn btn-primary btn-block m-0 shop-tab award-tab">
<span class="mr-auto ml-auto">
<i class="fas fa-arrow-left"></i> Previous Post
</span>
</a>
<a id="post_after" class="disabled btn btn-primary btn-block m-0 shop-tab award-tab">
<span class="mr-auto ml-auto">
<i class="fas fa-arrow-right"></i> Next Post
</span>
</a>
</div>
</div>
<div class="row border-md-0 comment-section pb-3">
<div class="col border-top">
<div class="comments-count py-3">