Barba: Page reloaded

[jdacosta]

Hello !

First of all, thank you for your work. Barba is a very good library ;)

However, the page is fully reloaded when you click on a link with the same url as the current page, and I do not know if this is the intended behavior.

Is there any event I could retrieve to prevent reloading ?

Thanks

[quentinhocde]

+1 !

[ZachSaucier]

The preventCheck function inside of Pjax.js should be doing this already... I'll test

Update: Can produce. The function is indeed returning false as it should be... weird

[ZachSaucier]

Ah, I understand. It doesn't fire the barba link action but also doesn't prevent the native link from firing.

I recommend moving that check inside of the onLinkClick function:

  onLinkClick: function(evt) {
    var el = evt.target;

    //Go up in the nodelist until we
    //find something with .href
    while (el && !el.href) {
      el = el.parentNode;
    }

    if (this.preventCheck(evt, el)) {
      evt.stopPropagation();
      evt.preventDefault();

      //In case you're trying to load the same page
      if (Utils.cleanLink(el.href) == Utils.cleanLink(location.href)) {
        Dispatcher.trigger('linkClicked', el);
        this.goTo(el.href);
      }
    }
  },

And removing it from preventCheck of course

[luruke]

Hi there!
Thanks for using Barba and I'm really glad you like it!

Yes, It's the intended behaviour.
To be honest I hesitated if implementing it or not, but after thinking,
I'd like more to refresh the page instead of doing "nothing", which, can be frustrating for some users.

But I'm totally open to change the default behaviour if you have some good points.

A solution without replacing Barba.js code could be:

var links = document.querySelectorAll('a[href]');
var cbk = function(e) {
 if(e.currentTarget.href === window.location.href) {
   e.preventDefault();
   e.stopPropagation();
 }
};

for(var i = 0; i < links.length; i++) {
  links[i].addEventListener('click', cbk);
}

It basically register an handler that runs before the one of Barba.js, it checks if the href is the same of the current url, and if yes it prevent the default behaviour and stop the propagation.

[luruke]

@jdacosta
Have you been able to solve this?
How did you solve at the end?

[jdacosta]

Thanks @luruke and @ZachSaucier !
Your proposal works perfectly.

However, I think it might be interesting to choose the behavior via a static value.

Possible behaviors:

• full page reload
• nothing
• onLeave -> onEnter (to replay transition)

[quentinhocde]

I agree with @jdacosta, for a personal example, I have a fullscreen menu and it's possible to click on the current link, and in this case I want to replay the transition.

So, in my opinion, it will be a choice with a parameter.

[luruke]

@quentinhocde , I see your point.

I'm going to think how and if implement this in the next version 👍

Thank you so much for your feedback!
Do not hesitate to open a new issue if you have some other improvements

[daslicht]

Is there meanwhile a setting to disable the reload behavior , please ?

[xcrap]

I wonder if there's a way to disable to same links hard reload without changing the barba.js code ? It would be really useful because of the upgrades. I don't want to disable the same page links, but that the page could repeat the transitions.

[studiolathe]

I am having the same issue but can not seem to get @luruke solution to work? Not sure where I should be placing that code snippet?

My code below:

import Barba from 'barba.js';

document.addEventListener("DOMContentLoaded", function() {

  Barba.Pjax.init();
  Barba.Prefetch.init();

    var links = document.querySelectorAll('a[href]');
        var cbk = function(e) {
         if(e.currentTarget.href === window.location.href) {
           e.preventDefault();
           e.stopPropagation();
         }
    };

    for(var i = 0; i < links.length; i++) {
        links[i].addEventListener('click', cbk);
    }

  var FadeTransition = Barba.BaseTransition.extend({
    start: function() {
      Promise
        .all([this.newContainerLoading, this.fadeOut()])
        .then(this.fadeIn.bind(this));
    },

    fadeOut: function() {
      this.oldContainer.classList.toggle('fade-out');
      return new Promise(function(resolve, reject) {
          setTimeout(function() {
             resolve();
         }, 500);
      });
    },

    fadeIn: function() {
      this.newContainer.classList.toggle('fade-in');
      this.done();
    }
  });

  Barba.Pjax.getTransition = function() {
    return FadeTransition;
  };

  Barba.Pjax.start();
});

Many thanks in advance!

[lustremedia]

I know this is an old old "issue", and it is default behaviour ...

However, currently I am building a site with a built in audio player outside of the barba container to ensure continuous playing while the user can browse the site.

But any link referencing the same page does a reload and thus stops the player which is kinda annoying for such a use case.
I am using barbajs version 2.0 and it would really be nice to have a switch to turn this behaviour on or off!

It also took me some time to figure out that this behaviour was default (google brought me here). Is it mentioned in the docs anywhere, I have not stumbled upon it?

[nicolatrabace]

Thank's for the amazing work @luruke
I attach, for those who might need, my simplified jquery version
(to prevent the reload of the current page)

`$(document).ready(function() {

$(document).on('click','a[href]', function(e){
    if(e.currentTarget.href === window.location.href)
    {
        e.preventDefault();
        e.stopPropagation();
    }
});

});`