underpost 3.1.3 → 3.2.2

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

@@ -1,4 +1,6 @@
+import { Badge } from './Badge.js';
 import { getId, newInstance } from './CommonJs.js';
+import { darkTheme, ThemeEvents } from './Css.js';
 import { Input } from './Input.js';
 import { ToggleSwitch } from './ToggleSwitch.js';
 import { Translate } from './Translate.js';
@@ -15,17 +17,83 @@ const DropDown = {
       originData: options.data ? newInstance(options.data) : [],
     };
 
+    const _renderSelectedBadges = async () => {
+      if (options.type !== 'checkbox') return;
+      const container = s(`.dropdown-current-${id}`);
+      if (!container) return;
+      const selected = Object.entries(DropDown.Tokens[id].oncheckvalues);
+      if (selected.length === 0) {
+        htmls(`.dropdown-current-${id}`, '');
+        return;
+      }
+      let badgesHtml = '';
+      for (const [key, val] of selected) {
+        badgesHtml += html`<span class="inl" style="display:inline-flex;align-items:center;margin:2px;">
+          ${await Badge.Render({
+            text: html`<i class="fa-solid fa-tag" style="margin-right:3px;font-size:9px;"></i>${val.display}`,
+            style: {
+              background: darkTheme ? '#335' : '#cde',
+              color: darkTheme ? '#adf' : '#246',
+              'border-radius': '4px',
+              'font-size': '11px',
+              height: 'auto',
+              'min-width': 'auto',
+            },
+          })}
+          <span
+            class="dd-badge-del-${id}"
+            data-key="${key}"
+            style="cursor:pointer;padding:0 4px;font-size:14px;color:${darkTheme ? '#f88' : '#a00'};line-height:1;"
+            >&times;</span
+          >
+        </span>`;
+      }
+      htmls(`.dropdown-current-${id}`, badgesHtml);
+      container.querySelectorAll(`.dd-badge-del-${id}`).forEach((btn) => {
+        btn.onclick = async (e) => {
+          e.stopPropagation();
+          const key = btn.dataset.key;
+          delete DropDown.Tokens[id].oncheckvalues[key];
+          const dataItem = options.data.find((d) => d.value.trim().replaceAll(' ', '-') === key);
+          if (dataItem) dataItem.checked = false;
+          if (ToggleSwitch.Tokens[`checkbox-role-${key}`]) {
+            const checkbox = s(`.checkbox-role-${key}-checkbox`);
+            if (checkbox && checkbox.checked) ToggleSwitch.Tokens[`checkbox-role-${key}`].click();
+          }
+          DropDown.Tokens[id].value = Object.values(DropDown.Tokens[id].oncheckvalues).map((v) => v.data);
+          s(`.${id}`).value = DropDown.Tokens[id].value;
+          await _renderSelectedBadges();
+        };
+      });
+    };
+    DropDown.Tokens[id]._renderSelectedBadges = _renderSelectedBadges;
+
     options.data.push({
       value: 'reset',
       display: html`<i class="fa-solid fa-broom"></i> ${Translate.Render('clear')}`,
       onClick: () => {
         console.log('DropDown onClick', this.value);
         if (options && options.resetOnClick) options.resetOnClick();
-        if (options && options.type === 'checkbox')
-          for (const opt of DropDown.Tokens[id].value) {
-            s(`.dropdown-option-${id}-${opt}`).click();
+        if (options && options.type === 'checkbox') {
+          DropDown.Tokens[id].oncheckvalues = {};
+          DropDown.Tokens[id].value = [];
+          s(`.${id}`).value = [];
+          htmls(`.dropdown-current-${id}`, '');
+          if (options.serviceProvider) {
+            htmls(`.${id}-render-container`, '');
+          } else {
+            for (const optionData of options.data) {
+              if (optionData.value !== 'reset' && optionData.value !== 'close' && optionData.checked) {
+                optionData.checked = false;
+                const vd = optionData.value.trim().replaceAll(' ', '-');
+                if (ToggleSwitch.Tokens[`checkbox-role-${vd}`]) {
+                  const checkbox = s(`.checkbox-role-${vd}-checkbox`);
+                  if (checkbox && checkbox.checked) ToggleSwitch.Tokens[`checkbox-role-${vd}`].click();
+                }
+              }
+            }
           }
-        else this.Tokens[id].value = undefined;
+        } else this.Tokens[id].value = undefined;
       },
     });
 
@@ -52,7 +120,7 @@ const DropDown = {
         const i = index;
         const valueDisplay = optionData.value.trim().replaceAll(' ', '-');
         setTimeout(() => {
-          const onclick = (e) => {
+          const onclick = async (e) => {
             if (options && options.lastSelectClass && s(`.dropdown-option-${this.Tokens[id].lastSelectValue}`)) {
               s(`.dropdown-option-${this.Tokens[id].lastSelectValue}`).classList.remove(options.lastSelectClass);
             }
@@ -72,22 +140,18 @@ const DropDown = {
             if (optionData.value !== 'close') {
               if (optionData.value !== 'reset') {
                 if (options.type === 'checkbox') {
-                  // const _instanValue = data
-                  //   .filter((d) => d.checked)
-                  //   .map((v, i, a) => `${v.display}${i < a.length - 1 ? ',' : ''}`)
-                  //   .join('');
-                  const value = Object.keys(DropDown.Tokens[id].oncheckvalues);
-                  htmls(
-                    `.dropdown-current-${id}`,
-                    value.map((v) => DropDown.Tokens[id].originData.find((_v) => _v.value === v).display),
-                  );
+                  _renderSelectedBadges();
                 } else {
                   htmls(`.dropdown-current-${id}`, optionData.display);
                 }
               } else htmls(`.dropdown-current-${id}`, '');
 
               this.Tokens[id].value =
-                options.type === 'checkbox' ? data.filter((d) => d.checked).map((d) => d.data) : optionData.data;
+                options.type === 'checkbox'
+                  ? options.serviceProvider
+                    ? Object.values(DropDown.Tokens[id].oncheckvalues).map((v) => v.data)
+                    : data.filter((d) => d.checked).map((d) => d.data)
+                  : optionData.data;
 
               console.warn('current value dropdown id:' + id, this.Tokens[id].value);
 
@@ -126,7 +190,11 @@ const DropDown = {
                       },
                       checked: () => {
                         optionData.checked = true;
-                        DropDown.Tokens[id].oncheckvalues[valueDisplay] = {};
+                        DropDown.Tokens[id].oncheckvalues[valueDisplay] = {
+                          data: optionData.data,
+                          display: optionData.display,
+                          value: optionData.value,
+                        };
                       },
                     },
                   })}
@@ -153,6 +221,10 @@ const DropDown = {
       s(`.dropdown-current-${id}`).onclick = switchOptionsPanel;
       if (options && options.open) switchOptionsPanel();
 
+      if (options.type === 'checkbox') {
+        ThemeEvents[`dropdown-badge-${id}`] = () => _renderSelectedBadges();
+      }
+
       const dropDownSearchHandle = async () => {
         const _data = [];
         if (!s(`.search-box-${id}`)) return;
@@ -160,6 +232,12 @@ const DropDown = {
         let _value = s(`.search-box-${id}`).value.toLowerCase();
 
         for (const objData of options.data) {
+          if (
+            options.excludeSelected &&
+            options.type === 'checkbox' &&
+            DropDown.Tokens[id].oncheckvalues[objData.value.trim().replaceAll(' ', '-')]
+          )
+            continue;
           const objValue = objData.value.toLowerCase();
           if (
             objValue.match(_value) ||
@@ -186,7 +264,49 @@ const DropDown = {
         }
       };
 
-      s(`.search-box-${id}`).oninput = dropDownSearchHandle;
+      if (options.serviceProvider) {
+        let serviceSearchTimeout = null;
+        s(`.search-box-${id}`).oninput = () => {
+          clearTimeout(serviceSearchTimeout);
+          const q = s(`.search-box-${id}`).value.trim();
+          if (!q) {
+            htmls(`.${id}-render-container`, '');
+            return;
+          }
+          serviceSearchTimeout = setTimeout(async () => {
+            try {
+              let results = await options.serviceProvider(q);
+              if (options.type === 'checkbox') {
+                if (options.excludeSelected) {
+                  const selectedKeys = Object.keys(DropDown.Tokens[id].oncheckvalues);
+                  results = results.filter((item) => !selectedKeys.includes(item.value.trim().replaceAll(' ', '-')));
+                }
+                results = results.map((item) => {
+                  const vd = item.value.trim().replaceAll(' ', '-');
+                  return { ...item, checked: !!DropDown.Tokens[id].oncheckvalues[vd] };
+                });
+              }
+              const controlItems = options.data.filter((d) => d.value === 'reset' || d.value === 'close');
+              const allData = [...results, ...controlItems];
+              if (allData.length > controlItems.length) {
+                const { render } = await _render(allData);
+                htmls(`.${id}-render-container`, render);
+              } else {
+                htmls(
+                  `.${id}-render-container`,
+                  html` <div class="inl" style="padding: 10px; color: red">
+                    <i class="fas fa-exclamation-circle"></i> ${Translate.Render('no-result-found')}
+                  </div>`,
+                );
+              }
+            } catch (e) {
+              console.error('DropDown serviceProvider error:', e);
+            }
+          }, 200);
+        };
+      } else {
+        s(`.search-box-${id}`).oninput = dropDownSearchHandle;
+      }
 
       // Not use onblur generate bug on input toggle
       // s(`.search-box-${id}`).onblur = dropDownSearchHandle;

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

@@ -3,8 +3,8 @@ import { cap, getId } from './CommonJs.js';
 const Keyboard = {
   ActiveKey: {},
   Event: {},
-  Init: async function (options = { callBackTime: 50 }) {
-    const { callBackTime } = options;
+  Init: async function () {
+    const callBackTime = 45;
     window.onkeydown = (e = new KeyboardEvent()) => {
       this.ActiveKey[e.key] = true;
       // e.composedPath()

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

@@ -10,7 +10,7 @@ import { NotificationManager } from './NotificationManager.js';
 import { Translate } from './Translate.js';
 import { Validator } from './Validator.js';
 import { htmls, s } from './VanillaJs.js';
-import { Webhook } from './Webhook.js';
+import { WebhookProvider } from './Webhook.js';
 
 const logger = loggerFactory(import.meta);
 
@@ -31,7 +31,7 @@ const LogIn = {
 
     for (const eventKey of Object.keys(this.Event)) await this.Event[eventKey](options);
     if (!user || user.role === 'guest') return;
-    await Webhook.register({ user });
+    await WebhookProvider.register({ user });
     if (s(`.session`))
       htmls(
         `.session`,

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

@@ -3,13 +3,13 @@ import { BtnIcon } from './BtnIcon.js';
 import { LogIn } from './LogIn.js';
 import { Translate } from './Translate.js';
 import { htmls, s } from './VanillaJs.js';
-import { Webhook } from './Webhook.js';
+import { WebhookProvider } from './Webhook.js';
 import { NotificationManager } from './NotificationManager.js';
 
 const LogOut = {
   Event: {},
   Trigger: async function (options) {
-    await Webhook.unregister();
+    await WebhookProvider.unregister();
     for (const eventKey of Object.keys(this.Event)) await this.Event[eventKey](options);
     if (s(`.session`))
       htmls(

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

@@ -1357,7 +1357,6 @@ const Modal = {
                   class: 'hide',
                   style: {
                     // overflow: 'hidden',
-                    background: 'none',
                     resize: 'none',
                     'min-width': `${minWidth}px`,
                     'z-index': 5,

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

@@ -453,7 +453,6 @@ const Panel = {
 
                         tagRender += await Badge.Render({
                           text: tag,
-                          style: { color: tagColor },
                           classList: 'inl panel-tag-clickable',
                           style: {
                             margin: '3px',

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

@@ -85,7 +85,7 @@ const PanelForm = {
     options = {
       idPanel: '',
       defaultUrlImage: '',
-      Elements: {},
+      appStore: {},
       parentIdModal: undefined,
       route: 'home',
       htmlFormHeader: async () => '',
@@ -97,7 +97,7 @@ const PanelForm = {
       showCreatorProfile: false,
     },
   ) {
-    const { idPanel, defaultUrlImage, Elements } = options;
+    const { idPanel, defaultUrlImage, appStore } = options;
 
     // Authenticated users don't need 'public' tag - they see all their own posts
     // Only include 'public' for unauthenticated users (handled by backend)
@@ -458,10 +458,10 @@ const PanelForm = {
             baseNewDoc.mdFileId = hasMdContent
               ? `<div class="markdown-content">${marked.parse(data.mdFileId)}</div>`
               : null;
-            baseNewDoc.userId = Elements.Data.user?.main?.model?.user?._id;
+            baseNewDoc.userId = appStore.Data.user?.main?.model?.user?._id;
 
             // Ensure profileImageId is properly formatted as object with _id property
-            const profileImageIdValue = Elements.Data.user?.main?.model?.user?.profileImageId;
+            const profileImageIdValue = appStore.Data.user?.main?.model?.user?.profileImageId;
             const formattedProfileImageId = profileImageIdValue
               ? typeof profileImageIdValue === 'string'
                 ? { _id: profileImageIdValue }
@@ -469,9 +469,9 @@ const PanelForm = {
               : null;
 
             baseNewDoc.userInfo = {
-              username: Elements.Data.user?.main?.model?.user?.username,
-              email: Elements.Data.user?.main?.model?.user?.email,
-              _id: Elements.Data.user?.main?.model?.user?._id,
+              username: appStore.Data.user?.main?.model?.user?.username,
+              email: appStore.Data.user?.main?.model?.user?.email,
+              _id: appStore.Data.user?.main?.model?.user?._id,
               profileImageId: formattedProfileImageId,
             };
             baseNewDoc.tools = true;
@@ -737,8 +737,8 @@ const PanelForm = {
                 tools:
                   documentObject.userId &&
                   typeof documentObject.userId === 'object' &&
-                  Elements.Data.user?.main?.model?.user?._id &&
-                  documentObject.userId._id === Elements.Data.user.main.model.user._id,
+                  appStore.Data.user?.main?.model?.user?._id &&
+                  documentObject.userId._id === appStore.Data.user.main.model.user._id,
                 _id: documentObject._id,
                 totalCopyShareLinkCount: documentObject.totalCopyShareLinkCount || 0,
                 isPublic: documentObject.isPublic || false,
@@ -772,8 +772,8 @@ const PanelForm = {
                 tools:
                   documentObject.userId &&
                   typeof documentObject.userId === 'object' &&
-                  Elements.Data.user?.main?.model?.user?._id &&
-                  documentObject.userId._id === Elements.Data.user.main.model.user._id,
+                  appStore.Data.user?.main?.model?.user?._id &&
+                  documentObject.userId._id === appStore.Data.user.main.model.user._id,
                 _id: documentObject._id,
                 totalCopyShareLinkCount: documentObject.totalCopyShareLinkCount || 0,
                 isPublic: documentObject.isPublic || false,
@@ -867,10 +867,10 @@ const PanelForm = {
         try {
           const cid = getQueryParams().cid ? getQueryParams().cid : '';
           const forceUpdate =
-            Elements.Data.user.main.model &&
-            Elements.Data.user.main.model.user &&
-            Elements.Data.user.main.model.user._id &&
-            lastUserId !== Elements.Data.user.main.model.user._id;
+            appStore.Data.user.main.model &&
+            appStore.Data.user.main.model.user &&
+            appStore.Data.user.main.model.user._id &&
+            lastUserId !== appStore.Data.user.main.model.user._id;
 
           logger.warn(
             {
@@ -878,8 +878,8 @@ const PanelForm = {
               cid,
               forceUpdate,
             },
-            Elements.Data.user?.main?.model?.user
-              ? JSON.stringify(Elements.Data.user.main.model.user, null, 4)
+            appStore.Data.user?.main?.model?.user
+              ? JSON.stringify(appStore.Data.user.main.model.user, null, 4)
               : 'No user data',
           );
 
@@ -889,8 +889,8 @@ const PanelForm = {
 
           if (loadingGetData || (normalizedLastCid === normalizedCid && !forceUpdate)) return;
           loadingGetData = true;
-          lastUserId = Elements.Data.user?.main?.model?.user?._id
-            ? newInstance(Elements.Data.user.main.model.user._id)
+          lastUserId = appStore.Data.user?.main?.model?.user?._id
+            ? newInstance(appStore.Data.user.main.model.user._id)
             : null;
           lastCid = cid;
 

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

@@ -1,25 +1,81 @@
+/**
+ * Client-side WebSocket provider using Socket.IO.
+ * Manages a singleton socket connection, channel registration, and event dispatching.
+ *
+ * @module client/core/SocketIo
+ * @namespace SocketIoProvider
+ */
 import { io } from 'socket.io/client-dist/socket.io.esm.min.js';
 import { loggerFactory } from './Logger.js';
 import { getWsBasePath, getWsBaseUrl } from '../../services/core/core.service.js';
 
 const logger = loggerFactory(import.meta);
 
-const SocketIo = {
-  Event: {
+/**
+ * @class SocketIoProvider
+ * @classdesc Provides static methods for managing a singleton Socket.IO client connection,
+ * channel event dispatching, and message emission.
+ * @memberof SocketIoProvider
+ */
+class SocketIoProvider {
+  /**
+   * Event callback registry, keyed by channel name → unique callback ID → handler function.
+   * Built-in channels: `connect`, `connect_error`, `disconnect`.
+   *
+   * @static
+   * @type {Object.<string, Object.<string, function>>}
+   */
+  static Event = {
     connect: {},
     connect_error: {},
     disconnect: {},
-  },
-  /** @type {import('socket.io').Socket} */
-  socket: null,
-  Emit: function (channel = '', payload = {}) {
+  };
+
+  /**
+   * The active Socket.IO client socket instance.
+   *
+   * @static
+   * @type {import('socket.io-client').Socket|null}
+   */
+  static socket = null;
+
+  /**
+   * The current WebSocket host URL.
+   *
+   * @static
+   * @type {string|undefined}
+   */
+  static host;
+
+  /**
+   * Emits a JSON-serialized payload to the server on the specified channel.
+   *
+   * @static
+   * @param {string} [channel=''] - The channel/event name to emit on.
+   * @param {Object} [payload={}] - The data to send.
+   * @returns {void}
+   */
+  static Emit(channel = '', payload = {}) {
     try {
       this.socket.emit(channel, JSON.stringify(payload));
     } catch (error) {
       logger.error(error);
     }
-  },
-  Init: async function (options) {
+  }
+
+  /**
+   * Initializes (or re-initializes) the Socket.IO connection.
+   * Disconnects any existing socket, creates a new connection, and registers
+   * built-in event listeners and custom channels.
+   *
+   * @static
+   * @async
+   * @param {Object} options - Connection options.
+   * @param {string} [options.host] - Override WebSocket host URL.
+   * @param {Object.<string, Object>} [options.channels] - Channel definitions to register listeners for.
+   * @returns {Promise<void>}
+   */
+  static async Init(options) {
     if (this.socket) this.socket.disconnect();
     const path = getWsBasePath();
     this.host = options.host ? options.host : getWsBaseUrl({ wsBasePath: '' });
@@ -29,24 +85,10 @@ const SocketIo = {
     });
     const connectOptions = {
       path: path === '/' ? undefined : path,
-      // auth: {
-      //   token: '',
-      // },
-      // query: {
-      //   'my-key': 'my-value',
-      // },
-      // forceNew: true,
-      // reconnectionAttempts: 'Infinity',
-      // timeout: 10000,
-      // autoConnect: 5000,
-      // Custom auth socket io credentials:
       withCredentials: true,
-      extraHeaders: {
-        //   "my-custom-header": "abcd"
-      },
+      extraHeaders: {},
       transports: ['websocket', 'polling', 'flashsocket'],
     };
-    // logger.error(`connect options:`, JSON.stringify(connectOptions, null, 4));
     this.socket = io(this.host, connectOptions);
 
     this.socket.on('connect', () => {
@@ -65,17 +107,28 @@ const SocketIo = {
     });
 
     if (options && 'channels' in options) this.setChannels(options.channels);
-  },
-  setChannels: function (channels) {
+  }
+
+  /**
+   * Registers socket listeners for each channel key, routing incoming messages
+   * to all registered callbacks in `Event[channel]`.
+   *
+   * @static
+   * @param {Object.<string, Object>} channels - Channel definitions keyed by channel name.
+   * @returns {void}
+   */
+  static setChannels(channels) {
     Object.keys(channels).map((type) => {
       logger.info(`load chanel`, type);
       this.Event[type] = {};
       this.socket.on(type, (...args) => {
-        // logger.info(`event: ${type} | ${JSON.stringify(args, null, 4)}`);
         Object.keys(this.Event[type]).map((keyEvent) => this.Event[type][keyEvent](args));
       });
     });
-  },
-};
+  }
+}
+
+/** @type {SocketIoProvider} Backward compatibility alias. */
+const SocketIo = SocketIoProvider;
 
-export { SocketIo };
+export { SocketIoProvider, SocketIo };

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

@@ -0,0 +1,75 @@
+/**
+ * Shared factory for app-specific WebSocket event handlers.
+ * Eliminates duplication across per-app SocketIo*.js modules by providing
+ * common channel event handling (chat, email-confirmed, etc.).
+ *
+ * @module client/core/SocketIoHandler
+ * @namespace SocketIoHandlerProvider
+ */
+import { Account } from './Account.js';
+import { Chat } from './Chat.js';
+import { s4 } from './CommonJs.js';
+import { loggerFactory } from './Logger.js';
+import { SocketIo } from './SocketIo.js';
+import { s } from './VanillaJs.js';
+
+const logger = loggerFactory(import.meta);
+
+/**
+ * @class SocketIoHandlerProvider
+ * @classdesc Provides a static factory method to create app-specific SocketIo event handlers
+ * from an {@link AppStore} instance. Handles common channel events (chat, email-confirmed)
+ * and wires connect/disconnect lifecycle.
+ * @memberof SocketIoHandlerProvider
+ */
+class SocketIoHandlerProvider {
+  /**
+   * Creates a standard SocketIo event initialization object for an app module.
+   *
+   * @static
+   * @param {import('./AppStore.js').AppStore} appStore - The app-specific AppStore instance.
+   * @returns {{ Init: function(): Promise<void> }} An object with an `Init` method for SocketIo event registration.
+   */
+  static create(appStore) {
+    return {
+      Init() {
+        return new Promise((resolve) => {
+          for (const type of Object.keys(appStore.Data)) {
+            SocketIo.Event[type][s4()] = async (args) => {
+              args = JSON.parse(args[0]);
+              switch (type) {
+                case 'chat':
+                  {
+                    const idModal = 'modal-chat';
+                    if (s(`.${idModal}-chat-box`)) Chat.appendChatBox({ idModal, ...args });
+                  }
+                  break;
+
+                default:
+                  break;
+              }
+              const { status } = args;
+
+              switch (status) {
+                case 'email-confirmed': {
+                  const newUser = { ...appStore.Data.user.main.model.user, emailConfirmed: true };
+                  Account.renderVerifyEmailStatus(newUser);
+                  Account.triggerUpdateEvent({ user: newUser });
+                  break;
+                }
+
+                default:
+                  break;
+              }
+            };
+          }
+          SocketIo.Event.connect[s4()] = async (reason) => {};
+          SocketIo.Event.disconnect[s4()] = async (reason) => {};
+          return resolve();
+        });
+      },
+    };
+  }
+}
+
+export { SocketIoHandlerProvider };