Urgent! Can't use vanilla event listeners w/ barba (using function to re-init scripts on newPageLoad)

Hi,

Super close to a deadline here. I went to add event listeners & suddenly everything is going wrong. I keep getting “Cannot read property ‘addEventListener’ of null” on any event listeners. jQuery works fine however… although I really can’t afford to add the library just for this case.

I’m assuming it’s just firing before they are available to attach to, so I’ve tried all sorts of load listeners & events… no cigar just yet.

Any idea what I can do? Thank you in advance 😃

window.addEventListener("load", function () {
   Barba.Dispatcher.on('transitionCompleted', function(currentStatus, oldStatus, container) {
        reInitializeScripts();
    });
}



function reInitializeScripts() {

  let nextButton = document.querySelector(".swipe-button-next"), 
      backButton = document.querySelector(".swipe-button-prev"), 

      nextButtonText = document.querySelector('.swiper-button-next-text'), 
      backButtonText = document.querySelector('.swiper-button-back-text'), 

      nextButtonStroke = document.querySelector('.swiper-btn-next-stroke-clr'),
      backButtonStroke = document.querySelector('.swiper-btn-back-stroke-clr');

      nextButtonArrow = document.querySelector('.fuego-button-arrow-next'),
      backButtonArrow = document.querySelector('.fuego-button-arrow-back');


  TweenMax.set([nextButtonStroke, backButtonStroke], {drawSVG: "0% 0%"});

  let nextButtonTL = new TimelineMax({paused:true, reversed:true}),
      prevButtonTL = new TimelineMax({paused:true, reversed:true});


  nextButton.addEventListener('mouseover', function() {
    nextButtonTL.to(nextButtonStroke, 0.52, {
      drawSVG:"100% 0%"
    }, 0);
    nextButtonTL.to(nextButtonText, 0.52, {
      color:"#DA8978"
    }, 0);
    nextButtonTL.to(nextButtonArrow, 0.52, {fill:"#DA8978"}, 0);
    nextButtonTL.play();
  });


  backButton.addEventListener('mouseover', function() {
    prevButtonTL.to(backButtonStroke, 0.52, {
      drawSVG:"0% 100%"
    }, 0);
    prevButtonTL.to(backButtonText, 0.52, {
      color:"#DA8978"
    }, 0);
    prevButtonTL.to(backButtonArrow, 0.52, {fill:"#DA8978"}, 0);
    prevButtonTL.play();
  });

  nextButton.addEventListener('mouseout', function() {
    nextButtonTL.reverse();
  });

  backButton.addEventListener('mouseout', function() {
    prevButtonTL.reverse();
  });
}

[gfnool]

I actually did not know that… awesome thank you 😃 However I’d love to know how you can make it work with vanilla. I’m gradually moving over to purely vanilla just to get better at not using libraries so

I guess that you are using the same script on every page, listening the transitionCompleted event, but not every page contains all the elements that are initialized in your script.

For example, if a page does not contain the ‘.swipe-button-next’ element, the variable will be null and therefore the addEventListener method will thrown an error. You have to test it before like this:

var nextButton = document.querySelector(".swipe-button-next"); 

if(nextButton != null)
    nextButton.addEventListener(...);

Otherwise you can run specific code based on different namespace, have a look at the View documentation here: http://barbajs.org/views.html

In the same way you have to destroy everything when the old container is removed, to prevent memory leaks or duplicated listeners.

Do not get me wrong, but Barba has nothing to do with this problems. These are common patterns of a Single Page Application and you should understand the plugins/modules lifecycle better before using them.

[thierrymichel]

Glad to hear! 👍