underpost 3.2.5 → 3.2.8

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

@@ -7,17 +7,18 @@ import { Modal } from './Modal.js';
 import { getId } from './CommonJs.js';
 import { setPath, getProxyPath, getQueryParams, extractUsernameFromPath, RouterEvents } from './Router.js';
 
-const PublicProfile = {
-  Data: {},
-  currentUsername: null, // Track the currently displayed username for back/forward navigation
+class PublicProfile {
+  static Data = {};
+  /** @type {string|null} Track the currently displayed username for back/forward navigation */
+  static currentUsername = null;
 
-  Update: async function (options = { idModal: '', user: {} }) {
+  static async Update(options = { idModal: '', user: {} }) {
     const { idModal, user } = options;
     const username = user.username || 'Unknown User';
 
     // Check if modal exists and is registered in Modal.Data
     if (!Modal.Data[idModal]) {
-      return await this.Render(options);
+      return await this.instance(options);
     }
 
     try {
@@ -35,7 +36,7 @@ const PublicProfile = {
       this._cleanupProfileData({ idModal });
 
       // Re-render the profile content with new user
-      const newContent = await this.Render({ ...options, disableUpdate: true });
+      const newContent = await this.instance({ ...options, disableUpdate: true });
 
       // Update modal content using Modal.writeHTML with smooth transition
       Modal.writeHTML({ idModal, html: newContent });
@@ -54,9 +55,9 @@ const PublicProfile = {
 
       throw error;
     }
-  },
+  }
 
-  _getLoadingHtml: function (username) {
+  static _getLoadingHtml(username) {
     return html`
       <div class="profile-loading-container">
         <div class="profile-loading-spinner"></div>
@@ -94,9 +95,9 @@ const PublicProfile = {
         </style>
       </div>
     `;
-  },
+  }
 
-  _addTransitionEffect: function (idModal) {
+  static _addTransitionEffect(idModal) {
     // Add smooth transition effect to modal content
     const modalContent = s(`.html-${idModal}`);
     if (modalContent) {
@@ -108,9 +109,9 @@ const PublicProfile = {
         modalContent.style.opacity = '1';
       }, 50);
     }
-  },
+  }
 
-  _getErrorHtml: function (username, errorMessage) {
+  static _getErrorHtml(username, errorMessage) {
     return html`
       <div class="profile-error-container">
         <div class="profile-error-icon">
@@ -169,24 +170,27 @@ const PublicProfile = {
         </style>
       </div>
     `;
-  },
+  }
 
-  _cleanupProfileData: function ({ idModal }) {
+  static _cleanupProfileData({ idModal }) {
     delete ThemeEvents[`error-state-${idModal}`];
     delete ThemeEvents[`profile-${idModal}`];
     delete this.Data[idModal];
-  },
+  }
 
-  _ensureModalState: function (idModal) {
+  static _ensureModalState(idModal) {
     // Ensure modal is in the correct state for content updates
     if (Modal.Data[idModal]) {
       // Reset any modal-specific states that might interfere
       Modal.Data[idModal].updated = true;
       Modal.Data[idModal].lastUpdated = Date.now();
     }
-  },
+  }
 
-  Render: async function (
+  /**
+   * @param {{ idModal?: string, user: { _id?: string, username?: string } }} options
+   */
+  static async instance(
     options = {
       idModal: '',
       user: {},
@@ -436,7 +440,7 @@ const PublicProfile = {
               onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 12px ${colors.buttonShadow}';"
             >
               <i class="fa-solid fa-home"></i>
-              ${Translate.Render('go-home')}
+              ${Translate.instance('go-home')}
             </a>
             <a
               href="javascript:history.back()"
@@ -459,7 +463,7 @@ const PublicProfile = {
               onmouseout="this.style.background='transparent'; this.style.borderColor='${colors.primaryColor}40';"
             >
               <i class="fa-solid fa-arrow-left"></i>
-              ${Translate.Render('go-back')}
+              ${Translate.instance('go-back')}
             </a>
           </div>
         </div>
@@ -468,7 +472,7 @@ const PublicProfile = {
 
     if (!userId && !username) {
       return renderErrorState(
-        Translate.Render('user-not-found'),
+        Translate.instance('user-not-found'),
         'fa-user-slash',
         "The user you're looking for could not be found. Please check the username and try again.",
       );
@@ -503,13 +507,13 @@ const PublicProfile = {
       } else {
         if (result.message && result.message.toLowerCase().match('private'))
           return renderErrorState(
-            Translate.Render('profile-is-private'),
+            Translate.instance('profile-is-private'),
             'fa-lock',
             'This user has chosen to keep their profile private. Respect their privacy and check back later if they change their settings.',
           );
         else
           return renderErrorState(
-            Translate.Render('user-not-found'),
+            Translate.instance('user-not-found'),
             'fa-user-slash',
             'This user profile does not exist or has been removed. Please verify the username.',
           );
@@ -517,7 +521,7 @@ const PublicProfile = {
     } catch (error) {
       console.error('Error fetching public profile:', error);
       return renderErrorState(
-        Translate.Render('error-loading-profile'),
+        Translate.instance('error-loading-profile'),
         'fa-circle-exclamation',
         'We encountered an issue loading this profile. Please try again in a moment or contact support if the problem persists.',
       );
@@ -526,7 +530,7 @@ const PublicProfile = {
     // If user doesn't have public profile enabled
     if (!userData.publicProfile) {
       return renderErrorState(
-        Translate.Render('profile-is-private'),
+        Translate.instance('profile-is-private'),
         'fa-lock',
         'This user has chosen to keep their profile private. Respect their privacy and check back later if they change their settings.',
       );
@@ -765,7 +769,7 @@ const PublicProfile = {
                       transition: color 0.3s ease-in-out;
                     "
                   >
-                    ${Translate.Render('no-description')}
+                    ${Translate.instance('no-description')}
                   </p>`}
             </div>
 
@@ -792,7 +796,7 @@ const PublicProfile = {
                 "
               >
                 <i class="fa-solid fa-calendar" style="margin-right: 6px;"></i>
-                ${Translate.Render('member-since')}: ${new Date(userData.createdAt).toLocaleDateString()}
+                ${Translate.instance('member-since')}: ${new Date(userData.createdAt).toLocaleDateString()}
               </span>
             </div>
 
@@ -817,7 +821,7 @@ const PublicProfile = {
               <a
                 class="${profileId}-button"
                 href="javascript:void(0)"
-                title="${Translate.Render('view-profile')}"
+                title="${Translate.instance('view-profile')}"
                 style="
                   display: inline-flex;
                   align-items: center;
@@ -850,9 +854,12 @@ const PublicProfile = {
         </div>
       </div>
     `;
-  },
+  }
 
-  Router: async function (options = { idModal: '' }) {
+  /**
+   * @param {{ idModal?: string }} options
+   */
+  static async Router(options = { idModal: '' }) {
     const idModal = options.idModal || 'modal-public-profile';
     // Register RouterEvents listener for back/forward navigation between profiles
     // This ensures the profile updates when the user navigates through browser history
@@ -882,7 +889,7 @@ const PublicProfile = {
         }
       }
     };
-  },
-};
+  }
+}
 
 export { PublicProfile };

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

@@ -8,13 +8,25 @@ import { Translate } from './Translate.js';
 import { Validator } from './Validator.js';
 import { s } from './VanillaJs.js';
 import { getProxyPath, getQueryParams } from './Router.js';
-
-const Recover = {
-  Event: {},
-  Trigger: async function (options) {
-    for (const eventKey of Object.keys(this.Event)) await this.Event[eventKey](options);
-  },
-  Render: async function (options = { idModal: '', user: {}, bottomRender: async () => '' }) {
+import { RecoverEventType, recoverEvents } from './ClientEvents.js';
+class Recover {
+  static Event = {};
+  static onTriggered(listener, options = {}) {
+    if (options.key) Recover.Event[options.key] = listener;
+    return recoverEvents.on(RecoverEventType.triggered, listener, options);
+  }
+  static offTriggered(key) {
+    delete Recover.Event[key];
+    return recoverEvents.off(key);
+  }
+  static hasTriggeredListener(key) {
+    return recoverEvents.has(key);
+  }
+  static async Trigger(options) {
+    await recoverEvents.emit(RecoverEventType.triggered, options);
+    for (const eventKey of Object.keys(Recover.Event)) await Recover.Event[eventKey](options);
+  }
+  static async instance(options = { idModal: '', user: {}, bottomRender: async () => '' }) {
     const { idModal, user } = options;
     let mode = 'recover-verify-email';
     const recoverToken = getQueryParams().payload;
@@ -25,7 +37,7 @@ const Recover = {
         rules: [{ type: 'isEmpty' }, { type: 'isLength', options: { min: 2, max: 20 } }],
         show: () => false,
         disable: function () {
-          return !this.show();
+          return !Recover.show();
         },
       },
       'recover-email': {
@@ -34,7 +46,7 @@ const Recover = {
         rules: [{ type: 'isEmpty' }, { type: 'isEmail' }],
         show: () => mode === 'recover-verify-email',
         disable: function () {
-          return !this.show();
+          return !Recover.show();
         },
       },
       'recover-password': {
@@ -43,7 +55,7 @@ const Recover = {
         rules: [{ type: 'isStrongPassword' }],
         show: () => mode === 'change-password',
         disable: function () {
-          return !this.show();
+          return !Recover.show();
         },
       },
       'recover-repeat-password': {
@@ -51,23 +63,19 @@ const Recover = {
         rules: [{ type: 'isEmpty' }, { type: 'passwordMismatch', options: `recover-password` }],
         show: () => mode === 'change-password',
         disable: function () {
-          return !this.show();
+          return !Recover.show();
         },
       },
     };
-
     if (recoverToken) {
       mode = 'change-password';
     }
-
     setTimeout(async () => {
       if (user && user.email) {
         s(`.recover-email`).value = user.role === 'guest' ? '' : user.email;
         if (user.emailConfirmed) s(`.recover-email`).setAttribute('disabled', '');
       }
-
       const validators = await Validator.instance(formData);
-
       EventsUI.onClick(`.btn-recover`, async (e) => {
         e.preventDefault();
         s(`.recover-resend-btn-container`).classList.add('hide');
@@ -86,7 +94,9 @@ const Recover = {
             });
             NotificationManager.Push({
               html:
-                result.status === 'error' ? result.message : Translate.Render(`${result.status}-recover-verify-email`),
+                result.status === 'error'
+                  ? result.message
+                  : Translate.instance(`${result.status}-recover-verify-email`),
               status: result.status,
             });
             if (result.status === 'success') {
@@ -99,7 +109,7 @@ const Recover = {
             const result = await UserService.put({ id: `recover/${recoverToken}`, body });
             NotificationManager.Push({
               html:
-                typeof result.data === 'string' ? result.data : Translate.Render(`${result.status}-recover-password`),
+                typeof result.data === 'string' ? result.data : Translate.instance(`${result.status}-recover-password`),
               status: result.status,
             });
             if (result.status === 'success') {
@@ -112,7 +122,7 @@ const Recover = {
                 s(`.input-container-recover-repeat-password`).classList.add('hide');
                 s(`.btn-recover-log-in`).classList.remove('hide');
               }
-              this.Trigger({ user: result.data });
+              Recover.Trigger({ user: result.data });
             }
             break;
           }
@@ -128,80 +138,74 @@ const Recover = {
       };
     });
     return html`
-      ${await BtnIcon.Render({
+      ${await BtnIcon.instance({
         class: 'in section-mp form-button btn-recover-log-in hide',
-        label: Translate.Render('log-in'),
+        label: Translate.instance('log-in'),
         type: 'button',
       })}
       <form class="in">
         <div class="in">
-          ${await Input.Render({
+          ${await Input.instance({
             id: `recover-username`,
             type: 'text',
-            label: html`<i class="fa-solid fa-pen-to-square"></i> ${Translate.Render('username')}`,
-            containerClass: `inl section-mp width-mini-box input-container ${
-              formData[`recover-username`].show() ? '' : 'hide'
-            }`,
+            label: html`<i class="fa-solid fa-pen-to-square"></i> ${Translate.instance('username')}`,
+            containerClass: `inl section-mp width-mini-box input-container ${formData[`recover-username`].show() ? '' : 'hide'}`,
             placeholder: true,
           })}
         </div>
         <div class="in">
-          ${await Input.Render({
+          ${await Input.instance({
             id: `recover-email`,
             type: 'email',
-            label: html`<i class="fa-solid fa-envelope"></i> ${Translate.Render('email')}`,
-            containerClass: `inl section-mp width-mini-box input-container ${
-              formData[`recover-email`].show() ? '' : 'hide'
-            }`,
+            label: html`<i class="fa-solid fa-envelope"></i> ${Translate.instance('email')}`,
+            containerClass: `inl section-mp width-mini-box input-container ${formData[`recover-email`].show() ? '' : 'hide'}`,
             placeholder: true,
             autocomplete: 'email',
           })}
         </div>
         <div class="in">
-          ${await Input.Render({
+          ${await Input.instance({
             id: `recover-password`,
             type: 'password',
             autocomplete: 'new-password',
-            label: html`<i class="fa-solid fa-lock"></i> ${Translate.Render('password')}`,
-            containerClass: `inl section-mp width-mini-box input-container ${
-              formData[`recover-password`].show() ? '' : 'hide'
-            }`,
+            label: html`<i class="fa-solid fa-lock"></i> ${Translate.instance('password')}`,
+            containerClass: `inl section-mp width-mini-box input-container ${formData[`recover-password`].show() ? '' : 'hide'}`,
             placeholder: true,
           })}
         </div>
         <div class="in">
-          ${await Input.Render({
+          ${await Input.instance({
             id: `recover-repeat-password`,
             type: 'password',
             autocomplete: 'new-password',
-            label: html`<i class="fa-solid fa-lock"></i> ${Translate.Render('repeat')} ${Translate.Render('password')}`,
-            containerClass: `inl section-mp width-mini-box input-container ${
-              formData[`recover-repeat-password`].show() ? '' : 'hide'
-            }`,
+            label: html`<i class="fa-solid fa-lock"></i> ${Translate.instance('repeat')}
+              ${Translate.instance('password')}`,
+            containerClass: `inl section-mp width-mini-box input-container ${formData[`recover-repeat-password`].show() ? '' : 'hide'}`,
             placeholder: true,
           })}
         </div>
         ${options?.bottomRender ? await options.bottomRender() : ``}
         <div class="in recover-send-btn-container">
-          ${await BtnIcon.Render({
+          ${await BtnIcon.instance({
             class: 'in section-mp form-button btn-recover',
-            label: Translate.Render(mode === 'recover-verify-email' ? 'send-recover-verify-email' : 'change-password'),
+            label: Translate.instance(
+              mode === 'recover-verify-email' ? 'send-recover-verify-email' : 'change-password',
+            ),
             type: 'button',
           })}
         </div>
         <div class="in recover-resend-btn-container hide">
           <div class="in section-mp form-button" style="color: #ed9d0f">
-            <i class="fa-solid fa-triangle-exclamation"></i> ${Translate.Render('15-min-valid-recover-email')}
+            <i class="fa-solid fa-triangle-exclamation"></i> ${Translate.instance('15-min-valid-recover-email')}
           </div>
-          ${await BtnIcon.Render({
+          ${await BtnIcon.instance({
             class: 'in section-mp form-button btn-recover-resend',
-            label: html`${Translate.Render('resend')} ${Translate.Render('recover-verify-email')}`,
+            label: html`${Translate.instance('resend')} ${Translate.instance('recover-verify-email')}`,
             type: 'submit',
           })}
         </div>
       </form>
     `;
-  },
-};
-
+  }
+}
 export { Recover };

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

@@ -1,35 +1,41 @@
 import { newInstance } from './CommonJs.js';
+import {
+  ResponsiveEventType,
+  responsiveChangeEvents,
+  responsiveOrientationEvents,
+  responsiveOrientationSettledEvents,
+  responsiveSettledEvents,
+} from './ClientEvents.js';
 import { loggerFactory } from './Logger.js';
 import { getResponsiveData } from './VanillaJs.js';
-
 const logger = loggerFactory(import.meta);
-
-const Responsive = {
-  Data: {},
-  Event: {},
-  DelayEvent: {},
-  Observer: ResizeObserver,
-  getResponsiveData: function () {
-    return newInstance(this.Data);
-  },
-  getResponsiveDataAmplitude: function (options) {
+class Responsive {
+  static Data = {};
+  static Event = {};
+  static DelayEvent = {};
+  static Observer = ResizeObserver;
+  static getResponsiveData() {
+    return newInstance(Responsive.Data);
+  }
+  static getResponsiveDataAmplitude(options) {
     const { dimAmplitude } = options;
-    const ResponsiveDataAmplitude = newInstance(this.Data);
+    const ResponsiveDataAmplitude = newInstance(Responsive.Data);
     ResponsiveDataAmplitude.minValue = ResponsiveDataAmplitude.minValue * dimAmplitude;
     ResponsiveDataAmplitude.maxValue = ResponsiveDataAmplitude.maxValue * dimAmplitude;
     ResponsiveDataAmplitude.width = ResponsiveDataAmplitude.width * dimAmplitude;
     ResponsiveDataAmplitude.height = ResponsiveDataAmplitude.height * dimAmplitude;
     return ResponsiveDataAmplitude;
-  },
-  resizeCallback: function (force) {
+  }
+  static resizeCallback(force) {
     const Data = getResponsiveData();
     if (force === true || Data.minValue !== Responsive.Data.minValue || Data.maxValue !== Responsive.Data.maxValue) {
       Responsive.Data = Data;
+      Responsive.emitChanged(Data);
       Responsive.triggerEvents();
     }
-  },
-  resize: 0,
-  Init: async function () {
+  }
+  static resize = 0;
+  static async instance() {
     Responsive.resizeCallback();
     window.onresize = (e, force) => {
       Responsive.resize++;
@@ -39,6 +45,7 @@ const Responsive = {
         if (resize === Responsive.resize) {
           Responsive.resizeCallback(force);
           Responsive.resize = 0;
+          Responsive.emitSettled(Responsive.Data);
           for (const event of Object.keys(Responsive.DelayEvent)) Responsive.DelayEvent[event]();
         }
       }, 750);
@@ -46,7 +53,6 @@ const Responsive = {
     // alternative option
     // this.Observer = new ResizeObserver(this.resizeCallback);
     // this.Observer.observe(document.documentElement);
-
     // Check if screen.orientation is available before adding event listener
     if (
       typeof screen !== 'undefined' &&
@@ -62,7 +68,6 @@ const Responsive = {
       });
     }
     Responsive.matchMediaOrientationInstance = matchMedia('screen and (orientation:portrait)');
-
     Responsive.matchMediaOrientationInstance.onchange = (e) => {
       console.log('orientation change', Responsive.matchMediaOrientationInstance.matches ? 'portrait' : 'landscape');
       // though beware square will be marked as landscape here,
@@ -71,20 +76,71 @@ const Responsive = {
       setTimeout(() => window.onresize({}, true));
       Responsive.triggerEventsOrientation();
     };
-  },
-  triggerEventsOrientation: function () {
-    for (const event of Object.keys(this.orientationEvent)) this.orientationEvent[event]();
+  }
+  static onChanged(listener, options = {}) {
+    if (options.key) Responsive.Event[options.key] = listener;
+    return responsiveChangeEvents.on(ResponsiveEventType.changed, listener, options);
+  }
+  static offChanged(key) {
+    delete Responsive.Event[key];
+    return responsiveChangeEvents.off(key);
+  }
+  static hasChangedListener(key) {
+    return responsiveChangeEvents.has(key) || Boolean(Responsive.Event[key]);
+  }
+  static onSettled(listener, options = {}) {
+    if (options.key) Responsive.DelayEvent[options.key] = listener;
+    return responsiveSettledEvents.on(ResponsiveEventType.settled, listener, options);
+  }
+  static offSettled(key) {
+    delete Responsive.DelayEvent[key];
+    return responsiveSettledEvents.off(key);
+  }
+  static onOrientationChanged(listener, options = {}) {
+    if (options.key) Responsive.orientationEvent[options.key] = listener;
+    return responsiveOrientationEvents.on(ResponsiveEventType.orientationChanged, listener, options);
+  }
+  static offOrientationChanged(key) {
+    delete Responsive.orientationEvent[key];
+    return responsiveOrientationEvents.off(key);
+  }
+  static onOrientationSettled(listener, options = {}) {
+    if (options.key) Responsive.orientationDelayEvent[options.key] = listener;
+    return responsiveOrientationSettledEvents.on(ResponsiveEventType.orientationSettled, listener, options);
+  }
+  static offOrientationSettled(key) {
+    delete Responsive.orientationDelayEvent[key];
+    return responsiveOrientationSettledEvents.off(key);
+  }
+  static async emitChanged(detail = Responsive.Data) {
+    await responsiveChangeEvents.emit(ResponsiveEventType.changed, detail);
+  }
+  static async emitSettled(detail = Responsive.Data) {
+    await responsiveSettledEvents.emit(ResponsiveEventType.settled, detail);
+  }
+  static async emitOrientationChanged(detail = Responsive.Data) {
+    await responsiveOrientationEvents.emit(ResponsiveEventType.orientationChanged, detail);
+  }
+  static async emitOrientationSettled(detail = Responsive.Data) {
+    await responsiveOrientationSettledEvents.emit(ResponsiveEventType.orientationSettled, detail);
+  }
+  static triggerChanged(keyEvent) {
+    return Responsive.triggerEvents(keyEvent);
+  }
+  static triggerEventsOrientation() {
+    Responsive.emitOrientationChanged(Responsive.Data);
+    for (const event of Object.keys(Responsive.orientationEvent)) Responsive.orientationEvent[event]();
     setTimeout(() => {
       window.onresize();
-      for (const event of Object.keys(this.orientationDelayEvent)) this.orientationDelayEvent[event]();
+      Responsive.emitOrientationSettled(Responsive.Data);
+      for (const event of Object.keys(Responsive.orientationDelayEvent)) Responsive.orientationDelayEvent[event]();
     }, 1500);
-  },
-  triggerEvents: function (keyEvent) {
-    if (keyEvent) return this.Event[keyEvent]();
-    return Object.keys(this.Event).map((key) => this.Event[key]());
-  },
-  orientationEvent: {},
-  orientationDelayEvent: {},
-};
-
+  }
+  static triggerEvents(keyEvent) {
+    if (keyEvent) return Responsive.Event[keyEvent]();
+    return Object.keys(Responsive.Event).map((key) => Responsive.Event[key]());
+  }
+  static orientationEvent = {};
+  static orientationDelayEvent = {};
+}
 export { Responsive };

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

@@ -1,12 +1,11 @@
 import { getId, newInstance } from './CommonJs.js';
 import { Modal } from './Modal.js';
 import { s } from './VanillaJs.js';
-
-const RichText = {
-  Tokens: {},
-  Render: async function (options = { id: '', parentIdModal: '' }) {
-    const id = options?.id ? options.id : getId(this.Tokens, 'rich-text-');
-    this.Tokens[id] = {};
+class RichText {
+  static Tokens = {};
+  static async instance(options = { id: '', parentIdModal: '' }) {
+    const id = options?.id ? options.id : getId(RichText.Tokens, 'rich-text-');
+    RichText.Tokens[id] = {};
     setTimeout(() => {
       const easyMDE = new EasyMDE({
         element: s(`.${id}`),
@@ -23,20 +22,12 @@ const RichText = {
           }
         },
       });
-      this.Tokens[id].easyMDE = easyMDE;
+      RichText.Tokens[id].easyMDE = easyMDE;
       // easyMDE.value();
       // easyMDE.value(val);
     });
-    return html` <style>
-        .md-container {
-          background: white;
-        }
-        .md-container button {
-          color: black;
-        }
-      </style>
+    return html` <style></style>
       <div class="in md-container"><textarea class="${id}"></textarea></div>`;
-  },
-};
-
+  }
+}
 export { RichText };