underpost 2.8.884 → 2.8.886

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

@@ -1,202 +1,269 @@
-/*
- * windowGetDimensions.js
- * ES6 vanilla utilities: windowGetH and windowGetW
- * Returns the most reliable viewport height/width available, with fallbacks
- * from modern to old browsers.
- *
- * Usage:
- *   import { windowGetH, windowGetW } from './windowGetDimensions.js';
- *   const h = windowGetH();
- *   const w = windowGetW();
+/**
+ * This module exports utility functions (`windowGetH`, `windowGetW`) for reliably
+ * determining the browser viewport dimensions, refactored into a class structure
+ * for encapsulation and better organization.
  *
- * Notes:
- * - visualViewport (when present) reflects the *visible* viewport (changes when
- *   the on-screen keyboard opens, or when mobile address/toolbars show/hide).
- * - documentElement.clientHeight/Width reflect the layout viewport.
- * - window.innerHeight/innerWidth include scrollbars and are widely supported.
- * - screen.* values are last-resort and reflect the physical screen, not the
- *   browser chrome.
+ * @module src/client/components/core/windowGetDimensions.js
+ * @namespace PwaWindowDimensions
  */
 
-// Helper: coerce a candidate to a finite integer (or null if not usable)
+// --- Internal Helper Functions ---
+
+/**
+ * Helper: coerce a candidate value to a finite integer (or null if not usable).
+ * @private
+ * @param {*} v - The value to coerce (e.g., height/width from a window object).
+ * @returns {number|null} The rounded positive integer, or null if invalid.
+ * @memberof PwaWindowDimensions
+ */
 const toInt = (v) => {
   const n = Number(v);
   return Number.isFinite(n) && n > 0 ? Math.round(n) : null;
 };
 
 /**
- * Try visualViewport values (most accurate for "what's actually visible").
- * @returns {{height: number|null, width: number|null}}
+ * Helper: Merge candidates in priority order and return first valid value.
+ * @private
+ * @param {...(number|null)[]} candidates - A list of number or null values.
+ * @returns {number|null} The first finite, positive integer found, or null.
+ * @memberof PwaWindowDimensions
  */
-const getFromVisualViewport = () => {
-  if (typeof window !== 'undefined' && window.visualViewport) {
-    const { height, width } = window.visualViewport;
-    return { height: toInt(height), width: toInt(width) };
+const pickFirst = (...candidates) => {
+  for (const c of candidates) {
+    if (Number.isFinite(c) && c > 0) return Math.round(c);
   }
-  return { height: null, width: null };
+  return null;
 };
 
+// --- Core Dimension Class ---
+
 /**
- * Try layout viewport (doctype-root) measurements.
- * document.documentElement.clientHeight/clientWidth are stable and widely used.
- * @returns {{height: number|null, width: number|null}}
+ * @namespace PwaWindowDimensions
+ * @class
+ * @classdesc Utility class containing static methods for reliably determining the
+ * browser viewport dimensions, prioritizing visual viewport, then layout viewport,
+ * and finally screen dimensions as fallbacks.
+ *
+ * Usage:
+ * import PwaWindowDimensions from './windowGetDimensions.js';
+ * const h = PwaWindowDimensions.getH();
+ * @memberof PwaWindowDimensions
  */
-const getFromDocumentElement = () => {
-  if (typeof document !== 'undefined' && document.documentElement) {
-    const { clientHeight, clientWidth } = document.documentElement;
-    return { height: toInt(clientHeight), width: toInt(clientWidth) };
+export class PwaWindowDimensions {
+  // --- Private Static Getters (Encapsulating browser APIs) ---
+
+  /**
+   * @private
+   * @static
+   * Try visualViewport values (most accurate for "what's actually visible").
+   * @returns {{height: number|null, width: number|null}}
+   * @memberof PwaWindowDimensions
+   */
+  static #getFromVisualViewport() {
+    if (typeof window !== 'undefined' && window.visualViewport) {
+      const { height, width } = window.visualViewport;
+      return { height: toInt(height), width: toInt(width) };
+    }
+    return { height: null, width: null };
   }
-  return { height: null, width: null };
-};
 
-/**
- * Try window.* measurements (innerHeight/innerWidth are widely supported).
- * @returns {{height: number|null, width: number|null}}
- */
-const getFromWindowInner = () => {
-  if (typeof window !== 'undefined') {
-    return { height: toInt(window.innerHeight), width: toInt(window.innerWidth) };
+  /**
+   * @private
+   * @static
+   * Try layout viewport (doctype-root) measurements.
+   * document.documentElement.clientHeight/clientWidth are stable and widely used.
+   * @returns {{height: number|null, width: number|null}}
+   * @memberof PwaWindowDimensions
+   */
+  static #getFromDocumentElement() {
+    if (typeof document !== 'undefined' && document.documentElement) {
+      const { clientHeight, clientWidth } = document.documentElement;
+      return { height: toInt(clientHeight), width: toInt(clientWidth) };
+    }
+    return { height: null, width: null };
   }
-  return { height: null, width: null };
-};
 
-/**
- * Try body measurements.
- * @returns {{height: number|null, width: number|null}}
- */
-const getFromBody = () => {
-  if (typeof document !== 'undefined' && document.body) {
-    return { height: toInt(document.body.clientHeight), width: toInt(document.body.clientWidth) };
+  /**
+   * @private
+   * @static
+   * Try window.* measurements (innerHeight/innerWidth are widely supported).
+   * @returns {{height: number|null, width: number|null}}
+   * @memberof PwaWindowDimensions
+   */
+  static #getFromWindowInner() {
+    if (typeof window !== 'undefined') {
+      return { height: toInt(window.innerHeight), width: toInt(window.innerWidth) };
+    }
+    return { height: null, width: null };
   }
-  return { height: null, width: null };
-};
 
-/**
- * Try screen measurements (physical screen/fallback).
- * screen.availHeight/availWidth are often available; outer* might also exist.
- * @returns {{height: number|null, width: number|null}}
- */
-const getFromScreen = () => {
-  if (typeof window !== 'undefined' && window.screen) {
-    const { availHeight, availWidth, height, width } = window.screen;
-    return {
-      height: toInt(availHeight) || toInt(height) || null,
-      width: toInt(availWidth) || toInt(width) || null,
-    };
+  /**
+   * @private
+   * @static
+   * Try body measurements (less reliable, used as a fallback).
+   * @returns {{height: number|null, width: number|null}}
+   * @memberof PwaWindowDimensions
+   */
+  static #getFromBody() {
+    if (typeof document !== 'undefined' && document.body) {
+      return { height: toInt(document.body.clientHeight), width: toInt(document.body.clientWidth) };
+    }
+    return { height: null, width: null };
   }
-  return { height: null, width: null };
-};
 
-/**
- * Try outer dimensions (less reliable, but sometimes available).
- * @returns {{height: number|null, width: number|null}}
- */
-const getFromOuter = () => {
-  if (typeof window !== 'undefined') {
-    return { height: toInt(window.outerHeight), width: toInt(window.outerWidth) };
+  /**
+   * @private
+   * @static
+   * Try screen measurements (physical screen/last-resort fallback).
+   * @returns {{height: number|null, width: number|null}}
+   * @memberof PwaWindowDimensions
+   */
+  static #getFromScreen() {
+    if (typeof window !== 'undefined' && window.screen) {
+      const { availHeight, availWidth, height, width } = window.screen;
+      return {
+        height: toInt(availHeight) || toInt(height) || null,
+        width: toInt(availWidth) || toInt(width) || null,
+      };
+    }
+    return { height: null, width: null };
   }
-  return { height: null, width: null };
-};
 
-/**
- * Merge candidates in priority order and return first valid value.
- * @param {...(number|null)[]} candidates
- * @returns {number|null}
- */
-const pickFirst = (...candidates) => {
-  for (const c of candidates) {
-    if (Number.isFinite(c) && c > 0) return Math.round(c);
+  /**
+   * @private
+   * @static
+   * Try outer dimensions (less reliable, sometimes available fallback).
+   * @returns {{height: number|null, width: number|null}}
+   * @memberof PwaWindowDimensions
+   */
+  static #getFromOuter() {
+    if (typeof window !== 'undefined') {
+      return { height: toInt(window.outerHeight), width: toInt(window.outerWidth) };
+    }
+    return { height: null, width: null };
   }
-  return null;
-};
+
+  // --- Public Static Methods ---
+
+  /**
+   * Get the best-available viewport height in pixels.
+   *
+   * Priority (from most reliable for "visible" to least):
+   * 1. window.visualViewport.height (if `preferVisualViewport` is true)
+   * 2. document.documentElement.clientHeight (Layout viewport)
+   * 3. window.innerHeight (Window size)
+   * 4. document.body.clientHeight (Body size)
+   * 5. window.visualViewport.height (if `preferVisualViewport` is false)
+   * 6. window.screen.availHeight / window.screen.height (Physical screen)
+   * 7. window.outerHeight (Last resort)
+   *
+   * @memberof PwaWindowDimensions
+   * @static
+   * @param {Object} [options]
+   * @param {boolean} [options.preferVisualViewport=true] - When true, visualViewport is checked first (best for visible screen size, e.g., above mobile keyboard).
+   * @returns {number|null} Height in px (rounded integer) or null if none found.
+   * @memberof PwaWindowDimensions
+   */
+  static getH(options = {}) {
+    const { preferVisualViewport = true } = options;
+
+    const vv = PwaWindowDimensions.#getFromVisualViewport();
+    const de = PwaWindowDimensions.#getFromDocumentElement();
+    const wi = PwaWindowDimensions.#getFromWindowInner();
+    const bd = PwaWindowDimensions.#getFromBody();
+    const sc = PwaWindowDimensions.#getFromScreen();
+    const ot = PwaWindowDimensions.#getFromOuter();
+
+    // Determine the prioritized list of height candidates
+    let candidates = [de.height, wi.height, bd.height];
+    if (preferVisualViewport) {
+      candidates = [vv.height, ...candidates]; // vv first
+    } else {
+      candidates.push(vv.height); // vv later
+    }
+
+    // Add final fallbacks
+    candidates.push(sc.height, ot.height);
+
+    return pickFirst(...candidates) || null;
+  }
+
+  /**
+   * Get the best-available viewport width in pixels.
+   *
+   * Priority (from most reliable for "visible" to least):
+   * 1. window.visualViewport.width (if `preferVisualViewport` is true)
+   * 2. document.documentElement.clientWidth (Layout viewport)
+   * 3. window.innerWidth (Window size)
+   * 4. document.body.clientWidth (Body size)
+   * 5. window.visualViewport.width (if `preferVisualViewport` is false)
+   * 6. window.screen.availWidth / window.screen.width (Physical screen)
+   * 7. window.outerWidth (Last resort)
+   *
+   * @memberof PwaWindowDimensions
+   * @static
+   * @param {Object} [options]
+   * @param {boolean} [options.preferVisualViewport=true] - When true, visualViewport is checked first.
+   * @returns {number|null} Width in px (rounded integer) or null if none found.
+   * @memberof PwaWindowDimensions
+   */
+  static getW(options = {}) {
+    const { preferVisualViewport = true } = options;
+
+    const vv = PwaWindowDimensions.#getFromVisualViewport();
+    const de = PwaWindowDimensions.#getFromDocumentElement();
+    const wi = PwaWindowDimensions.#getFromWindowInner();
+    const bd = PwaWindowDimensions.#getFromBody();
+    const sc = PwaWindowDimensions.#getFromScreen();
+    const ot = PwaWindowDimensions.#getFromOuter();
+
+    // Determine the prioritized list of width candidates
+    let candidates = [de.width, wi.width, bd.width];
+    if (preferVisualViewport) {
+      candidates = [vv.width, ...candidates]; // vv first
+    } else {
+      candidates.push(vv.width); // vv later
+    }
+
+    // Add final fallbacks
+    candidates.push(sc.width, ot.width);
+
+    return pickFirst(...candidates) || null;
+  }
+}
+
+// --- Backward Compatibility Exports (Legacy API) ---
 
 /**
  * Get the best-available viewport height in pixels.
- * Priority (from most reliable for "visible" to least):
- *  1. window.visualViewport.height
- *  2. document.documentElement.clientHeight
- *  3. window.innerHeight
- *  4. document.body.clientHeight
- *  5. window.screen.availHeight / window.screen.height
- *  6. window.outerHeight
+ * This function exists for backward compatibility; it wraps PwaWindowDimensions.getH().
  *
+ * @function windowGetH
+ * @memberof PwaWindowDimensions
  * @param {Object} [options]
- * @param {boolean} [options.preferVisualViewport=true] - when true, prefer visualViewport if present
- * @returns {number|null} height in px (rounded integer) or null if none found
+ * @param {boolean} [options.preferVisualViewport=true] - When true, visualViewport is checked first.
+ * @returns {number|null} Height in px (rounded integer) or null if none found.
+ * @memberof PwaWindowDimensions
  */
-export const windowGetH = (options = {}) => {
-  const { preferVisualViewport = true } = options;
-
-  const vv = getFromVisualViewport();
-  const de = getFromDocumentElement();
-  const wi = getFromWindowInner();
-  const bd = getFromBody();
-  const sc = getFromScreen();
-  const ot = getFromOuter();
-
-  if (preferVisualViewport) {
-    return pickFirst(vv.height, de.height, wi.height, bd.height, sc.height, ot.height) || null;
-  }
-
-  // if not preferring visualViewport, still include it but later
-  return pickFirst(de.height, wi.height, bd.height, vv.height, sc.height, ot.height) || null;
-};
+export const windowGetH = (options = {}) => PwaWindowDimensions.getH(options);
 
 /**
  * Get the best-available viewport width in pixels.
- * Priority (from most reliable for "visible" to least):
- *  1. window.visualViewport.width
- *  2. document.documentElement.clientWidth
- *  3. window.innerWidth
- *  4. document.body.clientWidth
- *  5. window.screen.availWidth / window.screen.width
- *  6. window.outerWidth
+ * This function exists for backward compatibility; it wraps PwaWindowDimensions.getW().
  *
+ * @function windowGetW
+ * @memberof PwaWindowDimensions
  * @param {Object} [options]
- * @param {boolean} [options.preferVisualViewport=true] - when true, prefer visualViewport if present
- * @returns {number|null} width in px (rounded integer) or null if none found
+ * @param {boolean} [options.preferVisualViewport=true] - When true, prefer visualViewport if present
+ * @returns {number|null} Width in px (rounded integer) or null if none found.
+ * @memberof PwaWindowDimensions
  */
-export const windowGetW = (options = {}) => {
-  const { preferVisualViewport = true } = options;
-
-  const vv = getFromVisualViewport();
-  const de = getFromDocumentElement();
-  const wi = getFromWindowInner();
-  const bd = getFromBody();
-  const sc = getFromScreen();
-  const ot = getFromOuter();
-
-  if (preferVisualViewport) {
-    return pickFirst(vv.width, de.width, wi.width, bd.width, sc.width, ot.width) || null;
-  }
+export const windowGetW = (options = {}) => PwaWindowDimensions.getW(options);
 
-  return pickFirst(de.width, wi.width, bd.width, vv.width, sc.width, ot.width) || null;
-};
+// --- Default Export ---
 
-// Convenience default export (optional)
-export default {
-  windowGetH,
-  windowGetW,
-};
-
-/* --------------------------------------------------------------------------
- * Example usage:
- *
- * import { windowGetH, windowGetW } from './windowGetDimensions.js';
- *
- * // Get values now
- * const currentH = windowGetH();
- * const currentW = windowGetW();
- *
- * // React to changes (recommended on mobile)
- * if (window.visualViewport) {
- *   window.visualViewport.addEventListener('resize', () => {
- *     console.log('visualViewport resize ->', windowGetH(), windowGetW());
- *   });
- * } else {
- *   window.addEventListener('resize', () => {
- *     console.log('window resize ->', windowGetH(), windowGetW());
- *   });
- * }
- *
- * --------------------------------------------------------------------------*/
+/**
+ * @typedef {PwaWindowDimensions} PwaWindowDimensions
+ * @memberof PwaWindowDimensions
+ */
+export default PwaWindowDimensions;

package/src/client/components/default/MenuDefault.js

@@ -186,6 +186,7 @@ const MenuDefault = {
           })}
           ${await BtnIcon.Render({
             class: 'in wfa main-btn-menu main-btn-chat',
+            useMenuBtn: true,
             label: html`${renderMenuLabel({
               icon: html`<i class="far fa-comments"></i>`,
               text: html`<span class="menu-label-text">${Translate.Render('chat')}</span>`,

package/src/client.dev.js

@@ -6,16 +6,19 @@
 import dotenv from 'dotenv';
 import { loggerFactory } from './server/logger.js';
 import { ProcessController } from './server/process.js';
-import { Config } from './server/conf.js';
+import { Config, buildClientStaticConf } from './server/conf.js';
 import { createClientDevServer } from './server/client-dev-server.js';
-dotenv.config();
 
-await Config.build();
+dotenv.config();
 
 const logger = loggerFactory(import.meta);
 
 await logger.setUpInfo();
 
+await buildClientStaticConf();
+
+await Config.build();
+
 await createClientDevServer();
 
 ProcessController.init(logger);

package/src/db/DataBaseProvider.js

@@ -1,29 +1,73 @@
 import { MongooseDB } from './mongo/MongooseDB.js';
 import { loggerFactory } from '../server/logger.js';
 
+/**
+ * Module for managing and loading various database connections (e.g., Mongoose, MariaDB).
+ * @module src/db/DataBaseProvider.js
+ * @namespace DataBaseProviderNamespace
+ */
+
 const logger = loggerFactory(import.meta);
 
-const DataBaseProvider = {
-  instance: {},
-  load: async function (options = { apis: [], host: '', path: '', db: {} }) {
+/**
+ * @class
+ * @alias DataBaseProviderService
+ * @memberof DataBaseProviderNamespace
+ * @classdesc Centralized service for loading, managing, and accessing multiple database connections
+ * based on application configuration (host, path, provider type).
+ */
+class DataBaseProviderService {
+  /**
+   * Internal storage for database connection instances, keyed by host+path.
+   * @type {object.<string, object>}
+   * @private
+   */
+  #instance = {};
+
+  /**
+   * Retrieves the internal instance storage for direct access (used for backward compatibility).
+   * @returns {object.<string, object>} The internal connection instance map.
+   */
+  get instance() {
+    return this.#instance;
+  }
+
+  /**
+   * Loads and initializes a database provider based on the configuration.
+   * If the connection is already loaded for the given host/path, it returns the existing instance.
+   *
+   * @async
+   * @param {object} [options] - Configuration for the database connection.
+   * @param {Array<string>} [options.apis=[]] - List of APIs whose models should be loaded (for Mongoose).
+   * @param {string} [options.host=''] - The host part of the application context (e.g., domain).
+   * @param {string} [options.path=''] - The path part of the application context.
+   * @param {object} [options.db={}] - The specific database configuration object.
+   * @param {string} options.db.provider - The name of the database provider ('mongoose', 'mariadb', etc.).
+   * @param {string} options.db.host - The database server host.
+   * @param {string} options.db.name - The database name.
+   * @returns {Promise<object|undefined>} A promise that resolves to the initialized provider object
+   * or `undefined` on error or if the provider is already loaded.
+   */
+  async load(options = { apis: [], host: '', path: '', db: {} }) {
     try {
       const { apis, host, path, db } = options;
+      const key = `${host}${path}`;
 
-      if (!this.instance[`${host}${path}`]) this.instance[`${host}${path}`] = {};
+      if (!this.#instance[key]) this.#instance[key] = {};
 
-      if (!db || this.instance[`${host}${path}`][db.provider]) return;
+      if (!db || this.#instance[key][db.provider]) return this.#instance[key][db.provider];
 
-      // logger.info(`Load ${db.provider} provider`, `${host}${path}`);
+      // logger.info(`Load ${db.provider} provider`, key);
       switch (db.provider) {
         case 'mongoose':
           {
             const conn = await MongooseDB.connect(db.host, db.name);
-            this.instance[`${host}${path}`][db.provider] = {
+            this.#instance[key][db.provider] = {
               models: await MongooseDB.loadModels({ conn, apis }),
               connection: conn,
               close: async () => {
                 return await new Promise((resolve) => {
-                  DataBaseProvider.instance[`${host}${path}`][db.provider].connection.close().then(() => {
+                  this.#instance[key][db.provider].connection.close().then(() => {
                     // logger.info('Mongoose connection is disconnected', db);
                     return resolve();
                   });
@@ -35,11 +79,20 @@ const DataBaseProvider = {
         default:
           break;
       }
-      return this.instance[`${host}${path}`][db.provider];
+      return this.#instance[key][db.provider];
     } catch (error) {
       logger.error(error, { error: error.stack, options });
       return undefined;
     }
-  },
-};
-export { DataBaseProvider };
+  }
+}
+
+/**
+ * Singleton instance of the DataBaseProviderService class for backward compatibility.
+ * @alias DataBaseProvider
+ * @memberof DataBaseProviderNamespace
+ * @type {DataBaseProviderService}
+ */
+const DataBaseProvider = new DataBaseProviderService();
+
+export { DataBaseProvider, DataBaseProviderService as DataBaseProviderClass };

package/src/db/mariadb/MariaDB.js

@@ -2,10 +2,35 @@ import mariadb from 'mariadb';
 
 import { loggerFactory } from '../../server/logger.js';
 
+/**
+ * Module for interacting with MariaDB/MySQL databases using the mariadb connector.
+ * @module src/db/MariaDB.js
+ * @namespace MariaDBNamespace
+ */
+
 const logger = loggerFactory(import.meta);
 
-const MariaDB = {
-  query: async (options) => {
+/**
+ * @class
+ * @alias MariaDBService
+ * @memberof MariaDBNamespace
+ * @classdesc Provides a simplified interface for executing queries against a MariaDB/MySQL database
+ * using a connection pool, ensuring connection management (acquisition and release).
+ */
+class MariaDBService {
+  /**
+   * Executes a SQL query against the MariaDB database.
+   *
+   * @async
+   * @param {object} options - The database connection and query options.
+   * @param {string} [options.host='127.0.0.1'] - The database host.
+   * @param {number} [options.port=3306] - The database port.
+   * @param {string} [options.user='root'] - The database user.
+   * @param {string} [options.password=''] - The database password.
+   * @param {string} options.query - The SQL query string to execute.
+   * @returns {Promise<any>} The result of the database query.
+   */
+  async query(options) {
     const { host, port, user, password, query } = options;
     const pool = mariadb.createPool({
       host: 'host' in options ? host : '127.0.0.1',
@@ -22,12 +47,20 @@ const MariaDB = {
       if (error.stack.startsWith('TypeError: Do not know how to serialize a BigInt')) return;
       logger.error(error, error.stack);
     } finally {
-      if (conn) conn.release(); //release to pool
+      if (conn) conn.release(); // release to pool
       await pool.end();
     }
 
     return result;
-  },
-};
+  }
+}
+
+/**
+ * Singleton instance of the MariaDBService class for backward compatibility.
+ * @alias MariaDB
+ * @memberof MariaDBNamespace
+ * @type {MariaDBService}
+ */
+const MariaDB = new MariaDBService();
 
-export { MariaDB };
+export { MariaDB, MariaDBService as MariaDBClass };