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

[GCheung55]

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]

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]

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]

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

[GCheung55]

@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]

@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]

@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 #72 (comment) for an example.