underpost 2.7.7 → 2.7.9

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

@@ -86,6 +86,7 @@ const Modal = {
       onDragEndListener: {},
       onObserverListener: {},
       onClickListener: {},
+      onExpandUiListener: {},
       query: options.query ? `${window.location.search}` : undefined,
     };
     if (options && 'mode' in options) {
@@ -191,11 +192,20 @@ const Modal = {
               s(`.${idModal}`).style.width = `${this.Data[idModal][options.mode].width}px`;
               s(`.html-${idModal}`).style.display = 'block';
               // s(`.title-modal-${idModal}`).style.display = 'block';
-              if (s(`.main-body-top`)) {
-                s(`.btn-bar-center-icon-close`).classList.remove('hide');
-                s(`.btn-bar-center-icon-menu`).classList.add('hide');
-              }
+              setTimeout(() => {
+                s(`.main-body-btn-ui-menu-menu`).classList.add('hide');
+                s(`.main-body-btn-ui-menu-close`).classList.remove('hide');
+                if (s(`.btn-bar-center-icon-menu`)) {
+                  s(`.btn-bar-center-icon-close`).classList.remove('hide');
+                  s(`.btn-bar-center-icon-menu`).classList.add('hide');
+                }
+              });
 
+              setTimeout(() => {
+                s(`.main-body-btn-container`).style[
+                  true || (options.mode && options.mode.match('right')) ? 'right' : 'left'
+                ] = options.mode && options.mode.match('right') ? `${slideMenuWidth}px` : '0px';
+              });
               Responsive.Event[`slide-menu-${idModal}`]();
             };
             barConfig.buttons.close.onClick = () => {
@@ -204,15 +214,106 @@ 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';
-              if (s(`.main-body-top`)) {
-                s(`.btn-bar-center-icon-menu`).classList.remove('hide');
-                s(`.btn-bar-center-icon-close`).classList.add('hide');
-              }
+              setTimeout(() => {
+                s(`.main-body-btn-ui-menu-close`).classList.add('hide');
+                s(`.main-body-btn-ui-menu-menu`).classList.remove('hide');
+                if (s(`.btn-bar-center-icon-menu`)) {
+                  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`;
+              });
               Responsive.Event[`slide-menu-${idModal}`]();
             };
             transition += `, width 0.3s`;
 
+            setTimeout(() => {
+              append(
+                'body',
+                html`
+                  <div
+                    class="abs main-body-btn-container"
+                    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"
+                  >
+                    <div
+                      class="abs main-body-btn main-body-btn-menu"
+                      style="top: 50px; ${true || (options.mode && options.mode.match('right'))
+                        ? 'right'
+                        : 'left'}: 0px"
+                    >
+                      <div class="abs center">
+                        <i class="fa-solid fa-xmark hide main-body-btn-ui-menu-close"></i>
+                        <i class="fa-solid fa-bars main-body-btn-ui-menu-menu"></i>
+                      </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"
+                    >
+                      <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>
+                `,
+              );
+
+              s(`.main-body-btn-menu`).onclick = () => {
+                Modal.actionBtnCenter();
+              };
+
+              let _heightTopBar, _heightBottomBar, _topMenu;
+              s(`.main-body-btn-ui`).onclick = () => {
+                if (s(`.main-body-btn-ui-open`).classList.contains('hide')) {
+                  s(`.main-body-btn-ui-open`).classList.remove('hide');
+                  s(`.main-body-btn-ui-close`).classList.add('hide');
+                  _heightTopBar = newInstance(options.heightTopBar);
+                  _heightBottomBar = newInstance(options.heightBottomBar);
+                  _topMenu = newInstance(s(`.modal-menu`).style.top);
+                  options.heightTopBar = 0;
+                  options.heightBottomBar = 0;
+                  s(`.slide-menu-top-bar`).classList.add('hide');
+                  s(`.bottom-bar`).classList.add('hide');
+                  s(`.modal-menu`).style.top = '0px';
+                  s(`.main-body-btn-container`).style.top = '50px';
+                  s(`.main-body`).style.top = '0px';
+                } else {
+                  s(`.main-body-btn-ui-close`).classList.remove('hide');
+                  s(`.main-body-btn-ui-open`).classList.add('hide');
+                  options.heightTopBar = _heightTopBar;
+                  options.heightBottomBar = _heightBottomBar;
+                  s(`.modal-menu`).style.top = _topMenu;
+                  s(`.main-body-btn-container`).style.top = `${options.heightTopBar + 50}px`;
+                  s(`.slide-menu-top-bar`).classList.remove('hide');
+                  s(`.bottom-bar`).classList.remove('hide');
+                  s(`.main-body`).style.top = `${options.heightTopBar}px`;
+                }
+                Responsive.Event[`slide-menu-modal-menu`]();
+                Object.keys(this.Data).map((_idModal) => {
+                  if (this.Data[_idModal].slideMenu) {
+                    if (s(`.btn-maximize-${_idModal}`)) s(`.btn-maximize-${_idModal}`).click();
+                  }
+                });
+                Responsive.Event[`view-${'main-body'}`]();
+                if (Responsive.Event[`view-${'bottom-bar'}`]) Responsive.Event[`view-${'bottom-bar'}`]();
+                if (Responsive.Event[`view-${'main-body-top'}`]) Responsive.Event[`view-${'main-body-top'}`]();
+                for (const keyEvent of Object.keys(this.Data[idModal].onExpandUiListener)) {
+                  this.Data[idModal].onExpandUiListener[keyEvent](
+                    !s(`.main-body-btn-ui-open`).classList.contains('hide'),
+                  );
+                }
+              };
+            });
+
             const inputSearchBoxId = `top-bar-search-box`;
             append(
               'body',
@@ -970,11 +1071,24 @@ const Modal = {
 
                 Responsive.Event[`view-${id}`] = () => {
                   if (!this.Data[id] || !s(`.${id}`)) return delete Responsive.Event[`view-${id}`];
-                  s(`.${id}`).style.height = `${
-                    window.innerHeight -
-                    (options.heightTopBar ? options.heightTopBar : heightDefaultTopBar) -
-                    (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar)
-                  }px`;
+                  s(`.${id}`).style.height =
+                    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`;
+
+                  if (
+                    s(`.main-body-btn-ui-close`).classList.contains('hide') &&
+                    s(`.btn-restore-${id}`).style.display !== 'none'
+                  ) {
+                    s(`.${id}`).style.top = '0px';
+                  } else {
+                    s(`.${id}`).style.top = `${options.heightTopBar ? options.heightTopBar : heightDefaultTopBar}px`;
+                  }
                 };
                 Responsive.Event[`view-${id}`]();
 
@@ -1049,6 +1163,28 @@ const Modal = {
           top: 5%;
           left: 5%;
         }
+        .sub-menu-title-container-${idModal},
+        .nav-path-container-${idModal} {
+          top: 0px;
+          left: 0px;
+          width: 200px;
+          height: 50px;
+          overflow: hidden;
+          font-size: 20px;
+          cursor: default;
+        }
+        .nav-path-display-${idModal} {
+          font-size: 11px;
+          width: 100%;
+          top: 35px;
+          left: 37px;
+        }
+        .nav-title-display-${idModal} {
+          font-size: 19px;
+          width: 100%;
+          top: 13px;
+          left: 13px;
+        }
       </style>
       ${renderStyleTag(`style-${idModal}`, `.${idModal}`, options)}
       <div class="fix ${options && options.class ? options.class : ''} modal box-shadow ${idModal}">
@@ -1117,7 +1253,10 @@ const Modal = {
 
           <div class="in html-${idModal}">
             ${options.mode && options.mode.match('slide-menu')
-              ? html`<div class="in" style="${renderCssAttr({ style: { height: '50px' } })}">
+              ? html`<div
+                  class="stq modal"
+                  style="${renderCssAttr({ style: { height: '50px', 'z-index': 1, top: '0px' } })}"
+                >
                   ${await BtnIcon.Render({
                     style: renderCssAttr({ style: { height: '100%', color: '#5f5f5f' } }),
                     class: `in flr main-btn-menu action-bar-box btn-icon-menu-mode`,
@@ -1134,6 +1273,19 @@ const Modal = {
                       ></i>
                     </div>`,
                   })}
+                  ${await BtnIcon.Render({
+                    style: renderCssAttr({ style: { height: '100%', color: '#5f5f5f' } }),
+                    class: `in flr main-btn-menu action-bar-box btn-icon-menu-back hide`,
+                    label: html`<div class="abs center"><i class="fas fa-undo-alt"></i></div>`,
+                  })}
+                  <div class="abs sub-menu-title-container-${idModal} ac">
+                    <div class="abs nav-title-display-${idModal}">
+                      <!-- <i class="fas fa-home"></i> ${Translate.Render('home')} -->
+                    </div>
+                  </div>
+                  <div class="abs nav-path-container-${idModal} ahc bold">
+                    <div class="abs nav-path-display-${idModal}"><!-- ${location.pathname} --></div>
+                  </div>
                 </div>`
               : ''}
             ${options && options.html ? (typeof options.html === 'function' ? await options.html() : options.html) : ''}
@@ -1167,6 +1319,15 @@ const Modal = {
       case 'slide-menu':
       case 'slide-menu-right':
       case 'slide-menu-left':
+        const backMenuButtonEvent = async () => {
+          if (location.pathname !== getProxyPath()) setPath(getProxyPath());
+          if (s(`.menu-btn-container-children`)) htmls(`.menu-btn-container-children`, '');
+          // htmls(`.nav-title-display-${'modal-menu'}`, html`<i class="fas fa-home"></i> ${Translate.Render('home')}`);
+          htmls(`.nav-title-display-${'modal-menu'}`, html``);
+          htmls(`.nav-path-display-${idModal}`, '');
+          s(`.btn-icon-menu-back`).classList.add('hide');
+          if (s(`.menu-btn-container-main`)) s(`.menu-btn-container-main`).classList.remove('hide');
+        };
         s(`.main-btn-home`).onclick = () => {
           for (const keyModal of Object.keys(this.Data)) {
             if (
@@ -1175,9 +1336,11 @@ const Modal = {
                 .includes(keyModal)
             )
               s(`.btn-close-${keyModal}`).click();
+            backMenuButtonEvent();
           }
           s(`.btn-close-modal-menu`).click();
         };
+        EventsUI.onClick(`.btn-icon-menu-back`, backMenuButtonEvent);
         EventsUI.onClick(`.btn-icon-menu-mode`, () => {
           if (s(`.btn-icon-menu-mode-right`).classList.contains('hide')) {
             s(`.btn-icon-menu-mode-right`).classList.remove('hide');
@@ -1188,6 +1351,12 @@ const Modal = {
           }
           if (slideMenuWidth === originSlideMenuWidth) {
             slideMenuWidth = collapseSlideMenuWidth;
+            setTimeout(() => {
+              s(`.main-body-btn-container`).style[
+                true || (options.mode && options.mode.match('right')) ? 'right' : 'left'
+              ] = options.mode && options.mode.match('right') ? `${slideMenuWidth}px` : '0px';
+            }, 1);
+
             if (!s(`.btn-bar-center-icon-close`).classList.contains('hide')) {
               sa(`.handle-btn-container`).forEach((el) => el.classList.add('hide'));
               sa(`.menu-label-text`).forEach((el) => el.classList.add('hide'));
@@ -1195,18 +1364,32 @@ const Modal = {
                 sa(`.tooltip-menu`).forEach((el) => el.classList.remove('hide'));
                 s(`.${idModal}`).style.overflow = 'visible';
               }
+              if (s(`.menu-btn-container-main`) && s(`.menu-btn-container-main`).classList.contains('hide'))
+                s(`.btn-icon-menu-back`).classList.add('hide');
             }
             if (options.onCollapseMenu) options.onCollapseMenu();
+            s(`.sub-menu-title-container-${'modal-menu'}`).classList.add('hide');
+            s(`.nav-path-container-${'modal-menu'}`).classList.add('hide');
           } else {
             slideMenuWidth = originSlideMenuWidth;
+            setTimeout(() => {
+              s(`.main-body-btn-container`).style[
+                true || (options.mode && options.mode.match('right')) ? 'right' : 'left'
+              ] = options.mode && options.mode.match('right') ? `${slideMenuWidth}px` : '0px';
+            }, 1);
+
             sa(`.handle-btn-container`).forEach((el) => el.classList.remove('hide'));
             sa(`.menu-label-text`).forEach((el) => el.classList.remove('hide'));
             if (!Modal.mobileModal()) {
               sa(`.tooltip-menu`).forEach((el) => el.classList.add('hide'));
               s(`.${idModal}`).style.overflow = null;
             }
+            if (s(`.menu-btn-container-main`) && s(`.menu-btn-container-main`).classList.contains('hide'))
+              s(`.btn-icon-menu-back`).classList.remove('hide');
 
             if (options.onExtendMenu) options.onExtendMenu();
+            s(`.sub-menu-title-container-${'modal-menu'}`).classList.remove('hide');
+            s(`.nav-path-container-${'modal-menu'}`).classList.remove('hide');
           }
           // btn-bar-center-icon-menu
           this.actionBtnCenter();
@@ -1345,13 +1528,28 @@ const Modal = {
           callBack,
           id: options.slideMenu,
         };
-        s(`.${idModal}`).style.height = `${
-          window.innerHeight -
-          (options.heightTopBar ? options.heightTopBar : heightDefaultTopBar) -
-          (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar)
-        }px`;
-        s(`.${idModal}`).style.top = `${options.heightTopBar ? options.heightTopBar : heightDefaultTopBar}px`;
+        Responsive.Event['h-ui-hide-' + idModal] = () => {
+          setTimeout(() => {
+            if (!s(`.${idModal}`) || !s(`.main-body-btn-ui-close`)) return;
+            s(`.${idModal}`).style.height =
+              s(`.main-body-btn-ui-close`).classList.contains('hide') &&
+              s(`.btn-restore-${idModal}`).style.display !== 'none'
+                ? `${window.innerHeight}px`
+                : `${
+                    window.innerHeight -
+                    (options.heightTopBar ? options.heightTopBar : heightDefaultTopBar) -
+                    (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar)
+                  }px`;
+            s(`.${idModal}`).style.top =
+              s(`.main-body-btn-ui-close`).classList.contains('hide') &&
+              s(`.btn-restore-${idModal}`).style.display !== 'none'
+                ? `0px`
+                : `${options.heightTopBar ? options.heightTopBar : heightDefaultTopBar}px`;
+          });
+        };
+        Responsive.Event['h-ui-hide-' + idModal]();
       } else {
+        delete Responsive.Event['h-ui-hide-' + idModal];
         s(`.${idModal}`).style.width = '100%';
         s(`.${idModal}`).style.height = '100%';
         s(`.${idModal}`).style.top = `${options.heightTopBar ? options.heightTopBar : heightDefaultTopBar}px`;
@@ -1547,8 +1745,12 @@ const Modal = {
   headerTitleHeight: 40,
   actionBtnCenter: function () {
     // if (!s(`.btn-close-modal-menu`).classList.contains('hide')) return s(`.main-btn-home`).click();
-    if (!s(`.btn-close-modal-menu`).classList.contains('hide')) return s(`.btn-close-modal-menu`).click();
-    if (!s(`.btn-menu-modal-menu`).classList.contains('hide')) return s(`.btn-menu-modal-menu`).click();
+    if (!s(`.btn-close-modal-menu`).classList.contains('hide')) {
+      return s(`.btn-close-modal-menu`).click();
+    }
+    if (!s(`.btn-menu-modal-menu`).classList.contains('hide')) {
+      return s(`.btn-menu-modal-menu`).click();
+    }
   },
   cleanUI: function () {
     s(`.top-bar`).classList.add('hide');

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

@@ -507,7 +507,7 @@ const Panel = {
           color: black;
           padding: 10px;
           cursor: pointer;
-          max-height: 400px;
+          min-height: 400px;
           overflow: hidden;
         }
         .${idPanel}:hover {

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

@@ -454,7 +454,8 @@ const PanelForm = {
         },
       });
 
-    if (options.route === 'home') setTimeout(this.Data[idPanel].updatePanel);
+    // if (options.route === 'home') setTimeout(this.Data[idPanel].updatePanel);
+    if (!Auth.getToken()) setTimeout(this.Data[idPanel].updatePanel);
 
     if (options.parentIdModal) {
       htmls(`.html-${options.parentIdModal}`, await renderSrrPanelData());

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

@@ -1,6 +1,9 @@
 import { newInstance } from './CommonJs.js';
+import { loggerFactory } from './Logger.js';
 import { getResponsiveData } from './VanillaJs.js';
 
+const logger = loggerFactory(import.meta);
+
 const Responsive = {
   Data: {},
   Event: {},
@@ -43,11 +46,23 @@ const Responsive = {
     // alternative option
     // this.Observer = new ResizeObserver(this.resizeCallback);
     // this.Observer.observe(document.documentElement);
+    screen.orientation.addEventListener('change', (event) => {
+      const type = event.target.type; // landscape-primary | portrait-primary
+      const angle = event.target.angle; // 90 degrees.
+      logger.info(`ScreenOrientation change: ${type}, ${angle} degrees.`);
+      setTimeout(window.onresize);
+      for (const event of Object.keys(this.orientationEvent)) this.orientationEvent[event]();
+      setTimeout(() => {
+        for (const event of Object.keys(this.orientationDelayEvent)) this.orientationDelayEvent[event]();
+      }, 750);
+    });
   },
   triggerEvents: function (keyEvent) {
     if (keyEvent) return this.Event[keyEvent]();
     return Object.keys(this.Event).map((key) => this.Event[key]());
   },
+  orientationEvent: {},
+  orientationDelayEvent: {},
 };
 
 export { Responsive };

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

@@ -20,14 +20,16 @@ const RichText = {
               s(`.${options.parentIdModal}`).style.top = '0px';
               s(`.${options.parentIdModal}`).style.height = `${window.innerHeight}px`;
             }
-            Modal.cleanUI();
+            // Modal.cleanUI();
+            if (s(`.slide-menu-top-bar`)) s(`.slide-menu-top-bar`).classList.add('hide');
           } else {
             if (options.parentIdModal) {
               s(`.btn-bar-modal-container-${options.parentIdModal}`).classList.remove('hide');
               s(`.${options.parentIdModal}`).style.top = top;
               s(`.${options.parentIdModal}`).style.height = height;
             }
-            Modal.restoreUI();
+            if (s(`.slide-menu-top-bar`)) s(`.slide-menu-top-bar`).classList.add('remove');
+            // Modal.restoreUI();
           }
         },
       });

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

@@ -1,7 +1,7 @@
 import { newInstance, getId, cap, capFirst } from './CommonJs.js';
 import { DropDown } from './DropDown.js';
 import { loggerFactory } from './Logger.js';
-import { s, htmls } from './VanillaJs.js';
+import { s, htmls, getLang } from './VanillaJs.js';
 
 const logger = loggerFactory(import.meta);
 
@@ -66,7 +66,11 @@ const Translate = {
 
 const TranslateCore = {
   Init: async function () {
-    if (localStorage.getItem('lang')) s('html').lang = localStorage.getItem('lang');
+    s('html').lang = localStorage.getItem('lang')
+      ? localStorage.getItem('lang')
+      : getLang() && getLang().match('es')
+      ? 'es'
+      : 'en';
     Translate.Data = {
       ...Translate.Data,
       isEmpty: {

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

@@ -0,0 +1,44 @@
+// https://javascript.info/
+// https://javascript.info/web-components
+
+class MyElement extends HTMLElement {
+  constructor() {
+    super();
+    // element created
+  }
+
+  connectedCallback() {
+    // browser calls this method when the element is added to the document
+    // (can be called many times if an element is repeatedly added/removed)
+  }
+
+  disconnectedCallback() {
+    // browser calls this method when the element is removed from the document
+    // (can be called many times if an element is repeatedly added/removed)
+  }
+
+  static get observedAttributes() {
+    return [
+      /* array of attribute names to monitor for changes */
+    ];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    // called when one of attributes listed above is modified
+  }
+
+  adoptedCallback() {
+    // called when the element is moved to a new document
+    // (happens in document.adoptNode, very rarely used)
+  }
+
+  // there can be other element methods and properties
+}
+
+customElements.define('my-element', MyElement);
+
+// Now for any HTML elements with tag <my-element>,
+// an instance of MyElement is created, and the aforementioned
+// methods are called.
+
+export { MyElement };

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

@@ -51,6 +51,7 @@ const Worker = {
     const isInstall = await this.status();
     if (!isInstall) await this.install();
     else await this.update();
+    await this.updateOfflineSrc();
     // else if (location.hostname === 'localhost') await this.update();
     this.RouterInstance = router();
     await render();
@@ -94,10 +95,10 @@ const Worker = {
           await caches.delete(cacheName);
         }
       }
-      this.updateServiceWorker();
+      await this.updateServiceWorker();
     }
   },
-  updateServiceWorker: function () {},
+  updateServiceWorker: async function () {},
   status: function () {
     let status = false;
     return new Promise((resolve, reject) => {
@@ -110,7 +111,7 @@ const Worker = {
               else if (registration.waiting) logger.info('waiting', registration);
               else if (registration.active) {
                 logger.info('active', registration);
-                this.updateServiceWorker = () => registration.update();
+                this.updateServiceWorker = async () => await registration.update();
               }
             }
             if (registrations.length > 0) status = true;
@@ -133,7 +134,7 @@ const Worker = {
     return new Promise((resolve, reject) => {
       if ('serviceWorker' in navigator) {
         navigator.serviceWorker
-          .register(`/sw.js`, {
+          .register(`${getProxyPath()}sw.js`, {
             // scope: getProxyPath(),
             // scope: '/',
             type: 'module',
@@ -211,6 +212,13 @@ const Worker = {
       }
     });
   },
+  updateOfflineSrc: async function () {
+    try {
+      await fetch(`${getProxyPath()}offline.html`);
+    } catch (error) {
+      logger.error('error');
+    }
+  },
   // TODO: GPS management
   RenderSetting: async function () {
     setTimeout(() => {