addon/components/ui-modal.js

  1. import Component from '@ember/component';
  2. import layout from '../templates/components/ui-modal';
  3. import { observer } from '@ember/object';
  4.  
  5. /**
  6.  
  7. ui-modal component
  8.  
  9. @module components
  10. @namespace components
  11. @class UiModal
  12. @constructor
  13. */
  14. export default Component.extend({
  15.     layout: layout,
  16.     actions: {
  17.         /**
  18.         when modal show, this action will be triggered
  19.         @event onShow
  20.         */
  21.         onShow(){
  22.             if(typeof this.attrs.onShow === 'function'){
  23.                 this.attrs.onShow();
  24.             }else {
  25.                 this.sendAction('onShow');
  26.             }
  27.         },
  28.         /**
  29.         when modal hide, this action will be triggered
  30.         @event onShow
  31.         */
  32.         onHide(){
  33.             if(typeof this.attrs.onHide === 'function'){
  34.                 this.attrs.onHide();
  35.             }else{
  36.                 this.sendAction('onHide');
  37.             }
  38.         }
  39.     },
  40. 	tagName: 'div',
  41.  
  42. 	/**
  43.      * modal status 
  44.      * @property {Boolean} show
  45.      * @default  false
  46.     */
  47. 	show: false,
  48.  
  49.     /**
  50.      * Setting to false will not allow you to close the modal by clicking on the dimmer
  51.      * @property {Boolean} closable
  52.      * @default  true
  53.     */
  54.     closable: true,
  55.  
  56.     /**
  57.      * transition
  58.      * @property {String} transition
  59.      * @default  'scale'
  60.     */
  61.     transition: 'scale',
  62.  
  63.     classNameBindings: ['_uiClass', 'theme', 'class', '_componentClass'],
  64.     _uiClass: 'ui',
  65.     _componentClass: 'modal',
  66.     
  67.     /**
  68.      * Class names to apply to the modal
  69.      *
  70.      * @property {String} class
  71.     */
  72.     class: '',
  73.     /**
  74.      * Class names to apply to the modal
  75.      *
  76.      * @property {String} theme
  77.     */
  78.     theme:'',
  79. 	/**
  80.      * @method showModal
  81.      * @observes "show" property
  82.      * @returns  {void}
  83.     */
  84. 	showModal: observer('show', function(){
  85.         if(this.get('show')){
  86.             this.$().modal('setting', 'transition', this.transition);
  87.             this.$().modal('setting', 'closable', this.closable);
  88.             this.$().modal('show');            
  89.         }else{
  90.             this.$().modal('hide');
  91.         }
  92. 	}),
  93. 	didInsertElement() {
  94. 		let that = this,
  95.             closable = this.get('closable');
  96.  
  97. 		this.$().modal({
  98.             closable: closable,
  99.             observeChanges: true,
  100. 			onHide(){
  101.                 if(that.get('show')){
  102.                     that.set('show', false);
  103.                     that.send('onHide');
  104.                 }
  105. 			},
  106.             onShow(){
  107.                 that.send('onShow');
  108.             },
  109.             onApprove() {
  110.                 if(typeof that.attrs.onApprove === 'function'){
  111.                     return that.attrs.onApprove();
  112.                 }
  113.             },
  114.             onDeny(){
  115.                 if(typeof that.attrs.onDeny === 'function'){
  116.                     return that.attrs.onDeny();
  117.                 }
  118.             }
  119. 		});
  120. 	}
  121. });
  122.