cyberia 3.2.9 → 3.2.12

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

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

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

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

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

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

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

@@ -73,7 +73,7 @@ class PanelForm {
       parentIdModal: undefined,
       route: 'home',
       htmlFormHeader: async () => '',
-      firsUpdateEvent: async () => {},
+      firsUpdateEvent: async () => { },
       share: {
         copyLink: false,
         copySourceMd: false,
@@ -196,12 +196,12 @@ class PanelForm {
               <img
                 class="abs center"
                 style="${renderCssAttr({
-                  style: {
-                    width: '100px',
-                    height: '100px',
-                    opacity: 0.2,
-                  },
-                })}"
+              style: {
+                width: '100px',
+                height: '100px',
+                opacity: 0.2,
+              },
+            })}"
                 src="${defaultUrlImage}"
               />
             `,
@@ -332,16 +332,10 @@ class PanelForm {
             }, 50);
           },
           initEdit: async function ({ data }) {
-            // Clear file input when entering edit mode
-            const fileFormData = formData.find((f) => f.inputType === 'file');
-            if (fileFormData && s(`.${fileFormData.id}`)) {
-              s(`.${fileFormData.id}`).value = '';
-              s(`.${fileFormData.id}`).inputFiles = null;
-              htmls(
-                `.file-name-render-${fileFormData.id}`,
-                `<div class="abs center"><i style="font-size: 25px" class="fa-solid fa-cloud"></i></div>`,
-              );
-            }
+            // Do NOT clear the file input here - the file should remain as-is when entering edit mode.
+            // If user wants to remove the file, they use the "clean file" button.
+            // If user wants to replace the file, they select a new file.
+            // Unconditionally clearing the file here would cause the server to receive fileId: null on save.
             setTimeout(() => {
               s(`.modal-${options.route}`).scrollTo({ top: 0, behavior: 'smooth' });
             }, 50);
@@ -388,15 +382,15 @@ class PanelForm {
             // It will be filtered from the tags array to keep visibility control separate from content tags
             const tags = data.tags
               ? uniqueArray(
-                  data.tags
-                    .replaceAll('/', ',')
-                    .replaceAll('-', ',')
-                    .replaceAll(' ', ',')
-                    .split(',')
-                    .map((t) => t.trim())
-                    .filter((t) => t)
-                    .concat(prefixTags),
-                )
+                data.tags
+                  .replaceAll('/', ',')
+                  .replaceAll('-', ',')
+                  .replaceAll(' ', ',')
+                  .split(',')
+                  .map((t) => t.trim())
+                  .filter((t) => t)
+                  .concat(prefixTags),
+              )
               : prefixTags;
             let originObj, originFileObj, indexOriginObj;
             if (editId) {
@@ -434,7 +428,17 @@ class PanelForm {
             for (const file of inputFiles) {
               indexFormDoc++;
               let fileId = undefined; // Reset for each iteration - only set if user uploaded a file
+              // Track whether the file input was explicitly cleared (null) vs never had a file (undefined)
+              // In edit mode, null means user cleared the file - we need to tell server to remove it
+              const isFileCleared = data.fileId === null && editId;
               await (async () => {
+                // When file is null and not the first iteration or not in edit mode, skip upload
+                if (!file && !isFileCleared) return;
+                // When user cleared file in edit mode, set fileId=null so server removes the reference
+                if (isFileCleared) {
+                  fileId = null;
+                  return;
+                }
                 const body = new FormData();
                 // Only append md file if it was created (has content)
                 if (md) body.append('md', md);
@@ -485,8 +489,8 @@ class PanelForm {
                 message: documentMessage,
                 data: documentData,
               } = originObj && indexFormDoc === 0
-                ? await DocumentService.put({ id: originObj._id, body })
-                : await DocumentService.post({
+                  ? await DocumentService.put({ id: originObj._id, body })
+                  : await DocumentService.post({
                     body,
                   });
               const newDoc = {
@@ -514,12 +518,12 @@ class PanelForm {
                 fileId: {
                   fileBlob: file
                     ? {
-                        data: {
-                          data: await getDataFromInputFile(file),
-                        },
-                        mimetype: file.type,
-                        name: file.name,
-                      }
+                      data: {
+                        data: await getDataFromInputFile(file),
+                      },
+                      mimetype: file.type,
+                      name: file.name,
+                    }
                     : undefined,
                   filePlain: undefined,
                 },
@@ -738,36 +742,36 @@ class PanelForm {
             <div
               class="in fll ssr-shimmer-search-box"
               style="${renderCssAttr({
-                style: {
-                  width: '80%',
-                  height: '30px',
-                  top: '-13px',
-                  left: '10px',
-                },
-              })}"
+            style: {
+              width: '80%',
+              height: '30px',
+              top: '-13px',
+              left: '10px',
+            },
+          })}"
             ></div>
           </div>`,
           createdAt: html`<div class="fl">
             <div
               class="in fll ssr-shimmer-search-box"
               style="${renderCssAttr({
-                style: {
-                  width: '50%',
-                  height: '30px',
-                  left: '-5px',
-                },
-              })}"
+            style: {
+              width: '50%',
+              height: '30px',
+              left: '-5px',
+            },
+          })}"
             ></div>
           </div>`,
           mdFileId: html`<div class="fl section-mp">
             <div
               class="in fll ssr-shimmer-search-box"
               style="${renderCssAttr({
-                style: {
-                  width: '80%',
-                  height: '30px',
-                },
-              })}"
+            style: {
+              width: '80%',
+              height: '30px',
+            },
+          })}"
             ></div>
           </div>`.repeat(random(2, 4)),
           ssr: true,