Implement relay scroll restore

This commit is contained in:
Mark Veidemanis 2022-08-26 22:04:30 +01:00
parent fbd933f6c6
commit 850d00de19
Signed by: m
GPG Key ID: 5ACFCEED46C0904F
2 changed files with 246 additions and 214 deletions

View File

@ -1,6 +1,28 @@
{% extends "base.html" %}
{% block content %}
<script>
document.addEventListener("restore-relay-scroll", function(event) {
var modalContent = document.getElementsByClassName("relay_table_container")[0];
var maxScroll = modalContent.scrollHeight - modalContent.offsetHeight;
var scrollpos = localStorage.getItem('scrollpos_relays_table');
if (scrollpos == 'BOTTOM') {
modalContent.scrollTop = maxScroll;
} else if (scrollpos) {
modalContent.scrollTop = scrollpos;
};
});
document.addEventListener("htmx:beforeSwap", function(event) {
var modalContent = document.getElementsByClassName("relay_table_container")[0];
var scrollpos = modalContent.scrollTop;
if(modalContent.scrollTop === (modalContent.scrollHeight - modalContent.offsetHeight)) {
localStorage.setItem('scrollpos_relays_table', 'BOTTOM');
} else {
localStorage.setItem('scrollpos_relays_table', scrollpos);
}
});
</script>
<div
style="display: none;"
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
@ -16,7 +38,8 @@
hx-get="{% url 'threshold_irc_network_relays' net %}"
hx-trigger="load, every 60s"
hx-target="#relays"
hx-swap="outerHTML">
{# hx-swap="innerHTML" #}
>
</div>
<div
@ -54,11 +77,21 @@
</div>
</div>
</div>
<div class="column">
<!-- <div class="column">
<div class="box">
<div id="relays">
</div>
</div>
</div> -->
<div class="column">
<div class="box">
<div>
<div class="content" style="max-height: 30em; overflow: auto;">
<div class="table-container relay_table_container" id="relays">
</div>
</div>
</div>
</div>
</div>
</div>

View File

@ -1,8 +1,6 @@
{% load index %}
<div id="relays">
{% if relays is not None %}
<div class="content" style="max-height: 30em; overflow: auto;">
<div class="table-container">
<div class="table-container relay_table_container" id="relays">
<table class="table is-fullwidth is-hoverable relays-table">
<thead>
<th>id</th>
@ -215,8 +213,9 @@
{% endfor %}
</tbody>
</table>
</div>
</div>
{% endif %}
<script>
var modal_event = new Event('restore-relay-scroll');
document.dispatchEvent(modal_event);
</script>
{% include 'manage/threshold/partials/notify.html' %}
</div>