addon/components/ui-modal.js

import Component from '@ember/component';
import layout from '../templates/components/ui-modal';
import { observer } from '@ember/object';

/**

ui-modal component

@module components
@namespace components
@class UiModal
@constructor
*/
export default Component.extend({
    layout: layout,
    actions: {
        /**
        when modal show, this action will be triggered
        @event onShow
        */
        onShow(){
            if(typeof this.attrs.onShow === 'function'){
                this.attrs.onShow();
            }else {
                this.sendAction('onShow');
            }
        },
        /**
        when modal hide, this action will be triggered
        @event onShow
        */
        onHide(){
            if(typeof this.attrs.onHide === 'function'){
                this.attrs.onHide();
            }else{
                this.sendAction('onHide');
            }
        }
    },
	tagName: 'div',

	/**
     * modal status 
     * @property {Boolean} show
     * @default  false
    */
	show: false,

    /**
     * Setting to false will not allow you to close the modal by clicking on the dimmer
     * @property {Boolean} closable
     * @default  true
    */
    closable: true,

    /**
     * transition
     * @property {String} transition
     * @default  'scale'
    */
    transition: 'scale',

    classNameBindings: ['_uiClass', 'theme', 'class', '_componentClass'],
    _uiClass: 'ui',
    _componentClass: 'modal',
    
    /**
     * Class names to apply to the modal
     *
     * @property {String} class
    */
    class: '',
    /**
     * Class names to apply to the modal
     *
     * @property {String} theme
    */
    theme:'',
	/**
     * @method showModal
     * @observes "show" property
     * @returns  {void}
    */
	showModal: observer('show', function(){
        if(this.get('show')){
            this.$().modal('setting', 'transition', this.transition);
            this.$().modal('setting', 'closable', this.closable);
            this.$().modal('show');            
        }else{
            this.$().modal('hide');
        }
	}),
	didInsertElement() {
		let that = this,
            closable = this.get('closable');

		this.$().modal({
            closable: closable,
            observeChanges: true,
			onHide(){
                if(that.get('show')){
                    that.set('show', false);
                    that.send('onHide');
                }
			},
            onShow(){
                that.send('onShow');
            },
            onApprove() {
                if(typeof that.attrs.onApprove === 'function'){
                    return that.attrs.onApprove();
                }
            },
            onDeny(){
                if(typeof that.attrs.onDeny === 'function'){
                    return that.attrs.onDeny();
                }
            }
		});
	}
});