JS toggle class read/unread status works on *all* container (change DOM selector)

This commit is contained in:
Mathieu Jaumotte 2022-01-14 20:02:00 +01:00
parent 20fcaa5428
commit 22022e5143
3 changed files with 10 additions and 10 deletions

View File

@ -6,7 +6,7 @@ const i18n = _createI18n({});
window.addEventListener('DOMContentLoaded', function (e) {
document.querySelectorAll('.notification_toggle_read_status')
.forEach(function (el) {
.forEach(function (el, i) {
createApp({
template: '<notification-read-toggle ' +
':notificationId="notificationId" ' +
@ -31,20 +31,20 @@ window.addEventListener('DOMContentLoaded', function (e) {
},
computed: {
getContainer() {
return document.getElementById(this.container);
return document.querySelectorAll('div.' + this.container);
}
},
methods: {
onMarkRead() {
if (null !== this.getContainer) {
this.getContainer.classList.replace('read', 'unread');
}
if (typeof this.getContainer[i] !== 'undefined') {
this.getContainer[i].classList.replace('read', 'unread');
} else { throw 'data-container attribute is missing' }
this.isRead = false;
},
onMarkUnread() {
if (null !== this.getContainer) {
this.getContainer.classList.replace('unread', 'read');
}
if (typeof this.getContainer[i] !== 'undefined') {
this.getContainer[i].classList.replace('unread', 'read');
} else { throw 'data-container attribute is missing' }
this.isRead = true;
},
}

View File

@ -1,4 +1,4 @@
<div class="item-bloc {% if notification.isReadBy(app.user) %}read{% else %}unread{% endif %}" id="notification-status">
<div class="item-bloc notification-status {% if notification.isReadBy(app.user) %}read{% else %}unread{% endif %}">
<div class="item-row title">
<h2 class="notification-title">
<a href="{{ chill_path_add_return_path('chill_main_notification_show', {'id': notification.id}) }}">

View File

@ -4,7 +4,7 @@
</div>
{# TODO pagination or limit #}
{% for notification in notifications %}
<div class="list-group-item {% if notification.isReadBy(app.user) %}read{% else %}unread{% endif %}" id="notification-status">
<div class="list-group-item notification-status {% if notification.isReadBy(app.user) %}read{% else %}unread{% endif %}">
{% if not notification.isSystem %}
{% if notification.sender == app.user %}