Integration with turbolinks

[asok]

Hey, as far I've tried it does not well with turbolinks. I have such peace of code:

setupProducts = -> 
        $('.photo-gallery').magnificPopup
                type: 'image',
                delegate: 'a',
                gallery: {enabled: true}
$ ->
  document.addEventListener "page:load", setupProducts
  setupProducts()

When I start in a page with element $('.photo-gallery') I click on it and magnific show the gallery. Then I go to some other page using turbolinks. When I go back to the first page after clicking on the element nothing happens.

It seems like it was already initialized for this element (that at this time is in the turbolinks cache (?)). And magnific stops working if initialized for the second time on the same element. Is there a way to check if magnific was already initialized for a giving element?

[joshuajansen]

You could try something like this to check if Magnific popup is already initialized:

$(".photo-gallery").data("magnificPopup") is `undefined`
  # initialize magnific popup

But I think there may be another problem, because even without binding a second time it still doesn't work properly. I've added some callbacks ( http://dimsemenov.com/plugins/magnific-popup/documentation.html#api ) and even though all these callbacks are triggered just like they do on the first request, the popup just won't show.

For now I'm just opting out of turbolinks for the page that uses magnific popup by adding data-no-turbolink to the parent container.

<li data-no-turbolink><%= link_to "Home", root_url %></li>

[asok]

@joshuajansen thanks. Indeed it seems like using data-no-turbolink is the only solution. It is definitely worth mentioning that in the README.

It looks that turbolinks are not specific to rails only now. Maybe it's worth opening such issue in the mainstream?

[veriel]

I've tried:
1: Using

$(document).on('page:load ready', function()

instead of

$(document).ready()

2: Checking for double binding.

3: Adding jquery.turboolinks to the application.js

None of these helped. The only solution for now is to turn off turbolinks on those links that lead to Magnific Popup pages.

It can turn into a maintenance nightmare over time. I can't even write automated tests for this.

[andrewnguyen42]

+1 to this one, I just spent 6+ hours trying to track this one down

[glebtv]

Here's how it works for me:
Comment the condition if (!_body)
https://github.com/joshuajansen/magnific-popup-rails/blob/master/vendor/assets/javascripts/magnific-popup/jquery.magnific-popup.js#L148-L150
here. So it always gets current document.body.

[jeremyrajan]

Thanks @glebtv ! Commenting the condition did the trick 👍

[tirdadc]

That link doesn't show any condition on (!_body) but _body = $(document.body); so I assumed it's been changed.

Has anyone managed to get this to work with the newer code?

[mitchellfyi]

Looks like it's opening everything under the original document.body element. So change the line to:

_body = $("body");

[lassebunk]

+1 to your solution with always loading

_body = $("body");

I guess this would be a problem with other JavaScript frameworks that replace the body.

[itsNikolay]

@glebtv great thanks
@joshuajansen please update the gem on rubygems

now I've fixed it with the fork of the repo
and replaced a line with the gem by:
gem 'magnific-popup-rails', github: 'itsNikolay/magnific-popup-rails'
now it works well
with it will help other developers

[joshuajansen]

@itsNikolay this fix actually belongs in the core (https://github.com/dimsemenov/Magnific-Popup), but it seems that they're not too eager with merging the open pull requests. So feel free to create a pull to this repo, I'll merge it in right away!

[mtomov]

Thank you guys for the suggested solution! It works.

[glebtv]

Update,
currently this:

$(document).on('page:change', ->
  $.magnificPopup.close()
)

is also required or pop up won't open if turbolinks navigation was triggered when pop ups were open, or it stops working.