FEATURE: add an option to create undismissable modals
This commit is contained in:
parent
42847252a4
commit
b7d92061e2
|
@ -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'
|
||||
)
|
||||
);
|
||||
},
|
||||
|
|
|
@ -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")) {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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');
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue