@thepassle/app-tools 0.7.9 → 0.8.1

package/dialog/index.js

@@ -1,4 +1,4 @@
-import { APP_TOOLS } from '../utils/CONSTANTS.js';
+import { APP_TOOLS, VERSION } from '../utils/CONSTANTS.js';
 import { setupGlobalDialogStyles } from './utils.js';
 import { DialogStateEvent } from './events.js';
 import { onePaint, animationsComplete } from '../utils/async.js';
@@ -10,6 +10,7 @@ const log = createLogger('dialog');
  * @typedef {import('./types.js').DialogCallbacks} DialogCallbacks
  * @typedef {import('./types.js').Config} Config
  * @typedef {import('./types.js').OpenDialogOptions} OpenDialogOptions
+ * @typedef {import('./types.js').Context} Context
  */
 
 setupGlobalDialogStyles();
@@ -21,6 +22,12 @@ export class Dialog extends EventTarget {
   isOpen = false;
   opened = new Promise((resolve) => {this.__resolveOpened = resolve;});
   closed = new Promise((resolve) => {this.__resolveClosed = resolve;});
+  /** @type {Context} */
+  context = {
+    dialog: undefined,
+    id: '',
+    parameters: {}
+  }
 
   /**
    * 
@@ -37,11 +44,13 @@ export class Dialog extends EventTarget {
   __initDialogNode() {
     const dialogNode = /** @type {DialogNode} */ (document.createElement('dialog'));
     dialogNode.setAttribute(APP_TOOLS, '');
+    dialogNode.setAttribute('version', VERSION);
     dialogNode.addEventListener('close', this.__onDialogClose);
     dialogNode.addEventListener('mousedown', this.__onLightDismiss);
 
     const form = document.createElement('form');
     form.setAttribute(APP_TOOLS, '');
+    form.setAttribute('version', VERSION);
     form.setAttribute('method', 'dialog');
     dialogNode.form = form;
 
@@ -64,20 +73,13 @@ export class Dialog extends EventTarget {
     const id = this.#id;
     const d = /** @type {DialogNode} */ (this.__dialog);
 
-    log(`Closing dialog "${id}"`, { 
-      id, 
-      dialog: d,
-      returnValue: d?.returnValue
-    });
+    log(`Closing dialog "${id}"`, this.context);
 
     d.removeAttribute('opened');
     d.setAttribute('closing', '');
-    this.dispatchEvent(new DialogStateEvent('closing', { 
-      id, 
-      dialog: d, 
-    }));
+    this.dispatchEvent(new DialogStateEvent('closing', this.context));
     try {
-      await this.#config[id]?.closing?.({dialog: d});
+      await this.#config[id]?.closing?.(this.context);
     } catch(e) {
       log(`Dialog "${id}" error on closing hook`);
       throw e;
@@ -89,25 +91,23 @@ export class Dialog extends EventTarget {
     d.setAttribute('closed', '');
     
     // @ts-ignore
-    this.__resolveClosed(d);
+    this.__resolveClosed(this.context);
     
-    this.dispatchEvent(new DialogStateEvent('closed', { 
-      id, 
-      dialog: d 
-    }));
+    this.dispatchEvent(new DialogStateEvent('closed', this.context));
     try {
-      await this.#config[id]?.closed?.({dialog: d});
+      await this.#config[id]?.closed?.(this.context);
     } catch(e) {
       log(`Dialog "${id}" error on closed hook`);
       throw e;
     }
-    log(`Closed dialog "${id}"`, { 
-      id, 
-      dialog: d, 
-      returnValue: d?.returnValue 
-    });
+    log(`Closed dialog "${id}"`, this.context);
 
     d?.remove();
+    this.context = {
+      dialog: undefined,
+      id: '',
+      parameters: {}
+    }
     this.__dialog = undefined;
 
     this.opened = new Promise((resolve) => {this.__resolveOpened = resolve;});
@@ -130,14 +130,19 @@ export class Dialog extends EventTarget {
     }
 
     this.__dialog = this.__initDialogNode();
+    this.context = {
+      dialog: this.__dialog,
+      id,
+      parameters,
+    }
     document.body.appendChild(this.__dialog);
-
-    log(`Openening dialog "${id}"`, { id, parameters, dialog: this.__dialog });
+    
+    log(`Openening dialog "${id}"`, this.context);
     this.__dialog.setAttribute('opening', '');
-    this.dispatchEvent(new DialogStateEvent('opening', { id, dialog: this.__dialog }));
+    this.dispatchEvent(new DialogStateEvent('opening', this.context));
 
     try {
-      await this.#config?.[id]?.opening?.({dialog: this.__dialog, parameters});
+      await this.#config?.[id]?.opening?.(this.context);
     } catch(e) {
       log(`Dialog "${this.#id}" error on opening hook`);
       throw e;
@@ -152,15 +157,15 @@ export class Dialog extends EventTarget {
     this.__dialog.removeAttribute('opening');
     this.__dialog.setAttribute('opened', '');
     // @ts-ignore
-    this.__resolveOpened(this.__dialog);
-    this.dispatchEvent(new DialogStateEvent('opened', { id, dialog: this.__dialog }));
+    this.__resolveOpened(this.context);
+    this.dispatchEvent(new DialogStateEvent('opened', this.context));
     try {
-      await this.#config?.[id]?.opened?.({dialog: this.__dialog, parameters});
+      await this.#config?.[id]?.opened?.(this.context);
     } catch(e) {
       log(`Dialog "${this.#id}" error on opened hook`);
       throw e;
     }
-    log(`Opened dialog "${id}"`, { id, parameters, dialog: this.__dialog });
+    log(`Opened dialog "${id}"`, this.context);
     this.closed = new Promise((resolve) => {this.__resolveClosed = resolve;});
   }
 

package/dialog/types.d.ts

@@ -1,10 +1,10 @@
 export type DialogNode = HTMLDialogElement & { form: HTMLFormElement };
 
 export interface DialogCallbacks {
-  opening?: <Parameters>(opts: {dialog: DialogNode, parameters: Parameters}) => void;
-  opened?: <Parameters>(opts: {dialog: DialogNode, parameters: Parameters}) => void;
-  closing?: (opts: {dialog: DialogNode}) => void;
-  closed?: (opts: {dialog: DialogNode}) => void;
+  opening?: <Parameters>(context: Context) => void;
+  opened?: <Parameters>(context: Context) => void;
+  closing?: (context: Context) => void;
+  closed?: (context: Context) => void;
 }
 
 export type Config = Record<string, DialogCallbacks>;
@@ -12,4 +12,10 @@ export type Config = Record<string, DialogCallbacks>;
 export interface OpenDialogOptions {
   id: string;
   parameters?: object;
+}
+
+export interface Context {
+  dialog: DialogNode,
+  id: string,
+  parameters: Record<string, any>
 }

package/dialog/utils.js

@@ -1,19 +1,25 @@
-import { APP_TOOLS } from '../utils/CONSTANTS.js';
+import { APP_TOOLS, VERSION } from '../utils/CONSTANTS.js';
 
 const DIALOG_STYLES_ID = 'dialog-styles';
 
 export function setupGlobalDialogStyles() {
-  let el = document.head.querySelector(`style[${APP_TOOLS}]#${DIALOG_STYLES_ID}`);
+  let el = document.head.querySelector(`style[${APP_TOOLS}][version="${VERSION}"]#${DIALOG_STYLES_ID}`);
   if (!el) {
     el = document.createElement('style');
     el.setAttribute(APP_TOOLS, '');
+    el.setAttribute('version', VERSION);
     el.id = DIALOG_STYLES_ID;
     el.innerHTML = `
-      html:has(dialog[${APP_TOOLS}][open]) {
+      html:has(dialog[${APP_TOOLS}][version="${VERSION}"][open]) {
         overflow: hidden;
       }
 
-      dialog[${APP_TOOLS}] {
+      dialog[${APP_TOOLS}][version="${VERSION}"]:modal {
+        max-width: 100%;
+        max-height: 100%;
+      }
+
+      dialog[${APP_TOOLS}][version="${VERSION}"] {
         pointer-events: none;
         inset: 0;
         position: fixed;
@@ -24,14 +30,14 @@ export function setupGlobalDialogStyles() {
         height: 200px;
       }
 
-      dialog[${APP_TOOLS}] > form[${APP_TOOLS}] {
+      dialog[${APP_TOOLS}][version="${VERSION}"] > form[${APP_TOOLS}][version="${VERSION}"] {
         width: calc(100% - 10px);
         height: calc(100% - 10px);
         margin: 0;
         padding: 5px;
       }
 
-      dialog[${APP_TOOLS}][open] {
+      dialog[${APP_TOOLS}][version="${VERSION}"][open] {
         pointer-events: auto;
       }
     `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thepassle/app-tools",
-  "version": "0.7.9",
+  "version": "0.8.1",
   "description": "",
   "main": "index.js",
   "type": "module",

package/router/plugins/resetFocus.js

@@ -1,4 +1,4 @@
-import { APP_TOOLS } from '../../utils/CONSTANTS.js';
+import { APP_TOOLS, VERSION } from '../../utils/CONSTANTS.js';
 
 const FOCUS_ELEMENT_ID = 'router-focus';
 const SR_ONLY_STYLE = `position:absolute;top:0;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);margin:-1px;`;
@@ -9,10 +9,11 @@ const SR_ONLY_STYLE = `position:absolute;top:0;width:1px;height:1px;overflow:hid
 export const resetFocus = {
   name: 'resetFocus',
   afterNavigation: ({title}) => {
-    let el = /** @type {HTMLElement} */ (document.querySelector(`div[${APP_TOOLS}]#${FOCUS_ELEMENT_ID}`));
+    let el = /** @type {HTMLElement} */ (document.querySelector(`div[${APP_TOOLS}][version="${VERSION}"]#${FOCUS_ELEMENT_ID}`));
     if (!el) {
       el = document.createElement('div');
       el.setAttribute(APP_TOOLS, '');
+      el.setAttribute('version', VERSION);
       el.id = FOCUS_ELEMENT_ID;
       el.setAttribute('tabindex', '-1');
       el.setAttribute('aria-live', 'polite');

package/utils/CONSTANTS.js

@@ -1 +1,2 @@
-export const APP_TOOLS = 'app-tools';
+export const APP_TOOLS = 'app-tools';
+export const VERSION = '1.x';

package/utils/async.js

@@ -1,19 +1,18 @@
-/**
- * @param {Function} f 
- * @returns {<Args>(...args: Args[]) => void}
- */
-export function debounce(f) {
-  let timeoutId;
+export function debounce(f, scheduleTask, cancelTask) {
+  let task;
 
   return (...args) => {
-    clearTimeout(timeoutId);
-    timeoutId = setTimeout(() => {
-      timeoutId = null;
+    cancelTask(task);
+    task = scheduleTask(() => {
+      task = null;
       f(...args);
     });
   };
 }
 
+export const debounceAtTimeout = (f, ms) => debounce(f, task => setTimeout(task, ms), clearTimeout);
+export const debounceAtFrame = (f) => debounce(f, requestAnimationFrame, cancelAnimationFrame);
+
 /**
  * @returns {Promise<number>}
  */