XF/neptune
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Properly swap modal context table and keep scroll position

Browse Source
This commit is contained in:
Mark Veidemanis
2022-08-09 07:20:30 +01:00
parent 3e92d17097
commit 83cd5e7ee7
6 changed files with 71 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
core/templates/modals/context.html
View File

@@ -5,34 +5,42 @@
<link rel ="stylesheet" href="{% static 'tabs.css' %}">
<script src="{% static 'tabs.js' %}"></script>
<div
class="modal-refresh"
style="display: none;"
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
hx-post="{% url 'modal_context' %}"
hx-vals='{"net": "{{ net }}",
"num": "{{ num }}",
"src": "{{ src }}",
"channel": "{{ channel }}",
"time": "{{ time }}",
"date": "{{ date }}",
"index": "{{ index }}"
}'
hx-target="#modals-here"
hx-trigger="every 3s">
<div class="modal-refresh"
style="display: none;"
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
hx-post="{% url 'modal_context_table' %}"
hx-vals='{"net": "{{ net }}",
"num": "{{ num }}",
"src": "{{ src }}",
"channel": "{{ channel }}",
"time": "{{ time }}",
"date": "{{ date }}",
"index": "{{ index }}"
}'
hx-target="#modal-context-table"
hx-trigger="every 5s">
</div>
<script>
document.addEventListener("restore-modal-scroll", function(event) {
var scrollpos = localStorage.getItem('scrollpos_modal_content');
if (scrollpos) {
document.getElementsByClassName("modal-content")[0].scrollTop = scrollpos;
};
var modalContent = document.getElementsByClassName("modal-content")[0];
var maxScroll = modalContent.scrollHeight - modalContent.offsetHeight;
var scrollpos = localStorage.getItem('scrollpos_modal_content');
if (scrollpos == 'BOTTOM') {
modalContent.scrollTop = maxScroll;
} else if (scrollpos) {
modalContent.scrollTop = scrollpos;
};
});
document.addEventListener("htmx:beforeSwap", function(event) {
var contentScroll = document.getElementsByClassName("modal-content")[0].scrollTop;
localStorage.setItem('scrollpos_modal_content', contentScroll);
var modalContent = document.getElementsByClassName("modal-content")[0];
var scrollpos = modalContent.scrollTop;
if(modalContent.scrollTop === (modalContent.scrollHeight - modalContent.offsetHeight)) {
localStorage.setItem('scrollpos_modal_content', 'BOTTOM');
} else {
localStorage.setItem('scrollpos_modal_content', scrollpos);
}
});
</script>
@@ -73,26 +81,7 @@
<div id="tab-content">
<div class="is-active" data-content="1">
<h4 class="subtitle is-4">Scrollback of {{ channel }} on {{ net }}{{ num }}</h4>
<article class="table-container">
<table class="table">
<thead>
<th></th>
</thead>
<tbody>
{% for item in object_list %}
{% if item.type == 'msg' %}
<tr>
<td>{{ item.time }}</td>
<td
class="has-tooltip-right {% if item.online is True %}has-text-success{% elif item.online is False %}has-text-danger{% else %}has-text-warning{% endif %}"
data-tooltip="{{ item.nick }}!{{ item.ident }}@{{ item.host }}">{{ item.nick }}</td>
<td class="wrap">{{ item.msg }}</td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
</article>
{% include 'modals/context_table.html' %}
<div class="field has-addons">
<div class="control is-expanded has-icons-left">
<input
@@ -135,10 +124,6 @@
</div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
<script>
var modal_event = new Event('restore-modal-scroll');
document.dispatchEvent(modal_event);
</script>
{# <script>activateButtons();</script> #}
</div>
</div>

24
core/templates/modals/context_table.html Normal file
View File

@@ -0,0 +1,24 @@
<article class="table-container" id="modal-context-table">
<table class="table">
<thead>
<th></th>
</thead>
<tbody>
{% for item in object_list %}
{% if item.type == 'msg' %}
<tr>
<td>{{ item.time }}</td>
<td
class="has-tooltip-right {% if item.online is True %}has-text-success{% elif item.online is False %}has-text-danger{% else %}has-text-warning{% endif %}"
data-tooltip="{{ item.nick }}!{{ item.ident }}@{{ item.host }}">{{ item.nick }}</td>
<td class="wrap">{{ item.msg }}</td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
</article>
<script>
var modal_event = new Event('restore-modal-scroll');
document.dispatchEvent(modal_event);
</script>