@abcum/ember-modals v2.0.2

ember-modals

A utility for adding modal popup windows to an Ember.js app.

Usage

Installation

ember install @abcum/ember-modals

Introduction

The ember-modals addon adds functionality for adding modal popup windows to an Ember.js app, using actions, or routes. A modal window can be shown when a value is changed, when an action is run from a component, or when a route is entered.

Examples

Add the modal-outlet component to your application template.

{{!-- app/templates/application.hbs --}}
{{modal-outlet}}

To show a modal window in the same template.

{{!-- app/templates/post.hbs --}}
<button {{action 'toggle' displayModal}}>Delete this post</button>
{{#if displayModal}}
	{{#modal-window class="alert" close=(action 'toggle' displayModal)}}
		{{!-- window content --}}
	{{/modal-window}}
{{/if}}

To show a modal window after an action on a component.

{{!-- app/templates/posts.hbs --}}
{{#each model as |post|}}
	{{blog-post deletePost=(open-modal 'post.popup' model=post)}}
{{/each}}

{{!-- app/templates/post/popup.hbs --}}
{{#modal-window class="alert" close=(close-modal)}}
	{{!-- window content --}}
{{/modal-window}}

To show a modal window when a route is activated.

{{!-- app/templates/posts.hbs --}}
{{outlet}}
{{#each model as |post|}}
	{{#link-to 'post' post}}View post{{/link-to}}
{{/each}}

{{!-- app/templates/post.hbs --}}
{{#modal-window class="alert" close=(transition-to 'posts')}}
	{{!-- window content --}}
{{/modal-window}}

To style the modal background and the modal window itself, follow the css styling code below.

modal-cover {
	background-color:rgba(0,0,0,0.6);
	@include backdrop-filter( blur(5px) );
	@include animation(fadeIn 0.3s ease-in-out 0s);
}

modal-front {
	opacity:0;
	margin:0 auto 0 auto;
	background-color:rgb(255,255,255);
	@include box-shadow(0 0 15px rgba(0,0,0,0.6));
	@include animation(ghost 0.3s ease-in-out 0.2s normal both);
}

Development

• make install (install bower and ember-cli dependencies)
• make upgrade (upgrade ember-cli to the specified version)
• make tests (run all tests defined in the package)