Barba: Event example

[bobbyballard]

Hey @luruke could you please give an example of using the linkClicked event to update the class on a menu item?

[comrx]

It would look like this:

jQuery:

Barba.Dispatcher.on('linkClicked', function(currentStatus, oldStatus, container) {
  $('.element').addClass('class');
});

Javascript:

Barba.Dispatcher.on('linkClicked', function(currentStatus, oldStatus, container) {
     var element = document.getElementById("#element");
    element.classList.add("class");
});

Although, I feel like you don't need to use Barba.Dispatcher for this at all. Your function could easily be done like this with jQuery:

$('.menu-item').on('click', function(e) {
  // Remove all active classes from any menu item
  $('.menu-item').removeClass('active');

  // Add active class to clicked menu item
  $(this).addClass('active');
});

[bobbyballard]

Thanks for your response @c0mrx

The jQuery is something I'd tried - the issue being that the state of menu items isn't tied in to navigating with the browser forward and back buttons. So the page content will update through pushState but the active menu item will not.

I'm pretty sure this is something that can be addressed with Events/views in Barba but I can't figure out how!

[comrx]

@bobbyballard Hmm that's interesting. You could also do this with classes on the barba container. I usually combine barba with Wordpress, which automatically generates page classes that I assign to the barba container. That way I can check the class of the page and activate the nav item. Like so:

HTML

<ul class="nav">
  <li class="menu-id-123">Link Here</li>
  <li class="menu-id-333">Link Here</li>
</ul>

<!--- Each page should have a unique id or class that gets changed when we load it -->
<div class="barba-container page-id-123">
    <!-- Page content here -->
</div>

jQuery

Barba.Dispatcher.on('transitionCompleted', function(currentStatus, oldStatus, container) {

  // This is looking to see if .barba-container has the class 'page-id-123',
  // and if so, add an active class to the corresponding nav item.

  if ($('.barba-container').is('.page-id-123')) {
    $('.menu-id-123').addClass('active');
  });

});

This way, anytime the transitionCompleted trigger runs (including if Back or Forward are used), it will check the body class and activate the corresponding nav item.

You could even use data attributes and tweak the code a bit to work more dynamically (i.e. just comparing the number instead of the full class name, eliminating the need to hard code every possible outcome. I just did it this way for an example.)

You can read more about the is function here