underpost 3.2.10 → 3.2.12

package/src/client/components/core/ClientEvents.js

@@ -45,6 +45,79 @@ const AppointmentEventType = {
   submitted: 'appointment:submitted',
 };
 
+const ModalEventType = {
+  close: 'modal:close',
+  menu: 'modal:menu',
+  collapseMenu: 'modal:collapse-menu',
+  extendMenu: 'modal:extend-menu',
+  dragEnd: 'modal:drag-end',
+  observer: 'modal:observer',
+  click: 'modal:click',
+  expandUi: 'modal:expand-ui',
+  barUiOpen: 'modal:bar-ui-open',
+  barUiClose: 'modal:bar-ui-close',
+  reload: 'modal:reload',
+  home: 'modal:home',
+};
+
+const ModalListenerChannels = {
+  onCloseListener: ModalEventType.close,
+  onMenuListener: ModalEventType.menu,
+  onCollapseMenuListener: ModalEventType.collapseMenu,
+  onExtendMenuListener: ModalEventType.extendMenu,
+  onDragEndListener: ModalEventType.dragEnd,
+  onObserverListener: ModalEventType.observer,
+  onClickListener: ModalEventType.click,
+  onExpandUiListener: ModalEventType.expandUi,
+  onBarUiOpen: ModalEventType.barUiOpen,
+  onBarUiClose: ModalEventType.barUiClose,
+  onReloadModalListener: ModalEventType.reload,
+  onHome: ModalEventType.home,
+};
+
+const createModalEventChannel = (bus, type) => {
+  const busKey = (key) => `${type}::${key}`;
+  return new Proxy(
+    {},
+    {
+      get(_target, prop) {
+        if (typeof prop === 'symbol') return undefined;
+        const key = busKey(prop);
+        if (!bus.has(key)) return undefined;
+        return (detail) => bus.emitKey(key, detail);
+      },
+      set(_target, prop, value) {
+        if (typeof prop !== 'symbol' && typeof value === 'function') bus.on(type, value, { key: busKey(prop) });
+        return true;
+      },
+      deleteProperty(_target, prop) {
+        if (typeof prop !== 'symbol') bus.off(busKey(prop));
+        return true;
+      },
+      has(_target, prop) {
+        return typeof prop !== 'symbol' && bus.has(busKey(prop));
+      },
+      ownKeys() {
+        const prefix = `${type}::`;
+        return bus.keysOf(type).map((key) => String(key).slice(prefix.length));
+      },
+      getOwnPropertyDescriptor(_target, prop) {
+        if (typeof prop !== 'symbol' && bus.has(busKey(prop)))
+          return { enumerable: true, configurable: true, writable: true, value: undefined };
+        return undefined;
+      },
+    },
+  );
+};
+
+// One EventBus per modal id, surfaced through the legacy channel names.
+const createModalEvents = () => {
+  const bus = new EventBus();
+  const channels = {};
+  for (const [name, type] of Object.entries(ModalListenerChannels)) channels[name] = createModalEventChannel(bus, type);
+  return { bus, channels };
+};
+
 const authLoginEvents = new EventBus();
 const authLogoutEvents = new EventBus();
 const authSignupEvents = new EventBus();
@@ -70,6 +143,9 @@ export {
   KeyboardEventType,
   AccountEventType,
   AppointmentEventType,
+  ModalEventType,
+  ModalListenerChannels,
+  createModalEvents,
   authLoginEvents,
   authLogoutEvents,
   authSignupEvents,

package/src/client/components/core/EventBus.js

@@ -69,6 +69,10 @@ class EventBus {
     return this.listeners.has(key);
   }
 
+  keysOf(type) {
+    return [...(this.typeKeys.get(type) ?? [])];
+  }
+
   async emit(type, detail) {
     if (!(this.typeKeys.get(type)?.size > 0)) return;
 

package/src/client/components/core/Modal.js

@@ -36,6 +36,7 @@ import { Worker } from './Worker.js';
 import { Scroll } from './Scroll.js';
 import { windowGetH, windowGetW } from './windowGetDimensions.js';
 import { SearchBox } from './SearchBox.js';
+import { createModalEvents } from './ClientEvents.js';
 
 const logger = loggerFactory(import.meta, { trace: true });
 
@@ -93,6 +94,11 @@ const logger = loggerFactory(import.meta, { trace: true });
 /**
  * @typedef {object} ModalDataEntry
  * @property {ModalRenderOptions} options - Original render options.
+ * @property {import('./EventBus.js').EventBus} events - Per-modal event bus backing the listener channels below.
+ *
+ * The `onX` channels are EventBus-backed proxies that preserve the historical
+ * `{ [key]: listener }` map API: assign to register, read+call to invoke a single
+ * listener, `delete` to remove, and `Object.keys` to enumerate registered keys.
  * @property {Object.<string, Function>} onCloseListener - Close event listeners keyed by id.
  * @property {Object.<string, Function>} onMenuListener - Menu button event listeners.
  * @property {Object.<string, Function>} onCollapseMenuListener - Collapse menu listeners.
@@ -123,6 +129,69 @@ class Modal {
   /** @type {Object.<string, ModalDataEntry>} */
   static Data = {};
 
+  /**
+   * Bottom offset of the slide-menu area for the given options.
+   * @param {ModalRenderOptions} options
+   * @param {number} [heightDefaultBottomBar=0]
+   * @returns {number}
+   */
+  static getModalTop(options, heightDefaultBottomBar = 0) {
+    return windowGetH() - (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar);
+  }
+
+  /**
+   * Available modal height, accounting for the top/bottom bars when the UI is expanded.
+   * @param {ModalRenderOptions} options
+   * @param {number} [heightDefaultTopBar=50]
+   * @param {number} [heightDefaultBottomBar=0]
+   * @returns {number}
+   */
+  static getModalHeight(options, heightDefaultTopBar = 50, heightDefaultBottomBar = 0) {
+    const barsVisible = s(`.main-body-btn-ui-close`) && !s(`.main-body-btn-ui-close`).classList.contains('hide');
+    return (
+      windowGetH() -
+      (barsVisible
+        ? (options.heightTopBar ? options.heightTopBar : heightDefaultTopBar) +
+          (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar)
+        : 0)
+    );
+  }
+
+  /**
+   * Left CSS value for a slide menu in its open/closed state.
+   * @param {ModalRenderOptions} options
+   * @param {{ originSlideMenuWidth: number, collapseSlideMenuWidth: number }} widths
+   * @param {{ open: boolean }} [ops={ open: false }]
+   * @returns {string}
+   */
+  static getModalMenuLeftStyle(options, { originSlideMenuWidth, collapseSlideMenuWidth }, ops = { open: false }) {
+    return `${
+      options.mode === 'slide-menu-right'
+        ? `${
+            windowGetW() +
+            (ops?.open
+              ? -1 * originSlideMenuWidth +
+                (options.mode === 'slide-menu-right' && s(`.btn-icon-menu-mode-right`).classList.contains('hide')
+                  ? originSlideMenuWidth - collapseSlideMenuWidth
+                  : 0)
+              : originSlideMenuWidth)
+          }px`
+        : `-${ops?.open ? '0px' : originSlideMenuWidth}px`
+    }`;
+  }
+
+  /**
+   * Viewport-centered top/left CSS values for a modal of the given size.
+   * @param {{ width: number, height: number }} param0
+   * @returns {{ top: string, left: string }}
+   */
+  static getModalCenter({ width, height }) {
+    return {
+      top: `${windowGetH() / 2 - height / 2}px`,
+      left: `${windowGetW() / 2 - width / 2}px`,
+    };
+  }
+
   /**
    * Create or reload a modal. When the modal already exists in the DOM the
    * existing instance is reloaded via its onReloadModalListener callbacks.
@@ -175,52 +244,21 @@ class Modal {
     const heightDefaultTopBar = 50;
     const heightDefaultBottomBar = 0;
     const idModal = options.id ? options.id : getId(this.Data, 'modal-');
+    const { bus: eventBus, channels: eventChannels } = createModalEvents();
     this.Data[idModal] = {
       options,
-      onCloseListener: {},
-      onMenuListener: {},
-      onCollapseMenuListener: {},
-      onExtendMenuListener: {},
-      onDragEndListener: {},
-      onObserverListener: {},
-      onClickListener: {},
-      onExpandUiListener: {},
-      onBarUiOpen: {},
-      onBarUiClose: {},
-      onReloadModalListener: {},
-      onHome: {},
+      events: eventBus,
+      ...eventChannels,
       homeModals: options.homeModals ? options.homeModals : [],
       query: options.query ? `${window.location.search}` : undefined,
-      getTop: () => {
-        const result = windowGetH() - (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar);
-        return result;
-      },
-      getHeight: () => {
-        return (
-          windowGetH() -
-          (s(`.main-body-btn-ui-close`) && !s(`.main-body-btn-ui-close`).classList.contains('hide')
-            ? (options.heightTopBar ? options.heightTopBar : heightDefaultTopBar) +
-              (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar)
-            : 0)
-        );
-      },
+      getTop: () => Modal.getModalTop(options, heightDefaultBottomBar),
+      getHeight: () => Modal.getModalHeight(options, heightDefaultTopBar, heightDefaultBottomBar),
       getMenuLeftStyle: (ops = { open: false }) =>
-        `${
-          options.mode === 'slide-menu-right'
-            ? `${
-                windowGetW() +
-                (ops?.open
-                  ? -1 * originSlideMenuWidth +
-                    (options.mode === 'slide-menu-right' && s(`.btn-icon-menu-mode-right`).classList.contains('hide')
-                      ? originSlideMenuWidth - collapseSlideMenuWidth
-                      : 0)
-                  : originSlideMenuWidth)
-              }px`
-            : `-${ops?.open ? '0px' : originSlideMenuWidth}px`
-        }`,
+        Modal.getModalMenuLeftStyle(options, { originSlideMenuWidth, collapseSlideMenuWidth }, ops),
       center: () => {
-        top = `${windowGetH() / 2 - height / 2}px`;
-        left = `${windowGetW() / 2 - width / 2}px`;
+        const { top: centeredTop, left: centeredLeft } = Modal.getModalCenter({ width, height });
+        top = centeredTop;
+        left = centeredLeft;
       },
       ...this.Data[idModal],
     };
@@ -1029,6 +1067,10 @@ class Modal {
                 hoverFocusCtl.checkDismiss();
               };
               EventsUI.onClick(`.top-bar-search-box-container`, () => {
+                if (SearchBox.Data.skipOpen) {
+                  SearchBox.Data.skipOpen = false;
+                  return;
+                }
                 searchBoxHistoryOpen();
                 searchBoxCallBack(formDataInfoNode[0]);
                 const inputEl = s(`.${inputSearchBoxId}`);
@@ -2138,7 +2180,6 @@ class Modal {
     dragInstance = setDragInstance();
     if (options && options.maximize) s(`.btn-maximize-${idModal}`).click();
     if (options.observer) {
-      this.Data[idModal].onObserverListener = {};
       this.Data[idModal].observerCallBack = () => {
         // logger.info('ResizeObserver', `.${idModal}`, s(`.${idModal}`).offsetWidth, s(`.${idModal}`).offsetHeight);
         if (this.Data[idModal] && this.Data[idModal].onObserverListener)

package/src/db/DataBaseProvider.js

@@ -2,6 +2,7 @@ import { MongooseDB } from './mongo/MongooseDB.js';
 import { loggerFactory } from '../server/logger.js';
 import { getCapVariableName } from '../client/components/core/CommonJs.js';
 import { resolveHostKeyContext } from '../server/conf.js';
+import Underpost from '../index.js';
 
 /**
  * Module for managing and loading various database connections (e.g., Mongoose, MariaDB).
@@ -34,7 +35,6 @@ class DataBaseProviderService {
     return this.#instance;
   }
 
-
   /**
    * Retrieves a loaded provider bucket for a context.
    * @param {{host?: string, path?: string}|string} [context={ host: '', path: '' }] - Context object or key.
@@ -191,23 +191,23 @@ class DataBaseProviderService {
         path: options.path,
         db: options.db
           ? {
-            provider: options.db.provider,
-            name: options.db.name ? '***' : undefined,
-            host: options.db.host ? '***' : undefined,
-            user: options.db.user ? '***' : undefined,
-            password: options.db.password ? '***' : undefined,
-          }
+              provider: options.db.provider,
+              name: options.db.name ? '***' : undefined,
+              host: options.db.host ? '***' : undefined,
+              user: options.db.user ? '***' : undefined,
+              password: options.db.password ? '***' : undefined,
+            }
           : {},
       };
       logger.error(error.message, { safeOptions });
+      if (Underpost.env.isInsideContainer()) Underpost.env.set('container-status', 'error');
       return undefined;
     }
   }
 }
 
-
 export {
   DataBaseProviderService as DataBaseProviderClass,
   DataBaseProviderService as default,
-  DataBaseProviderService
+  DataBaseProviderService,
 };

package/src/db/mariadb/MariaDB.js

@@ -1,5 +1,5 @@
 import { createPool } from 'mariadb';
-
+import Underpost from '../../index.js';
 import { loggerFactory } from '../../server/logger.js';
 
 /**
@@ -51,6 +51,7 @@ class MariaDBService {
       console.log(result);
     } catch (error) {
       logger.error('MariaDB query failed', { error: error.message });
+      if (Underpost.env.isInsideContainer()) Underpost.env.set('container-status', 'error');
     } finally {
       if (conn) conn.release(); // release to pool
       await pool.end();