Modal specific components (taming remodal the Ember way)

[sukima]

I'm leaving this here for reference to others who are using ember-remodal and find some of the semantics difficult to work with. Specifically the case where you want to wrap content in a contextual component.

ember-remodal (and remodal itself) is a global based addon. Which means the modals must be rendered in the DOM to be used and can not be toggled via {{#if ...}} like one might expect. This also means that content within the modal is rendered to the DOM even when the modal is closed. This means that if any of the components inside a modal rely on didInsertElement/willRemoveElement won't work.

There are several workarounds to this but they all pose significant boilerplate. There are also several bugs and API inconsistencies (edge cases) that the workarounds are not trivial to the average app developer.

I have taken on the task of providing a newer component that acts as expected and implements a workaround for all of this. The draw back is that the component must be in the DOM and opened programmatically. This is close to how the forService=true currently works. But the contents are not in the DOM until the modal opens and are removed when it closes.

The component is called ember-modal-redux and is available in the ember-confirmed addon. It works as follows:

<p>Result was confirmed: {{if confirmed 'YES' 'NO'}}</p>

<button onclick={{action "showDialog"}}>Show Dialog</button>

{{#ember-remodal-redux
    registerModalController=(action (mut modalController))
    as |modal|}}
  <p>This content is only in the DOM when the modal is open</p>
  {{#modal.cancel}}<button>Cancel</button>{{/modal.cancel}}
  {{#modal.confirm}}<button>Ok</button>{{/modal.confirm}}
{{/ember-remodal-redux}}

And in the JS:

import Component from '@ember/component';

export default Component.extend({
  actions: {
    showDialog() {
      this.get('modalController')
        .open()
        .onConfirmed(() => this.set('confirmed', true))
        .onCancelled(() => this.set('confirmed', false));
    }
  }
});