APIs

Show:
/**
  @module ember-flexberry
 */

import Mixin from '@ember/object/mixin';
import $ from 'jquery';

/**
  Mixin contains actions for open and close modal window.

  @example
    ```javascript
    // app/routes/application.js
    import Route from '@ember/routing/route';
    import ModalApplicationRouteMixin from 'ember-flexberry/mixins/modal-application-route';

    export default Route.extend(ModalApplicationRouteMixin, {
    ...
    });
    ```

    ```javascript
    // app/components/your-component.js
    ...
    actions: {
      ...
      showMessage() {
        this.sendAction('showMessage', 'message');
      },
      hideMessage() {
        this.sendAction('hideMessage');
      },
      ...
    }
    ...
    ```

    ```handlebars
    <!-- app/templates/components/your-component.hbs -->
    ...
    <button {{action 'showMessage'}}>Show message</button>|<button {{action 'hideMessage'}}>Hide message</button>
    ...
    ```

    ```handlebars
    <!-- app/templates/application.hbs -->
    ...
    {{your-component showMessage='showModalDialog' hideMessage='removeModalDialog'}}
    ...
    {{outlet 'modal'}}
    ...
    ```

    ```handlebars
    <!-- app/templates/message.hbs -->
    <h1>Your message here.</h1>
    ```

  @class ModalApplicationRoute
 */
export default Mixin.create({
  actions: {
    /**
      Action to show modal-dialog by name.

      @method actions.showModalDialog
      @param {String} modalDialogName Template name modal window.
      @param {Object} [data] Data for transfer to modal window.
      @param {Controller} data.controller [Controller](https://emberjs.com/api/ember/release/classes/Controller).
      @param {DS.Model} data.model [Model](http://emberjs.com/api/data/classes/DS.Model.html).
      @param {Object} [modalParams] Object with parameters for modal window.
      @param {String} [modalParams.outlet] Outlet name.
      @param {String} [modalParams.view] Template name with outlet.
     */
    showModalDialog(modalDialogName, data, modalParams) {
      modalParams = this._getModalParams(modalParams);
      let params = $.extend({
        into: modalParams.view,
        outlet: modalParams.outlet
      }, data);

      this.render(modalDialogName, params);
    },

    /**
      Action to remove modal outlet on modal-dialog close.

      @method actions.removeModalDialog
      @param {Object} [modalParams] Object with parameters for modal window.
      @param {String} [modalParams.outlet] Outlet name.
      @param {String} [modalParams.view] Template name with outlet.
     */
    removeModalDialog(modalParams) {
      modalParams = this._getModalParams(modalParams);
      this.disconnectOutlet({
        outlet: modalParams.outlet,
        parentView: modalParams.view
      });
    }
  },

  /**
    Validate modalParams object.

    @method _getModalParams
    @param {Object} [modalParams] Object with parameters for modal window.
    @param {String} [modalParams.outlet] Outlet name.
    @param {String} [modalParams.view] Template name with outlet.
    @private
   */
  _getModalParams(modalParams) {
    modalParams = modalParams || {};

    let params = {};
    params.outlet = modalParams.outlet || 'modal';
    params.view = modalParams.view || 'application';
    return params;
  },
});