Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/instructure/ic-modal

Ember component for modal dialog
https://github.com/instructure/ic-modal

Last synced: 7 days ago
JSON representation

Ember component for modal dialog

Awesome Lists containing this project

README 

        
ic-modal

========



[![Build Status](https://travis-ci.org/instructure/ic-modal.png?branch=master)](https://travis-ci.org/instructure/ic-modal)



[WAI-ARIA][wai-aria] accessible modal dialog component for [Ember.js][ember].



Demo

----



http://instructure.github.io/ic-modal



Installation

------------



```sh

$ npm install ic-modal

```



or ...



```sh

$ bower install ic-modal

```



or just grab your preferred distribution from `dist/`.



Then include the script(s) into your application:



### npm+browserify



`require('ic-modal')`



### amd



Register `ic-modal` as a [package][rjspackage], then:



`define(['ic-modal'], ...)`



### named-amd



You ought to know what you're doing if this is the case.



### globals



``

``



{{ic-modal}} Usage

------------------



In its simplest form:



```html

{{#ic-modal-trigger controls="ohai"}}

  open the modal

{{/ic-modal-trigger}}



{{#ic-modal id="ohai"}}

  Ohai!

{{/ic-modal}}

```



Here are all the bells and whistles:



```html



{{#ic-modal-trigger controls="tacos"}}

  abrir los tacos

{{/ic-modal-trigger}}



{{#ic-modal id="tacos" close-when=tacosOrdered}}



  



  {{#ic-modal-title}}Tacos{{/ic-modal-title}}



  



  {{#ic-modal-trigger aria-label="Cerrar los tacos"}}×{{/ic-modal-trigger}}



  



  


    ¡Los tacos!

  


{{/ic-modal}}

```



{{ic-modal-form}} Usage

-----------------------



One of the most common use-cases for a modal dialog is a form.



```html



{{#ic-modal-trigger controls="new-user-form"}}

  open

{{/ic-modal-trigger}}



{{#ic-modal-form

  id="new-user-form"



  

  on-submit="submitForm"



  

  on-cancel="restoreModel"



  

  on-invalid-close="handleCloseWhileSaving"



  

  awaiting-return-value=saving



}}



  



  

    Name

    {{input id="name" value=newUser.name}}

  



  



  

    

    {{#if saving}}

      saving ...

    {{else}}

      {{#ic-modal-trigger}}Cancel{{/ic-modal-trigger}}

      Save

    {{/if}}

  



{{/ic-modal-form}}

```



```js

App.ApplicationController = Ember.Controller.extend({



  newUser: {},



  actions: {



    // this will be called when the user submits the form because we

    // mapped it to the "on-submit" actions of the component

    submitForm: function(modal, event) {



      // If you set the event.returnValue to a promise, ic-modal-form

      // will set its 'awaiting-return-value' to true, that's why our

      // `{{#if saving}}` in the template works. You also get an

      // attribute on the component to style it differently, see the css

      // section about that. You don't need to set the `event.returnValue`.

      event.returnValue = ic.ajax.request(newUserUrl).then(function(json) {

        addUser(json);

        this.set('newUser', {});

      }.bind(this));

    },



    // if the user tries to close the component while the

    // `event.returnValue` is stil resolving, this event is sent.

    handleCloseWhileSaving: function(modal) {

      alert("Hold your horses, we're still saving stuff");

    },



    restoreModel: function(modal) {

      this.get('model').setProperties(this.get('modelPropsBeforeEdit'));

    }

  }

});

```



```css

// while the promise is resolving, you can style the elements

#new-user-form[awaiting-return-value] ic-modal-main {

  opacity: 0.5;

}

```



CSS

---



### Overriding styles



This component ships with some CSS to be usable out-of-the-box, but the

design has been kept pretty minimal. See `templates/modal-css.hbs` to

know what to override for your own design.



### Animations



There is a class "hook" provided to create animations when the a modal

is opened, `after-open`. For example, you could add this CSS to your

stylesheet to create a fade-in effect:



```css

ic-modal[is-open] {

  opacity: 0;

  transition: opacity 150ms ease;

}



ic-modal[after-open] {

  opacity: 1;

}

```



Contributing

------------



```sh

$ git clone 

$ npm install

$ npm test

# during dev

$ broccoli serve

# localhost:4200/globals/main.js instead of dist/globals/main.js

# new tab

$ karma start

```



Make a new branch, send a pull request, squashing commits into one

change is preferred.



  [rjspackage]:http://requirejs.org/docs/api.html#packages

  [ember]:http://emberjs.com

  [wai-aria]:http://www.w3.org/TR/wai-aria/roles#dialog