@itrocks/modal 0.1.2 → 0.2.0

package/README.md

@@ -178,3 +178,43 @@ if (form) {
   dedicated "Close" link using `href="about:blank"`.
 - Projects that want a lightweight, dependency-free modal behavior and
   default styling that can be easily overridden with custom CSS.
+
+## Asynchronous forms
+
+Add `data-modal-close="manual"` to keep a form open during submission. After the server confirms success,
+call `closeModal(element: Element): void`; it removes the closest `#modal` ancestor.
+A failed request can leave the form open and display an error.
+Repeated `modalForm(form)` calls do not register duplicate handlers, and cancellation links prevent native navigation.
+
+```ts
+import { closeModal } from '@itrocks/modal/modal.js'
+import { modalForm }  from '@itrocks/modal/modal.js'
+
+form.dataset.modalClose = 'manual'
+modalForm(form)
+form.addEventListener('submit', async event => {
+	event.preventDefault()
+	const response = await fetch(form.action, { method: 'POST', body: new FormData(form) })
+	if (response.ok) closeModal(form)
+})
+```
+
+Cancellation links with an explicit `target` delegate to `xtarget`; non-targeted cancellation links close the modal
+through `modalForm`. For a targeted close without network access, use:
+
+```html
+<a href="about:blank" target="#modal:replace">Cancel</a>
+```
+
+## Usage with the it.rocks framework
+
+The [it.rocks framework](https://github.com/itrocks-ts/framework) activates `xtarget` and its modifier plugin.
+Targeted cancellation links therefore work without additional `xtarget` setup.
+Custom modal forms still use `modalForm` for the form behaviour described above.
+
+## Usage outside the it.rocks framework
+
+For targeted cancellation, activate [`xtarget`](https://github.com/itrocks-ts/xtarget) and its modifier plugin
+in your browser entry. Non-targeted cancellation only needs `modalForm`.
+Call `modalForm` for newly inserted forms, or load `@itrocks/modal/build.js` with
+[`build`](https://github.com/itrocks-ts/build) to activate matching dynamic forms automatically.

package/modal.d.ts

@@ -1 +1,2 @@
+export declare function closeModal(element: Element): void;
 export declare function modalForm(form: HTMLFormElement): void;

package/modal.js

@@ -1,9 +1,23 @@
+const activated = new WeakSet();
+export function closeModal(element) {
+    element.closest('#modal')?.remove();
+}
 export function modalForm(form) {
     const modal = form.closest('#modal');
-    if (!modal)
+    if (!modal || activated.has(form))
         return;
-    form.addEventListener('submit', () => setTimeout(() => modal.remove()));
+    activated.add(form);
+    form.addEventListener('submit', () => {
+        if (form.dataset.modalClose !== 'manual')
+            setTimeout(() => modal.remove());
+    });
     form.querySelectorAll('a[href="about:blank"]').forEach(anchor => {
-        anchor.addEventListener('click', () => { anchor.closest('#modal')?.remove(); });
+        // Targeted cancellation is handled by xtarget, including its target modifiers.
+        if (anchor.hasAttribute('target'))
+            return;
+        anchor.addEventListener('click', event => {
+            event.preventDefault();
+            closeModal(anchor);
+        });
     });
 }

package/package.json

@@ -6,7 +6,7 @@
 	"description": "Lightweight modal with default styling and auto-close on form submit or link click",
 	"devDependencies": {
 		"sass": "^1.95",
-		"typescript": "^6.0"
+		"typescript": "^7.0"
 	},
 	"files": [
 		"LICENSE",
@@ -50,5 +50,5 @@
 	"scripts": {
 		"build": "tsc && sass --no-source-map modal.scss:modal.css"
 	},
-	"version": "0.1.2"
+	"version": "0.2.0"
 }