underpost 2.8.846 → 2.8.848

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

@@ -1,7 +1,7 @@
 import { CoreService } from '../../services/core/core.service.js';
 import { BtnIcon } from './BtnIcon.js';
 import { s4 } from './CommonJs.js';
-import { darkTheme, renderCssAttr } from './Css.js';
+import { darkTheme, renderCssAttr, subThemeManager } from './Css.js';
 import { loggerFactory } from './Logger.js';
 import { append, getAllChildNodes, getProxyPath, htmls, s, sa } from './VanillaJs.js';
 
@@ -23,12 +23,12 @@ const LoadingAnimation = {
           <div
             class="fix progress-bar box-shadow ${id}"
             style="left: -100%; background: ${darkTheme
-              ? LoadingAnimation.darkColor
-                ? LoadingAnimation.darkColor
-                : `#c9c9c9`
-              : LoadingAnimation.lightColor
-              ? LoadingAnimation.lightColor
-              : `#515151`};"
+              ? subThemeManager.darkColor
+                ? subThemeManager.darkColor
+                : `#66e400`
+              : subThemeManager.lightColor
+              ? subThemeManager.lightColor
+              : `#157e00`};"
           ></div>
         `,
       );
@@ -140,14 +140,7 @@ const LoadingAnimation = {
         }, 300);
       });
   },
-  lightColor: null,
-  setLightColor: function (color) {
-    this.lightColor = color;
-  },
-  darkColor: null,
-  setDarkColor: function (color) {
-    this.darkColor = color;
-  },
+
   RenderCurrentSrcLoad: function (event) {
     if (s(`.ssr-loading-info`)) {
       let nameSrcLoad = event.data.path;

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

@@ -139,6 +139,71 @@ const Modal = {
         case 'slide-menu-right':
         case 'slide-menu-left':
           (async () => {
+            if (!options.slideMenuTopBarBannerFix) {
+              options.slideMenuTopBarBannerFix = async () => {
+                let style = html``;
+                if (options.barMode === 'top-bottom-bar') {
+                  style = html`<style>
+                    .default-slide-menu-top-bar-fix-logo-container {
+                      width: 50px;
+                      height: 50px;
+                    }
+                    .default-slide-menu-top-bar-fix-logo {
+                      width: 40px;
+                      height: 40px;
+                      padding: 5px;
+                    }
+                    .default-slide-menu-top-bar-fix-title-container-text {
+                      font-size: 26px;
+                      top: 8px;
+                      color: ${darkTheme ? '#ffffff' : '#000000'};
+                    }
+                  </style>`;
+                } else {
+                  style = html`<style>
+                    .default-slide-menu-top-bar-fix-logo-container {
+                      width: 100px;
+                      height: 100px;
+                    }
+                    .default-slide-menu-top-bar-fix-logo {
+                      width: 50px;
+                      height: 50px;
+                      padding: 24px;
+                    }
+                    .default-slide-menu-top-bar-fix-title-container-text {
+                      font-size: 30px;
+                      top: 30px;
+                      color: ${darkTheme ? '#ffffff' : '#000000'};
+                    }
+                  </style>`;
+                }
+                setTimeout(() => {
+                  if (s(`.top-bar-app-icon`) && s(`.top-bar-app-icon`).src) {
+                    s(`.default-slide-menu-top-bar-fix-logo`).src = s(`.top-bar-app-icon`).src;
+                    if (s(`.top-bar-app-icon`).classList.contains('negative-color'))
+                      s(`.default-slide-menu-top-bar-fix-logo`).classList.add('negative-color');
+                    htmls(
+                      `.default-slide-menu-top-bar-fix-title-container`,
+                      html`
+                        <div class="inl default-slide-menu-top-bar-fix-title-container-text">
+                          ${options.RouterInstance.NameApp}
+                        </div>
+                      `,
+                    );
+                  } else
+                    htmls(
+                      `.default-slide-menu-top-bar-fix-logo-container`,
+                      html`<div class="abs center">${s(`.action-btn-app-icon-render`).innerHTML}</div>`,
+                    );
+                });
+
+                return html`${style}
+                  <div class="in fll default-slide-menu-top-bar-fix-logo-container">
+                    <img class="default-slide-menu-top-bar-fix-logo in fll" />
+                  </div>
+                  <div class="in fll default-slide-menu-top-bar-fix-title-container"></div>`;
+              };
+            }
             const { barConfig } = options;
             options.style = {
               position: 'absolute',
@@ -266,7 +331,9 @@ const Modal = {
                       </div>
                     </div>
                     <div
-                      class="abs main-body-btn main-body-btn-bar-custom ${options?.slideMenuTopBarFix ? '' : 'hide'}"
+                      class="abs main-body-btn main-body-btn-bar-custom ${options?.slideMenuTopBarBannerFix
+                        ? ''
+                        : 'hide'}"
                       style="top: 100px; ${true || (options.mode && options.mode.match('right'))
                         ? 'right'
                         : 'left'}: 0px"
@@ -345,6 +412,7 @@ const Modal = {
                   );
                 }
               };
+              Modal.setTopBannerLink();
             });
 
             const inputSearchBoxId = `top-bar-search-box`;
@@ -429,12 +497,14 @@ const Modal = {
                     })}
                   </div>
                 </div>
-                ${options?.slideMenuTopBarFix
+                ${options?.slideMenuTopBarBannerFix
                   ? html`<div
                       class="abs modal slide-menu-top-bar-fix"
                       style="height: ${options.heightTopBar}px; top: 0px"
                     >
-                      ${await options.slideMenuTopBarFix()}
+                      <a class="a-link-top-banner">
+                        <div class="inl">${await options.slideMenuTopBarBannerFix()}</div></a
+                      >
                     </div>`
                   : ''}
               </div>`,
@@ -643,6 +713,9 @@ const Modal = {
 
               const updateSearchBoxValue = (selector) => {
                 if (!selector) selector = getDefaultSearchBoxSelector();
+                // check exist childNodes
+                if (!s(selector) || !s(selector).hasChildNodes()) return;
+
                 if (s(selector).childNodes) {
                   if (
                     s(selector).childNodes[s(selector).childNodes.length - 1] &&
@@ -666,6 +739,10 @@ const Modal = {
 
               const setSearchValue = (selector) => {
                 if (!selector) selector = getDefaultSearchBoxSelector();
+
+                // check exist childNodes
+                if (!s(selector) || !s(selector).hasChildNodes()) return;
+
                 historySearchBox = historySearchBox.filter(
                   (h) => h.routerId !== results[currentKeyBoardSearchBoxIndex].routerId,
                 );
@@ -1072,11 +1149,18 @@ const Modal = {
               }
 
               {
-                ThemeEvents['action-btn-theme'] = () => {
+                ThemeEvents['action-btn-theme'] = async () => {
                   htmls(
                     `.action-btn-theme-render`,
                     html` ${darkTheme ? html` <i class="fas fa-moon"></i>` : html`<i class="far fa-sun"></i>`}`,
                   );
+                  if (s(`.slide-menu-top-bar-fix`)) {
+                    htmls(
+                      `.slide-menu-top-bar-fix`,
+                      html`<a class="a-link-top-banner">${await options.slideMenuTopBarBannerFix()}</a>`,
+                    );
+                    Modal.setTopBannerLink();
+                  }
                 };
                 ThemeEvents['action-btn-theme']();
 
@@ -1463,12 +1547,12 @@ const Modal = {
             if (
               ![idModal, 'main-body-top', 'main-body'].concat(this.Data[idModal]?.homeModals || []).includes(keyModal)
             )
-              s(`.btn-close-${keyModal}`).click();
+              if (s(`.btn-close-${keyModal}`)) s(`.btn-close-${keyModal}`).click();
             backMenuButtonEvent();
           }
-          s(`.btn-close-modal-menu`).click();
+          if (s(`.btn-close-modal-menu`)) s(`.btn-close-modal-menu`).click();
           setPath(getProxyPath());
-          setDocTitle({ ...options.RouterInstance, route: '' });
+          setDocTitle();
         };
         s(`.main-btn-home`).onclick = async () => {
           // await this.onHomeRouterEvent();
@@ -2138,6 +2222,15 @@ const Modal = {
       // non-fatal: keep default placement if structure not present
     }
   },
+  setTopBannerLink: function () {
+    if (s(`.a-link-top-banner`)) {
+      s(`.a-link-top-banner`).setAttribute('href', `${location.origin}${getProxyPath()}`);
+      EventsUI.onClick(`.a-link-top-banner`, (e) => {
+        e.preventDefault();
+        s(`.action-btn-home`).click();
+      });
+    }
+  },
   headerTitleHeight: 40,
   actionBtnCenter: function () {
     if (!s(`.btn-close-modal-menu`).classList.contains('hide')) {

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

@@ -15,7 +15,7 @@ import { getSrcFromFileData } from './Input.js';
 import { imageShimmer, renderCssAttr } from './Css.js';
 import { Translate } from './Translate.js';
 import { Modal } from './Modal.js';
-import { closeModalRouteChangeEvents, listenQueryPathInstance, renderTitle, setQueryPath } from './Router.js';
+import { closeModalRouteChangeEvents, listenQueryPathInstance, setQueryPath } from './Router.js';
 
 const PanelForm = {
   Data: {},
@@ -92,7 +92,7 @@ const PanelForm = {
       },
     ];
 
-    const titleIcon = html`<i class="fa-solid fa-quote-left"></i>`;
+    const titleIcon = html`<i class="fa-solid fa-quote-left title-icon-${idPanel}"></i>`;
     const panelRender = async ({ data }) =>
       await Panel.Render({
         idPanel,
@@ -440,7 +440,6 @@ const PanelForm = {
       if (options.route === 'home') Modal.homeCid = newInstance(cid);
       htmls(`.${options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body'}`, await renderSrrPanelData());
       await getPanelData();
-      if (this.Data[idPanel].data.length === 1) renderTitle(this.Data[idPanel].data[0].title);
       htmls(
         `.${options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body'}`,
         await panelRender({ data: this.Data[idPanel].data }),

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

@@ -6,28 +6,29 @@ import { Worker } from './Worker.js';
 
 // Router
 
+const RouterEvents = {};
+const closeModalRouteChangeEvents = {};
+
 const logger = loggerFactory(import.meta);
 
-const renderTitle = (title, nameApp) => htmls('title', html`${title} | ${nameApp ?? Worker.RouterInstance.NameApp}`);
-
-const setDocTitle = (options = { Routes: () => {}, route: '', NameApp: '' }) => {
-  const { Routes, route, NameApp } = options;
-  let title = titleFormatted(Routes()[`/${route}`].title);
-  if (Routes()[`/${route}`].upperCase) title = title.toUpperCase();
-  renderTitle(title, NameApp);
-  {
-    const routeId = route === '' ? 'home' : route;
-    if (s(`.main-btn-${routeId}`)) {
-      if (s(`.main-btn-menu-active`)) s(`.main-btn-menu-active`).classList.remove(`main-btn-menu-active`);
-      if (s(`.main-btn-${routeId}`)) s(`.main-btn-${routeId}`).classList.add(`main-btn-menu-active`);
-    }
+const sanitizeRoute = (route) =>
+  !route || route === '/' || route === `\\`
+    ? 'home'
+    : route.toLowerCase().replaceAll('/', '').replaceAll(`\\`, '').replaceAll(' ', '-');
+
+const setDocTitle = (route) => {
+  const _route = sanitizeRoute(route);
+  // logger.warn('setDocTitle', _route);
+  const title = titleFormatted(_route);
+  htmls('title', html`${title}${title.match(Worker.title.toLowerCase()) ? '' : ` | ${Worker.title}`}`);
+  if (s(`.main-btn-${_route}`)) {
+    if (s(`.main-btn-menu-active`)) s(`.main-btn-menu-active`).classList.remove(`main-btn-menu-active`);
+    if (s(`.main-btn-${_route}`)) s(`.main-btn-${_route}`).classList.add(`main-btn-menu-active`);
   }
 };
 
-const RouterEvents = {};
-
-const Router = function (options = { Routes: () => {}, e: new PopStateEvent(), NameApp: '' }) {
-  const { e, Routes, NameApp } = options;
+const Router = function (options = { Routes: () => {}, e: new PopStateEvent() }) {
+  const { e, Routes } = options;
   const proxyPath = getProxyPath();
   let path = window.location.pathname;
   logger.info(options);
@@ -43,7 +44,7 @@ const Router = function (options = { Routes: () => {}, e: new PopStateEvent(), N
 
     if (path === pushPath) {
       for (const event of Object.keys(RouterEvents)) RouterEvents[event](routerEvent);
-      setDocTitle({ Routes, route, NameApp });
+      setDocTitle(route);
       return Routes()[`/${route}`].render();
     }
   }
@@ -79,7 +80,6 @@ const listenQueryPathInstance = ({ id, routeId, event }, queryKey = 'cid') => {
     });
 };
 
-const closeModalRouteChangeEvents = {};
 const triggerCloseModalRouteChangeEvents = (newPath) => {
   console.warn('[closeModalRouteChangeEvent]', newPath);
   for (const event of Object.keys(closeModalRouteChangeEvents)) closeModalRouteChangeEvents[event](newPath);
@@ -99,14 +99,14 @@ const closeModalRouteChangeEvent = (options = {}) => {
         newPath = `${newPath}${Modal.Data[subIdModal].options.route}`;
         triggerCloseModalRouteChangeEvents(newPath);
         setPath(newPath);
+        setDocTitle(newPath);
         Modal.setTopModalCallback(subIdModal);
-        return setDocTitle({ ...RouterInstance, route: Modal.Data[subIdModal].options.route });
       }
     }
     newPath = `${newPath}${homeCid ? `?cid=${homeCid}` : ''}`;
     triggerCloseModalRouteChangeEvents(newPath);
     setPath(newPath);
-    return setDocTitle({ ...RouterInstance, route: '' });
+    setDocTitle(newPath);
   }
 };
 
@@ -121,7 +121,7 @@ const handleModalViewRoute = (options = {}) => {
 
   if (path !== newPath) {
     setPath(newPath);
-    setDocTitle({ ...RouterInstance, route });
+    setDocTitle(newPath);
   }
 };
 
@@ -135,5 +135,4 @@ export {
   closeModalRouteChangeEvent,
   handleModalViewRoute,
   closeModalRouteChangeEvents,
-  renderTitle,
 };

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

@@ -21,11 +21,11 @@ const SocketIo = {
   },
   Init: async function (options) {
     if (this.socket) this.socket.disconnect();
-    this.host = getWsBaseUrl({ wsBasePath: '' });
+    this.host = options.host ?? getWsBaseUrl({ wsBasePath: '' });
     logger.info(`ws host:`, this.host);
-    const path = getWsBasePath();
+    const path = typeof options.path === 'string' ? options.path : getWsBasePath();
     const connectOptions = {
-      path,
+      path: path === '/' ? undefined : path,
       // auth: {
       //   token: '',
       // },

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

@@ -31,8 +31,6 @@ VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=bierner
 
 */
 
-// Docs by https://mintlify.com
-
 /**
  * Query selector.
  *
@@ -355,7 +353,6 @@ const getBlobFromUint8ArrayFile = (data = [[]], mimetype = 'application/octet-st
  * @memberof VanillaJS
  */
 const getProxyPath = () => {
-  // warning: evaluates headers html source
   let path = location.pathname.split('/')[1] ? `/${location.pathname.split('/')[1]}/` : '/';
   if (window.Routes && path !== '/' && path.slice(0, -1) in window.Routes()) path = '/';
   return path;

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

@@ -12,7 +12,8 @@ const logger = loggerFactory(import.meta);
 const Worker = {
   devMode: () => location.origin.match('localhost') || location.origin.match('127.0.0.1'),
   instance: async function ({ router, render }) {
-    logger.warn('Init');
+    Worker.title = `${s('title').textContent}`;
+    // logger.warn('Init worker', Worker.title);
     window.ononline = async () => {
       logger.warn('ononline');
     };
@@ -81,6 +82,7 @@ const Worker = {
     }
     window.serviceWorkerReady = true;
   },
+
   // Get the current service worker registration.
   getRegistration: async function () {
     return await navigator.serviceWorker.getRegistration();

package/src/client/components/default/CssDefault.js

@@ -1,13 +1,27 @@
+import { subThemeManager } from '../core/Css.js';
+
+const CssCommonDefault = async () => {
+  // use  #4f46e5, #7c3aed);
+  subThemeManager.setDarkTheme('#7c3aed');
+  subThemeManager.setLightTheme('#7c3aed');
+
+  return html``;
+};
+
 const CssDefaultDark = {
   theme: 'default-dark',
   dark: true,
-  render: async () => html` <style></style> `,
+  render: async () => {
+    return (await CssCommonDefault()) + html``;
+  },
 };
 
 const CssDefaultLight = {
   theme: 'default-light',
   dark: false,
-  render: async () => html` <style></style> `,
+  render: async () => {
+    return (await CssCommonDefault()) + html``;
+  },
 };
 
-export { CssDefaultDark, CssDefaultLight };
+export { CssDefaultDark, CssCommonDefault, CssDefaultLight };