Implement relay scroll restore
This commit is contained in:
parent
fbd933f6c6
commit
850d00de19
|
@ -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>
|
||||
|
||||
|
|
|
@ -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>
|
Loading…
Reference in New Issue