All files / addon/components/bootstrap simple-modal.js

29.17% Statements 7/24
0% Branches 0/12
37.5% Functions 3/8
29.17% Lines 7/24

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141                      1x                                                                                                                                       2x 2x 2x   2x           2x                                                                           2x                          
import { guidFor } from '@ember/object/internals';
import { computed } from '@ember/object';
import Component from '@ember/component';
import layout from '../../templates/components/bootstrap/simple-modal';
import { PropTypes } from 'ember-prop-types';
import {
  BuilderForPropTypes,
  BuilderForPropDefaults
} from 'ember-bootstrap-controls/utils/prop-definition-tools';
import { task } from 'ember-concurrency';
 
export const propDefinitions = {
  isOpen: {
    default: false,
    description: 'toggles the dialog as open or closed',
    type: PropTypes.bool,
  },
  centered: {
    default: false,
    description: 'set the class of the dialog to be centered vertically on the screen',
    type: PropTypes.bool,
  },
  fade: {
    default: false,
    description: 'use the fade in and out visual for the modal',
    type: PropTypes.bool,
  },
  title: {
    default: '',
    description: 'The top level title for the modal dialog',
    type: PropTypes.string.isRequired,
  },
  body: {
    description: 'The text used for the body of the modal',
    type: PropTypes.string,
  },
  acceptAction: {
    default: null,
    description: 'The callback function for the modal.',
    type: PropTypes.func,
  },
  closeAction: {
    default: null,
    description: 'The callback function for the close action.',
    type: PropTypes.func,
  },
  showCloseInHeader: {
    default: false,
    description: 'Indicates whether the header has a close button in the top left corner',
    type: PropTypes.bool,
  },
  closeOnEsc: {
    default: false,
    description: 'Indicates whether the modal closes using the keyboard escape key',
    type: PropTypes.bool,
  },
  backdrop: {
    default: "true",
    description: "Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.",
    type: PropTypes.oneOf(["true", "false", "static"]),
  },
};
 
export default Component.extend({
 
  layout,
  propTypes: BuilderForPropTypes(propDefinitions),
 
  ariaHidden: "true",
  attributeBindings: ['role', 'labelId:aria-labelledby', 'ariaHidden:aria-hidden'],
  classNameBindings: ['fade'],
  classNames: 'modal',
  role: 'dialog',
  fade: false,
  centered: false,
  closeOnEsc: false,
  backdrop: "true",
 
  didRender() {
    this._super(...arguments);
    let compRef = this;
    let modalObj = this.get('modalObj');
 
    modalObj.on('hidden.bs.modal', function (/*e*/) {
      compRef.set('isOpen', false);
    });
  },
 
  modalObj: computed(function() {
    return $('#' + guidFor(this)); // eslint-disable-line ember/no-global-jquery, no-undef
  }),
 
  didUpdateAttrs() {
    this._super(...arguments);
    let isOpen = this.get('isOpen');
    let closeOnEsc = this.get('closeOnEsc');
    let backdrop = this.get('backdrop');
    let modalObj = this.get('modalObj');
 
    if (modalObj && modalObj.modal) {
      if (isOpen) {
        modalObj.modal({
          backdrop: (backdrop == "true" || backdrop == "false") ? (backdrop == "true") : backdrop,
          keyboard: closeOnEsc,
          "show": true
        });
      }
      else {
        modalObj.modal("hide");
      }
    }
  },
 
  closeModalTask: task(function * () {
    const takeAction = this.get('closeAction');
    let rval;
 
    if (takeAction) {
      rval = yield takeAction();
    }
 
    this.set('isOpen', false);
 
    return rval;
  }),
 
  getDefaultProps() {
    return BuilderForPropDefaults(propDefinitions)
  },
 
  actions: {
    closeAction() {
      return this.get('closeModalTask').perform();
    },
 
    toggleModal() {
      this.toggleProperty('isOpen');
    }
  }
});