search

acoustep / ember-cli-foundation-6-sass

MIT License
64 stars 33 forks source link

zf-reveal should destroy the overlay when component is destroyed. #26

Closed GCheung55 closed 8 years ago

GCheung55 commented 8 years ago

When a zf-reveal component is inserted into the page, an overlay is created and injected into the element. But when the zf-reveal component is unloaded the overlay isn't destroyed.

GCheung55 commented 8 years ago

Looking around some more, looks like zf-widget.js has a shutdown method attached to willDestroyElement but it doesn't seem to be executed.

I was testing this on a fork for ember-cli-foundation-6-sass, so running Ember 1.13.

GCheung55 commented 8 years ago

Found the problem. There's a typo for the event. Now some tests are failing. I'll see if I can get those fixed.

rizkysyazuli commented 7 years ago

sorry. so how do you properly destroy a reveal modal after it's closed?

GCheung55 commented 7 years ago

@rizkysyazuli according to https://github.com/acoustep/ember-cli-foundation-6-sass/blob/master/addon/mixins/zf-widget.js#L82 the reveal modal will be destroyed when the component using the modal is destroyed.

rizkysyazuli commented 7 years ago

@GCheung55 it does that automatically? doesn't seem so in my case. i have youtube video inside a modal that's keep playing even after it's closed.

GCheung55 commented 7 years ago

@rizkysyazuli Yes, it does automatically. As I mentioned, the reveal modal will be destroyed when the component using the modal is destroyed. Closing the modal, such as pressing the ESC key, will only hide the modal, not destroy it.

{{! templates/index.hbs}}
{{#zf-reveal id="awesome-modal"}}
    MODAL!
{{/zf-reveal}}

<button data-open="awesome-modal">Show me the modal!</button>

If you do a search for a DOM element with id awesome-modal you see that it's in the DOM, even when it's hidden.

Now, when you navigate away to a different page, the awesome-modal DOM element will be destroyed.

What's missing in ember-cli-foundation-6-sass right now is the ability to add event handlers easily. Foundation 6 allows you to add a handler to be triggered when the reveal modal is closed. In your case, this would be used to stop the video.

Take a look at https://github.com/acoustep/ember-cli-foundation-6-sass/issues/72#issuecomment-304465877 for an example.