clear notifications notifications/inbox onclick

jackmaessen

When i look on this forum ; if you get a notification for notification or inbox there appears a red area with the number in it. When clicking on the inbox or notification, the red section disappears. On my own forum i also styled the notification with red background but it does'n disappear when clicking on it. Only after refreshing the page.

I found a difference in the code:

The difference: onthis forum

class="MeButton FlyoutButton js-clear-notifications" title="Notifications".....
On my forum:

class="MeButton FlyoutButton" title="notifications"....

So the class js-clear-notifications doesn't exist on my forum.
What is the javascript behind this option and how can i easily integrate this on my own site?

R_J

https://github.com/vanilla/vanilla/blob/master/js/global.js#L1089-1092

Do you have a custom theme where you can add that js? It should not be in your global.js or you would loose it in a possible 2.1.9 update

jackmaessen

Well, when i look to this piece of code, it says: when click on class js-clear-notifications; then remove class NotificationsAlert.

1. the class js-clear-notifications is not parsed in my code
2. i only have a class .Alert and on this forum there is a class .Alert NotificationsAlert

Ofcourse i can trigger on class .Alert but the problem then is: Inbox notifications also uses that class

jackmaessen

Found a solution:


In applications\dashboard\views\modules\me.php
original:

$CNotifications = is_numeric($CountNotifications) && $CountNotifications > 0 ? '<span class="Alert">'.$CountNotifications.'</span>' : ''; // and $CInbox = is_numeric($CountInbox) && $CountInbox > 0 ? ' <span class="Alert">'.$CountInbox.'</span>' : '';

edited:

$CNotifications = is_numeric($CountNotifications) && $CountNotifications > 0 ? '<span class="AlertNotifications">'.$CountNotifications.'</span>' : ''; // and $CInbox = is_numeric($CountInbox) && $CountInbox > 0 ? ' <span class="AlertInbox">'.$CountInbox.'</span>' : '';

For the Notifications: .Alert becomes .AlertNotifications and for the Inbox .Alert becomes .AlertInbox

Now i have 2 different classes which i can trigger on with the javascript
I think this is not the way it is realized on this forum but at the moment i can not find an easier way to fix this

R_J

You are right, I haven't checked the prerequisites...

If there is no such class js-clear-notifications, you have to bind the function to an existing element: the Notifications link. And if there is no class NotificationsAlert, you have to do what you want to do by yourself: hide the Alert that's inside the Notification link:

$(document).on('click', "a[title='Notifications']", function() {
    $(this).find('span.Alert').hide();
});

R_J

Better than editing original files is to copy them to a plugin or your theme. I guess if you copy the me.php to /themes/yourtheme/views/modules/me.php it will be used and you can let the original view untouched.

I've taken the code from GitHub master branch, so you can take a look at the me view over there and also check how it is styled when you like to copy the exact behavior.

R_J

https://github.com/vanilla/vanilla/blob/master/applications/dashboard/views/modules/me.php#L34
https://github.com/vanilla/vanilla/blob/master/applications/dashboard/views/modules/me.php#L37

No reference in the css as far as I can see...

hgtonight

Classes prefixed with js- generally have no style associated with them. They are added to hook into JS that will parse them.

R_J

@hgtonight said:
Classes prefixed with js- generally have no style associated with them. They are added to hook into JS that will parse them.

Phew! Adding a class only for js functions? I think that is polluting the DOM and I'm happy that I see it only at one place here.

hgtonight

@R_J said:
Phew! Adding a class only for js functions? I think that is polluting the DOM and I'm happy that I see it only at one place here.

The class still provides some meaning to the element (it shows state of the notifications badge). Hardly pollution.

jackmaessen

i created 2 different classes now and added these to existing class MeButton FlyoutButton
For the notifications:

class="MeButton FlyoutButton js-clear-notifications" title="Notifications"

and for the Inbox:

class="MeButton FlyoutButton js-clear-inbox" title="Inbox"

The class .Alert i seperated in .AlertNotifications and .AlertInbox

And i put this in the javascript:

// Clear notifications alerts 
   $(document).on('click', '.js-clear-notifications', function() {
      $('.AlertNotifications').remove();
   });

   // clear inbox alerts
   $(document).on('click', '.js-clear-inbox', function() {
      $('.AlertInbox').remove();
   });

Is this javascript correct? Because both should be seperated when onclick

hgtonight

@jackmaessen said:
i created 2 different classes now and added these to existing class MeButton FlyoutButton
For the notifications:

class="MeButton FlyoutButton js-clear-notifications" title="Notifications"

and for the Inbox:

class="MeButton FlyoutButton js-clear-inbox" title="Inbox"

The class .Alert i seperated in .AlertNotifications and .AlertInbox

And i put this in the javascript:

// Clear notifications alerts 
   $(document).on('click', '.js-clear-notifications', function() {
      $('.AlertNotifications').remove();
   });
   
   // clear inbox alerts
   $(document).on('click', '.js-clear-inbox', function() {
      $('.AlertInbox').remove();
   });

Is this javascript correct? Because both should be seperated when onclick

Just use:

$(document).on('click', '.js-clear-notifications', function() {
  $(this).remove();
});

If the children are needed, then use a .find() with a selector.