- Event mnc-count added

- Module template modified

README.md

@@ -20,6 +20,53 @@ For the output of the notifications a module is provided, which can output the n
 
 > In the "unread" mode, an additional button is displayed to mark the message "as read".
 
+## Styling and customization
+**Dynamic list:**\
+A dynamic list defines a list in which notifications are removed from the list when clicked (mostly mode unread). This case usually occurs when the member can mark notifications as read via a bell or similar.
+
+Within the template `mod_memberNotification.html5` can be influenced whether notification item will be removed after click. To not apply this behavior the HTML attribute `data-mnc-delete-on-mark` must be removed.
+
+By removing this HTML attribute, the item is no longer removed but the class `read` is added after click.
+
+**Display the "No new messages" item:**\
+The item is always displayed since version `1.0.4`. In conjunction with a dynamic list, the item can be styled as follows to display it only when there are no new messages:
+
+```css
+.notifications .message{
+    display: none;
+}
+
+.notifications .message:only-child{
+    display: block;
+}
+```
+
+If the HTML attribute `data-mnc-delete-on-mark` should be removed, the following query in the template can be used to influence the output of the message:
+```php
+<?php if($this->hasNotifications): ?>
+    <div class="message">
+        <?=$this->message?>
+    </div>
+<?php endif; ?>
+```
+
+**Advanced use:**\
+Further peculiarities can be caught by the event `mnc-count`. This event is always fired as soon as a notification is marked as read.
+
+```js
+window.addEventListener('mnc-count', function (e) {
+  console.log(e.detail);
+
+  // Output:
+  // {
+  //   element: DOMElement,
+  //   counter: DOMElement,
+  //   currentCount: Number
+  // }
+
+}, false);
+```
+
 ## Hooks
 ```php
 // Hook: beforeParseMemberNotification (Can be used to manipulate the data query)
@@ -35,4 +82,4 @@ public function onParseMemberNotification(MemberNotificationModel $objNotificati
 {
     // Custom logic
 }
-```
+```

src/Resources/contao/modules/ModuleMemberNotification.php

@@ -114,12 +114,8 @@ protected function compile()
                 $arrNotification[] = $objNotification;
             }
         }
-        else
-        {
-            $this->Template->message = $GLOBALS['TL_LANG']['tl_member_notification']['emptyMessage'];
-        }
-
 
+        $this->Template->message = $GLOBALS['TL_LANG']['tl_member_notification']['emptyMessage'];
         $this->Template->labelMarkAsRead = $GLOBALS['TL_LANG']['tl_member_notification']['markAsRead'];
         $this->Template->amount = count($arrNotification);
         $this->Template->hasNotifications = !!$this->Template->amount;

src/Resources/contao/templates/modules/mod_memberNotification.html5

@@ -13,30 +13,28 @@
 <?php endif; ?>
 
 <div class="notifications">
-    <?php if($this->hasNotifications): ?>
-        <?php foreach ($this->notifications as $notification): ?>
-            <div class="notification<?=($notification->read ? ' read' : '')?>" data-mnc-notification="<?=$notification->id?>">
-
-            <?php if($notification->jumpTo): ?>
-                <a href="<?=$notification->jumpTo?>" data-mnc-read>
-            <?php endif; ?>
-
-                <span><?=$notification->title?></span>
-                <span><?=$notification->teaser?></span>
-
-            <?php if($notification->jumpTo): ?>
-                </a>
-            <?php endif; ?>
-
-            <?php if($this->notificationMode === 'unread'): ?>
-                <a href="javascript:void(0);" data-mnc-read data-mnc-mark title="<?=$this->labelMarkAsRead?>">&#10005;</a>
-            <?php endif; ?>
-            </div>
-        <?php endforeach; ?>
-    <?php else: ?>
-        <div class="message">
-            <?=$this->message?>
+    <?php foreach ($this->notifications as $notification): ?>
+        <div class="notification<?=($notification->read ? ' read' : '')?>" data-mnc-notification="<?=$notification->id?>" data-mnc-delete-on-mark>
+
+        <?php if($notification->jumpTo): ?>
+            <a href="<?=$notification->jumpTo?>" data-mnc-read>
+        <?php endif; ?>
+
+            <span><?=$notification->title?></span>
+            <span><?=$notification->teaser?></span>
+
+        <?php if($notification->jumpTo): ?>
+            </a>
+        <?php endif; ?>
+
+        <?php if($this->notificationMode === 'unread'): ?>
+            <a href="javascript:void(0);" data-mnc-read data-mnc-mark title="<?=$this->labelMarkAsRead?>">&#10005;</a>
+        <?php endif; ?>
         </div>
-    <?php endif; ?>
+    <?php endforeach; ?>
+
+    <div class="message">
+        <?=$this->message?>
+    </div>
 </div>
 <?php $this->endblock(); ?>

src/Resources/public/notification.js

@@ -25,9 +25,25 @@ const MemberNotification = (function () {
                             moduleCounter.innerText = --notificationCount;
                         }
 
+                        // Custom event
+                        let event = new CustomEvent("mnc-count", {
+                            detail: {
+                                element: item,
+                                counter: moduleCounter,
+                                currentCount: notificationCount
+                            }
+                        });
+
+                        window.dispatchEvent(event);
+
                         if('mncMark' in this.dataset){
-                            item.classList.add('read');
-                            handle.parentNode.removeChild(handle);
+
+                            if('mncDeleteOnMark' in item.dataset) {
+                                item.parentNode.removeChild(item);
+                            }else{
+                                item.classList.add('read');
+                                handle.parentNode.removeChild(handle);
+                            }
                         }
 
                         read(ncId);