underpost 3.2.4 → 3.2.8

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

@@ -1,12 +1,22 @@
 import { cap, getId } from './CommonJs.js';
-
-const Keyboard = {
-  ActiveKey: {},
-  Event: {},
-  Init: async function () {
+import { KeyboardEventType, keyboardEvents } from './ClientEvents.js';
+class Keyboard {
+  static ActiveKey = {};
+  static Event = {};
+  static onPressed(listener, options = {}) {
+    return keyboardEvents.on(KeyboardEventType.pressed, listener, options);
+  }
+  static offPressed(key) {
+    return keyboardEvents.off(key);
+  }
+  static hasPressedListener(key) {
+    return keyboardEvents.has(key);
+  }
+  static async instance() {
     const callBackTime = 45;
     window.onkeydown = (e = new KeyboardEvent()) => {
-      this.ActiveKey[e.key] = true;
+      Keyboard.ActiveKey[e.key] = true;
+      keyboardEvents.emit(KeyboardEventType.pressed, { key: e.key, activeKeys: { ...Keyboard.ActiveKey }, event: e });
       // e.composedPath()
       // if (['Tab'].includes(e.key)) {
       //   e.preventDefault();
@@ -15,24 +25,23 @@ const Keyboard = {
       // }
     };
     window.onkeyup = (e = new KeyboardEvent()) => {
-      delete this.ActiveKey[e.key];
+      delete Keyboard.ActiveKey[e.key];
     };
     setInterval(() => {
-      Object.keys(this.Event).map((key) => {
-        Object.keys(this.ActiveKey).map((activeKey) => {
-          if (activeKey in this.Event[key]) this.Event[key][activeKey]();
+      Object.keys(Keyboard.Event).map((key) => {
+        Object.keys(Keyboard.ActiveKey).map((activeKey) => {
+          if (activeKey in Keyboard.Event[key]) Keyboard.Event[key][activeKey]();
         });
       });
     }, callBackTime);
-  },
-  instanceMultiPressKeyTokens: {},
-  instanceMultiPressKey: (options = { keys: [], id, timePressDelay, eventCallBack: () => {} }) => {
+  }
+  static instanceMultiPressKeyTokens = {};
+  static instanceMultiPressKey = (options = { keys: [], id, timePressDelay, eventCallBack: () => {} }) => {
     if (typeof options.keys[0] === 'string') options.keys[0] = [options.keys[0]];
     if (!options.id) options.id = getId(Keyboard.instanceMultiPressKeyTokens, 'key-press-');
     if (!options.timePressDelay) options.timePressDelay = 500;
     const { id, timePressDelay, keys, eventCallBack } = options;
     Keyboard.instanceMultiPressKeyTokens[id] = { ...options };
-
     let indexCombined = -1;
     for (const combinedKeys of keys) {
       indexCombined++;
@@ -58,7 +67,6 @@ const Keyboard = {
             }
           },
         };
-
         Keyboard.Event[`instanceMultiPressKey-${id}-${privateIndexCombined}`][key] = multiPressKey[key].trigger;
         Keyboard.Event[`instanceMultiPressKey-${id}-${privateIndexCombined}`][key.toLowerCase()] =
           multiPressKey[key].trigger;
@@ -67,7 +75,6 @@ const Keyboard = {
         Keyboard.Event[`instanceMultiPressKey-${id}-${privateIndexCombined}`][cap(key)] = multiPressKey[key].trigger;
       }
     }
-  },
-};
-
+  };
+}
 export { Keyboard };

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

@@ -0,0 +1,145 @@
+/**
+ * Mobile virtual keyboard avoidance utility.
+ *
+ * On mobile browsers, when the software keyboard appears it reduces
+ * `window.visualViewport.height`.  Without compensation, the keyboard
+ * can cover modals and form inputs so the user cannot see what they type.
+ *
+ * This module attaches to `window.visualViewport` resize/scroll events and
+ * translates a target element upward by the amount of space the keyboard has
+ * consumed.  A debounce is applied so that rapid `resize` events (common on
+ * Android) do not cause visual jitter.
+ *
+ * Usage:
+ * ```js
+ * import { initKeyboardAvoidance } from './KeyboardAvoidance.js';
+ *
+ * // Attach when a modal opens:
+ * const cleanup = initKeyboardAvoidance(document.querySelector('.my-modal'));
+ *
+ * // Detach when the modal closes:
+ * cleanup();
+ * ```
+ *
+ * @module src/client/components/core/KeyboardAvoidance.js
+ * @namespace KeyboardAvoidanceModule
+ */
+
+/**
+ * Minimum keyboard height in pixels below which we consider the keyboard
+ * to be hidden.  Values smaller than this are treated as OS chrome
+ * (address bar resize, etc.) and ignored.
+ *
+ * @constant {number}
+ * @memberof KeyboardAvoidanceModule
+ */
+const MIN_KEYBOARD_HEIGHT_PX = 50;
+
+/**
+ * Debounce delay in milliseconds applied to the `resize` handler.
+ * Prevents excessive style recalculations when the keyboard animates in.
+ *
+ * @constant {number}
+ * @memberof KeyboardAvoidanceModule
+ */
+const DEBOUNCE_MS = 32;
+
+/**
+ * Attaches `visualViewport` listeners to translate `targetEl` when the
+ * mobile software keyboard appears.
+ *
+ * The function is a no-op in environments that do not support the
+ * `visualViewport` API (desktop browsers, some older mobile browsers).
+ *
+ * @param {HTMLElement} targetEl - The element to translate (typically a
+ *   modal container or form wrapper).
+ * @param {object}  [options]
+ * @param {number}  [options.debounceMs=32]       - Debounce delay in ms.
+ * @param {number}  [options.minKeyboardPx=50]    - Minimum offset to treat
+ *   as a real keyboard appearance.
+ * @param {string}  [options.transitionStyle='transform 0.15s ease-out'] -
+ *   CSS transition applied to `targetEl` during keyboard animations.
+ * @returns {function(): void} Cleanup function — call when the element is
+ *   unmounted or the modal closes to remove the event listeners.
+ *
+ * @memberof KeyboardAvoidanceModule
+ *
+ * @example
+ * // Inside a modal's open() method:
+ * this._kbCleanup = initKeyboardAvoidance(this._el);
+ *
+ * // Inside the modal's close() method:
+ * if (this._kbCleanup) { this._kbCleanup(); this._kbCleanup = null; }
+ */
+export function initKeyboardAvoidance(
+  targetEl,
+  {
+    debounceMs = DEBOUNCE_MS,
+    minKeyboardPx = MIN_KEYBOARD_HEIGHT_PX,
+    transitionStyle = 'transform 0.15s ease-out',
+  } = {},
+) {
+  // Feature-detect visualViewport.  When unavailable, return a no-op cleanup.
+  if (!window.visualViewport || !targetEl) return () => {};
+
+  // Apply transition so movement feels natural.
+  const previousTransition = targetEl.style.transition;
+  targetEl.style.transition = transitionStyle;
+
+  let debounceTimer = null;
+
+  /**
+   * Computes the vertical offset caused by the software keyboard and
+   * applies a CSS translateY correction to `targetEl`.
+   *
+   * @returns {void}
+   * @memberof KeyboardAvoidanceModule
+   */
+  const update = () => {
+    const offset = window.innerHeight - window.visualViewport.height - window.visualViewport.offsetTop;
+
+    if (offset > minKeyboardPx) {
+      // Keyboard is visible — push the element up.
+      targetEl.style.transform = `translateY(-${Math.round(offset)}px)`;
+    } else {
+      // Keyboard is hidden — restore original position.
+      targetEl.style.transform = '';
+    }
+  };
+
+  /**
+   * Debounced wrapper for `update`.
+   * @returns {void}
+   */
+  const onViewportChange = () => {
+    if (debounceTimer !== null) clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(update, debounceMs);
+  };
+
+  window.visualViewport.addEventListener('resize', onViewportChange);
+  window.visualViewport.addEventListener('scroll', onViewportChange);
+
+  // Run once immediately to handle the case where the keyboard was already
+  // open when this function was called.
+  update();
+
+  /**
+   * Cleanup function.  Removes all listeners and restores the element's
+   * original styles.
+   *
+   * @returns {void}
+   */
+  return () => {
+    if (debounceTimer !== null) {
+      clearTimeout(debounceTimer);
+      debounceTimer = null;
+    }
+    window.visualViewport.removeEventListener('resize', onViewportChange);
+    window.visualViewport.removeEventListener('scroll', onViewportChange);
+    // Restore previous styles.
+    targetEl.style.transform = '';
+    targetEl.style.transition = previousTransition;
+  };
+}
+
+export default initKeyboardAvoidance;

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

@@ -4,17 +4,15 @@ import { darkTheme, renderCssAttr, subThemeManager } from './Css.js';
 import { loggerFactory } from './Logger.js';
 import { append, htmls, s } from './VanillaJs.js';
 import { getProxyPath } from './Router.js';
-
 const logger = loggerFactory(import.meta);
-
-const LoadingAnimation = {
-  bar: {
+class LoadingAnimation {
+  static bar = {
     tokens: {},
     getId: (id) => `bar-progress-${id.slice(1)}`,
     play: async function (container) {
-      const id = this.getId(container);
+      const id = LoadingAnimation.bar.getId(container);
       const idEvent = s4() + s4() + s4();
-      this.tokens[container] = `${idEvent}`;
+      LoadingAnimation.bar.tokens[container] = `${idEvent}`;
       // diagonal-bar-background-animation
       // #6d68ff #790079
       append(
@@ -39,28 +37,27 @@ const LoadingAnimation = {
         { time: 5000, value: 1 },
       ])
         setTimeout(() => {
-          if (this.tokens[container] === idEvent && s(`.${id}`)) {
+          if (LoadingAnimation.bar.tokens[container] === idEvent && s(`.${id}`)) {
             s(`.${id}`).style.left = `-${frame.value}%`;
             // const percentageRender = html`${100 - frame.value}%`;
           }
         }, frame.time);
     },
     stop: function (container) {
-      const id = this.getId(container);
-      delete this.tokens[container];
+      const id = LoadingAnimation.bar.getId(container);
+      delete LoadingAnimation.bar.tokens[container];
       if (!s(`.${id}`)) return;
       s(`.${id}`).style.left = '0%';
       s(`.${id}`).style.opacity = 1;
       setTimeout(() => (s(`.${id}`).style.opacity = 0));
       setTimeout(() => s(`.${id}`).remove(), 400);
     },
-  },
-  spinner: {
+  };
+  static spinner = {
     getId: (id) => `spinner-progress-${id.slice(1)}`,
     play: async function (container, spinner, options = { append: '', prepend: '' }) {
       if (!s(container)) return;
-      const id = this.getId(container);
-
+      const id = LoadingAnimation.spinner.getId(container);
       let render;
       switch (spinner) {
         case 'dual-ring':
@@ -71,11 +68,9 @@ const LoadingAnimation = {
           render = html`<div class="lds-dual-ring-mini"></div>`;
           break;
       }
-
       const style = {
         'text-align': 'center',
       };
-
       append(
         container,
         html`
@@ -93,30 +88,30 @@ const LoadingAnimation = {
       if (label) label.classList.add('hide');
     },
     stop: function (container) {
-      const id = this.getId(container);
+      const id = LoadingAnimation.spinner.getId(container);
       if (!s(`.${id}`)) return;
       s(`.${id}`).remove();
       const label = BtnIcon.findLabel(s(container));
       if (label) label.classList.remove('hide');
     },
-  },
-  img: {
+  };
+  static img = {
     tokens: {},
     load: function ({ key, src, classes, style }) {
-      this.tokens[key] = { src, classes, style };
+      LoadingAnimation.img.tokens[key] = { src, classes, style };
     },
     play: function (container, key) {
       append(
         container,
         html`<img
-          ${this.tokens[key].classes ? `class="${this.tokens[key].classes}"` : ''}
-          ${this.tokens[key].style ? `style="${this.tokens[key].style}"` : ''}
-          src="${getProxyPath()}${this.tokens[key].src}"
+          ${LoadingAnimation.img.tokens[key].classes ? `class="${LoadingAnimation.img.tokens[key].classes}"` : ''}
+          ${LoadingAnimation.img.tokens[key].style ? `style="${LoadingAnimation.img.tokens[key].style}"` : ''}
+          src="${getProxyPath()}${LoadingAnimation.img.tokens[key].src}"
         />`,
       );
     },
-  },
-  barLevel: {
+  };
+  static barLevel = {
     append: () => {
       if (Array.from(sa('.ssr-loading-bar-block')).length >= 5) return;
       s(`.ssr-blink-bar`).classList.remove('ssr-blink-bar');
@@ -125,17 +120,16 @@ const LoadingAnimation = {
     clear: () => {
       htmls('.ssr-loading-bar', html`<div class="ssr-loading-bar-block ssr-blink-bar"></div>`);
     },
-  },
-  removeSplashScreen: function (backgroundContainer, callBack) {
+  };
+  static removeSplashScreen(backgroundContainer, callBack) {
     if (s(`.clean-cache-container`)) s(`.clean-cache-container`).style.display = 'none';
     if (!backgroundContainer) backgroundContainer = '.ssr-background';
     if (s(backgroundContainer)) {
       s(backgroundContainer).style.display = 'none';
       if (callBack) callBack();
     }
-  },
-
-  RenderCurrentSrcLoad: function (event) {
+  }
+  static RenderCurrentSrcLoad(event) {
     if (s(`.ssr-loading-info`)) {
       let nameSrcLoad = event.data.path;
       if (nameSrcLoad) {
@@ -153,6 +147,6 @@ const LoadingAnimation = {
           );
       }
     }
-  },
-};
+  }
+}
 export { LoadingAnimation };

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

@@ -7,15 +7,14 @@ import { EventsUI } from './EventsUI.js';
 import { Input } from './Input.js';
 import { loggerFactory } from './Logger.js';
 import { NotificationManager } from './NotificationManager.js';
+import { AuthEventType, authLoginEvents } from './ClientEvents.js';
 import { Translate } from './Translate.js';
 import { Validator } from './Validator.js';
 import { htmls, s } from './VanillaJs.js';
 import { WebhookProvider } from './Webhook.js';
-
 const logger = loggerFactory(import.meta);
-
-const LogIn = {
-  Scope: {
+class LogIn {
+  static Scope = {
     user: {
       main: {
         model: {
@@ -23,13 +22,22 @@ const LogIn = {
         },
       },
     },
-  },
-  Event: {},
-  Trigger: async function (options) {
+  };
+  static Event = {};
+  static onLogin(listener, options = {}) {
+    return authLoginEvents.on(AuthEventType.login, listener, options);
+  }
+  static offLogin(key) {
+    return authLoginEvents.off(key);
+  }
+  static hasLoginListener(key) {
+    return authLoginEvents.has(key);
+  }
+  static async Trigger(options) {
     const { user } = options;
-    if (user) this.Scope.user.main.model.user = { ...this.Scope.user.main.model.user, ...user };
-
-    for (const eventKey of Object.keys(this.Event)) await this.Event[eventKey](options);
+    if (user) LogIn.Scope.user.main.model.user = { ...LogIn.Scope.user.main.model.user, ...user };
+    await authLoginEvents.emit(AuthEventType.login, options);
+    for (const eventKey of Object.keys(LogIn.Event)) await LogIn.Event[eventKey](options);
     if (!user || user.role === 'guest') return;
     await WebhookProvider.register({ user });
     if (s(`.session`))
@@ -56,15 +64,14 @@ const LogIn = {
           }
         </style>`,
       );
-    if (!this.Scope.user.main.model.user.profileImage) {
+    if (!LogIn.Scope.user.main.model.user.profileImage) {
       // Try to load profile image only if profileImageId exists
-      if (!this.Scope.user.main.model.user.profileImage && user?.profileImageId) {
+      if (!LogIn.Scope.user.main.model.user.profileImage && user?.profileImageId) {
         try {
           const resultFile = await FileService.get({ id: user.profileImageId });
           if (resultFile && resultFile.status === 'success' && resultFile.data[0]) {
             const imageData = resultFile.data[0];
             let imageSrc = null;
-
             try {
               // Handle new metadata-only format
               if (!imageData.data?.data && imageData._id) {
@@ -76,9 +83,8 @@ const LogIn = {
                 const imageFile = new File([imageBlob], imageData.name, { type: imageData.mimetype });
                 imageSrc = URL.createObjectURL(imageFile);
               }
-
               if (imageSrc) {
-                this.Scope.user.main.model.user.profileImage = {
+                LogIn.Scope.user.main.model.user.profileImage = {
                   resultFile,
                   imageData,
                   imageSrc,
@@ -97,8 +103,8 @@ const LogIn = {
         html`<div class="abs center top-box-profile-img-container">
           <img
             class="abs center top-box-profile-img"
-            ${this.Scope.user.main.model.user.profileImage
-              ? `src="${this.Scope.user.main.model.user.profileImage.imageSrc}"`
+            ${LogIn.Scope.user.main.model.user.profileImage
+              ? `src="${LogIn.Scope.user.main.model.user.profileImage.imageSrc}"`
               : `src="${getApiBaseUrl({
                   id: 'assets/avatar',
                   endpoint: 'user',
@@ -107,15 +113,14 @@ const LogIn = {
         </div>`,
       );
     }
-  },
-  Render: async function () {
+  }
+  static async instance() {
     setTimeout(async () => {
       const formData = [
         { model: 'email', id: `log-in-email`, rules: [{ type: 'isEmpty' }, { type: 'isEmail' }] },
         { model: 'password', id: `log-in-password`, rules: [{ type: 'isEmpty' }] },
       ];
       const validators = await Validator.instance(formData);
-
       EventsUI.onClick(`.btn-log-in`, async (e) => {
         e.preventDefault();
         const { errorMessage } = await validators();
@@ -125,88 +130,83 @@ const LogIn = {
           if ('model' in inputData) body[inputData.model] = s(`.${inputData.id}`).value;
         }
         const result = await UserService.post({ id: 'auth', body });
-
         if (result.status === 'error' && result.message.match('attempts')) {
           htmls(`.login-attempt-warn-value`, result.message.split(':')[1]);
           s(`.login-attempt-warn-container`).classList.remove('hide');
         } else s(`.login-attempt-warn-container`).classList.add('hide');
-
         if (result.status === 'error' && result.message.match('locked')) {
           htmls(`.login-attempt-warn-value0`, result.message.split(':')[1]);
           s(`.login-attempt-warn-container0`).classList.remove('hide');
         } else s(`.login-attempt-warn-container0`).classList.add('hide');
-
         if (result.status === 'success') await Auth.sessionIn(result);
         NotificationManager.Push({
-          html: result.status === 'success' ? Translate.Render(`${result.status}-user-log-in`) : result.message,
+          html: result.status === 'success' ? Translate.instance(`${result.status}-user-log-in`) : result.message,
           status: result.status,
         });
       });
       s(`.btn-log-in-forgot-password`).onclick = () => {
         s(`.main-btn-recover`).click();
       };
-
       s(`.btn-log-in-i-not-have-account`).onclick = () => {
         s(`.main-btn-sign-up`).click();
       };
     });
     return html`
       <div class="in">
-        ${await BtnIcon.Render({
+        ${await BtnIcon.instance({
           class: 'in section-mp form-button btn-log-in-i-not-have-account',
-          label: html`<i class="fas fa-user-plus"></i> ${Translate.Render(`i-not-have-account`)}
+          label: html`<i class="fas fa-user-plus"></i> ${Translate.instance(`i-not-have-account`)}
             <br />
-            ${Translate.Render(`sign-up`)}`,
+            ${Translate.instance(`sign-up`)}`,
           type: 'button',
         })}
       </div>
       <form class="in">
         <div class="in">
-          ${await Input.Render({
+          ${await Input.instance({
             id: `log-in-email`,
             type: 'email',
-            label: html`<i class="fa-solid fa-envelope"></i> ${Translate.Render('email')}`,
+            label: html`<i class="fa-solid fa-envelope"></i> ${Translate.instance('email')}`,
             containerClass: 'inl section-mp width-mini-box input-container',
             placeholder: true,
             autocomplete: 'email',
           })}
         </div>
         <div class="in">
-          ${await Input.Render({
+          ${await Input.instance({
             id: `log-in-password`,
             type: 'password',
             autocomplete: 'new-password',
-            label: html`<i class="fa-solid fa-lock"></i> ${Translate.Render('password')}`,
+            label: html`<i class="fa-solid fa-lock"></i> ${Translate.instance('password')}`,
             containerClass: 'inl section-mp width-mini-box input-container',
             placeholder: true,
           })}
         </div>
         <div class="in">
-          ${await BtnIcon.Render({
+          ${await BtnIcon.instance({
             class: 'in section-mp form-button btn-log-in-forgot-password',
-            label: html`<i class="fas fa-question-circle"></i> ${Translate.Render(`forgot-password`)}`,
+            label: html`<i class="fas fa-question-circle"></i> ${Translate.instance(`forgot-password`)}`,
             type: 'button',
           })}
         </div>
         <div class="in section-mp form-button login-attempt-warn-container hide">
-          <i class="fa-solid fa-triangle-exclamation"></i> ${Translate.Render('login-attempts-remaining')}
+          <i class="fa-solid fa-triangle-exclamation"></i> ${Translate.instance('login-attempts-remaining')}
           <span style="color: #ed9d0f" class="login-attempt-warn-value"></span>
         </div>
         <div class="in section-mp form-button login-attempt-warn-container0 hide">
-          <i class="fa-solid fa-triangle-exclamation"></i> ${Translate.Render('account-locked-try-again-in')}
+          <i class="fa-solid fa-triangle-exclamation"></i> ${Translate.instance('account-locked-try-again-in')}
           <span style="color: #ed9d0f" class="login-attempt-warn-value0"></span>
         </div>
 
         <div class="in">
-          ${await BtnIcon.Render({
+          ${await BtnIcon.instance({
             class: 'in section-mp form-button btn-log-in',
-            label: Translate.Render('log-in'),
+            label: Translate.instance('log-in'),
             type: 'submit',
           })}
         </div>
       </form>
     `;
-  },
-};
-
+  }
+}
 export { LogIn };

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

@@ -1,16 +1,26 @@
 import { Auth } from './Auth.js';
 import { BtnIcon } from './BtnIcon.js';
+import { AuthEventType, authLogoutEvents } from './ClientEvents.js';
 import { LogIn } from './LogIn.js';
 import { Translate } from './Translate.js';
 import { htmls, s } from './VanillaJs.js';
 import { WebhookProvider } from './Webhook.js';
 import { NotificationManager } from './NotificationManager.js';
-
-const LogOut = {
-  Event: {},
-  Trigger: async function (options) {
+class LogOut {
+  static Event = {};
+  static onLogout(listener, options = {}) {
+    return authLogoutEvents.on(AuthEventType.logout, listener, options);
+  }
+  static offLogout(key) {
+    return authLogoutEvents.off(key);
+  }
+  static hasLogoutListener(key) {
+    return authLogoutEvents.has(key);
+  }
+  static async Trigger(options) {
     await WebhookProvider.unregister();
-    for (const eventKey of Object.keys(this.Event)) await this.Event[eventKey](options);
+    await authLogoutEvents.emit(AuthEventType.logout, options);
+    for (const eventKey of Object.keys(LogOut.Event)) await LogOut.Event[eventKey](options);
     if (s(`.session`))
       htmls(
         `.session`,
@@ -35,29 +45,28 @@ const LogOut = {
           }
         </style>`,
       );
-  },
-  Render: async function () {
+  }
+  static async instance() {
     setTimeout(() => {
       s('.btn-log-out').onclick = async (e) => {
         e.preventDefault();
         await Auth.sessionOut();
         NotificationManager.Push({
-          html: Translate.Render(`success-logout`),
+          html: Translate.instance(`success-logout`),
           status: 'success',
         });
       };
     });
-    // Translate.Render('confirm-logout')
+    // Translate.instance('confirm-logout')
     return html` <form class="in">
       <div class="in">
-        ${await BtnIcon.Render({
+        ${await BtnIcon.instance({
           class: 'inl section-mp btn-custom btn-log-out',
-          label: html`<i class="fa-solid fa-power-off"></i> ${Translate.Render('log-out')}`,
+          label: html`<i class="fa-solid fa-power-off"></i> ${Translate.instance('log-out')}`,
           type: 'submit',
         })}
       </div>
     </form>`;
-  },
-};
-
+  }
+}
 export { LogOut };