keep discover widgets collapsed toggle state

This commit is contained in:
Your Name 2024-06-04 19:04:41 -04:00 committed by Henri Dickson
parent 432b435083
commit abb36cd80f
2 changed files with 20 additions and 6 deletions

View file

@ -151,7 +151,7 @@
{% if request.user.unread_announcements %}
<section class="announcement">
<article>
<details open>
<details id="section-announcements" class="auto-keep-collapse" open>
<summary>{% trans "Unread Announcements" %}</summary>
{% for ann in request.user.unread_announcements %}<div>{{ ann.html }}</div>{% endfor %}
<form action="{% url 'users:mark_announcements_read' %}" method="post">
@ -166,7 +166,7 @@
{% endif %}
<section>
<article>
<details class="auto-collapse" open>
<details id="section-popular-posts" class="auto-keep-collapse" open>
<summary>{% trans 'Popular Posts' %}</summary>
<div style="font-size:80%">{% include "posts.html" with posts=popular_posts %}</div>
</details>
@ -174,7 +174,7 @@
</section>
<section>
<article>
<details class="auto-collapse" open>
<details id="section-popular-tags" class="auto-keep-collapse" open>
<summary>{% trans 'Popular Tags' %}</summary>
<div class="tag-list">
{% for t in popular_tags %}

View file

@ -18,6 +18,9 @@
</footer>
<div class="player"></div>
<script>
document.body.addEventListener('htmx:configRequest', (event) => {
event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
});
$(function () {
function _sidebar_auto_collapse(mm){
if (mm.matches) {
@ -29,8 +32,19 @@
var mm = window.matchMedia("(max-width: 768px)")
mm.addListener(_sidebar_auto_collapse);
_sidebar_auto_collapse(mm);
$('.auto-keep-collapse').each(function(){
if (mm.matches || window.localStorage.getItem('details-'+$(this).attr('id'))=="closed") {
$(this).removeAttr('open');
} else {
$(this).attr('open', '');
}
});
setTimeout(function(){
$('.auto-keep-collapse').on('toggle', function(event) {
var id = $(this).attr('id')
var isOpen = $(this).attr('open') === ''
window.localStorage.setItem('details-' + id, isOpen ? 'open' : 'closed')
});
}, 0);
});
document.body.addEventListener('htmx:configRequest', (event) => {
event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
})
</script>