Modal Component

components.create-segment-modal.js

import Ember from 'ember';

export default Ember.Component.extend({
  hasName: Ember.computed.notEmpty('name'),
  actions: {    
    log(message) {
     console.log(message); 
    }
  }
});

components.todo-list-modal.js

import Ember from 'ember';

let Item = Ember.Object.extend({
  title: 'Untitled',
  isComplete: false,
  showSidebar: false
});

export default Ember.Component.extend({
  init() {
    this._super(...arguments);
    
    this.set('items', [
    	Item.create({ title: 'Buy milk' }),
      Item.create({ title: 'Run 10k' }),
      Item.create({ title: 'Have a pint', isComplete: true }),
    ]);
  },
  
  outstandingItems: Ember.computed.filterBy('items', 'isComplete', false),
  completedItems: Ember.computed.filterBy('items', 'isComplete', true),
  
  actions: {    
    log(message) {
      window.alert(message); 
    },
    toggleSidebar() {
      this.toggleProperty('showSidebar');
    },
    add() {
      this.get('items').pushObject(
        Item.create({ title: 'Have another pint' }),
      );
    },
    clear() {
      let completed = this.get('completedItems');
      let items = this.get('items');
      
      items.removeObjects(completed);                    
    },
    clearAll() {
      this.set('items', Ember.A()); 
    }
  }
});

components.x-button.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'button',
  classNameBindings: ['type'],
  attributeBindings: ['disabled'],
  type: 'normal',
  label: 'Untitled Button',
  isEnabled: true,
  disabled: Ember.computed('isEnabled', function() {
    let isEnabled = this.get('isEnabled');
    
    if(isEnabled === undefined) {
      return false;
    } else {
      return !isEnabled;
    }
  }),
  
  click() {
    let action = this.get('onClick');
    if(action) {
     	action(); 
    }
  }
});

components.x-buttons.js

import Ember from 'ember';

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

components.x-modal-body-buttons.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
   	onCancel() {
      let action = this.get('onCancel');
      
      if(action) {
        action();
      }
    },
    onConfirm() {
      let action = this.get('onConfirm');
      
      if(action) {
        action();
      }
    }
  }
});

components.x-modal-body.js

import Ember from 'ember';

export default Ember.Component.extend({
	classNames: 'body'
});

components.x-modal-footer-buttons.js

import Ember from 'ember';

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

components.x-modal-footer.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: 'footer'
});

components.x-modal-header.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: 'header',
	title: '<untitled>'
  
});

components.x-modal-sidebar.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: 'sidebar'
});

components.x-modal.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: 'modal',
  confirmButtonText: 'OK',
  cancelButtonText: 'Cancel',
  confirmButtonType: 'positive',
  cancelButtonType: 'cancel',
  sidebarIsVisible: false,
  
  init() {
    this._super(...arguments);
    this.publicActions = {
      showSidebar: () => this.send('showSidebar'),
      hideSidebar: () => this.send('hideSidebar')
    };
  },
  
  publicAPI: Em.computed('sidebarIsVisible', function() {
    return {
      sidebarIsVisible: this.get('sidebarIsVisible'),
      actions: this.get('publicActions')
    };
  }),

  actions: {
    showSidebar() {
      this.set('sidebarIsVisible', true);
    },
    hideSidebar() {
      this.set('sidebarIsVisible', false);
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  actions: {
    log(message) {
     window.alert(message); 
    }
  }
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14pt;
  background-color: #f7fafc;
  color: #37474F;
}

h2 {

    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: #37474f;
      margin: 0;
    padding: 0;
}

hr {
 margin: 40px; 
}

.modal {
    width: 100%;
    max-width: 520px;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 1px 20px 0 rgba(0,0,0,.2);
    margin: 0 auto;
}

.header {
    padding: 12px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.header .left {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: -webkit-min-content;
    min-width: -moz-min-content;
    min-width: min-content;
}

.header .button {
  float: left; 
  position:relative;
}

.header .title {
    padding: 4px 10px;
    text-align: center;
}

.header .right {
   flex: 1;
   min-width: min-content;
}

.header .right a {
  float: right !important;
}




.footer {
  padding: 12px;
  text-align: right;
}

.body-container {
  display: flex;
  
}

.sidebar {
  border-right: 1px solid #ccc;
  padding: 10px;
  width: 120px;
  
   padding: 30px;
   font-size: 14px;
  background-color: #f7fafc;
  text-align: center;


  box-shadow: inset 0 1px 1px 0 rgba(9,23,30,.15), inset 0 -1px 0 0 rgba(9,23,30,.12);
}

.body {
  padding: 30px;
    font-size: 14px;
  background-color: #f7fafc;
  flex: 1;

  box-shadow: inset 0 1px 1px 0 rgba(9,23,30,.15), inset 0 -1px 0 0 rgba(9,23,30,.12);
}

button {
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 3px;
    padding: 5px 18px 7px;
    display: inline-block;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-sizing: border-box;
    transition: box-shadow linear 40ms;
}

button:disabled {
  opacity: .5;
  pointer-events: none;
}

button.normal {
 background-color: #fff; 
}
button.cancel {
 background-color: #f5f5f5; 
}
button.destructive {
 background-color: red; 
  color: white;
}

button.positive{
  color: white;
  background-color: #1f8ceb;
}
button.positive:hover {
  background-color: #1271c4;
}

templates.application.hbs

{{x-modal 
	title="Simplest" 
  body="Simplest"
  onConfirm=(action 'log' 'confirmed!')
  onCancel=(action 'log' 'cancelled!')
}}

<hr />

{{todo-list-modal}}

<hr />

{{create-segment-modal}}

<hr />

{{x-modal 
	title="Delete this company?" 
  body="Deleting a company is permanent and you will no longer be able to message or segment using this company."
  showCloser=false
  confirmButtonText="Delete"
  confirmButtonType="destructive"
  onConfirm=(action 'log' 'confirmed!')
  onCancel=(action 'log' 'cancelled!')
  onDismiss=(action 'log' 'dismissed!')
}}

<hr />

{{x-modal 
	title="Close without saving?" 
  body="You'll lose any changes you've made if you close this article."
  confirmButtonText="Close without saving"
  cancelButtonText="Go back to article"
  onConfirm=(action 'log' 'confirmed!')
  onCancel=(action 'log' 'cancelled!')
  onDismiss=(action 'log' 'dismissed!')
}}

<hr />


{{#x-modal
  onConfirm=(action 'log' 'confirmed!')
  onCancel=(action 'log' 'cancelled!')
  as |modal|
}}
	{{modal.header title='Simplest 2'}}
  {{modal.body body='Simplest 2'}}
{{/x-modal}}
<hr />

{{#x-modal
  onConfirm=(action 'log' 'confirmed!')
  onCancel=(action 'log' 'cancelled!')
  as |modal|
}}
	{{#modal.header}}
  	<i>Simplest</i> 3
  {{/modal.header}}
  {{#modal.sidebar}}
  	<h1>SIDEBAR!</h1>
  {{/modal.sidebar}}
  {{#modal.body as |body|}}
    {{body.buttons 
    	confirmButtonText="Delete"
      confirmButtonType="destructive"
    }}
    <h2>Simplest 3</h2>
    <button onclick={{action 'log' 'cancelled!'}}>Also Cancel</button>
  {{/modal.body}}
{{/x-modal}}
<hr />

{{#x-modal
	footerButtonLabel="Button 4a"
  footerButtonOnClick=(action 'log' 'button4a!')
	as |modal|
}}
  
	{{#modal.header}}
  	<h3 style="color: lightgreen">Delete this company?</h3>
    <h3 style="color: pink">Delete this company?</h3>
    <h3 style="color: orange">Delete this company?</h3>
  {{/modal.header}}
  
  {{#modal.body as |body|}}
   	Deleting a company is permanent and you will no longer
   	be able to message or segment using this company.
    
    <hr />
    <h2>some html...</h2>
    
    <br />
    {{body.buttons 
    	confirmButtonText="Delete"
      confirmButtonType="destructive"
      onConfirm=(action 'log' 'confirmed!')
  		onCancel=(action 'log' 'cancelled!')
  		onDismiss=(action 'log' 'dismissed!')
    }}
    
    {{#body.buttons as |buttons|}}
      {{buttons.button 
      	label="Button 1a" 
        onClick=(action 'log' 'button1a')
      }}
      {{buttons.button 
      	label="Button 2a" 
        onClick=(action 'log' 'button2a')
      }}
      {{buttons.button 
      	label="Button 3a" 
        onClick=(action 'log' 'button3a')
      }}
    {{/body.buttons}}
    
    {{#body.buttons as |buttons|}}
      {{buttons.button 
      	label="Button 1b" 
        onClick=(action 'log' 'button1b')
      }}
      {{buttons.button 
      	label="Button 2b" 
        onClick=(action 'log' 'button2b')
      }}
      {{buttons.button 
      	label="Button 3b" 
        onClick=(action 'log' 'button3b')
      }}
    {{/body.buttons}}
  {{/modal.body}}

{{/x-modal}}

templates.components.create-segment-modal.hbs

{{#x-modal
	title="Create Segment"
  headerButtonText="Manage segments"
  onHeaderButtonClick=(action 'log' 'header!')
  footerButtonLabel="Create segment"
  footerButtonOnClick=(action 'log' 'footer!')
  footerButtonIsEnabled=hasName
  as |x-modal|
}}
	{{#x-modal.body}}
    Segment name: 
    {{input value=name}}
  {{/x-modal.body}}
{{/x-modal}}

templates.components.todo-list-modal.hbs

{{#x-modal 
	footerButtonLabel="Footer button"
  footerButtonOnClick=(action 'log' 'footer button')
	as |modal|
}}

	{{#modal.header}}
  	Todo List ({{outstandingItems.length}} left)
  {{/modal.header}}

  {{#modal.sidebar as |sidebar|}}
      this is the side bar
      <hr />
      {{x-button 
        label="Hide"
        onClick=modal.actions.hideSidebar
      }}
      
      <hr />
      
      {{x-button 
        label="Clear All"
        type="destructive"
        onClick=(action 'clearAll')
      }}
  {{/modal.sidebar}}
  
	{{#modal.body as |body|}}   
  	{{#if outstandingItems}}
      Outstanding:
      <ul>
        {{#each outstandingItems as |item|}}
          <li>
            {{input type='checkbox' checked=item.isComplete}} 	
            {{item.title}}
          </li>
        {{/each}}
      </ul>
    {{/if}}
    
    {{#if completedItems}}
      Done:
      <ul>
        {{#each completedItems as |item|}}
          <li>
            {{input type='checkbox' checked=item.isComplete}} 	
            {{item.title}}
          </li>
        {{/each}}
      </ul>
     {{/if}}
    
    {{#body.buttons as |buttons|}}
      {{buttons.button 
      	label="New"
        type="positive"
        onClick=(action 'add')
      }}
      
      {{#if completedItems}}
        {{buttons.button 
          label="Clear Completed"
          onClick=(action 'clear')
        }}
      {{/if}}
    {{/body.buttons}}
    
      {{#unless body.sidebarIsVisible}}
        {{#body.buttons as |buttons|}}
          {{buttons.button 
            label="Show sidebar"
            onClick=buttons.actions.showSidebar
          }}

        {{/body.buttons}}
      {{/unless}}
    
  {{/modal.body}}
  
{{/x-modal}}

templates.components.x-button.hbs

{{label}}

templates.components.x-buttons.hbs

{{yield}}

templates.components.x-modal-body-buttons.hbs

<p align="center">
	{{#if hasBlock}}
		{{yield
    	(assign
      	publicAPI
        (hash button=(component 'x-button')
      )
   	)}}
	{{else}}
  
  
	
  
  	{{x-button
    	label=cancelButtonText
      type=cancelButtonType
      onClick=onCancel
    }}

    {{x-button
    	label=confirmButtonText
      type=confirmButtonType
      onClick=onConfirm
    }}
  
{{/if}}

</p>

templates.components.x-modal-body.hbs

    {{#with 
      (component 'x-modal-body-buttons'
        confirmButtonText=confirmButtonText
        confirmButtonType=confirmButtonType
        cancelButtonText=cancelButtonText
        cancelButtonType=cancelButtonType
        onConfirm=onConfirm
        onCancel=onCancel
        onDismiss=onDismiss
        publicAPI=publicAPI
      ) as |x-modal-body-buttons|   
    }}
      {{#if hasBlock}}
        {{yield 
        	(assign
          	publicAPI
        		(hash 
            	buttons=(component x-modal-body-buttons)
            )
          )
        }}
      {{else}}
        <p align="center">{{body}}</p>
        {{component x-modal-body-buttons}}
      {{/if}}
    {{/with}}

templates.components.x-modal-footer-buttons.hbs

{{#if hasBlock}}
	{{yield (hash
    button=(component 'x-button')
   )}}
{{/if}}

templates.components.x-modal-footer.hbs

{{x-button
	label=buttonLabel
	onClick=buttonOnClick
  isEnabled=buttonIsEnabled
  type="positive"
}}

templates.components.x-modal-header.hbs

<div class="left">
	{{#if headerButtonText}}
   	{{x-button
    	label=headerButtonText
      onClick=onHeaderButtonClick
    }}
  {{/if}}
</div>

<div class="title">
	<h2>
		{{#if hasBlock}}
			{{yield}}
		{{else}}
			{{title}}
		{{/if}}
	</h2>
</div>
  
<div class="right">
	<a><i class="i o__close o__16">x</i></a>
</div>

templates.components.x-modal-sidebar.hbs

{{yield}}

templates.components.x-modal.hbs

{{#with 
	(component 
		'x-modal-header' 
		title=title
    headerButtonText=headerButtonText
    onHeaderButtonClick=onHeaderButtonClick
  ) as |x-modal-header|
}}
  {{#if title}}
    {{component x-modal-header}}
  {{else}}
    {{yield 
    	(assign 
      	publicAPI
        (hash header=(component x-modal-header))
      )
    }}
  {{/if}}
{{/with}}


<div class="body-container">
  {{#if sidebarIsVisible}}
  	{{yield 
    	(assign 
      	publicAPI
        (hash sidebar=(component 'x-modal-sidebar'))
      )
    }}
  {{/if}}
  {{#with 
    (component 
      'x-modal-body' 
      body=body 
      confirmButtonText=confirmButtonText
      confirmButtonType=confirmButtonType
      cancelButtonText=cancelButtonText
      cancelButtonType=cancelButtonType
      onConfirm=onConfirm
      onCancel=onCancel
      onDismiss=onDismiss
      publicAPI=publicAPI
    ) as |x-modal-body|
  }}
    {{#if body}}
      {{component x-modal-body}}
    {{else}}
      {{yield (hash body=(component x-modal-body))}}
    {{/if}}
  {{/with}}
</div>

{{#if footerButtonLabel}}
	{{component 
  	'x-modal-footer'
  	buttonLabel=footerButtonLabel
    buttonOnClick=footerButtonOnClick
    buttonIsEnabled=footerButtonIsEnabled
  }}
{{/if}}

twiddle.json

{
  "version": "0.11.0",
  "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.10.2",
    "ember-data": "2.11.0",
    "ember-template-compiler": "2.10.2",
    "ember-testing": "2.10.2"
  },
  "addons": {
  	"ember-assign-helper": "*"
  }
}