underpost 2.7.92 → 2.7.93

package/bin/index.js

@@ -19,7 +19,7 @@ const globalBinFolder = `${shellExec(`npm root -g`, {
 
 const program = new Command();
 
-const version = '2.7.92';
+const version = '2.7.93';
 
 program.name('underpost').description(`underpost.net ci/cd cli ${version}`).version(version);
 

package/conf.js

@@ -180,7 +180,7 @@ const DefaultConf = {
   ssr: {
     Default: {
       head: ['Seo', 'Pwa', 'Css', 'DefaultScripts', 'Production'],
-      body: ['CacheControl', 'DefaultSplashScreen'],
+      body: ['CacheControl', 'DefaultSplashScreen', '404', '500'],
       mailer: {
         userVerifyEmail: 'DefaultVerifyEmail',
         userRecoverEmail: 'DefaultRecoverEmail',

package/docker-compose.yml

@@ -58,7 +58,7 @@ services:
           cpus: '0.25'
           memory: 20M
     labels: # labels in Compose file instead of Dockerfile
-      engine.version: '2.7.92'
+      engine.version: '2.7.93'
     networks:
       - load-balancer
 

package/package.json

@@ -2,7 +2,7 @@
   "type": "module",
   "main": "src/index.js",
   "name": "underpost",
-  "version": "2.7.92",
+  "version": "2.7.93",
   "description": "pwa api rest template",
   "scripts": {
     "start": "env-cmd -f .env.production node --max-old-space-size=8192 src/server",

package/src/client/Default.index.js

@@ -9,13 +9,13 @@ import { SignUpDefault } from './components/default/SignUpDefault.js';
 import { MenuDefault } from './components/default/MenuDefault.js';
 import { RouterDefault } from './components/default/RoutesDefault.js';
 import { TranslateDefault } from './components/default/TranslateDefault.js';
-import { getProxyPath } from './components/core/VanillaJs.js';
 import { Worker } from './components/core/Worker.js';
 import { Keyboard } from './components/core/Keyboard.js';
 import { DefaultParams } from './components/default/CommonDefault.js';
 import { SocketIo } from './components/core/SocketIo.js';
 import { SocketIoDefault } from './components/default/SocketIoDefault.js';
 import { ElementsDefault } from './components/default/ElementsDefault.js';
+import { Scroll } from './components/core/Scroll.js';
 
 const htmlMainBody = async () => {
   return html`<span style="color: black; padding: 5px">Hello World!!</span>`;
@@ -35,6 +35,7 @@ window.onload = () =>
       await LogInDefault();
       await LogOutDefault();
       await SignUpDefault();
+      await Scroll.pullTopRefresh();
       await Keyboard.Init({ callBackTime: DefaultParams.EVENT_CALLBACK_TIME });
     },
   });

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

@@ -79,7 +79,7 @@ const Docs = {
       icon: html`<i class="fa-brands fa-osi"></i>`,
       text: 'Source Docs',
       url: function () {
-        return `${getProxyPath()}docs/engine/2.7.92`;
+        return `${getProxyPath()}docs/engine/2.7.93`;
       },
     },
     {

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

@@ -1340,6 +1340,9 @@ const Modal = {
             backMenuButtonEvent();
           }
           s(`.btn-close-modal-menu`).click();
+          if (window.location.pathname !== (getProxyPath() === '/' ? getProxyPath() : `${getProxyPath()}/`))
+            setPath(getProxyPath());
+          setDocTitle({ ...options.RouterInstance, route: '' });
         };
         EventsUI.onClick(`.btn-icon-menu-back`, backMenuButtonEvent);
         EventsUI.onClick(`.btn-icon-menu-mode`, () => {

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

@@ -1,4 +1,5 @@
-import { s } from './VanillaJs.js';
+import { borderChar } from './Css.js';
+import { append, s } from './VanillaJs.js';
 
 const Scroll = {
   data: {},
@@ -29,6 +30,69 @@ const Scroll = {
       behavior: options.behavior || 'smooth',
     });
   },
+  pullTopRefresh: function () {
+    append(
+      'body',
+      html` <style>
+          .pull-refresh-icon-container {
+            height: 60px;
+            width: 100%;
+            z-index: 10;
+            transition: 0.3s;
+            left: 0px;
+          }
+          .pull-refresh-icon {
+            width: 60px;
+            height: 60px;
+            margin: auto;
+            color: white;
+            font-size: 30px;
+          }
+        </style>
+        ${borderChar(2, 'black', [' .pull-refresh-icon-container'])}
+        <div style="top: -60px" class="abs pull-refresh-icon-container">
+          <div class="in pull-refresh-icon">
+            <div class="abs center"><i class="fa-solid fa-arrows-rotate"></i></div>
+          </div>
+        </div>`,
+    );
+
+    let touchstartY = 0;
+    let reload = false;
+    const minHeightDragReload = 3;
+    const maxHeightDragReload = 20;
+
+    document.addEventListener('touchstart', (e) => {
+      touchstartY = e.touches[0].clientY;
+      // console.warn('touchstart', touchstartY);
+    });
+
+    document.addEventListener('touchmove', (e) => {
+      const touchY = e.touches[0].clientY;
+      const touchDiff = touchY - touchstartY;
+
+      // console.warn('touchDiff', touchDiff, maxHeightDragReload);
+
+      if (touchDiff > maxHeightDragReload)
+        s(`.pull-refresh-icon-container`).style.top = 60 + maxHeightDragReload + 'px';
+      else s(`.pull-refresh-icon-container`).style.top = 60 + touchDiff + 'px';
+
+      if (touchDiff > minHeightDragReload && window.scrollY === 0) {
+        reload = true;
+      } else {
+        reload = false;
+      }
+    });
+    document.addEventListener('touchend', (e) => {
+      // console.warn('touchend');
+      s(`.pull-refresh-icon-container`).style.top = '-60px';
+      if (reload) {
+        location.reload();
+        // console.warn('reload');
+      }
+      reload = false;
+    });
+  },
 };
 
 export { Scroll };

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

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

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

@@ -172,6 +172,7 @@ const MenuDefault = {
         return '';
       },
       mode: 'slide-menu',
+      RouterInstance,
       heightTopBar,
       heightBottomBar,
       htmlMainBody: options?.htmlMainBody ? options.htmlMainBody : undefined,

package/src/client/ssr/body/404.js

@@ -0,0 +1,73 @@
+const s = (el) => document.querySelector(el);
+
+const append = (el, html) => s(el).insertAdjacentHTML('beforeend', html);
+
+const getLang = () =>
+  (localStorage.getItem('lang') || navigator.language || navigator.userLanguage || s('html').lang)
+    .slice(0, 2)
+    .toLowerCase();
+
+const main = () => {
+  const Translate = {
+    Data: {
+      ['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',
+      },
+    },
+    Render: function (id) {
+      return this.Data[id][getLang()] ? this.Data[id][getLang()] : this.Data[id]['en'];
+    },
+  };
+  const icon = html`
+    <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24">
+      <path
+        fill="currentColor"
+        d="M15.097 5.904A6.5 6.5 0 0 0 4 10.504l.001 1h-2v-1a8.5 8.5 0 1 1 15.176 5.258l5.344 5.345l-1.414 1.414l-5.344-5.345A8.48 8.48 0 0 1 10.5 19h-1v-2h1a6.5 6.5 0 0 0 4.596-11.096M1.672 13.257L4.5 16.086l2.829-2.829l1.414 1.415L5.915 17.5l2.828 2.828l-1.414 1.415L4.5 18.914l-2.828 2.829l-1.414-1.415L3.086 17.5L.258 14.672z"
+      />
+    </svg>
+  `;
+  append(
+    'body',
+    html` <style>
+        body {
+          font-family: arial;
+          font-size: 20px;
+          background-color: #d8d8d8;
+          color: #333;
+        }
+        a {
+          color: black;
+        }
+      </style>
+
+      <div class="abs center" style="top: 45%">
+        ${icon}
+        <br />
+        <br />
+        <span class="bold">404</span>
+        <br />
+        <br />${Translate.Render('page-not-found')} <br />
+        <br />
+        <a href="${location.origin}">${Translate.Render('back')}</a>
+      </div>`,
+  );
+};
+
+SrrComponent = () => html`<script>
+  {
+    const s = ${s};
+    const append = ${append};
+    const getLang = ${getLang};
+    const main = ${main};
+    window.onload = main;
+  }
+</script>`;

package/src/client/ssr/body/500.js

@@ -0,0 +1,72 @@
+const s = (el) => document.querySelector(el);
+
+const append = (el, html) => s(el).insertAdjacentHTML('beforeend', html);
+
+const getLang = () =>
+  (localStorage.getItem('lang') || navigator.language || navigator.userLanguage || s('html').lang)
+    .slice(0, 2)
+    .toLowerCase();
+
+const main = () => {
+  const Translate = {
+    Data: {
+      ['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',
+      },
+    },
+    Render: function (id) {
+      return this.Data[id][getLang()] ? this.Data[id][getLang()] : this.Data[id]['en'];
+    },
+  };
+  const icon = html`<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 20 20">
+    <path
+      fill="currentColor"
+      d="M6 2a2 2 0 0 0-2 2v5.207a5.5 5.5 0 0 1 1-.185V4a1 1 0 0 1 1-1h4v3.5A1.5 1.5 0 0 0 11.5 8H15v8a1 1 0 0 1-1 1h-3.6a5.5 5.5 0 0 1-.657 1H14a2 2 0 0 0 2-2V7.414a1.5 1.5 0 0 0-.44-1.06l-3.914-3.915A1.5 1.5 0 0 0 10.586 2zm8.793 5H11.5a.5.5 0 0 1-.5-.5V3.207zM10 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0M5.5 12a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 1 0v-2a.5.5 0 0 0-.5-.5m0 5.125a.625.625 0 1 0 0-1.25a.625.625 0 0 0 0 1.25"
+    />
+  </svg>`;
+
+  append(
+    'body',
+    html` <style>
+        body {
+          font-family: arial;
+          font-size: 20px;
+          background-color: #d8d8d8;
+          color: #333;
+        }
+        a {
+          color: black;
+        }
+      </style>
+
+      <div class="abs center" style="top: 45%">
+        ${icon}
+        <br />
+        <br />
+        <span class="bold">500</span>
+        <br />
+        <br />${Translate.Render('page-broken')} <br />
+        <br />
+        <a href="${location.origin}">${Translate.Render('back')}</a>
+      </div>`,
+  );
+};
+
+SrrComponent = () => html`<script>
+  {
+    const s = ${s};
+    const append = ${append};
+    const getLang = ${getLang};
+    const main = ${main};
+    window.onload = main;
+  }
+</script>`;

package/src/client/ssr/body/CacheControl.js

@@ -109,6 +109,6 @@ SrrComponent = ({ ttiLoadTimeLimit }) => {
       const CacheControl = ${CacheControl};
       CacheControl({ ttiLoadTimeLimit: ${ttiLoadTimeLimit ? ttiLoadTimeLimit : 1000 * 70 * 1} });
     </script>
-    <div class="clean-cache-container">v2.7.92</div>
+    <div class="clean-cache-container">v2.7.93</div>
   `;
 };

package/src/client/ssr/offline/NoNetworkConnection.js

@@ -3,7 +3,9 @@ const s = (el) => document.querySelector(el);
 const append = (el, html) => s(el).insertAdjacentHTML('beforeend', html);
 
 const getLang = () =>
-  (localStorage.getItem('lang') || navigator.language || navigator.userLanguage || s('html').lang).slice(0, 2);
+  (localStorage.getItem('lang') || navigator.language || navigator.userLanguage || s('html').lang)
+    .slice(0, 2)
+    .toLowerCase();
 
 const main = () => {
   const Translate = {

package/src/client/ssr/pages/Test.js

@@ -3,7 +3,9 @@ const s = (el) => document.querySelector(el);
 const append = (el, html) => s(el).insertAdjacentHTML('beforeend', html);
 
 const getLang = () =>
-  (localStorage.getItem('lang') || navigator.language || navigator.userLanguage || s('html').lang).slice(0, 2);
+  (localStorage.getItem('lang') || navigator.language || navigator.userLanguage || s('html').lang)
+    .slice(0, 2)
+    .toLowerCase();
 
 const main = () => {
   const Translate = {