@underpostnet/underpost 2.7.83 → 2.7.92

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',

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

@@ -17,6 +17,8 @@ import { Badge } from '../core/Badge.js';
 import { Docs } from '../core/Docs.js';
 import { Recover } from '../core/Recover.js';
 import { DefaultManagement } from '../../services/default/default.management.js';
+import { Page500 } from '../core/500.js';
+import { Page404 } from '../core/404.js';
 
 const MenuDefault = {
   Data: {},
@@ -136,6 +138,28 @@ const MenuDefault = {
             handleContainerClass: 'handle-btn-container',
             tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('default-management')),
           })}
+          ${await BtnIcon.Render({
+            class: 'in wfa main-btn-menu main-btn-404 hide',
+            label: renderMenuLabel({
+              icon: html`<i class="fa-solid fa-triangle-exclamation"></i>`,
+              text: html`<span class="menu-label-text">${Translate.Render('404')}</span>`,
+            }),
+            attrs: `data-id="404"`,
+            tabHref: `${getProxyPath()}404`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('404')),
+          })}
+          ${await BtnIcon.Render({
+            class: 'in wfa main-btn-menu main-btn-500 hide',
+            label: renderMenuLabel({
+              icon: html`<i class="fa-solid fa-circle-exclamation"></i>`,
+              text: html`<span class="menu-label-text">${Translate.Render('500')}</span>`,
+            }),
+            attrs: `data-id="500"`,
+            tabHref: `${getProxyPath()}500`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('500')),
+          })}
         </div>
       `,
       barConfig: newInstance(barConfig),
@@ -383,6 +407,50 @@ const MenuDefault = {
         heightBottomBar,
       });
     });
+
+    EventsUI.onClick(`.main-btn-404`, async () => {
+      const { barConfig } = await Themes[Css.currentTheme]();
+      await Modal.Render({
+        id: 'modal-404',
+        route: '404',
+        barConfig,
+        title: renderViewTitle({
+          icon: html`<i class="fa-solid fa-triangle-exclamation"></i>`,
+          text: Translate.Render('404'),
+        }),
+        html: async () => await Page404.Render({ idModal: 'modal-404' }),
+        handleType: 'bar',
+        maximize: true,
+        mode: 'view',
+        slideMenu: 'modal-menu',
+        RouterInstance,
+        heightTopBar,
+        heightBottomBar,
+        observer: true,
+      });
+    });
+
+    EventsUI.onClick(`.main-btn-500`, async () => {
+      const { barConfig } = await Themes[Css.currentTheme]();
+      await Modal.Render({
+        id: 'modal-500',
+        route: '500',
+        barConfig,
+        title: renderViewTitle({
+          icon: html`<i class="fa-solid fa-circle-exclamation"></i>`,
+          text: Translate.Render('500'),
+        }),
+        html: async () => await Page500.Render({ idModal: 'modal-500' }),
+        handleType: 'bar',
+        maximize: true,
+        mode: 'view',
+        slideMenu: 'modal-menu',
+        RouterInstance,
+        heightTopBar,
+        heightBottomBar,
+        observer: true,
+      });
+    });
   },
 };
 

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

@@ -36,6 +36,8 @@ const RoutesDefault = () => {
       render: () => s(`.main-btn-default-management`).click(),
       translateTitle: true,
     },
+    '/404': { title: '404 Not Found', render: () => s(`.main-btn-404`).click() },
+    '/500': { title: '500 Server Error', render: () => s(`.main-btn-500`).click() },
   };
 };