Skip to content

Commit 0c9231d

Browse files
thetthet
committed
feat(pat close-panel): New technical/internal pattern to close panels.
Add new pattern close-panel for internal use to close panels. This allows to initialize the close buttons after content injections. It also allows for nested panels where a later opened panel doesn't close a previous opened panel.
1 parent e28bd93 commit 0c9231d

File tree

4 files changed

+126
-0
lines changed

4 files changed

+126
-0
lines changed

‎src/pat/close-panel/close-panel.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import Base from "../../core/base";
2+
import dom from "../../core/dom";
3+
4+
export default Base.extend({
5+
name: "close-panel",
6+
trigger: ".close-panel",
7+
8+
init() {
9+
this.el.addEventListener("click", async (e) => {
10+
// Find the first element which has a close-panel.
11+
// This should the panel-root itself.
12+
const panel = this.el.closest(".has-close-panel");
13+
14+
// Get the close panel method.
15+
const close_method = dom.get_data(panel, "close_panel");
16+
17+
// Now execute the method and close the panel.
18+
close_method && close_method(e);
19+
});
20+
},
21+
});

‎src/pat/close-panel/close-panel.test.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import utils from "../../core/utils";
2+
import registry from "../../core/registry";
3+
4+
import "./close-panel";
5+
import "../modal/modal";
6+
import "../tooltip/tooltip";
7+
8+
describe("pat close-panel", function () {
9+
afterEach(() => {
10+
document.body.innerHTML = "";
11+
});
12+
13+
it("Closes a modal's panel.", async function () {
14+
document.body.innerHTML = `
15+
<div id="pat-modal" class="pat-modal">
16+
<button id="close-modal" class="close-panel">close</button>
17+
<a class="pat-tooltip"
18+
title="okay-ish"
19+
data-pat-tooltip="closing: close-button">
20+
</a>
21+
</div>
22+
`;
23+
24+
registry.scan(document.body); // Also need to instantiate close-panel
25+
await utils.timeout(1); // wait a tick async to settle.
26+
27+
// Open the tooltip
28+
document.querySelector(".pat-tooltip").click();
29+
await utils.timeout(1); // wait a tick async to settle.
30+
expect(document.querySelectorAll(".tooltip-container").length).toBe(1);
31+
expect(document.querySelectorAll(".tooltip-container.has-close-panel").length).toBe(1); // prettier-ignore
32+
expect(document.querySelectorAll(".tooltip-container .pat-tooltip--close-button.close-panel").length).toBe(1); // prettier-ignore
33+
34+
document.querySelector(".pat-tooltip--close-button").click();
35+
await utils.timeout(1); // wait a tick async to settle.
36+
expect(document.querySelectorAll(".tooltip-container").length).toBe(0);
37+
expect(document.querySelectorAll(".tooltip-container .pat-tooltip--close-button").length).toBe(0); // prettier-ignore
38+
39+
document.querySelector("#close-modal").click();
40+
await utils.timeout(1); // wait a tick async to settle.
41+
expect(document.querySelectorAll(".pat-modal").length).toBe(0);
42+
});
43+
});

‎src/pat/close-panel/documentation.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
## Description
2+
3+
Closes a previously opened panel on which a ``close_panel`` method as been set.
4+
5+
For modals, tooltips or notifications use the class ``close-panel`` on elements to close the panel they are in.
6+
7+
This is a technical pattern which works together with these other patterns:
8+
9+
- pat-modal,
10+
- pat-tooltip,
11+
- pat-notification.
12+

‎src/pat/close-panel/index.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>pat-close-panel demo</title>
6+
<link href="/style/common.css"
7+
rel="stylesheet"
8+
type="text/css"
9+
/>
10+
<script charset="utf-8"
11+
src="/bundle.min.js"
12+
type="text/javascript"
13+
></script>
14+
15+
<style media="screen"
16+
type="text/css"
17+
>
18+
.panel {
19+
background-color: white;
20+
}
21+
</style>
22+
</head>
23+
<body>
24+
25+
<a href="#panel" class="pat-modal">Example</a>
26+
27+
<template id="panel">
28+
<div class="panel">
29+
<ul>
30+
<li>
31+
<button type="button" class="close-panel">close this</button>
32+
</li>
33+
<li>
34+
<a href="#panel" class="pat-modal">open a modal</a>
35+
</li>
36+
<li>
37+
<a href="#panel" class="pat-modal close-panel">open a modal and close the this</a>
38+
</li>
39+
<li>
40+
<a href="#panel" class="pat-tooltip" data-pat-tooltip="closing: close-button; source: ajax">open a tooltip</a>
41+
</li>
42+
<li>
43+
<a href="#panel" class="pat-tooltip close-panel" data-pat-tooltip="closing: close-button; source: ajax">open a tooltip and close the this</a>
44+
</li>
45+
</ul>
46+
</div>
47+
</template>
48+
49+
</body>
50+
</html>

0 commit comments

Comments
 (0)