underpost 2.8.87 → 2.8.88

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

@@ -3,7 +3,8 @@ import { CssCoreDark, CssCoreLight } from './CssCore.js';
 import { DropDown } from './DropDown.js';
 import { Modal } from './Modal.js';
 import { Translate } from './Translate.js';
-import { append, getProxyPath, htmls, s, sa } from './VanillaJs.js';
+import { append, htmls, s, sa } from './VanillaJs.js';
+import { getProxyPath } from './Router.js';
 
 let ThemesScope = [];
 

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

@@ -1,7 +1,8 @@
 import { AgGrid } from './AgGrid.js';
 import { borderChar, boxShadow, scrollBarDarkRender, scrollBarLightRender } from './Css.js';
 import { LoadingAnimation } from './LoadingAnimation.js';
-import { append, getProxyPath, s } from './VanillaJs.js';
+import { append, s } from './VanillaJs.js';
+import { getProxyPath } from './Router.js';
 
 const CssCommonCore = async () => {
   if (!s(`.fa-link`))
@@ -214,6 +215,10 @@ const CssCommonCore = async () => {
       .bar-default-modal {
         overflow: hidden;
       }
+      .panel-placeholder-bottom {
+        height: 100px;
+        color: gray;
+      }
     </style>
     ${boxShadow({ selector: '.account-profile-image' })}
     <div class="ag-grid-style"></div>`;

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

@@ -1,12 +1,11 @@
 import { Badge } from './Badge.js';
 import { BtnIcon } from './BtnIcon.js';
-import { rgbToHex } from './CommonJs.js';
-import { Css, darkTheme, dynamicCol, renderCssAttr, simpleIconsRender, ThemeEvents, Themes } from './Css.js';
+import { Css, renderCssAttr, simpleIconsRender, ThemeEvents, Themes } from './Css.js';
 import { DropDown } from './DropDown.js';
 import { buildBadgeToolTipMenuOption, Modal, renderMenuLabel, renderViewTitle } from './Modal.js';
-import { listenQueryPathInstance, setQueryPath } from './Router.js';
+import { listenQueryPathInstance, setQueryPath, closeModalRouteChangeEvent, getProxyPath } from './Router.js';
 import { Translate } from './Translate.js';
-import { getProxyPath, getQueryParams, htmls, s, sa } from './VanillaJs.js';
+import { htmls, s } from './VanillaJs.js';
 import Sortable from 'sortablejs';
 
 // https://mintlify.com/docs/quickstart
@@ -34,6 +33,7 @@ const Docs = {
       },
       maximize: true,
       mode: 'view',
+      route: 'docs',
       slideMenu: 'modal-menu',
       observer: true,
       barMode: 'top-bottom-bar',
@@ -51,7 +51,7 @@ const Docs = {
     };
     Modal.Data[ModalId].onObserverListener[ModalId]();
     Modal.Data[ModalId].onCloseListener[ModalId] = () => {
-      setQueryPath({ path: 'docs', queryPath: '' });
+      closeModalRouteChangeEvent({ closedId: ModalId });
     };
   },
   Data: [

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

@@ -4,8 +4,7 @@ import { FileService } from '../../services/file/file.service.js';
 import { AgGrid } from './AgGrid.js';
 import { Auth } from './Auth.js';
 import { BtnIcon } from './BtnIcon.js';
-import { getSubpaths, timer, uniqueArray } from './CommonJs.js';
-import { Content } from './Content.js';
+import { getSubpaths, uniqueArray } from './CommonJs.js';
 import { darkTheme, renderCssAttr } from './Css.js';
 import { EventsUI } from './EventsUI.js';
 import { fileFormDataFactory, Input, InputFile } from './Input.js';
@@ -15,7 +14,8 @@ import { NotificationManager } from './NotificationManager.js';
 import { RouterEvents } from './Router.js';
 import { Translate } from './Translate.js';
 import { Validator } from './Validator.js';
-import { copyData, downloadFile, getProxyPath, getQueryParams, s, setPath } from './VanillaJs.js';
+import { copyData, downloadFile, s } from './VanillaJs.js';
+import { getProxyPath, getQueryParams, setPath } from './Router.js';
 
 const logger = loggerFactory(import.meta);
 

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

@@ -7,7 +7,7 @@ import { loggerFactory } from './Logger.js';
 import { RichText } from './RichText.js';
 import { ToggleSwitch } from './ToggleSwitch.js';
 import { Translate } from './Translate.js';
-import { htmls, s } from './VanillaJs.js';
+import { htmls, htmlStrSanitize, s } from './VanillaJs.js';
 const logger = loggerFactory(import.meta);
 
 const fileFormDataFactory = (e, extensions) => {
@@ -61,22 +61,27 @@ const Input = {
         };
     });
 
-    const inputElement = html` <input
-        type="${options?.type ? options.type : 'text'}"
-        class="${options.inputClass ? options.inputClass : 'in wfa'} ${id}"
-        ${options?.min !== undefined ? `min="${options.min}"` : ''}
-        ${options?.max !== undefined ? `max="${options.max}"` : ''}
-        placeholder${options?.placeholder ? `="${options.placeholder}"` : ''}
-        ${options?.value !== undefined ? `value="${options.value}"` : ''}
-        ${options?.autocomplete ? `autocomplete="${options.autocomplete}"` : ''}
-        ${options?.disabled ? `disabled` : ''}
-        ${options?.name !== undefined ? `name="${options.name}"` : ''}
-        ${options?.pattern !== undefined ? `pattern="${options.pattern}"` : ''}
-        ${options?.pattern === undefined && options.type === 'tel' ? `pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"` : ''}
-        ${options?.required ? ` required ` : ''}
-        ${options?.accept ? `accept="${options.accept}"` : ''}
-        ${options?.multiple ? `multiple="multiple"` : ''}
-      />
+    const labelValue = htmlStrSanitize(options.label) ? htmlStrSanitize(options.label) : id;
+
+    const inputElement = html` <label for="${id}-name">
+        <span class="hide">${labelValue}</span>
+        <input
+          type="${options?.type ? options.type : 'text'}"
+          class="${options.inputClass ? options.inputClass : 'in wfa'} ${id}"
+          ${options?.min !== undefined ? `min="${options.min}"` : ''}
+          ${options?.max !== undefined ? `max="${options.max}"` : ''}
+          placeholder${options?.placeholder ? `="${options.placeholder}"` : ''}
+          ${options?.value !== undefined ? `value="${options.value}"` : ''}
+          ${options?.autocomplete ? `autocomplete="${options.autocomplete}"` : ''}
+          ${options?.disabled ? `disabled` : ''}
+          ${options?.name !== undefined ? `name="${options.name}"` : `name='${id}-name'`}
+          ${options?.pattern !== undefined ? `pattern="${options.pattern}"` : ''}
+          ${options?.pattern === undefined && options.type === 'tel' ? `pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"` : ''}
+          ${options?.required ? ` required ` : ''}
+          ${options?.accept ? `accept="${options.accept}"` : ''}
+          ${options?.multiple ? `multiple="multiple"` : ''}
+          id="${id}-name"
+      /></label>
       <div class="${id}-input-extension input-info input-extension ${options?.extension ? '' : 'hide'}">
         ${options?.extension ? await options.extension() : ''}
       </div>`;

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

@@ -1,7 +1,7 @@
 import JoystickController from 'joystick-controller';
 import { getDirection, getId } from './CommonJs.js';
-import { loggerFactory } from './Logger.js';
-import { append, getProxyPath, s } from './VanillaJs.js';
+import { append, s } from './VanillaJs.js';
+import { getProxyPath } from './Router.js';
 
 const logger = loggerFactory(import.meta);
 

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

@@ -1,9 +1,9 @@
-import { CoreService } from '../../services/core/core.service.js';
 import { BtnIcon } from './BtnIcon.js';
 import { s4 } from './CommonJs.js';
 import { darkTheme, renderCssAttr, subThemeManager } from './Css.js';
 import { loggerFactory } from './Logger.js';
-import { append, getAllChildNodes, getProxyPath, htmls, s, sa } from './VanillaJs.js';
+import { append, htmls, s } from './VanillaJs.js';
+import { getProxyPath } from './Router.js';
 
 const logger = loggerFactory(import.meta);
 

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

@@ -24,8 +24,9 @@ const LogIn = {
   Event: {},
   Trigger: async function (options) {
     const { user } = options;
-    await Webhook.register({ user });
     for (const eventKey of Object.keys(this.Event)) await this.Event[eventKey](options);
+    if (!user || user.role === 'guest') return;
+    await Webhook.register({ user });
     if (s(`.session`))
       htmls(
         `.session`,
@@ -72,19 +73,18 @@ const LogIn = {
           imageSrc,
         };
       }
+      htmls(
+        `.action-btn-profile-log-in-render`,
+        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}"`
+              : ``}
+          />
+        </div>`,
+      );
     }
-
-    htmls(
-      `.action-btn-profile-log-in-render`,
-      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}"`
-            : ``}
-        />
-      </div>`,
-    );
   },
   Render: async function () {
     setTimeout(async () => {
@@ -103,13 +103,7 @@ const LogIn = {
           if ('model' in inputData) body[inputData.model] = s(`.${inputData.id}`).value;
         }
         const result = await UserService.post({ id: 'auth', body });
-        if (result.status === 'success') {
-          await Auth.sessionIn(result);
-          setTimeout(() => {
-            if (s(`.modal-log-in`)) s(`.btn-close-modal-log-in`).click();
-            if (s(`.modal-sign-up`)) s(`.btn-close-modal-sign-up`).click();
-          });
-        }
+
         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');
@@ -119,6 +113,8 @@ const LogIn = {
           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,
           status: result.status,
@@ -189,9 +185,6 @@ const LogIn = {
       </form>
     `;
   },
-  cleanMainUser: () => {
-    LogIn.Scope.user.main.model.user = {};
-  },
 };
 
 export { LogIn };

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

@@ -4,11 +4,11 @@ import { LogIn } from './LogIn.js';
 import { Translate } from './Translate.js';
 import { htmls, s } from './VanillaJs.js';
 import { Webhook } from './Webhook.js';
+import { NotificationManager } from './NotificationManager.js';
 
 const LogOut = {
   Event: {},
   Trigger: async function (options) {
-    LogIn.cleanMainUser();
     await Webhook.unregister();
     for (const eventKey of Object.keys(this.Event)) await this.Event[eventKey](options);
     if (s(`.session`))
@@ -41,6 +41,10 @@ const LogOut = {
       s('.btn-log-out').onclick = async (e) => {
         e.preventDefault();
         await Auth.sessionOut();
+        NotificationManager.Push({
+          html: Translate.Render(`success-logout`),
+          status: 'success',
+        });
       };
     });
     // Translate.Render('confirm-logout')

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

@@ -1,4 +1,6 @@
-const loggerFactory = (meta) => {
+import { getCurrentTrace } from './CommonJs.js';
+
+const loggerFactory = (meta, options = { trace: false }) => {
   meta = meta.url.split('/').pop();
   const types = ['error', 'warn', 'info', 'debug'];
   const logger = {
@@ -9,6 +11,7 @@ const loggerFactory = (meta) => {
         console.info = () => null;
         console.warn = () => null;
       }
+      if (options.trace === true) args.push(getCurrentTrace().split('Logger.js:23')[1]);
       return location.hostname === 'localhost'
         ? console[type](`[${meta}] ${new Date().toISOString()} ${type}:`, ...args)
         : null;

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

@@ -1,16 +1,6 @@
-import { cap, getId, newInstance } from './CommonJs.js';
+import { getId, newInstance, s4 } from './CommonJs.js';
 import { Draggable } from '@neodrag/vanilla';
-import {
-  append,
-  s,
-  prepend,
-  setPath,
-  getProxyPath,
-  htmls,
-  sa,
-  getAllChildNodes,
-  isActiveElement,
-} from './VanillaJs.js';
+import { append, s, prepend, htmls, sa, getAllChildNodes, isActiveElement } from './VanillaJs.js';
 import { BtnIcon } from './BtnIcon.js';
 import { Responsive } from './Responsive.js';
 import { loggerFactory } from './Logger.js';
@@ -24,18 +14,25 @@ import {
   renderStatus,
   renderCssAttr,
 } from './Css.js';
-import { setDocTitle, closeModalRouteChangeEvent, handleModalViewRoute } from './Router.js';
+import {
+  setDocTitle,
+  closeModalRouteChangeEvent,
+  handleModalViewRoute,
+  getProxyPath,
+  setPath,
+  coreUI,
+} from './Router.js';
 import { NotificationManager } from './NotificationManager.js';
 import { EventsUI } from './EventsUI.js';
 import { Translate } from './Translate.js';
 import { Input, isTextInputFocused } from './Input.js';
-import { Validator } from './Validator.js';
 import { DropDown } from './DropDown.js';
 import { Keyboard } from './Keyboard.js';
 import { Badge } from './Badge.js';
 import { Worker } from './Worker.js';
+import { Scroll } from './Scroll.js';
 
-const logger = loggerFactory(import.meta);
+const logger = loggerFactory(import.meta, { trace: true });
 
 const Modal = {
   Data: {},
@@ -91,10 +88,15 @@ const Modal = {
       homeModals: options.homeModals ? options.homeModals : [],
       query: options.query ? `${window.location.search}` : undefined,
       getTop: () => window.innerHeight - (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar),
-      getHeight: () =>
-        window.innerHeight -
-        (options.heightTopBar ? options.heightTopBar : heightDefaultTopBar) -
-        (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar),
+      getHeight: () => {
+        return (
+          window.innerHeight -
+          (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)
+        );
+      },
     };
 
     if (idModal !== 'main-body' && options.mode !== 'view') {
@@ -186,9 +188,7 @@ const Modal = {
                     htmls(
                       `.default-slide-menu-top-bar-fix-title-container`,
                       html`
-                        <div class="inl default-slide-menu-top-bar-fix-title-container-text">
-                          ${options.RouterInstance.BannerAppTemplate}
-                        </div>
+                        <div class="inl default-slide-menu-top-bar-fix-title-container-text">${options.title}</div>
                       `,
                     );
                   } else
@@ -274,6 +274,7 @@ const Modal = {
               s(`.btn-menu-${idModal}`).classList.remove('hide');
               s(`.${idModal}`).style.width = `${this.Data[idModal][options.mode].width}px`;
               s(`.html-${idModal}`).style.display = 'none';
+              // s(`.title-modal-${idModal}`).style.display = 'none';
               setTimeout(() => {
                 s(`.main-body-btn-ui-menu-close`).classList.add('hide');
                 s(`.main-body-btn-ui-menu-menu`).classList.remove('hide');
@@ -281,9 +282,6 @@ const Modal = {
                   s(`.btn-bar-center-icon-menu`).classList.remove('hide');
                   s(`.btn-bar-center-icon-close`).classList.add('hide');
                 }
-              });
-              // s(`.title-modal-${idModal}`).style.display = 'none';
-              setTimeout(() => {
                 s(`.main-body-btn-container`).style[
                   true || (options.mode && options.mode.match('right')) ? 'right' : 'left'
                 ] = `${0}px`;
@@ -375,6 +373,7 @@ const Modal = {
                   s(`.modal-menu`).style.top = '0px';
                   s(`.main-body-btn-container`).style.top = '50px';
                   s(`.main-body`).style.top = '0px';
+                  s(`.main-body`).style.height = `${window.innerHeight}px`;
                   for (const event of Object.keys(Modal.Data[idModal].onBarUiClose))
                     Modal.Data[idModal].onBarUiClose[event]();
                 } else {
@@ -387,6 +386,7 @@ const Modal = {
                   s(`.slide-menu-top-bar`).classList.remove('hide');
                   s(`.bottom-bar`).classList.remove('hide');
                   s(`.main-body`).style.top = `${options.heightTopBar}px`;
+                  s(`.main-body`).style.height = `${window.innerHeight - options.heightTopBar}px`;
                   for (const event of Object.keys(Modal.Data[idModal].onBarUiOpen))
                     Modal.Data[idModal].onBarUiOpen[event]();
                 }
@@ -787,8 +787,7 @@ const Modal = {
                     dragDisabled: true,
                     maximize: true,
                     heightBottomBar: 0,
-                    heightTopBar: originHeightTopBar,
-                    barMode: options.barMode,
+                    heightTopBar: options.heightTopBar,
                   });
 
                   // Bind hover/focus and click-outside to dismiss
@@ -1300,6 +1299,15 @@ const Modal = {
               }
 
               await NotificationManager.RenderBoard(options);
+
+              const { removeEvent } = Scroll.setEvent('.main-body', async (payload) => {
+                console.warn('scroll', payload);
+                if (payload.scrollTop > 100) {
+                  if (!s(`.main-body-btn-ui-close`).classList.contains('hide')) s(`.main-body-btn-ui-close`).click();
+
+                  removeEvent();
+                }
+              });
             });
           })();
           break;
@@ -1394,7 +1402,7 @@ const Modal = {
       <div
         class="fix ${options && options.class ? options.class : ''} modal ${options.disableBoxShadow
           ? ''
-          : 'box-shadow'} ${idModal}"
+          : 'box-shadow'} ${idModal === 'main-body' ? `${idModal} modal-home` : idModal}"
       >
         <div class="abs modal-handle-${idModal}"></div>
         <div class="in modal-html-${idModal}">
@@ -1535,18 +1543,6 @@ const Modal = {
           s(`.btn-icon-menu-back`).classList.add('hide');
           if (s(`.menu-btn-container-main`)) s(`.menu-btn-container-main`).classList.remove('hide');
         };
-        this.onHomeRouterEvent = async () => {
-          for (const keyModal of Object.keys(this.Data)) {
-            if (
-              ![idModal, 'main-body-top', 'main-body'].concat(this.Data[idModal]?.homeModals || []).includes(keyModal)
-            )
-              if (s(`.btn-close-${keyModal}`)) s(`.btn-close-${keyModal}`).click();
-            backMenuButtonEvent();
-          }
-          if (s(`.btn-close-modal-menu`)) s(`.btn-close-modal-menu`).click();
-          setPath(getProxyPath());
-          setDocTitle();
-        };
         s(`.main-btn-home`).onclick = async () => {
           // await this.onHomeRouterEvent();
           s(`.action-btn-home`).click();
@@ -1767,13 +1763,8 @@ const Modal = {
         if (!s(`.${idModal}`)) return;
         this.removeModal(idModal);
         // Handle modal route change
-        if (options.route) {
-          closeModalRouteChangeEvent({
-            route: options.route,
-            RouterInstance: options.RouterInstance,
-            homeCid: Modal.homeCid,
-          });
-        }
+        closeModalRouteChangeEvent({ closedId: idModal });
+        // history.back();
       }, 300);
     };
     s(`.btn-close-${idModal}`).onclick = btnCloseEvent;
@@ -1967,7 +1958,45 @@ const Modal = {
       ...this.Data[idModal],
     };
   },
-  onHomeRouterEvent: () => {},
+  onHomeRouterEvent: async () => {
+    // 1. Get list of modals to close.
+    const modalsToClose = Object.keys(Modal.Data).filter((idModal) => {
+      const modal = Modal.Data[idModal];
+      if (!modal) return false;
+      // Don't close the core UI elements
+
+      if (coreUI.find((id) => idModal.startsWith(id))) {
+        return false;
+      }
+      // Don't close modals that are part of the "home" screen itself
+      const homeModals = Modal.Data['modal-menu']?.homeModals || [];
+      if (homeModals.includes(idModal)) {
+        return false;
+      }
+      return true;
+    });
+
+    // 2. Navigate to home first, creating a new history entry.
+    setPath(`${getProxyPath()}${location.search ?? ''}${location.hash ?? ''}`);
+    setDocTitle();
+
+    // 3. Close the modals without them affecting the URL.
+    for (const id of modalsToClose) {
+      Modal.removeModal(id);
+    }
+
+    // 4. Finally, handle UI cleanup for the slide-menu.
+    if (s(`.menu-btn-container-children`)) htmls(`.menu-btn-container-children`, '');
+    if (s(`.nav-title-display-modal-menu`)) htmls(`.nav-title-display-modal-menu`, '');
+    if (s(`.nav-path-display-modal-menu`)) htmls(`.nav-path-display-modal-menu`, '');
+    if (s(`.btn-icon-menu-back`)) s(`.btn-icon-menu-back`).classList.add('hide');
+    if (s(`.menu-btn-container-main`)) s(`.menu-btn-container-main`).classList.remove('hide');
+
+    // And close the slide menu if it's open
+    if (s(`.btn-close-modal-menu`) && !s(`.btn-close-modal-menu`).classList.contains('hide')) {
+      s(`.btn-close-modal-menu`).click();
+    }
+  },
   currentTopModalId: '',
   zIndexSync: function ({ idModal }) {
     setTimeout(() => {
@@ -1996,11 +2025,6 @@ const Modal = {
   setTopModalCallback: function (idModal) {
     s(`.${idModal}`).style.zIndex = '4';
     this.currentTopModalId = `${idModal}`;
-    if (
-      this.Data[idModal].query &&
-      `${location.pathname}${window.location.search}` !== `${location.pathname}${this.Data[idModal].query}`
-    )
-      setPath(`${location.pathname}${this.Data[idModal].query}`);
   },
   mobileModal: () => window.innerWidth < 600 || window.innerHeight < 600,
   writeHTML: ({ idModal, html }) => htmls(`.html-${idModal}`, html),
@@ -2239,6 +2263,11 @@ const Modal = {
     s(`.bottom-bar`).classList.remove('hide');
     s(`.modal-menu`).classList.remove('hide');
   },
+  RenderSeoSanitizer: async () => {
+    sa('img').forEach((img) => {
+      if (!img.getAttribute('alt')) img.setAttribute('alt', 'image ' + Worker.title + ' ' + s4());
+    });
+  },
 };
 
 const renderMenuLabel = ({ img, text, icon }) => {

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

@@ -4,7 +4,8 @@ import { borderChar, dynamicCol } from './Css.js';
 import { DropDown } from './DropDown.js';
 import { EventsUI } from './EventsUI.js';
 import { Translate } from './Translate.js';
-import { getProxyPath, s, append, hexToRgbA } from './VanillaJs.js';
+import { s, append, hexToRgbA } from './VanillaJs.js';
+import { getProxyPath } from './Router.js';
 import { s4 } from './CommonJs.js';
 import { Input } from './Input.js';
 import { ToggleSwitch } from './ToggleSwitch.js';