Skip to content

[WIP] pat-modal: mutationobserver #927

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

[WIP] pat-modal: mutationobserver #927

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
305b532
fix(pat model): Fix close-panel with multiple inject forms.
thet Nov 24, 2021
701ee95
feat(pat modal): Reinitialize handlers after the modal's DOM has chan…
thet Nov 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 14 additions & 7 deletions src/pat/modal/modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export default Base.extend({
inject.init(this.$el, opts);
},

_init_div1() {
async _init_div1() {
const $header = $("<div class='header' />");
if (this.options.closing.indexOf("close-button") !== -1) {
$(
Expand Down Expand Up @@ -101,13 +101,20 @@ export default Base.extend({
if (document.activeElement) {
document.activeElement.focus();
}
this._init_handlers();

this.resize();
this.setPosition();

$("body").addClass("modal-active");
this.el.dispatchEvent(
new Event("pat-modal-ready", { bubbles: true, cancelable: true })
);

// Wait a bit to let any pattern initializations settle before initializing handlers.
await utils.timeout(2);
this._init_handlers();
const modal_observer = new MutationObserver(this._init_handlers.bind(this));
modal_observer.observe(this.el, { childList: true, subtree: true });
},

_init_handlers() {
Expand Down Expand Up @@ -225,9 +232,10 @@ export default Base.extend({
$("body").removeClass("modal-panel");
},

destroy_inject() {
const form = this.el.querySelector("form.pat-inject");
if (form) {
destroy_inject(e) {
const button = e.target;
const form = button.form;
if (form && form.classList.contains("pat-inject")) {
// if the modal contains a for mwith pat-inject, wait for injection
// to be finished and then destroy the modal.
const destroy_handler = () => {
Expand All @@ -241,8 +249,7 @@ export default Base.extend({
destroy_handler.bind(this)
);
} else {
// if working without injection, destroy after waiting a tick to let
// eventually registered on-submit handlers kick in first.
// if working without form injection, just destroy.
this.destroy();
}
},
Expand Down
67 changes: 65 additions & 2 deletions src/pat/modal/modal.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,6 +196,7 @@ describe("pat-modal", function () {
`;
registry.scan(document.body);
await utils.timeout(1); // wait a tick for async to settle.
await utils.timeout(2); // wait a tick for async to settle.

document.querySelector("button.close-panel[type=submit]").click();
await utils.timeout(1); // wait a tick for pat-inject to settle.
Expand All @@ -206,6 +207,65 @@ describe("pat-modal", function () {
expect(document.querySelector("#target2").textContent).toBe("there");
});

it("Submit form, do injection and close overlay with multiple forms.", async function () {
await import("../inject/inject");
const registry = (await import("../../core/registry")).default;

jest.spyOn($, "ajax").mockImplementation(() => deferred);
answer(
`<html><body><div id="source">hello.</div><div id="source2">there</div></body></html>`
);

document.body.innerHTML = `
<div class="pat-modal">
<form
class="form1 pat-inject"
action="test.html"
data-pat-inject="source: #source; target: #target">
<button type="submit" class="close-panel">submit</button>
</form>
<form
class="form2 pat-inject"
action="test.html"
data-pat-inject="source: #source; target: #target">
<button type="submit" class="close-panel">submit</button>
</form>
</div>
<div id="target">
</div>
`;
registry.scan(document.body);
await utils.timeout(1); // wait a tick for async to settle.
await utils.timeout(2); // wait a tick for async to settle.

document.querySelector(".form2 button.close-panel[type=submit]").click();
await utils.timeout(1); // wait a tick for pat-inject to settle.
await utils.timeout(1); // wait a tick for pat-modal destroy to settle.

expect(document.querySelector(".pat-modal")).toBe(null);
expect(document.querySelector("#target").textContent).toBe("hello.");
});

it("Initialize modal also when modal contents change.", async function () {
document.body.innerHTML = `
<div class="pat-modal">
</div>
`;
const instance = new pattern(document.querySelector(".pat-modal"));
const spy_init_handlers = jest.spyOn(instance, "_init_handlers");
expect(spy_init_handlers).toHaveBeenCalledTimes(0);

// first call is invoked after some ticks to allow any other
// patterns to modify the dom before the handlers are initialized.
await utils.timeout(2); // wait for init to happen.
expect(spy_init_handlers).toHaveBeenCalledTimes(1);

// Provoke a DOM subtree change and the MutationObserver to kick in
document.querySelector(".pat-modal").innerHTML = "<div/>";
await utils.timeout(1); // wait a tick for async to settle.
expect(spy_init_handlers).toHaveBeenCalledTimes(2);
});

it("Ensure destroy callback isn't called multiple times.", async function () {
document.body.innerHTML = `
<div id="pat-modal" class="pat-modal">
Expand All @@ -215,12 +275,13 @@ describe("pat-modal", function () {

const instance = new pattern(document.querySelector(".pat-modal"));
await utils.timeout(1); // wait a tick for async to settle.
await utils.timeout(2); // wait a tick for async to settle.

const spy_destroy = jest.spyOn(instance, "destroy");

// ``destroy`` was already initialized with instantiating the pattern above.
// Call init again for new instantiation.
instance.init($(".pat-modal"));
await instance.init($(".pat-modal"));

document.querySelector("#close-modal").click();
await utils.timeout(1); // wait a tick for pat-modal destroy to settle.
Expand All @@ -247,13 +308,14 @@ describe("pat-modal", function () {
pattern_inject.init($(".pat-inject"));
const instance = new pattern(document.querySelector(".pat-modal"));
await utils.timeout(1); // wait a tick for async to settle.
await utils.timeout(2); // wait a tick for async to settle.

const spy_destroy = jest.spyOn(instance, "destroy");
const spy_destroy_inject = jest.spyOn(instance, "destroy_inject");

// ``destroy`` was already initialized with instantiating the pattern above.
// Call init again for new instantiation.
instance.init($(".pat-modal"));
await instance.init($(".pat-modal"));

document.querySelector("#close-modal").click();
await utils.timeout(1); // wait a tick for pat-inject to settle.
Expand All @@ -266,6 +328,7 @@ describe("pat-modal", function () {
pattern_inject.init($(".pat-inject"));
new pattern(document.querySelector(".pat-modal"));
await utils.timeout(1); // wait a tick for async to settle.
await utils.timeout(2); // wait a tick for async to settle.
document.querySelector("#close-modal").click();
await utils.timeout(1); // wait a tick for pat-inject to settle.
// Previous mocks still active.
Expand Down