underpost 2.8.85 → 2.8.87

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

@@ -1026,7 +1026,8 @@ const imageShimmer = () => html`<div
   </div>
 </div>`;
 
-const renderChessPattern = () => `background: repeating-conic-gradient(#808080 0 25%, #0000 0 50%) 50% / 20px 20px`;
+const renderChessPattern = (patternSize = 20) =>
+  `background: repeating-conic-gradient(#808080 0 25%, #0000 0 50%) 50% / ${patternSize}px ${patternSize}px`;
 
 const extractBackgroundImageUrl = (element) => {
   const style = window.getComputedStyle(element);
@@ -1044,6 +1045,8 @@ const simpleIconsRender = (selector) => {
   });
 };
 
+const styleFactory = (payload, plain = '') => `style="${renderCssAttr({ style: payload })} ${plain}"`;
+
 export {
   Css,
   Themes,
@@ -1083,4 +1086,5 @@ export {
   lightenHex,
   darkenHex,
   adjustHex,
+  styleFactory,
 };

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

@@ -524,6 +524,12 @@ const CssCoreDark = {
         }
         .btn-input-extension:hover {
         }
+        .section-mp-border {
+          border: 2px solid #313131;
+          border-radius: 5px;
+          padding: 5px;
+          margin: 5px;
+        }
       </style>
       ${scrollBarDarkRender()} ${borderChar(1, 'black', ['.main-body-btn-container'])}
     `,
@@ -848,6 +854,12 @@ const CssCoreLight = {
         }
         .btn-input-extension:hover {
         }
+        .section-mp-border {
+          border: 2px solid #bbb;
+          border-radius: 5px;
+          padding: 5px;
+          margin: 5px;
+        }
       </style>
       ${scrollBarLightRender()} ${borderChar(1, 'white', ['.main-body-btn-container'])}
     `,

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

@@ -9,35 +9,26 @@ const FullScreen = {
     Responsive.Event['full-screen-settings'] = () => {
       let fullScreenMode = checkFullScreen();
       if ((fullScreenSwitch && !fullScreenMode) || (!fullScreenSwitch && fullScreenMode))
-        if (s('.fullscreen-toggle')) ToggleSwitch.Tokens[`fullscreen-toggle`].click();
+        if (s('.fullscreen')) ToggleSwitch.Tokens[`fullscreen`].click();
     };
-    setTimeout(
-      () => (s(`.toggle-form-container-fullscreen`).onclick = () => ToggleSwitch.Tokens[`fullscreen-toggle`].click()),
-    );
-    return html`<div class="in section-mp toggle-form-container toggle-form-container-fullscreen hover">
-      <div class="fl ">
-        <div class="in fll" style="width: 70%">
-          <div class="in"><i class="fa-solid fa-expand"></i> ${Translate.Render('fullscreen')}</div>
-        </div>
-        <div class="in fll" style="width: 30%">
-          ${await ToggleSwitch.Render({
-            id: 'fullscreen-toggle',
-            containerClass: 'inl',
-            disabledOnClick: true,
-            checked: fullScreenSwitch,
-            on: {
-              unchecked: () => {
-                fullScreenSwitch = false;
-                if (checkFullScreen()) fullScreenOut();
-              },
-              checked: () => {
-                fullScreenSwitch = true;
-                if (!checkFullScreen()) fullScreenIn();
-              },
-            },
-          })}
-        </div>
-      </div>
+    return html`<div class="in section-mp">
+      ${await ToggleSwitch.Render({
+        wrapper: true,
+        wrapperLabel: html`<i class="fa-solid fa-expand"></i> ${Translate.Render('fullscreen')}`,
+        id: 'fullscreen',
+        disabledOnClick: true,
+        checked: fullScreenSwitch,
+        on: {
+          unchecked: () => {
+            fullScreenSwitch = false;
+            if (checkFullScreen()) fullScreenOut();
+          },
+          checked: () => {
+            fullScreenSwitch = true;
+            if (!checkFullScreen()) fullScreenIn();
+          },
+        },
+      })}
     </div>`;
   },
 };

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

@@ -65,6 +65,7 @@ const 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}"` : ''}
@@ -359,4 +360,9 @@ const InputFile = {
   },
 };
 
-export { Input, InputFile, fileFormDataFactory, getSrcFromFileData, getFileFromFileData };
+function isTextInputFocused() {
+  const active = document.activeElement;
+  return active && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA');
+}
+
+export { Input, InputFile, fileFormDataFactory, getSrcFromFileData, getFileFromFileData, isTextInputFocused };

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

@@ -189,6 +189,9 @@ const LogIn = {
       </form>
     `;
   },
+  cleanMainUser: () => {
+    LogIn.Scope.user.main.model.user = {};
+  },
 };
 
 export { LogIn };

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

@@ -8,7 +8,7 @@ import { Webhook } from './Webhook.js';
 const LogOut = {
   Event: {},
   Trigger: async function (options) {
-    LogIn.Scope.user.main.model.user = {};
+    LogIn.cleanMainUser();
     await Webhook.unregister();
     for (const eventKey of Object.keys(this.Event)) await this.Event[eventKey](options);
     if (s(`.session`))

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

@@ -28,7 +28,7 @@ import { setDocTitle, closeModalRouteChangeEvent, handleModalViewRoute } from '.
 import { NotificationManager } from './NotificationManager.js';
 import { EventsUI } from './EventsUI.js';
 import { Translate } from './Translate.js';
-import { Input } from './Input.js';
+import { Input, isTextInputFocused } from './Input.js';
 import { Validator } from './Validator.js';
 import { DropDown } from './DropDown.js';
 import { Keyboard } from './Keyboard.js';
@@ -51,6 +51,7 @@ const Modal = {
       RouterInstance: {},
       disableTools: [],
       observer: false,
+      disableBoxShadow: false,
     },
   ) {
     if (options.heightBottomBar === undefined) options.heightBottomBar = 50;
@@ -89,6 +90,11 @@ const Modal = {
       onHome: {},
       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),
     };
 
     if (idModal !== 'main-body' && options.mode !== 'view') {
@@ -117,12 +123,7 @@ const Modal = {
 
           Responsive.Event[`view-${idModal}`] = () => {
             if (!this.Data[idModal]) return delete Responsive.Event[`view-${idModal}`];
-            if (this.Data[idModal].slideMenu)
-              s(`.${idModal}`).style.height = `${
-                window.innerHeight -
-                (options.heightTopBar ? options.heightTopBar : heightDefaultTopBar) -
-                (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar)
-              }px`;
+            if (this.Data[idModal].slideMenu) s(`.${idModal}`).style.height = `${this.Data[idModal].getHeight()}px`;
           };
           Responsive.Event[`view-${idModal}`]();
 
@@ -186,7 +187,7 @@ const Modal = {
                       `.default-slide-menu-top-bar-fix-title-container`,
                       html`
                         <div class="inl default-slide-menu-top-bar-fix-title-container-text">
-                          ${options.RouterInstance.NameApp}
+                          ${options.RouterInstance.BannerAppTemplate}
                         </div>
                       `,
                     );
@@ -207,11 +208,7 @@ const Modal = {
             const { barConfig } = options;
             options.style = {
               position: 'absolute',
-              height: `${
-                window.innerHeight -
-                (options.heightTopBar ? options.heightTopBar : heightDefaultTopBar) -
-                (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar)
-              }px`,
+              height: `${Modal.Data[idModal].getHeight()}px`,
               width: `${slideMenuWidth}px`,
               // 'overflow-x': 'hidden',
               // overflow: 'visible', // required for tooltip
@@ -239,11 +236,7 @@ const Modal = {
                 if (this.Data[_idModal].slideMenu && this.Data[_idModal].slideMenu.id === idModal)
                   this.Data[_idModal].slideMenu.callBack();
               }
-              s(`.${idModal}`).style.height = `${
-                window.innerHeight -
-                (options.heightTopBar ? options.heightTopBar : heightDefaultTopBar) -
-                (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar)
-              }px`;
+              s(`.${idModal}`).style.height = `${Modal.Data[idModal].getHeight()}px`;
               if (s(`.main-body-top`)) {
                 if (Modal.mobileModal()) {
                   if (s(`.btn-menu-${idModal}`).classList.contains('hide') && collapseSlideMenuWidth !== slideMenuWidth)
@@ -502,7 +495,7 @@ const Modal = {
                       class="abs modal slide-menu-top-bar-fix"
                       style="height: ${options.heightTopBar}px; top: 0px"
                     >
-                      <a class="a-link-top-banner">
+                      <a class="a-link-top-banner fl">
                         <div class="inl">${await options.slideMenuTopBarBannerFix()}</div></a
                       >
                     </div>`
@@ -608,6 +601,7 @@ const Modal = {
                     }),
                   );
                   s(`.search-result-btn-${result.routerId}`).onclick = () => {
+                    if (!s(`.html-${searchBoxHistoryId}`) || !s(`.html-${searchBoxHistoryId}`).hasChildNodes()) return;
                     s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex].classList.remove(
                       `main-btn-menu-active`,
                     );
@@ -621,6 +615,7 @@ const Modal = {
               };
 
               const getResultSearchBox = (validatorData) => {
+                if (!s(`.html-${searchBoxHistoryId}`) || !s(`.html-${searchBoxHistoryId}`).hasChildNodes()) return;
                 const { model, id } = validatorData;
                 switch (model) {
                   case 'search-box':
@@ -751,9 +746,12 @@ const Modal = {
                 s(`.main-btn-${results[currentKeyBoardSearchBoxIndex].routerId}`).click();
                 Modal.removeModal(searchBoxHistoryId);
               };
-
+              let boxHistoryDelayRender = 0;
               const searchBoxHistoryOpen = async () => {
-                if (!s(`.${id}`)) {
+                if (boxHistoryDelayRender) return;
+                boxHistoryDelayRender = 1000;
+                setTimeout(() => (boxHistoryDelayRender = 0));
+                if (!s(`.${searchBoxHistoryId}`)) {
                   const { barConfig } = await Themes[Css.currentTheme]();
                   barConfig.buttons.maximize.disabled = true;
                   barConfig.buttons.minimize.disabled = true;
@@ -761,7 +759,7 @@ const Modal = {
                   barConfig.buttons.menu.disabled = true;
                   barConfig.buttons.close.disabled = false;
                   await Modal.Render({
-                    id,
+                    id: searchBoxHistoryId,
                     barConfig,
                     title: html`<div class="search-box-recent-title">
                         ${renderViewTitle({
@@ -962,6 +960,7 @@ const Modal = {
                   heightBottomBar: originHeightBottomBar,
                   barMode: options.barMode,
                   observer: true,
+                  disableBoxShadow: true,
                 });
                 const maxWidthInputSearchBox = 450;
                 const paddingInputSearchBox = 5;
@@ -983,12 +982,7 @@ const Modal = {
                   s(`.top-bar-search-box`).style.top = `${
                     (originHeightTopBar - s(`.top-bar-search-box`).clientHeight) / 2
                   }px`;
-                  if (this.Data[id].slideMenu)
-                    s(`.${id}`).style.height = `${
-                      window.innerHeight -
-                      (options.heightTopBar ? options.heightTopBar : heightDefaultTopBar) -
-                      (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar)
-                    }px`;
+                  if (this.Data[id].slideMenu) s(`.${id}`).style.height = `${Modal.Data[id].getHeight()}px`;
                 };
                 Responsive.Event[`view-${id}`]();
                 Keyboard.instanceMultiPressKey({
@@ -998,6 +992,7 @@ const Modal = {
                     ['Alt', 'k'],
                   ],
                   eventCallBack: () => {
+                    if (isTextInputFocused()) return;
                     if (s(`.top-bar-search-box`)) {
                       if (s(`.main-body-btn-ui-close`).classList.contains('hide')) {
                         s(`.main-body-btn-ui-open`).click();
@@ -1116,9 +1111,7 @@ const Modal = {
                     if (!this.Data[id] || !s(`.${id}`)) return delete Responsive.Event[`view-${id}`];
                     //  <div class="in fll right-offset-menu-bottom-bar" style="height: 100%"></div>
                     // s(`.right-offset-menu-bottom-bar`).style.width = `${window.innerWidth - slideMenuWidth}px`;
-                    s(`.${id}`).style.top = `${
-                      window.innerHeight - (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar)
-                    }px`;
+                    s(`.${id}`).style.top = `${Modal.Data[id].getTop()}px`;
                   };
                   Responsive.Event[`view-${id}`]();
                 }
@@ -1157,7 +1150,7 @@ const Modal = {
                   if (s(`.slide-menu-top-bar-fix`)) {
                     htmls(
                       `.slide-menu-top-bar-fix`,
-                      html`<a class="a-link-top-banner">${await options.slideMenuTopBarBannerFix()}</a>`,
+                      html`<a class="a-link-top-banner fl">${await options.slideMenuTopBarBannerFix()}</a>`,
                     );
                     Modal.setTopBannerLink();
                   }
@@ -1290,11 +1283,7 @@ const Modal = {
                     s(`.main-body-btn-ui-close`).classList.contains('hide') &&
                     s(`.btn-restore-${id}`).style.display !== 'none'
                       ? `${window.innerHeight}px`
-                      : `${
-                          window.innerHeight -
-                          (options.heightTopBar ? options.heightTopBar : heightDefaultTopBar) -
-                          (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar)
-                        }px`;
+                      : `${Modal.Data[id].getHeight()}px`;
 
                   if (
                     s(`.main-body-btn-ui-close`).classList.contains('hide') &&
@@ -1402,7 +1391,11 @@ const Modal = {
         }
       </style>
       ${renderStyleTag(`style-${idModal}`, `.${idModal}`, options)}
-      <div class="fix ${options && options.class ? options.class : ''} modal box-shadow ${idModal}">
+      <div
+        class="fix ${options && options.class ? options.class : ''} modal ${options.disableBoxShadow
+          ? ''
+          : 'box-shadow'} ${idModal}"
+      >
         <div class="abs modal-handle-${idModal}"></div>
         <div class="in modal-html-${idModal}">
           <div class="stq bar-default-modal bar-default-modal-${idModal}">
@@ -1915,11 +1908,7 @@ const Modal = {
             if (s(`.btn-restore-${idModal}`) && s(`.btn-restore-${idModal}`).style.display !== 'none') {
               s(`.${idModal}`).style.height = s(`.main-body-btn-ui-close`).classList.contains('hide')
                 ? `${window.innerHeight}px`
-                : `${
-                    window.innerHeight -
-                    (options.heightTopBar ? options.heightTopBar : heightDefaultTopBar) -
-                    (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar)
-                  }px`;
+                : `${Modal.Data[idModal].getHeight()}px`;
             }
             s(`.${idModal}`).style.top = s(`.main-body-btn-ui-close`).classList.contains('hide')
               ? `0px`