Barba: Idea – Prevent clicks during transition

[luruke]

For long animations (2sec) on carousel-like or slider navigation, the user very often tries to click during the animation, that will cause an "hard refresh".

If we simply ignore "links" with a prevent default when a transition is in progress might work, but if the user uses browser back/forward it might result in an URL mismatch with the real page.

We all agree that barba should respect the user and browser behaviour, so if there is request to change page (via a click or browser back/forward buttons) barba should force the page change immediately as it is now.

I'm proposing an option, maybe disabled by default that will:
– during animation add an empty div overlay, in position fixed that will take all the screen and prevent all the clicks/hovers.

In this way, browsers url change via buttons, shortcut etc. will still work and correctly force the url, but users click via mouse/touch (but maybe not the ones made with keyboard?) will be prevented during the transition.

Just an idea...

[muellercornelius]

i like this idea and i my opinion a clean approach as well.

[thierrymichel]

Discussed here: https://barbajs.slack.com/archives/CFDHZ93TK/p1561995938048500
Implementing hookCanceled could also help…

[xavierfoucrier]

Hi,

In my current project, I am using a global variable called site.transitionEngaged that is initiated to true in the before hook, and set to false in the after hook.

Then, in the prevent check of Barba, I am using this variable to know if a transition is engaged, like this:

barba.init({
  ...
  prevent: ({ el, event }) => {
    if (event.type === 'click') {

      // prevent the user to reload the site if a page transition is engaged
      if (site.transitionEngaged) {
        event.preventDefault();
        event.stopPropagation();

        return true;
      }
    }
  }
});

This allow to keep the prevent code logic in the same location.

Note that @thierrymichel was talking about barba.transitions.isRunning on Slack

[thierrymichel]

So, this code should work:

barba.init({
  ...
  prevent: ({ event }) => {
    if (event.type === 'click') {
      // Prevent the user to reload the site if a page transition is engaged.
      if (barba.transitions.isRunning) {
        event.preventDefault();
        event.stopPropagation();

        return true;
      }
    }
  }
});

If we want to make it an option, preventClick: boolean?

List of barba options…

[xavierfoucrier]

@thierrymichel This code is working fine!

However, not really sure for the option name but with this notation we could have other options in the future like preventScroll, etc. :thinking:

[thierrymichel]

@xavierfoucrier naming things… :D

1. preventClick
2. preventRunning
3. preventClickTransition
4. preventTransitionRunning
5. preventClickTransitionRunning :)

My preferences: 2, 3, 1

[xavierfoucrier]

@thierrymichel you literally "killed" me :smile:

Finally, preventClick sound great for me, because we are preventing the user to "click" and "broke" the current transition. Dont' know if preventRunning will be enough clear for other users.

@luruke any other idea for this option name?

[luruke]

@xavierfoucrier :D

> ['preventClick', 'preventClickTransition', 'preventRunning'][Math.floor(Math.random() * 3)]
> "preventRunning"

[xavierfoucrier]

@luruke agree with you :wink:

[joesawa]

My rudimentary solution when I had this problem was to add a class to the document body at transition start:

.no-clicks { pointer-events: none; }

And then remove it upon resolve. Glad to see a more robust approach being considered.