Adding support for use with ember-wormhole

[mbiondo]

Adding support for use with ember-wormhole

[lougreenwood]

I suppose that if this feature were to be added now it might make sense to use the new in-element feature?

emberjs/rfcs#287

[MrChriZ]

The polyfill wasn't compatible with the latest version of Ember - this has now been fixed.

With a little help from the author of the in-element polyfill I managed to get in-element working - removing the need for ember-wormhole:
https://github.com/MrChriZ/ember-cli-photoswipe/tree/useInElement

I have a bug I'm still thinking about which is that the consuming application has to manually add the polyfill in:

ember install ember-in-element-polyfill

I have the polyfill as a dependency rather than a dev dependency in ember-cli-photoswipe... and as such the polyfill installs with ember-cli-photoswipe... but then doesn't seem to get picked up by the browser. Manually installing the polyfill on the consuming application fixes the problem 😕

Unfortunately... in-element doesn't solve the Liquid-fire problem. 😬

[DanielOchoa]

I'll definitely look into it.

[RuslanZavacky]

yeap, ti might be very useful. When ember-liquidfire is in use, it gives full page height, and photoswipe renders in the middle of nowhere :)

[gnazarkin]

^having the same issue

[evoactivity]

Is this project no longer maintained?

[MrChriZ]

Just ran into this problem too...

[RuslanZavacky]

I would suggest looking into https://github.com/glidejs/glide - as it worked well for me as a replacement for this library. And you don't need much integration with ember.

[evoactivity]

I don't think glide is a good replacement at all, they do different things.

I think with ember-auto-import it should be fairly simple for people to roll their own photoswipe backed components though.

[RuslanZavacky]

@evoactivity indeed, apologies. Confused this addon with owl carousel :) I didn't have particular love to photoswipe and owl carousel... so ditched photoswipe and used glide instead of owl.

[MrChriZ]

So it seems the in-element feature isn't available yet in Ember. If you try you get an error message saying you can't use in-element. I read things about using a private API using -in-element but couldn't seem to get that to work at all - the element never moved.

I then had a play with ember-wormhole. I moved the pswp element into it's own component such that it looked like this:
ember-cli-photoswipe/app/templates/components/photo-swipe.hbs

{{#if options.destination}}
  <div>
    {{#ember-wormhole to=options.destination}}
      {{pswp-element}}
    {{/ember-wormhole}}
  </div>
{{/if}}

Unfortunately this however broke the ember photoswipe component which uses jquery to find the pswp component.
/ember-cli-photoswipe/addon/components/photo-swipe.js

this.set("pswpEl", this.$(".pswp")[0]);

Since it's been wormholed it can no longer be found.
I found this issue which describes this issue:
yapplabs/ember-wormhole#31
There's a number of potential solutions there including using the destination with a global jquery request which seemed to work.
ember-cli-photoswipe/addon/components/photo-swipe.js

  if (this.get("options.destination")) {
        let destinationElement = "#" + this.get("options.destination") + " .pswp";
        this.set("pswpEl", Ember.$(destinationElement)[0]);
      } else {
        this.set("pswpEl", this.$(".pswp")[0]);
      }

Then it's just a case of putting the destination in to the options. So I created a third example on the application.hbs page
tests/dummy/app/templates/application.hbs

<!-- example 3 - with destination -->
<h3>Example with destination</h3>
{{#photo-swipe options=psThreeOpts items=items as |image|}}
    <img class="thumb" src={{image.src}} alt={{image.title}}>
{{/photo-swipe}}

/tests/dummy/app/controllers/application.js

  psThreeOpts: {
    destination:'destination'
  }

I've pushed a copy of this to here:
https://github.com/MrChriZ/ember-cli-photoswipe/tree/addEmberWormhole

I've not added a pull request as yet though as I thought I'd just get peoples thoughts first.

[lougreenwood]

@MrChriZ nice work!

I haven't tried it yet, but I believe you need the in-element polyfill: https://github.com/kaliber5/ember-in-element-polyfill#readme

[MrChriZ]

Thanks - I did have a go with the polyfill as well but couldn't seem to get anywhere with it.
Probably was missing something obvious.

[MrChriZ]

RuzlanZavacy mentioned liquid-fire above.
I'm also using this and thought I'd also just mention that I needed to kill some of liquid-fires built in CSS
Like so:

.liquid-container {
  position: initial;
  
  -webkit-transform: initial;
  -moz-transform: initial;
  transform: initial;
}

These were causing the photoswipe animation to start in the wrong place.
In my case this doesn't seemed to have caused any issues - however I've not done extensive browser testing as yet so YMMV.

---

Additional note. Ember wormhole and Liquid fire don't seem to work well together 👎
The wormhole stops working after a transition.