mirror of
https://github.com/discourse/discourse.git
synced 2024-11-26 08:23:39 +08:00
86690155b3
Pop up a confirmation box when there is input. This prevents accidental closing of the dialog boxes due to clicking outside. This adds a development hook on modals in the form of a `beforeClose` function. Modal windows can abort the close if the funtion returns false. Additionally fixing a few issues with loop and state on the modal popups: Escape key with bootbox is keyup. Updating modal to close on keyup as well so escape key is working. Fixes an issue where pressing esc will loop immediately back to the modal by: keydown -> bootbox -> keyup -> acts as "cancel", restores modal Needs a next call to reopenModal otherwise, keyup is handled again by the modal. Fixes an issue where pressing esc will loop immediately back to the confirm: esc keyup will be handled and bubble immediately back to the modal. Additionally, only handle key events when the #discourse-modal is visible. This resolves issues where escape or enter events were being handled by a hidden modal window.
91 lines
2.4 KiB
JavaScript
91 lines
2.4 KiB
JavaScript
import { run } from "@ember/runloop";
|
|
import { acceptance, controllerFor } from "helpers/qunit-helpers";
|
|
import showModal from "discourse/lib/show-modal";
|
|
|
|
acceptance("Modal");
|
|
|
|
QUnit.test("modal", async function(assert) {
|
|
await visit("/");
|
|
|
|
assert.ok(
|
|
find(".d-modal:visible").length === 0,
|
|
"there is no modal at first"
|
|
);
|
|
|
|
await click(".login-button");
|
|
assert.ok(find(".d-modal:visible").length === 1, "modal should appear");
|
|
|
|
let controller = controllerFor("modal");
|
|
assert.equal(controller.name, "login");
|
|
|
|
await click(".modal-outer-container");
|
|
assert.ok(
|
|
find(".d-modal:visible").length === 0,
|
|
"modal should disappear when you click outside"
|
|
);
|
|
assert.equal(controller.name, null);
|
|
|
|
await click(".login-button");
|
|
assert.ok(find(".d-modal:visible").length === 1, "modal should reappear");
|
|
|
|
await keyEvent("#main-outlet", "keyup", 27);
|
|
assert.ok(
|
|
find(".d-modal:visible").length === 0,
|
|
"ESC should close the modal"
|
|
);
|
|
|
|
Ember.TEMPLATES["modal/not-dismissable"] = Ember.HTMLBars.compile(
|
|
'{{#d-modal-body title="" class="" dismissable=false}}test{{/d-modal-body}}'
|
|
);
|
|
|
|
run(() => showModal("not-dismissable", {}));
|
|
|
|
assert.ok(find(".d-modal:visible").length === 1, "modal should appear");
|
|
|
|
await click(".modal-outer-container");
|
|
assert.ok(
|
|
find(".d-modal:visible").length === 1,
|
|
"modal should not disappear when you click outside"
|
|
);
|
|
await keyEvent("#main-outlet", "keyup", 27);
|
|
assert.ok(
|
|
find(".d-modal:visible").length === 1,
|
|
"ESC should not close the modal"
|
|
);
|
|
});
|
|
|
|
acceptance("Modal Keyboard Events", { loggedIn: true });
|
|
|
|
QUnit.test("modal-keyboard-events", async function(assert) {
|
|
await visit("/t/internationalization-localization/280");
|
|
|
|
await click(".toggle-admin-menu");
|
|
await click(".topic-admin-status-update button");
|
|
await keyEvent(".d-modal", "keyup", 13);
|
|
|
|
assert.ok(
|
|
find("#modal-alert:visible").length === 1,
|
|
"hitting Enter triggers modal action"
|
|
);
|
|
assert.ok(
|
|
find(".d-modal:visible").length === 1,
|
|
"hitting Enter does not dismiss modal due to alert error"
|
|
);
|
|
|
|
await keyEvent("#main-outlet", "keyup", 27);
|
|
assert.ok(
|
|
find(".d-modal:visible").length === 0,
|
|
"ESC should close the modal"
|
|
);
|
|
|
|
await click(".topic-body button.reply");
|
|
|
|
await click(".d-editor-button-bar .btn.link");
|
|
|
|
await keyEvent(".d-modal", "keyup", 13);
|
|
assert.ok(
|
|
find(".d-modal:visible").length === 0,
|
|
"modal should disappear on hitting Enter"
|
|
);
|
|
});
|