underpost 2.8.845 → 2.8.847

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: 80px;
+                      height: 80px;
+                      padding: 10px;
+                    }
+                    .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',
@@ -243,8 +308,17 @@ const Modal = {
                     style="top: ${options.heightTopBar + 50}px; z-index: 9; ${true ||
                     (options.mode && options.mode.match('right'))
                       ? 'right'
-                      : 'left'}: 50px; width: 50px; height: 100px; transition: .3s"
+                      : 'left'}: 50px; width: 50px; height: 150px; transition: .3s"
                   >
+                    <div
+                      class="abs main-body-btn main-body-btn-ui"
+                      style="top: 0px; ${true || (options.mode && options.mode.match('right')) ? 'right' : 'left'}: 0px"
+                    >
+                      <div class="abs center">
+                        <i class="fas fa-caret-down main-body-btn-ui-open hide"></i>
+                        <i class="fas fa-caret-up main-body-btn-ui-close"></i>
+                      </div>
+                    </div>
                     <div
                       class="abs main-body-btn main-body-btn-menu"
                       style="top: 50px; ${true || (options.mode && options.mode.match('right'))
@@ -257,15 +331,18 @@ const Modal = {
                       </div>
                     </div>
                     <div
-                      class="abs main-body-btn main-body-btn-ui"
-                      style="top: 0px; ${true || (options.mode && options.mode.match('right')) ? 'right' : 'left'}: 0px"
+                      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"
                     >
                       <div class="abs center">
-                        <i class="fas fa-caret-down main-body-btn-ui-open hide"></i>
-                        <i class="fas fa-caret-up main-body-btn-ui-close"></i>
+                        <i class="fa-solid fa-magnifying-glass main-body-btn-ui-bar-custom-open"></i>
+                        <i class="fa-solid fa-home hide main-body-btn-ui-bar-custom-close"></i>
                       </div>
                     </div>
-                    <div class="main-body-btn-container-custom"></div>
                   </div>
                 `,
               );
@@ -274,6 +351,22 @@ const Modal = {
                 Modal.actionBtnCenter();
               };
 
+              s(`.main-body-btn-bar-custom`).onclick = () => {
+                if (s(`.main-body-btn-ui-close`).classList.contains('hide')) {
+                  s(`.main-body-btn-ui`).click();
+                }
+                if (s(`.main-body-btn-ui-bar-custom-open`).classList.contains('hide')) {
+                  s(`.main-body-btn-ui-bar-custom-open`).classList.remove('hide');
+                  s(`.main-body-btn-ui-bar-custom-close`).classList.add('hide');
+                  s(`.slide-menu-top-bar-fix`).style.top = '0px';
+                } else {
+                  s(`.main-body-btn-ui-bar-custom-open`).classList.add('hide');
+                  s(`.main-body-btn-ui-bar-custom-close`).classList.remove('hide');
+                  s(`.slide-menu-top-bar-fix`).style.top = '-100px';
+                  s(`.top-bar-search-box-container`).click();
+                }
+              };
+
               let _heightTopBar, _heightBottomBar, _topMenu;
               s(`.main-body-btn-ui`).onclick = () => {
                 if (s(`.main-body-btn-ui-open`).classList.contains('hide')) {
@@ -319,6 +412,7 @@ const Modal = {
                   );
                 }
               };
+              Modal.setTopBannerLink();
             });
 
             const inputSearchBoxId = `top-bar-search-box`;
@@ -403,9 +497,12 @@ const Modal = {
                     })}
                   </div>
                 </div>
-                ${options?.slideMenuTopBarFix
-                  ? html`<div class="abs modal slide-menu-top-bar-fix" style="height: ${options.heightTopBar}px">
-                      ${await options.slideMenuTopBarFix()}
+                ${options?.slideMenuTopBarBannerFix
+                  ? html`<div
+                      class="abs modal slide-menu-top-bar-fix"
+                      style="height: ${options.heightTopBar}px; top: 0px"
+                    >
+                      <a class="a-link-top-banner"> ${await options.slideMenuTopBarBannerFix()}</a>
                     </div>`
                   : ''}
               </div>`,
@@ -598,7 +695,16 @@ const Modal = {
                   Modal.removeModal(searchBoxHistoryId);
                   return;
                 }
-                setTimeout(() => getResultSearchBox(validatorData));
+                setTimeout(() => {
+                  getResultSearchBox(validatorData);
+
+                  if (
+                    s(`.slide-menu-top-bar-fix`) &&
+                    !s(`.main-body-btn-ui-bar-custom-open`).classList.contains('hide')
+                  ) {
+                    s(`.main-body-btn-bar-custom`).click();
+                  }
+                });
               };
 
               const getDefaultSearchBoxSelector = () => `.search-result-btn-${currentKeyBoardSearchBoxIndex}`;
@@ -691,7 +797,6 @@ const Modal = {
                   Modal.MoveTitleToBar(id);
 
                   prepend(`.btn-bar-modal-container-${id}`, html`<div class="hide">${inputInfoNode.outerHTML}</div>`);
-                  if (s(`.slide-menu-top-bar-fix`)) s(`.slide-menu-top-bar-fix`).classList.add('hide');
                 }
               };
 
@@ -711,7 +816,6 @@ const Modal = {
                   } catch (e) {}
                 }
                 Modal.removeModal(searchBoxHistoryId);
-                if (s(`.slide-menu-top-bar-fix`)) s(`.slide-menu-top-bar-fix`).classList.remove('hide');
               };
               s('.top-bar-search-box').onblur = () => {
                 hoverFocusCtl.checkDismiss();
@@ -1025,7 +1129,7 @@ const Modal = {
                   await Modal.onHomeRouterEvent();
                   Object.keys(this.Data[idModal].onHome).map((keyListener) => this.Data[idModal].onHome[keyListener]());
                 });
-                EventsUI.onClick(`.action-btn-app-icon`, () => Modal.onHomeRouterEvent());
+                EventsUI.onClick(`.action-btn-app-icon`, () => s(`.action-btn-home`).click());
                 Keyboard.instanceMultiPressKey({
                   id: 'input-shortcut-global-escape',
                   keys: ['Escape'],
@@ -1036,11 +1140,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']();
 
@@ -1435,7 +1546,8 @@ const Modal = {
           setDocTitle({ ...options.RouterInstance, route: '' });
         };
         s(`.main-btn-home`).onclick = async () => {
-          await this.onHomeRouterEvent();
+          // await this.onHomeRouterEvent();
+          s(`.action-btn-home`).click();
         };
         EventsUI.onClick(`.btn-icon-menu-back`, backMenuButtonEvent);
         EventsUI.onClick(`.btn-icon-menu-mode`, () => {
@@ -2101,6 +2213,16 @@ 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) => {
+        if (location.pathname === '/') return location.reload();
+        e.preventDefault();
+        s(`.action-btn-home`).click();
+      });
+    }
+  },
   headerTitleHeight: 40,
   actionBtnCenter: function () {
     if (!s(`.btn-close-modal-menu`).classList.contains('hide')) {