underpost 2.8.85 → 2.8.86

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

@@ -1,131 +1,76 @@
-import { borderChar } from './Css.js';
-import { Modal } from './Modal.js';
-import { append, s } from './VanillaJs.js';
+import { s } from './VanillaJs.js';
 
-const Scroll = {
-  data: {},
-  init: function (selector) {
-    s(selector).addEventListener('scroll', Scroll.scrollHandler);
-    Scroll.data[selector] = {
-      element: s(selector),
+class Scroll {
+  /**
+   * Attach scroll listener to an element (resolved with s(selector)).
+   * @param {string} selector - selector passed to s(selector)
+   * @param {function} [callback] - callback function to be called on scroll
+   * @param {object} options
+   * @param {number} [options.threshold=1] - px margin to treat as bottom
+   * @param {number} [options.precision=3] - decimal places for percentages
+   */
+  static setEvent(selector, callback = async () => {}, options = { threshold: 1, precision: 3 }) {
+    const el = s(selector);
+    if (!el) return;
+
+    const threshold = options.threshold ?? 1; // px tolerance for bottom detection
+    const precision = options.precision ?? 3;
+    let ticking = false;
+
+    const round = (v) => {
+      const m = Math.pow(10, precision);
+      return Math.round(v * m) / m;
     };
-    return Scroll.data[selector];
-  },
-  getScrollPosition: function (selector) {
-    // Scroll.data[selector].element.clientHeight -
-    return Scroll.data[selector].element.scrollTop;
-  },
-  scrollHandler: async function () {
-    for (const selector in Scroll.data) await Scroll.data[selector].callback(Scroll.getScrollPosition(selector));
-  },
-  addEvent: function (selector = '', callback = (position = 0) => {}) {
-    Scroll.data[selector].callback = callback;
-  },
-  removeEvent: function (selector) {
-    delete Scroll.data[selector];
-  },
-  to: function (elector = '', options = { top: 100, left: 100, behavior: 'smooth' }) {
-    Scroll.data[selector].element.scrollTo({
-      top: options.top || Scroll.getScrollPosition(selector),
-      left: options.left || 0,
-      behavior: options.behavior || 'smooth',
-    });
-  },
-  topRefreshEvents: {},
-  addTopRefreshEvent: function (options = { id: '', callback: () => {}, condition: () => {} }) {
-    this.topRefreshEvents[options.id] = options;
-  },
-  removeTopRefreshEvent: function (id = '') {
-    delete this.topRefreshEvents[id];
-  },
-  pullTopRefresh: function () {
-    return;
-    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;
+    const listener = (event) => {
+      if (ticking) return;
+      ticking = true;
+
+      requestAnimationFrame(() => {
+        const scrollHeight = el.scrollHeight;
+        const clientHeight = el.clientHeight;
+        const scrollTop = el.scrollTop;
+
+        // pixels left to scroll (clamped to >= 0)
+        const remaining = Math.max(0, scrollHeight - clientHeight - scrollTop);
 
-    document.addEventListener('touchstart', (e) => {
-      touchstartY = e.touches[0].clientY;
-      // console.warn('touchstart', touchstartY);
-    });
+        // maximum possible remaining (0 if content fits without scrolling)
+        const maxRemaining = Math.max(0, scrollHeight - clientHeight);
 
-    document.addEventListener('touchmove', (e) => {
-      if (
-        !Object.keys(Scroll.topRefreshEvents).find((event) => Scroll.topRefreshEvents[event].condition()) ||
-        (!s(`.btn-bar-center-icon-close`).classList.contains('hide') &&
-          !s(
-            `.btn-icon-menu-mode-${Modal.Data['modal-menu'].options.mode !== 'slide-menu-right' ? 'left' : 'right'}`,
-          ).classList.contains('hide'))
-      )
-        return;
+        // percentRemaining: 1 = top (all remaining), 0 = bottom (none remaining)
+        let percentRemaining = maxRemaining === 0 ? 0 : remaining / maxRemaining;
+        percentRemaining = Math.max(0, Math.min(1, percentRemaining));
 
-      const touchY = e.touches[0].clientY;
-      const touchDiff = touchY - touchstartY;
+        // percentScrolled: complementary value (0 = top, 1 = bottom)
+        let percentScrolled = 1 - percentRemaining;
+        percentScrolled = Math.max(0, Math.min(1, percentScrolled));
 
-      // console.warn('touchDiff', touchDiff, maxHeightDragReload);
+        const payload = {
+          scrollHeight,
+          clientHeight,
+          scrollTop,
+          remaining, // px left (>= 0)
+          scrollBottom: remaining <= threshold ? 0 : remaining,
+          atBottom: remaining <= threshold,
+          percentRemaining: round(percentRemaining), // 0..1
+          percentScrolled: round(percentScrolled), // 0..1
+        };
 
-      if (touchDiff > maxHeightDragReload)
-        s(`.pull-refresh-icon-container`).style.top = 60 + maxHeightDragReload + 'px';
-      else s(`.pull-refresh-icon-container`).style.top = 60 + touchDiff + 'px';
+        // replace this with an event dispatch or callback if you prefer
+        // console.warn('scroll', event, JSON.stringify(payload, null, 2));
+        callback(payload);
 
-      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) {
-        for (const event of Object.keys(Scroll.topRefreshEvents))
-          if (Scroll.topRefreshEvents[event].condition()) Scroll.topRefreshEvents[event].callback();
-      }
-      reload = false;
-    });
-    Scroll.addTopRefreshEvent({
-      id: 'main-body',
-      callback: () => {
-        location.reload();
-      },
-      condition: () => {
-        return (
-          s('.main-body') &&
-          s('.main-body').scrollTop === 0 &&
-          !Object.keys(Modal.Data).find(
-            (idModal) => !['modal-menu', 'main-body', 'bottom-bar', 'main-body-top'].includes(idModal),
-          )
-        );
-      },
-    });
-  },
-};
+        ticking = false;
+      });
+    };
+
+    el.addEventListener('scroll', listener, { passive: true });
+
+    return {
+      removeEvent: () => el.removeEventListener('scroll', listener),
+    };
+  }
+}
 
 export { Scroll };
+export default Scroll;

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

@@ -53,6 +53,7 @@ const SignUp = {
           status: result.status,
         });
         if (result.status === 'success') {
+          await Auth.sessionOut();
           await Auth.signUpToken(result);
           s(`.btn-close-${options.idModal}`).click();
         }

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

@@ -147,8 +147,40 @@ const pasteData = () => new Promise((resolve) => navigator.clipboard.readText().
  * @memberof VanillaJS
  */
 const setPath = (path = '/', stateStorage = {}, title = '') => {
-  if (window.location.pathname === path || window.location.pathname === `${path}/`) return;
-  return history.pushState(stateStorage, title, path);
+  if (!path) path = '/';
+
+  const [inputPath, inputSearch] = `${path}`.split('?');
+
+  let sanitizedPath = (inputPath[0] !== '/' ? `/${inputPath}` : inputPath)
+    .trim()
+    .replaceAll('//', '/')
+    .replaceAll(`\\`, '/');
+
+  if (sanitizedPath.length > 1 && sanitizedPath[sanitizedPath.length - 1] === '/')
+    sanitizedPath = sanitizedPath.slice(0, -1);
+
+  if (window.location.pathname === sanitizedPath && (!inputSearch || inputSearch === location.search)) {
+    console.warn('Prevent overwriting same path', {
+      inputPath: inputPath,
+      inputSearch: inputSearch,
+      sanitizedPath: sanitizedPath,
+      currentLocationSearch: location.search,
+      currentLocationHash: location.hash,
+    });
+    return;
+  }
+  console.warn('Set path', {
+    inputPath: inputPath,
+    inputSearch: inputSearch,
+    sanitizedPath: sanitizedPath,
+    currentLocationSearch: location.search,
+    currentLocationHash: location.hash,
+  });
+  return history.pushState(
+    stateStorage,
+    title,
+    `${sanitizedPath}${inputSearch ? `?${inputSearch}` : ''}${location.hash ?? ''}`,
+  );
 };
 
 /**
@@ -425,6 +457,19 @@ const getLang = () =>
     .slice(0, 2)
     .toLowerCase();
 
+function hexToRgbA(hex) {
+  let c;
+  if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
+    c = hex.substring(1).split('');
+    if (c.length == 3) {
+      c = [c[0], c[0], c[1], c[1], c[2], c[2]];
+    }
+    c = '0x' + c.join('');
+    return [(c >> 16) & 255, (c >> 8) & 255, c & 255];
+  }
+  throw new Error('Invalid Hex');
+}
+
 export {
   s,
   htmls,
@@ -454,4 +499,5 @@ export {
   isDevInstance,
   getDataFromInputFile,
   getLang,
+  hexToRgbA,
 };

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

@@ -35,7 +35,7 @@ const MenuDefault = {
     const id = getId(this.Data, 'menu-');
     this.Data[id] = {};
     const RouterInstance = RouterDefault();
-    const { NameApp } = RouterInstance;
+    const { BannerAppTemplate } = RouterInstance;
     const { barConfig } = await Themes[Css.currentTheme]();
     const heightTopBar = 50;
     const heightBottomBar = 50;
@@ -162,7 +162,7 @@ const MenuDefault = {
         </div>
       `,
       barConfig: newInstance(barConfig),
-      title: NameApp,
+      title: BannerAppTemplate,
       // titleClass: 'hide',
       titleRender: () => {
         ThemeEvents['titleRender'] = () => {

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

@@ -4,7 +4,7 @@ import { getProxyPath, s } from '../core/VanillaJs.js';
 
 const logger = loggerFactory(import.meta);
 
-const NameApp = html`<strong class="inl" style="font-family: system-ui">PWA</strong>`;
+const BannerAppTemplate = html`<strong class="inl" style="font-family: system-ui">PWA</strong>`;
 
 // Router
 const RoutesDefault = () => {
@@ -39,7 +39,7 @@ const RoutesDefault = () => {
 window.Routes = RoutesDefault;
 
 const RouterDefault = () => {
-  return { Routes: RoutesDefault, NameApp };
+  return { Routes: RoutesDefault, BannerAppTemplate };
 };
 
-export { RoutesDefault, RouterDefault, NameApp };
+export { RoutesDefault, RouterDefault, BannerAppTemplate };

package/src/index.js

@@ -35,7 +35,7 @@ class Underpost {
    * @type {String}
    * @memberof Underpost
    */
-  static version = 'v2.8.85';
+  static version = 'v2.8.86';
   /**
    * Repository cli API
    * @static

package/src/mailer/MailerProvider.js

@@ -48,6 +48,43 @@ const MailerProvider = {
         ...options,
         transporter,
         templates: await EmailRender.getTemplates(options),
+        translateTemplates: {
+          confirmEmail: {
+            H1: {
+              en: 'Confirm Your Email',
+              es: 'Confirma tu correo electrónico',
+            },
+            P1: {
+              en: `Email confirmed! Thanks.
+               <br />
+             <span style="font-size: 12px; color: gray"> 
+                If it is not automatically verified, 
+                please allow the image to be seen, thank you.
+             </span>
+              `,
+              es: `Correo electrónico confirmado! Gracias.
+              <br />
+              <span style="font-size: 12px; color: gray"> 
+               Si no se verifica automáticamente, por favor permita que se vea la imagen, gracias.
+              </span>
+              `,
+            },
+          },
+          recoverEmail: {
+            H1: {
+              en: 'Recover your account',
+              es: 'Recupera tu cuenta',
+            },
+            P1: {
+              en: 'To recover your account, please click the button below:',
+              es: 'Para recuperar tu cuenta, haz click en el botón de abajo:',
+            },
+            BTN_LABEL: {
+              en: 'Recover Password',
+              es: 'Recuperar Contraseña',
+            },
+          },
+        },
       };
 
       return this.instance[id];

package/src/server/client-build-live.js

@@ -59,7 +59,7 @@ const clientLiveBuild = async () => {
     const updates = JSON.parse(fs.readFileSync(`./tmp/client.build.json`, 'utf8'));
     const liveClientBuildPaths = [];
     for (let srcPath of updates) {
-      srcPath = srcPath.replaceAll('/', `\\`); // linux case
+      srcPath = srcPath.replaceAll('/', `\\`);
 
       const srcBuildPath = `./src${srcPath.split('src')[1].replace(/\\/g, '/')}`;
       if (

package/src/server/client-dev-server.js

@@ -7,7 +7,7 @@ const logger = loggerFactory(import.meta);
 
 const createClientDevServer = () => {
   // process.argv.slice(2).join(' ')
-  shellExec(`env-cmd -f .env.development node bin/deploy build-full-client ${process.argv.slice(2).join(' ')} l`);
+  shellExec(`env-cmd -f .env.development node bin/deploy build-full-client ${process.argv.slice(2).join(' ')}`);
   shellExec(
     `env-cmd -f .env.development node src/api ${process.argv[2]}${process.argv[5] ? ` ${process.argv[5]}` : ''}${
       process.argv.includes('static') ? ' static' : ''