@paroicms/tiny-modal 0.2.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/tiny-modal.css +16 -10
  2. package/dist/tiny-modal.css.map +1 -1
  3. package/dist/tiny-modal.d.ts +5 -3
  4. package/dist/tiny-modal.js +13 -8
  5. package/package.json +4 -4
package/dist/tiny-modal.css CHANGED
@@ -2,14 +2,18 @@
2
2
  .TinyModal {
3
3
  background: transparent;
4
4
  border: none;
5
- margin: 0;
6
- max-width: none;
5
+ margin: auto;
7
6
  padding: 0;
7
+ position: fixed;
8
+ overflow: visible;
8
9
  }
9
10
  .TinyModal::backdrop {
10
- background-color: transparent;
11
+ background-color: rgba(34, 34, 34, 0.7333333333);
11
12
  }
12
- .TinyModal-closeBtn {
13
+ .TinyModal-body {
14
+ overflow: scroll;
15
+ }
16
+ .TinyModal-closeButton {
13
17
  align-items: center;
14
18
  background-color: #bbb;
15
19
  border-radius: 50%;
@@ -21,19 +25,21 @@
21
25
  justify-content: center;
22
26
  line-height: 1;
23
27
  position: absolute;
24
- right: 50px;
25
- top: 10px;
28
+ right: -30px;
29
+ top: -30px;
26
30
  width: 40px;
27
31
  z-index: 2;
28
32
  }
29
- .TinyModal-closeBtn::before {
33
+ .TinyModal-closeButton::before {
30
34
  content: "×";
31
35
  }
32
- .TinyModal-closeBtn:hover, .TinyModal-closeBtn:focus {
33
- background-color: #888;
36
+ @media (max-width: 400px) {
37
+ .TinyModal-closeButton {
38
+ right: -18px;
39
+ }
34
40
  }
35
41
 
36
- .HiddenForTinyModal {
42
+ .TinyModalHidden {
37
43
  display: none !important;
38
44
  }
39
45
 
package/dist/tiny-modal.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../src/tiny-modal.scss"],"names":[],"mappings":";AAAA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAEE;;;AAKN;EACE","file":"tiny-modal.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../src/tiny-modal.scss"],"names":[],"mappings":";AAAA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EArBF;IAsBI;;;;AAKN;EACE","file":"tiny-modal.css"}
package/dist/tiny-modal.d.ts CHANGED
@@ -1,14 +1,16 @@
1
1
  export interface TinyModal {
2
+ on: (event: "open" | "close", listener: TinyModalEventListener) => void;
2
3
  open: () => void;
3
4
  close: () => void;
4
- on: (event: "open" | "close", listener: TinyModalEventListener) => void;
5
5
  }
6
6
  export type TinyModalEventListener = () => void;
7
7
  export default function initializeTinyModal(options: {
8
- openButton?: string | HTMLElement;
9
8
  dialogContent: HTMLElement;
9
+ openButton?: string | HTMLElement;
10
+ modalClass?: string;
10
11
  }): TinyModal;
11
12
  export default function initializeTinyModal(options: {
12
- openButton?: string | HTMLElement;
13
13
  dialogContent: string;
14
+ openButton?: string | HTMLElement;
15
+ modalClass?: string;
14
16
  }): TinyModal | undefined;
package/dist/tiny-modal.js CHANGED
@@ -1,4 +1,4 @@
1
- export default function initializeTinyModal({ openButton, dialogContent, }) {
1
+ export default function initializeTinyModal({ openButton, dialogContent, modalClass, }) {
2
2
  const openBtnEl = openButton
3
3
  ? typeof openButton === "string"
4
4
  ? document.querySelector(openButton)
@@ -8,17 +8,20 @@ export default function initializeTinyModal({ openButton, dialogContent, }) {
8
8
  if (!contentEl)
9
9
  return;
10
10
  if (!(contentEl instanceof HTMLTemplateElement)) {
11
- contentEl.classList.remove("HiddenForTinyModal");
11
+ contentEl.classList.remove("TinyModalHidden");
12
12
  }
13
13
  const dialogEl = document.createElement("dialog");
14
14
  dialogEl.classList.add("TinyModal");
15
+ if (modalClass) {
16
+ dialogEl.classList.add(modalClass);
17
+ }
15
18
  const closeBtnEl = document.createElement("button");
16
- closeBtnEl.classList.add("TinyModal-closeBtn");
19
+ closeBtnEl.classList.add("TinyModal-closeButton");
17
20
  dialogEl.appendChild(closeBtnEl);
18
- const wrapperEl = document.createElement("div");
19
- wrapperEl.classList.add("TinyModal-wrapper");
20
- wrapperEl.appendChild(contentEl instanceof HTMLTemplateElement ? contentEl.content.cloneNode(true) : contentEl);
21
- dialogEl.appendChild(wrapperEl);
21
+ const bodyEl = document.createElement("div");
22
+ bodyEl.classList.add("TinyModal-body");
23
+ bodyEl.appendChild(contentEl instanceof HTMLTemplateElement ? contentEl.content.cloneNode(true) : contentEl);
24
+ dialogEl.appendChild(bodyEl);
22
25
  document.body.appendChild(dialogEl);
23
26
  const eventListeners = new Map();
24
27
  function on(event, listener) {
@@ -35,6 +38,7 @@ export default function initializeTinyModal({ openButton, dialogContent, }) {
35
38
  function open() {
36
39
  dialogEl.showModal();
37
40
  document.body.style.overflow = "hidden";
41
+ document.documentElement.style.overflow = "hidden";
38
42
  trigger("open");
39
43
  }
40
44
  function close() {
@@ -43,7 +47,8 @@ export default function initializeTinyModal({ openButton, dialogContent, }) {
43
47
  openBtnEl?.addEventListener("click", open);
44
48
  closeBtnEl.addEventListener("click", close);
45
49
  dialogEl.addEventListener("close", () => {
46
- document.body.style.overflow = "";
50
+ document.body.style.removeProperty("overflow");
51
+ document.documentElement.style.removeProperty("overflow");
47
52
  trigger("close");
48
53
  });
49
54
  return { open, close, on };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@paroicms/tiny-modal",
3
- "version": "0.2.0",
3
+ "version": "0.4.0",
4
4
  "description": "Tiny modal library for creating modal dialogs",
5
5
  "author": "Paroi Team",
6
6
  "repository": {
@@ -24,10 +24,10 @@
24
24
  "main": "dist/tiny-modal.js",
25
25
  "typings": "dist/tiny-modal.d.ts",
26
26
  "devDependencies": {
27
- "sass": "~1.83.4",
27
+ "sass": "~1.85.1",
28
28
  "rimraf": "~6.0.1",
29
- "typescript": "~5.7.3",
30
- "@paroicms/public-anywhere-lib": "0.15.0"
29
+ "typescript": "~5.8.2",
30
+ "@paroicms/public-anywhere-lib": "0.19.0"
31
31
  },
32
32
  "files": [
33
33
  "dist"