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>

View File

@ -1,4 +1,6 @@
import { acceptance } from "helpers/qunit-helpers";
import showModal from 'discourse/lib/show-modal';
acceptance("Modal");
QUnit.test("modal", assert => {
@ -27,4 +29,19 @@ QUnit.test("modal", assert => {
andThen(() => {
assert.ok(find('.d-modal:visible').length === 0, 'ESC should close the modal');
});
andThen(() => {
Ember.TEMPLATES['modal/not-dismissable'] = Ember.HTMLBars.compile('{{#d-modal-body title="" class="" dismissable=false}}test{{/d-modal-body}}');
showModal('not-dismissable', {});
});
andThen(() => {
assert.ok(find('.d-modal:visible').length === 1, 'modal should appear');
});
click('.modal-outer-container');
andThen(() => {
assert.ok(find('.d-modal:visible').length === 1, 'modal should not disappear when you click outside');
});
keyEvent('#main-outlet', 'keydown', 27);
andThen(() => {
assert.ok(find('.d-modal:visible').length === 1, 'ESC should not close the modal');
});
});