Initial support fo turbolinks 5

[dalpo]

No description provided.

[kossnocorp]

Please see #56 (comment)

TL;DR: I'm looking for a new project owner.

[kossnocorp]

Time flies!

[kossnocorp]

@dalpo please upgrade version to 4.4: https://github.com/kossnocorp/jquery.turbolinks/blob/master/package.json#L23

It should help with Travis CI.

[dancallaghan]

Just tested this and it appears that onLoad is being triggered twice.

Here is a JSFiddle of the issue.

I noticed if I comment out $(this.onLoad); in the register function, it only fires once.

[glebm]

The handler is called twice because Turbolinks 5, unlike the Classic one, calls turbolinks:load on the initial page load as well. Additionally, turbolinks:load is also called on restores from cache.

However, there is a bigger elephant in this room:

Turbolinks 5 caches the body by cloning it, which means none of the bound event handlers are preserved (unlike Turbolinks classic).

This means all of the DOM transformations on load need to be either idempotent, or the transformation should be reverted before caching (this effectively means the user must call old-school plugin destructors on turbolinks:before-cache).

jQuery.Turbolinks could be rewritten to do something like this:

jQuery(function() {
  if (!('Turbolinks' in window || !window.Turbolinks.supported)) {
    triggerOnPageLoad();
  } else {
    // jquery.turbolinks must be required before Turbolinks, so that
    // the `turbolinks:load` event will not have triggered yet.
    document.addEventListener('turbolinks:load', () => {
      triggerOnPageLoad();
    });
  }
});

However, because of the aforementioned changes in the Turbolinks 5 caching mechanism, jquery.turbolinks can no longer just "make" the old stuff work unless the user disables Turbolinks 5 Caching entirely.

We would need to instruct the users to make the DOM modifications idempotent or remind them to revert these on turbolinks:before-cache, e.g.:

$(() => { $('select').select2() }
document.addEventListener('turbolinks:before-cache', () => {
  $('select').select2('destroy');
  $('.select2-drop, .select2-drop-mask').remove();
});