clear notifications notifications/inbox onclick

Comments

• R_J Admin

  February 2015 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

  0
• jackmaessen ✭✭✭

  February 2015 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

  0
• jackmaessen ✭✭✭

  February 2015 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

  0
• R_J Admin

  February 2015 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();
  });
  

  0
• R_J Admin

  February 2015

  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.

  1
• R_J Admin

  February 2015

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

  2
• hgtonight MVP

  February 2015

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

  1
• R_J Admin

  February 2015

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

  0
• hgtonight MVP

  February 2015

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

  0
• jackmaessen ✭✭✭

  February 2015 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

  0
• hgtonight MVP

  February 2015

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

  1