延迟Turbolink的访问以关闭画布菜单以关闭

Question

I'm using TurboLinks and a off-canvas menu that closes with an animation. By the time, Turbolinks changes the page before the menu is completely closed and it seems a little rushed. I've tried adding a timeouts and tinkering with TurboLinks' events but without any luck. Javascript/Jquery is really not my strong suit, so, my question: is there a way to delay the firing of the TurboLinks' request so the menu can close normally?

Pd. I'm developing with Laravel.

Update:

In the documentation I've found that you can't cancel de visit before it starts. With that in mind, I set this

$(document).on('turbolinks:before-visit', function(e){
    var url = event.data.url;
    console.log(url);
    event.preventDefault();
    e.stopImmediatePropagation();

    setTimeout(function(url){
        Turbolinks.visit(url);
    }, 1000);
});

But, as I said in the comments line with @OhGodWhy everything crumbles, the page gets stuck and the error "maximum call stack size exceeded" is shown multiple times in the console.

Answer 1

There is an RFC out there that dictates you cannot slow/stop the process of a user leaving the page without their intervention; hence why you see alert windows popping up whenever you want to leave the page, but you can click 'continue' to proceed to leave anyway.

That said, I can give you a solution. All of their animations are CSS3 driven, the only javascript you need to worry about is the one that toggles the class.

$('.sidebar').on('click', 'a', function(e){
    e.preventDefault();

    var $this = $(this);

    if ($('body').hasClass('st-menu-open')) {
        $('body').removeClass('st-menu-open')
        setTimeout(function(){
           Turbolinks.visit($this.prop('href'));
        }, 500);
    }
});

All we're doing here is caputring the click in your nav, if the body has the class, then we're going to remove it. However, we're going to wait 500ms which corresponds to the CSS transition delay that the library uses, until we execute the redirection. This way, after 500 ms, the transition will be completed and you can redirect the user.