@paroicms/tiny-modal 0.1.0

package/dist/tiny-modal.css

@@ -0,0 +1,40 @@
+@charset "UTF-8";
+.TinyModal {
+  background: transparent;
+  border: none;
+  margin: 0;
+  max-width: none;
+  padding: 0;
+}
+.TinyModal::backdrop {
+  background-color: transparent;
+}
+.TinyModal-closeBtn {
+  align-items: center;
+  background-color: #bbb;
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  font-size: 30px;
+  font-weight: bold;
+  height: 40px;
+  justify-content: center;
+  line-height: 1;
+  position: absolute;
+  right: 50px;
+  top: 10px;
+  width: 40px;
+  z-index: 2;
+}
+.TinyModal-closeBtn::before {
+  content: "×";
+}
+.TinyModal-closeBtn:hover, .TinyModal-closeBtn:focus {
+  background-color: #888;
+}
+
+.HiddenForTinyModal {
+  display: none !important;
+}
+
+/*# sourceMappingURL=tiny-modal.css.map */

package/dist/tiny-modal.css.map

@@ -0,0 +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"}

package/dist/tiny-modal.d.ts

@@ -0,0 +1,14 @@
+export interface TinyModal {
+    open: () => void;
+    close: () => void;
+    on: (event: "open" | "close", listener: TinyModalEventListener) => void;
+}
+export type TinyModalEventListener = () => void;
+export default function initializeTinyModal(options: {
+    openButton?: string | HTMLElement;
+    dialogContent: HTMLElement;
+}): TinyModal;
+export default function initializeTinyModal(options: {
+    openButton?: string | HTMLElement;
+    dialogContent: string;
+}): TinyModal | undefined;

package/dist/tiny-modal.js

@@ -0,0 +1,50 @@
+export default function initializeTinyModal({ openButton, dialogContent, }) {
+    const openBtnEl = openButton
+        ? typeof openButton === "string"
+            ? document.querySelector(openButton)
+            : openButton
+        : undefined;
+    const contentEl = typeof dialogContent === "string" ? document.querySelector(dialogContent) : dialogContent;
+    if (!contentEl)
+        return;
+    if (!(contentEl instanceof HTMLTemplateElement)) {
+        contentEl.classList.remove("HiddenForTinyModal");
+    }
+    const dialogEl = document.createElement("dialog");
+    dialogEl.classList.add("TinyModal");
+    const closeBtnEl = document.createElement("button");
+    closeBtnEl.classList.add("TinyModal-closeBtn");
+    dialogEl.appendChild(closeBtnEl);
+    const wrapperEl = document.createElement("div");
+    wrapperEl.classList.add("TinyModal-wrapper");
+    wrapperEl.appendChild(contentEl instanceof HTMLTemplateElement ? contentEl.content.cloneNode(true) : contentEl);
+    dialogEl.appendChild(wrapperEl);
+    document.body.appendChild(dialogEl);
+    const eventListeners = new Map();
+    function on(event, listener) {
+        if (!eventListeners.has(event)) {
+            eventListeners.set(event, []);
+        }
+        eventListeners.get(event)?.push(listener);
+    }
+    function trigger(eventName) {
+        if (eventListeners.has(eventName)) {
+            eventListeners.get(eventName)?.forEach((listener) => listener());
+        }
+    }
+    function open() {
+        dialogEl.showModal();
+        document.body.style.overflow = "hidden";
+        trigger("open");
+    }
+    function close() {
+        dialogEl.close();
+    }
+    openBtnEl?.addEventListener("click", open);
+    closeBtnEl.addEventListener("click", close);
+    dialogEl.addEventListener("close", () => {
+        document.body.style.overflow = "";
+        trigger("close");
+    });
+    return { open, close, on };
+}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@paroicms/tiny-modal",
+  "version": "0.1.0",
+  "description": "Tiny modal library for creating modal dialogs",
+  "author": "Paroi Team",
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.com/paroi/opensource/paroicms.git",
+    "directory": "packages/tiny-modal"
+  },
+  "scripts": {
+    "build": "tsc && npm run scss",
+    "clear": "rimraf dist/*",
+    "dev": "tsc --watch --preserveWatchOutput",
+    "scss": "sass src/tiny-modal.scss dist/tiny-modal.css",
+    "scss:watch": "sass --watch src/tiny-modal.scss dist/tiny-modal.css"
+  },
+  "keywords": [
+    "paroicms",
+    "modal"
+  ],
+  "license": "MIT",
+  "type": "module",
+  "module": "dist/tiny-modal.js",
+  "typings": "dist/tiny-modal.d.ts",
+  "devDependencies": {
+    "sass": "~1.83.4",
+    "rimraf": "~6.0.1",
+    "typescript": "~5.7.3",
+    "@paroicms/public-anywhere-lib": "0.14.0"
+  },
+  "files": [
+    "dist"
+  ]
+}