Elsewhere Liquid Dialog Steps

components.dialog-step-one.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.dialog-step-three.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.dialog-step-two.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.modal-target.js

import Ember from 'ember';

export default Ember.Component.extend({
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

controllers.profile.js

import Ember from 'ember';

export default Ember.Controller.extend({
  showDialogStepOne: Ember.computed.equal('currentDialogStep', 1),
  showDialogStepTwo: Ember.computed.equal('currentDialogStep', 2),
  showDialogStepThree: Ember.computed.equal('currentDialogStep', 3),
  
  actions: {
    cancel() {
      console.log("cancel");
      this.set('currentDialogStep', 0);
    },
    
    save() {
      console.log("save");
      this.set('currentDialogStep', 0);
    },
    
    next() {
      console.log("next");
      this.incrementProperty('currentDialogStep');
    },
    
    prev() {
      console.log("prev");
      this.decrementProperty('currentDialogStep');
    }
  }
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('profile');
});

export default Router;

routes.profile.js

import Ember from 'ember';

export default Ember.Route.extend({
});

templates.application.hbs

{{modal-target}}

<section class="section">
  <div class="container">
    <h1>Welcome to {{appName}}</h1>
    <br>
    {{#link-to 'profile'}}Profile{{/link-to}}
    <br>
		{{outlet}}
	</div>
</section>

templates.components.dialog-step-one.hbs

<header class="modal-card-head">
  <p class="modal-card-title">Dialog - Step One</p>
  <button class="delete" {{action cancel}}></button>
</header>
<section class="modal-card-body">
  <p>This is step one</p>
</section>
<footer class="modal-card-foot" style="justify-content: flex-end">
  <a class="button" {{action cancel}}>Cancel</a>
  <a class="button is-success" {{action next}}>Next</a>
</footer>

templates.components.dialog-step-three.hbs

<header class="modal-card-head">
  <p class="modal-card-title">Dialog - Step Three</p>
  <button class="delete" {{action cancel}}></button>
</header>
<section class="modal-card-body">
  <p>This is step three</p>
</section>
<footer class="modal-card-foot" style="justify-content: space-between">
  <a class="button" {{action prev}}>Back</a>
  <div>
    <a class="button" {{action cancel}}>Cancel</a>
    <a class="button is-success" {{action save}}>Save</a>
  </div>
</footer>

templates.components.dialog-step-two.hbs

<header class="modal-card-head">
  <p class="modal-card-title">Dialog - Step Two</p>
  <button class="delete" {{action cancel}}></button>
</header>
<section class="modal-card-body">
  <p>This is step two</p>
</section>
<footer class="modal-card-foot" style="justify-content: space-between">
  <a class="button" {{action prev}}>Back</a>
  <div>
    <a class="button" {{action cancel}}>Cancel</a>
    <a class="button is-success" {{action next}}>Next</a>
  </div>
</footer>

templates.components.modal-target.hbs

{{#from-elsewhere name="modal" as |modal|}}
  {{#liquid-bind modal containerless=true as |currentModal|}}
    {{#if currentModal}}
      <div class="modal is-active">
        <div class="modal-background" {{action currentModal.cancel}}></div>
        <div class="modal-card">
          {{component currentModal.body}}
        </div>
      </div>
    {{/if}}
  {{/liquid-bind}}
{{/from-elsewhere}}

templates.profile.hbs

<a class="button" {{action (mut currentDialogStep) 1}}>
  Open Dialog
</a>

{{#if showDialogStepOne}}
  {{to-elsewhere named="modal" send=(hash body=(component "dialog-step-one"
                                                cancel=(action 'cancel')
                                                next=(action 'next'))
                                          cancel=(action 'cancel')
                                          step=1)}}      
{{/if}}

{{#if showDialogStepTwo}}
  {{to-elsewhere named="modal" send=(hash body=(component "dialog-step-two"
                                                cancel=(action 'cancel')
                                                prev=(action 'prev')      
                                                next=(action 'next'))
                                          cancel=(action 'cancel')
                                          step=2)}}
{{/if}}

{{#if showDialogStepThree}}
  {{to-elsewhere named="modal" send=(hash body=(component "dialog-step-three"
                                                cancel=(action 'cancel')
                                                prev=(action 'prev')
                                                save=(action 'save'))
                                          cancel=(action 'cancel')
                                          step=3)}}
{{/if}}

transitions.js

export default function() {
  this.transition(
    this.toValue((newValue, oldValue) => newValue === undefined || oldValue === undefined),
    this.use('explode', {
      pick: '.modal',
      use: ['fade', { duration: 350 }]
    }),
  );
  
  this.transition(
    this.toValue((newValue, oldValue) => newValue && oldValue && newValue.step > oldValue.step),
    this.use('explode', {
      pick: '.modal-card',
      use: ['to-left', { duration: 600, easing: [0.175, 0.885, 0.32, 1.275] }]
    }),
    this.reverse('explode', {
      pick: '.modal-card',
      use: ['to-right', { duration: 600, easing: [0.175, 0.885, 0.32, 1.275] }]
    }),
  );
};

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0",
    "bulma": "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css",
    "font-awesome": "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
  },
  "addons": {
    "ember-data": "2.12.1",
    "ember-elsewhere": "1.0.0",
    "liquid-fire": "0.27.2"
  }
}