Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Options

clear notifications notifications/inbox onclick

jackmaessenjackmaessen ✭✭✭
edited February 2015 in Vanilla 2.0 - 2.8

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?

Comments

  • Options
    R_JR_J Ex-Fanboy Munich Admin
    edited February 2015

    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

  • Options
    jackmaessenjackmaessen ✭✭✭
    edited February 2015

    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

  • Options
    jackmaessenjackmaessen ✭✭✭
    edited February 2015

    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

  • Options
    R_JR_J Ex-Fanboy Munich Admin
    edited February 2015

    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();
    });
    
  • Options
    R_JR_J Ex-Fanboy Munich Admin

    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. ;)

  • Options
    hgtonighthgtonight ∞ · New MVP

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

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • Options
    R_JR_J Ex-Fanboy Munich Admin

    @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.

  • Options
    hgtonighthgtonight ∞ · New MVP

    @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.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • Options
    jackmaessenjackmaessen ✭✭✭
    edited February 2015

    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

  • Options
    hgtonighthgtonight ∞ · New MVP

    @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.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

Sign In or Register to comment.