cyberia 2.8.885

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

@@ -0,0 +1,162 @@
+// https://underpost.net/cube.php
+
+import { BtnIcon } from './BtnIcon.js';
+import { getId, random } from './CommonJs.js';
+import { dynamicCol } from './Css.js';
+import { htmls, s } from './VanillaJs.js';
+
+// https://css-loaders.com/3d/
+
+const Polyhedron = {
+  Tokens: {},
+  Render: async function (options) {
+    const id = options?.id ? options.id : getId(this.Tokens, 'polyhedron-');
+    if (!this.Tokens[id])
+      this.Tokens[id] = {
+        cr: [-25, -57, 90],
+        ct: [0, 0, 0],
+        dim: 150,
+        interval: null,
+      };
+    const renderTransform = () => {
+      s(
+        `.polyhedron-${id}`,
+      ).style.transform = `rotateX(${this.Tokens[id].cr[0]}deg) rotateY(${this.Tokens[id].cr[1]}deg) rotateZ(${this.Tokens[id].cr[2]}deg)
+      translateX(${this.Tokens[id].ct[0]}px) translateY(${this.Tokens[id].ct[1]}px) translateZ(${this.Tokens[id].ct[2]}px)`;
+      s(`.polyhedron-${id}`).style.left = `${s(`.scene-${id}`).offsetWidth / 2 - this.Tokens[id].dim / 2}px`;
+      s(`.polyhedron-${id}`).style.top = `${s(`.scene-${id}`).offsetHeight / 2 - this.Tokens[id].dim / 2}px`;
+      s(`.polyhedron-${id}`).style.width = `${this.Tokens[id].dim}px`;
+      s(`.polyhedron-${id}`).style.height = `${this.Tokens[id].dim}px`;
+      /* rotate Y */
+      s(`.face_front-${id}`).style.transform = `rotateY(0deg) translateZ(${this.Tokens[id].dim / 2}px)`;
+      s(`.face_back-${id}`).style.transform = `rotateY(-180deg) translateZ(${this.Tokens[id].dim / 2}px)`;
+      s(`.face_left-${id}`).style.transform = `rotateY(90deg) translateZ(${this.Tokens[id].dim / 2}px)`;
+      s(`.face_right-${id}`).style.transform = `rotateY(-90deg) translateZ(${this.Tokens[id].dim / 2}px)`;
+      /* rotate X */
+      s(`.face_top-${id}`).style.transform = `rotateX(-90deg) translateZ(${this.Tokens[id].dim / 2}px)`;
+      s(`.face_bottom-${id}`).style.transform = `rotateX(90deg) translateZ(${this.Tokens[id].dim / 2}px)`;
+    };
+    if (this.Tokens[id].interval) clearInterval(this.Tokens[id].interval);
+    this.Tokens[id].interval = setInterval(() => {
+      if (s(`.polyhedron-${id}`)) renderTransform();
+      else return clearInterval(this.Tokens[id].interval);
+    }, 200);
+
+    setTimeout(() => {
+      renderTransform();
+      s(`.polyhedron-${id}`).style.transition = `.4s`;
+
+      s(`.btn-polyhedron-rotate-down-${id}`).onclick = () => {
+        this.Tokens[id].cr[0] += 45;
+      };
+      s(`.btn-polyhedron-rotate-up-${id}`).onclick = () => {
+        this.Tokens[id].cr[0] -= 45;
+      };
+      s(`.btn-polyhedron-rotate-left-${id}`).onclick = () => {
+        this.Tokens[id].cr[1] += 45;
+      };
+      s(`.btn-polyhedron-rotate-right-${id}`).onclick = () => {
+        this.Tokens[id].cr[1] -= 45;
+      };
+
+      s(`.btn-polyhedron-add-zoom-${id}`).onclick = () => {
+        this.Tokens[id].dim += 25;
+      };
+      s(`.btn-polyhedron-remove-zoom-${id}`).onclick = () => {
+        this.Tokens[id].dim -= 25;
+      };
+    });
+    return html`
+      <style>
+        .scene-${id} {
+          height: 500px;
+          background: #c7c7c7;
+          overflow: hidden;
+          /* perspective: 10000px; */
+        }
+        .polyhedron-${id} {
+          transform-style: preserve-3d;
+          cursor: pointer;
+        }
+        .face-${id} {
+          width: 100%;
+          height: 100%;
+        }
+
+        ${options?.style?.face
+          ? css`
+              .face-${id} {
+                ${Object.keys(options.style.face)
+                  .map((styleKey) => `${styleKey} : ${options.style.face[styleKey]};`)
+                  .join('')}
+              }
+            `
+          : css``}
+          ${options?.style?.scene
+          ? css`
+              .scene-${id} {
+                ${Object.keys(options.style.scene)
+                  .map((styleKey) => `${styleKey} : ${options.style.scene[styleKey]};`)
+                  .join('')}
+              }
+            `
+          : css``}
+      </style>
+      <!--
+      <style class="polyhedron-animation-${id}"></style>
+      -->
+
+      ${dynamicCol({ containerSelector: options.idModal, id: `polyhedron-${id}` })}
+      <div class="fl">
+        <div class="in fll polyhedron-${id}-col-a">
+          <div class="in section-mp">
+            <div class="in sub-title-modal"><i class="fa-solid fa-arrows-spin"></i> Rotate</div>
+            ${await BtnIcon.Render({
+              class: `inl section-mp btn-custom btn-polyhedron-rotate-up-${id}`,
+              label: html`<i class="fa-solid fa-angle-up"></i>`,
+            })}
+            ${await BtnIcon.Render({
+              class: `inl section-mp btn-custom btn-polyhedron-rotate-down-${id}`,
+              label: html`<i class="fa-solid fa-angle-down"></i>`,
+            })}
+            ${await BtnIcon.Render({
+              class: `inl section-mp btn-custom btn-polyhedron-rotate-left-${id}`,
+              label: html`<i class="fa-solid fa-angle-left"></i>`,
+            })}
+            ${await BtnIcon.Render({
+              class: `inl section-mp btn-custom btn-polyhedron-rotate-right-${id}`,
+              label: html`<i class="fa-solid fa-angle-right"></i>`,
+            })}
+
+            <div class="in sub-title-modal"><i class="fa-solid fa-magnifying-glass"></i> Zoom</div>
+            ${await BtnIcon.Render({
+              class: `inl section-mp btn-custom btn-polyhedron-add-zoom-${id}`,
+              label: html`<i class="fa-solid fa-plus"></i>`,
+            })}
+            ${await BtnIcon.Render({
+              class: `inl section-mp btn-custom btn-polyhedron-remove-zoom-${id}`,
+              label: html`<i class="fa-solid fa-minus"></i>`,
+            })}
+          </div>
+        </div>
+        <div class="in fll polyhedron-${id}-col-b">
+          <div class="in section-mp">
+            <div class="in sub-title-modal"><i class="fa-solid fa-vector-square"></i> Render</div>
+            <div class="in scene-${id}">
+              <div class="abs polyhedron-${id}">
+                <div class="abs face-${id} face_front-${id} ${id}-0"><div class="abs center">1</div></div>
+                <div class="abs face-${id} face_bottom-${id} ${id}-1"><div class="abs center">2</div></div>
+                <div class="abs face-${id} face_back-${id} ${id}-2"><div class="abs center">3</div></div>
+                <div class="abs face-${id} face_top-${id} ${id}-3"><div class="abs center">4</div></div>
+                <div class="abs face-${id} face_right-${id} ${id}-4"><div class="abs center">5</div></div>
+                <div class="abs face-${id} face_left-${id} ${id}-5"><div class="abs center">6</div></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  },
+};
+
+export { Polyhedron };

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

@@ -0,0 +1,207 @@
+import { UserService } from '../../services/user/user.service.js';
+import { Auth } from './Auth.js';
+import { BtnIcon } from './BtnIcon.js';
+import { EventsUI } from './EventsUI.js';
+import { Input } from './Input.js';
+import { NotificationManager } from './NotificationManager.js';
+import { Translate } from './Translate.js';
+import { Validator } from './Validator.js';
+import { s } from './VanillaJs.js';
+import { getProxyPath, getQueryParams } from './Router.js';
+
+const Recover = {
+  Event: {},
+  Trigger: async function (options) {
+    for (const eventKey of Object.keys(this.Event)) await this.Event[eventKey](options);
+  },
+  Render: async function (options = { idModal: '', user: {}, bottomRender: async () => '' }) {
+    const { idModal, user } = options;
+    let mode = 'recover-verify-email';
+    const recoverToken = getQueryParams().payload;
+    const formData = {
+      'recover-username': {
+        model: 'username',
+        id: `recover-username`,
+        rules: [{ type: 'isEmpty' }, { type: 'isLength', options: { min: 2, max: 20 } }],
+        show: () => false,
+        disable: function () {
+          return !this.show();
+        },
+      },
+      'recover-email': {
+        model: 'email',
+        id: `recover-email`,
+        rules: [{ type: 'isEmpty' }, { type: 'isEmail' }],
+        show: () => mode === 'recover-verify-email',
+        disable: function () {
+          return !this.show();
+        },
+      },
+      'recover-password': {
+        model: 'password',
+        id: `recover-password`,
+        rules: [{ type: 'isStrongPassword' }],
+        show: () => mode === 'change-password',
+        disable: function () {
+          return !this.show();
+        },
+      },
+      'recover-repeat-password': {
+        id: `recover-repeat-password`,
+        rules: [{ type: 'isEmpty' }, { type: 'passwordMismatch', options: `recover-password` }],
+        show: () => mode === 'change-password',
+        disable: function () {
+          return !this.show();
+        },
+      },
+    };
+
+    if (recoverToken) {
+      mode = 'change-password';
+    }
+
+    setTimeout(async () => {
+      if (user && user.email) {
+        s(`.recover-email`).value = user.role === 'guest' ? '' : user.email;
+        if (user.emailConfirmed) s(`.recover-email`).setAttribute('disabled', '');
+      }
+
+      const validators = await Validator.instance(formData);
+
+      EventsUI.onClick(`.btn-recover`, async (e) => {
+        e.preventDefault();
+        s(`.recover-resend-btn-container`).classList.add('hide');
+        s(`.recover-send-btn-container`).classList.remove('hide');
+        const { errorMessage } = await validators();
+        if (errorMessage) return;
+        const body = {};
+        for (const inputData of Object.values(formData)) {
+          if ('model' in inputData) body[inputData.model] = s(`.${inputData.id}`).value;
+        }
+        switch (mode) {
+          case 'recover-verify-email': {
+            const result = await UserService.post({
+              id: 'recover-verify-email',
+              body: { ...body, proxyPath: getProxyPath(), hostname: `${location.hostname}` },
+            });
+            NotificationManager.Push({
+              html:
+                result.status === 'error' ? result.message : Translate.Render(`${result.status}-recover-verify-email`),
+              status: result.status,
+            });
+            if (result.status === 'success') {
+              s(`.recover-send-btn-container`).classList.add('hide');
+              s(`.recover-resend-btn-container`).classList.remove('hide');
+            }
+            break;
+          }
+          case 'change-password': {
+            const result = await UserService.put({ id: `recover/${recoverToken}`, body });
+            NotificationManager.Push({
+              html:
+                typeof result.data === 'string' ? result.data : Translate.Render(`${result.status}-recover-password`),
+              status: result.status,
+            });
+            if (result.status === 'success') {
+              if (Auth.getToken()) {
+                s(`.btn-close-modal-recover`).click();
+                s(`.main-btn-account`).click();
+              } else {
+                s(`.btn-recover`).classList.add('hide');
+                s(`.input-container-recover-password`).classList.add('hide');
+                s(`.input-container-recover-repeat-password`).classList.add('hide');
+                s(`.btn-recover-log-in`).classList.remove('hide');
+              }
+              this.Trigger({ user: result.data });
+            }
+            break;
+          }
+        }
+      });
+      s(`.btn-recover-resend`).onclick = (e) => {
+        e.preventDefault();
+        s(`.btn-recover`).click();
+      };
+      s(`.btn-recover-log-in`).onclick = () => {
+        s(`.btn-close-modal-recover`).click();
+        s(`.main-btn-log-in`).click();
+      };
+    });
+    return html`
+      ${await BtnIcon.Render({
+        class: 'in section-mp form-button btn-recover-log-in hide',
+        label: Translate.Render('log-in'),
+        type: 'button',
+      })}
+      <form class="in">
+        <div class="in">
+          ${await Input.Render({
+            id: `recover-username`,
+            type: 'text',
+            label: html`<i class="fa-solid fa-pen-to-square"></i> ${Translate.Render('username')}`,
+            containerClass: `inl section-mp width-mini-box input-container ${
+              formData[`recover-username`].show() ? '' : 'hide'
+            }`,
+            placeholder: true,
+          })}
+        </div>
+        <div class="in">
+          ${await Input.Render({
+            id: `recover-email`,
+            type: 'email',
+            label: html`<i class="fa-solid fa-envelope"></i> ${Translate.Render('email')}`,
+            containerClass: `inl section-mp width-mini-box input-container ${
+              formData[`recover-email`].show() ? '' : 'hide'
+            }`,
+            placeholder: true,
+            autocomplete: 'email',
+          })}
+        </div>
+        <div class="in">
+          ${await Input.Render({
+            id: `recover-password`,
+            type: 'password',
+            autocomplete: 'new-password',
+            label: html`<i class="fa-solid fa-lock"></i> ${Translate.Render('password')}`,
+            containerClass: `inl section-mp width-mini-box input-container ${
+              formData[`recover-password`].show() ? '' : 'hide'
+            }`,
+            placeholder: true,
+          })}
+        </div>
+        <div class="in">
+          ${await Input.Render({
+            id: `recover-repeat-password`,
+            type: 'password',
+            autocomplete: 'new-password',
+            label: html`<i class="fa-solid fa-lock"></i> ${Translate.Render('repeat')} ${Translate.Render('password')}`,
+            containerClass: `inl section-mp width-mini-box input-container ${
+              formData[`recover-repeat-password`].show() ? '' : 'hide'
+            }`,
+            placeholder: true,
+          })}
+        </div>
+        ${options?.bottomRender ? await options.bottomRender() : ``}
+        <div class="in recover-send-btn-container">
+          ${await BtnIcon.Render({
+            class: 'in section-mp form-button btn-recover',
+            label: Translate.Render(mode === 'recover-verify-email' ? 'send-recover-verify-email' : 'change-password'),
+            type: 'button',
+          })}
+        </div>
+        <div class="in recover-resend-btn-container hide">
+          <div class="in section-mp form-button" style="color: #ed9d0f">
+            <i class="fa-solid fa-triangle-exclamation"></i> ${Translate.Render('15-min-valid-recover-email')}
+          </div>
+          ${await BtnIcon.Render({
+            class: 'in section-mp form-button btn-recover-resend',
+            label: html`${Translate.Render('resend')} ${Translate.Render('recover-verify-email')}`,
+            type: 'submit',
+          })}
+        </div>
+      </form>
+    `;
+  },
+};
+
+export { Recover };

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

@@ -0,0 +1,82 @@
+import { newInstance } from './CommonJs.js';
+import { loggerFactory } from './Logger.js';
+import { getResponsiveData } from './VanillaJs.js';
+
+const logger = loggerFactory(import.meta);
+
+const Responsive = {
+  Data: {},
+  Event: {},
+  DelayEvent: {},
+  Observer: ResizeObserver,
+  getResponsiveData: function () {
+    return newInstance(this.Data);
+  },
+  getResponsiveDataAmplitude: function (options) {
+    const { dimAmplitude } = options;
+    const ResponsiveDataAmplitude = newInstance(this.Data);
+    ResponsiveDataAmplitude.minValue = ResponsiveDataAmplitude.minValue * dimAmplitude;
+    ResponsiveDataAmplitude.maxValue = ResponsiveDataAmplitude.maxValue * dimAmplitude;
+    ResponsiveDataAmplitude.width = ResponsiveDataAmplitude.width * dimAmplitude;
+    ResponsiveDataAmplitude.height = ResponsiveDataAmplitude.height * dimAmplitude;
+    return ResponsiveDataAmplitude;
+  },
+  resizeCallback: function (force) {
+    const Data = getResponsiveData();
+    if (force === true || Data.minValue !== Responsive.Data.minValue || Data.maxValue !== Responsive.Data.maxValue) {
+      Responsive.Data = Data;
+      Responsive.triggerEvents();
+    }
+  },
+  resize: 0,
+  Init: async function () {
+    Responsive.resizeCallback();
+    window.onresize = (e, force) => {
+      Responsive.resize++;
+      const resize = Responsive.resize;
+      Responsive.resizeCallback(force);
+      setTimeout(() => {
+        if (resize === Responsive.resize) {
+          Responsive.resizeCallback(force);
+          Responsive.resize = 0;
+          for (const event of Object.keys(Responsive.DelayEvent)) Responsive.DelayEvent[event]();
+        }
+      }, 750);
+    };
+    // 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

@@ -0,0 +1,43 @@
+import { getId, newInstance } from './CommonJs.js';
+import { Modal } from './Modal.js';
+import { s } from './VanillaJs.js';
+
+const RichText = {
+  Tokens: {},
+  Render: async function (options = { id: '', parentIdModal: '' }) {
+    const id = options?.id ? options.id : getId(this.Tokens, 'rich-text-');
+    this.Tokens[id] = {};
+    setTimeout(() => {
+      const easyMDE = new EasyMDE({
+        element: s(`.${id}`),
+        hideIcons: ['fullscreen', 'side-by-side'],
+        onToggleFullScreen: (onFs) => {
+          if (onFs) {
+            if (options.parentIdModal) {
+            }
+            // Modal.cleanUI();
+          } else {
+            if (options.parentIdModal) {
+            }
+            // Modal.restoreUI();
+          }
+        },
+      });
+      this.Tokens[id].easyMDE = easyMDE;
+      // easyMDE.value();
+      // easyMDE.value(val);
+    });
+    return html` <style>
+        .md-container {
+          background: white;
+          color: black;
+        }
+        .md-container button {
+          color: black !important;
+        }
+      </style>
+      <div class="in md-container"><textarea class="${id}"></textarea></div>`;
+  },
+};
+
+export { RichText };