underpost 2.7.83 → 2.7.92

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',
@@ -726,6 +827,7 @@ const Modal = {
                   heightTopBar: originHeightTopBar,
                   heightBottomBar: originHeightBottomBar,
                   barMode: options.barMode,
+                  observer: true,
                 });
                 const maxWidthInputSearchBox = 450;
                 const paddingInputSearchBox = 5;
@@ -970,11 +1072,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 +1164,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 +1254,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 +1274,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 +1320,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 +1337,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 +1352,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 +1365,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 +1529,26 @@ 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;
+            if (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`;
+              s(`.${idModal}`).style.top = s(`.main-body-btn-ui-close`).classList.contains('hide')
+                ? `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 +1744,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: {},
@@ -18,9 +21,9 @@ const Responsive = {
     ResponsiveDataAmplitude.height = ResponsiveDataAmplitude.height * dimAmplitude;
     return ResponsiveDataAmplitude;
   },
-  resizeCallback: function () {
+  resizeCallback: function (force) {
     const Data = getResponsiveData();
-    if (Data.minValue !== Responsive.Data.minValue || Data.maxValue !== Responsive.Data.maxValue) {
+    if (force === true || Data.minValue !== Responsive.Data.minValue || Data.maxValue !== Responsive.Data.maxValue) {
       Responsive.Data = Data;
       Responsive.triggerEvents();
     }
@@ -28,13 +31,13 @@ const Responsive = {
   resize: 0,
   Init: async function () {
     Responsive.resizeCallback();
-    window.onresize = () => {
+    window.onresize = (e, force) => {
       Responsive.resize++;
       const resize = Responsive.resize;
-      Responsive.resizeCallback();
+      Responsive.resizeCallback(force);
       setTimeout(() => {
         if (resize === Responsive.resize) {
-          Responsive.resizeCallback();
+          Responsive.resizeCallback(force);
           Responsive.resize = 0;
           for (const event of Object.keys(Responsive.DelayEvent)) Responsive.DelayEvent[event]();
         }
@@ -43,11 +46,37 @@ 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({}, true));
+      Responsive.triggerEventsOrientation();
+    });
+    Responsive.matchMediaOrientationInstance = matchMedia('screen and (orientation:portrait)');
+
+    Responsive.matchMediaOrientationInstance.onchange = (e) => {
+      console.log('orientation change', Responsive.matchMediaOrientationInstance.matches ? 'portrait' : 'landscape');
+      // though beware square will be marked as landscape here,
+      // if you want to handle this special case
+      // create an other mediaquery (orientation:landscape)
+      setTimeout(() => window.onresize({}, true));
+      Responsive.triggerEventsOrientation();
+    };
+  },
+  triggerEventsOrientation: function () {
+    for (const event of Object.keys(this.orientationEvent)) this.orientationEvent[event]();
+    setTimeout(() => {
+      window.onresize();
+      for (const event of Object.keys(this.orientationDelayEvent)) this.orientationDelayEvent[event]();
+    }, 1500);
   },
   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

@@ -66,11 +66,7 @@ const Translate = {
 
 const TranslateCore = {
   Init: async function () {
-    s('html').lang = localStorage.getItem('lang')
-      ? localStorage.getItem('lang')
-      : getLang() && getLang().match('es')
-      ? 'es'
-      : 'en';
+    s('html').lang = getLang();
     Translate.Data = {
       ...Translate.Data,
       isEmpty: {
@@ -252,6 +248,26 @@ const TranslateCore = {
           en: 'Comments',
           es: 'Comentarios',
         },
+        ['server-maintenance']: {
+          en: "The server is under maintenance <br> we'll be back soon.",
+          es: 'El servidor está en mantenimiento <br> volveremos pronto.',
+        },
+        ['no-internet-connection']: {
+          en: 'No internet connection <br> verify your network',
+          es: 'Sin conexión a internet <br> verifica tu red',
+        },
+        ['page-not-found']: {
+          en: 'Page not found',
+          es: 'Página no encontrada',
+        },
+        ['page-broken']: {
+          es: 'Algo salio mal',
+          en: 'Something went wrong',
+        },
+        ['back']: {
+          en: 'Back to <br>  homepage',
+          es: 'Volver a  <br> la pagina principal',
+        },
       },
     };
     Translate.Data['warning-upload-no-selects-file'] = {

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

@@ -428,7 +428,8 @@ const isDevInstance = () => location.origin.match('localhost') && location.port;
 
 const getDataFromInputFile = async (file) => Array.from(new Uint8Array(await file.arrayBuffer()));
 
-const getLang = () => navigator.language || navigator.userLanguage;
+const getLang = () =>
+  (localStorage.getItem('lang') || navigator.language || navigator.userLanguage || s('html').lang).slice(0, 2);
 
 export {
   s,

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

@@ -13,6 +13,15 @@ const Worker = {
   devMode: () => location.origin.match('localhost') || location.origin.match('127.0.0.1'),
   instance: async function ({ router, render }) {
     logger.warn('Init');
+    window.ononline = async () => {
+      logger.warn('ononline');
+    };
+    window.onoffline = async () => {
+      logger.warn('onoffline');
+    };
+    setTimeout(() => {
+      if ('onLine' in navigator && navigator.onLine) window.ononline();
+    });
     navigator.serviceWorker.addEventListener('controllerchange', () => {
       logger.info('The controller of current browsing context has changed.');
     });
@@ -48,11 +57,9 @@ const Worker = {
       // channel.postMessage({ title: 'Hello from Client broadcast message' });
       // channel.close();
     });
+    this.RouterInstance = router();
     const isInstall = await this.status();
     if (!isInstall) await this.install();
-    else await this.update();
-    // else if (location.hostname === 'localhost') await this.update();
-    this.RouterInstance = router();
     await render();
     LoadRouter(this.RouterInstance);
     LoadingAnimation.removeSplashScreen();
@@ -61,9 +68,9 @@ const Worker = {
       // Dev mode
 
       window.addEventListener('visibilitychange', (event) => {
-        if (document.visibilityState === 'visible') {
-          Worker.reload(delayLiveReload);
-        }
+        // if (document.visibilityState === 'visible') {
+        //   Worker.reload(delayLiveReload);
+        // }
       });
       window.addEventListener('focus', function () {
         // Worker.reload(delayLiveReload);
@@ -90,21 +97,11 @@ const Worker = {
     if (isInstall) {
       const cacheNames = await caches.keys();
       for (const cacheName of cacheNames) {
-        if (
-          cacheName.match('components/') ||
-          cacheName.match('services/') ||
-          cacheName.match('.index.js') ||
-          cacheName.match('offline.')
-        ) {
+        if (cacheName.match('components/') || cacheName.match('services/') || cacheName.match('.index.js')) {
           await caches.delete(cacheName);
         }
       }
       await this.updateServiceWorker();
-      try {
-        await fetch('/offline.html');
-      } catch (error) {
-        logger.error('error');
-      }
     }
   },
   updateServiceWorker: async function () {},
@@ -143,7 +140,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',