FEATURE: add an option to create undismissable modals

This commit is contained in:
Jeff Wong
2018-06-04 18:34:41 -07:00
parent 42847252a4
commit b7d92061e2
4 changed files with 36 additions and 5 deletions

View File

@@ -1,6 +1,7 @@
export default Ember.Component.extend({
classNames: ['modal-body'],
fixed: false,
dismissable: true,
didInsertElement() {
this._super();
@@ -44,7 +45,8 @@ export default Ember.Component.extend({
'rawTitle',
'fixed',
'subtitle',
'rawSubtitle'
'rawSubtitle',
'dismissable'
)
);
},

View File

@@ -3,6 +3,7 @@ import { on } from "ember-addons/ember-computed-decorators";
export default Ember.Component.extend({
classNameBindings: [':modal', ':d-modal', 'modalClass', 'modalStyle'],
attributeBindings: ['data-keyboard'],
dismissable: true,
init() {
this._super(...arguments);
@@ -21,7 +22,7 @@ export default Ember.Component.extend({
@on("didInsertElement")
setUp() {
$('html').on('keydown.discourse-modal', e => {
if (e.which === 27) {
if (e.which === 27 && this.get('dismissable')) {
Em.run.next(() => $('.modal-header a.close').click());
}
});
@@ -48,6 +49,12 @@ export default Ember.Component.extend({
// of another modal is not used
this.set('subtitle', null);
}
if ('dismissable' in data) {
this.set('dismissable', data.dismissable);
} else {
this.set('dismissable', true);
}
});
},
@@ -57,6 +64,9 @@ export default Ember.Component.extend({
},
click(e) {
if(!this.get('dismissable')) {
return;
}
const $target = $(e.target);
if ($target.hasClass("modal-middle-container") ||
$target.hasClass("modal-outer-container")) {

View File

@@ -2,9 +2,11 @@
<div class="modal-middle-container">
<div class="modal-inner-container">
<div class="modal-header">
<div class='modal-close'>
<a class="close" {{action closeModal}}>{{d-icon "times"}}</a>
</div>
{{#if dismissable}}
<div class='modal-close'>
<a class="close" {{action closeModal}}>{{d-icon "times"}}</a>
</div>
{{/if}}
<div class="title">
<h3>{{title}}</h3>