@underpostnet/underpost 2.7.82

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

@@ -0,0 +1,45 @@
+import { Responsive } from './Responsive.js';
+import { ToggleSwitch } from './ToggleSwitch.js';
+import { Translate } from './Translate.js';
+import { checkFullScreen, fullScreenIn, fullScreenOut, s } from './VanillaJs.js';
+
+const FullScreen = {
+  RenderSetting: async function () {
+    let fullScreenSwitch = checkFullScreen();
+    Responsive.Event['full-screen-settings'] = () => {
+      let fullScreenMode = checkFullScreen();
+      if ((fullScreenSwitch && !fullScreenMode) || (!fullScreenSwitch && fullScreenMode))
+        if (s('.fullscreen-toggle')) ToggleSwitch.Tokens[`fullscreen-toggle`].click();
+    };
+    setTimeout(
+      () => (s(`.toggle-form-container-fullscreen`).onclick = () => ToggleSwitch.Tokens[`fullscreen-toggle`].click()),
+    );
+    return html`<div class="in section-mp toggle-form-container toggle-form-container-fullscreen hover">
+      <div class="fl ">
+        <div class="in fll" style="width: 70%">
+          <div class="in"><i class="fa-solid fa-expand"></i> ${Translate.Render('fullscreen')}</div>
+        </div>
+        <div class="in fll" style="width: 30%">
+          ${await ToggleSwitch.Render({
+            id: 'fullscreen-toggle',
+            containerClass: 'inl',
+            disabledOnClick: true,
+            checked: fullScreenSwitch,
+            on: {
+              unchecked: () => {
+                fullScreenSwitch = false;
+                if (checkFullScreen()) fullScreenOut();
+              },
+              checked: () => {
+                fullScreenSwitch = true;
+                if (!checkFullScreen()) fullScreenIn();
+              },
+            },
+          })}
+        </div>
+      </div>
+    </div>`;
+  },
+};
+
+export { FullScreen };

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

@@ -0,0 +1,346 @@
+import { AgGrid } from './AgGrid.js';
+import { BtnIcon } from './BtnIcon.js';
+import { darkTheme } from './Css.js';
+import { loggerFactory } from './Logger.js';
+import { RichText } from './RichText.js';
+import { ToggleSwitch } from './ToggleSwitch.js';
+import { Translate } from './Translate.js';
+import { htmls, s } from './VanillaJs.js';
+const logger = loggerFactory(import.meta);
+
+const fileFormDataFactory = (e, extensions) => {
+  const form = new FormData();
+  for (const keyFile of Object.keys(e.target.files)) {
+    if (extensions && !extensions.includes(e.target.files[keyFile].type)) {
+      logger.error('Invalid file extension', e.target.files[keyFile]);
+      continue;
+    }
+    form.append(e.target.files[keyFile].name, e.target.files[keyFile]);
+  }
+  return form;
+};
+
+const getFileFromFileData = (fileData) => {
+  const blob = new Blob([new Uint8Array(fileData.data.data)], { type: fileData.mimetype });
+  return new File([blob], fileData.name, { type: fileData.mimetype });
+};
+
+const getSrcFromFileData = (fileData) => {
+  const file = getFileFromFileData(fileData);
+  return URL.createObjectURL(file);
+};
+
+const Input = {
+  Render: async function (options) {
+    const { id } = options;
+    options?.placeholder
+      ? options.placeholder === true
+        ? (options.placeholder = ' . . .')
+        : options.placeholder
+      : null;
+    setTimeout(() => {
+      if (!s(`.${id}`)) return;
+      s(`.input-container-${id}`).onclick = () => {
+        ['color', 'file'].includes(options.type) ? s(`.${id}`).click() : s(`.${id}`).focus();
+        ['datetime-local'].includes(options.type) ? s(`.${id}`).showPicker() : s(`.${id}`).focus();
+      };
+
+      if (s(`.btn-eye-${id}`))
+        s(`.btn-eye-${id}`).onclick = () => {
+          if (s(`.fa-eye-slash-${id}`).style.display === 'none') {
+            s(`.fa-eye-${id}`).style.display = 'none';
+            s(`.fa-eye-slash-${id}`).style.display = null;
+            s(`.${id}`).type = 'text';
+            return;
+          }
+          s(`.fa-eye-slash-${id}`).style.display = 'none';
+          s(`.fa-eye-${id}`).style.display = null;
+          s(`.${id}`).type = 'password';
+        };
+    });
+
+    const inputElement = html` <input
+        type="${options?.type ? options.type : 'text'}"
+        class="${options.inputClass ? options.inputClass : 'in wfa'} ${id}"
+        ${options?.min !== undefined ? `min="${options.min}"` : ''}
+        placeholder${options?.placeholder ? `="${options.placeholder}"` : ''}
+        ${options?.value !== undefined ? `value="${options.value}"` : ''}
+        ${options?.autocomplete ? `autocomplete="${options.autocomplete}"` : ''}
+        ${options?.disabled ? `disabled` : ''}
+        ${options?.name !== undefined ? `name="${options.name}"` : ''}
+        ${options?.pattern !== undefined ? `pattern="${options.pattern}"` : ''}
+        ${options?.pattern === undefined && options.type === 'tel' ? `pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"` : ''}
+        ${options?.required ? ` required ` : ''}
+        ${options?.accept ? `accept="${options.accept}"` : ''}
+        ${options?.multiple ? `multiple="multiple"` : ''}
+      />
+      <div class="${id}-input-extension input-info input-extension ${options?.extension ? '' : 'hide'}">
+        ${options?.extension ? await options.extension() : ''}
+      </div>`;
+
+    return html` <div class="${options?.containerClass ? options.containerClass + ' ' : ''} input-container-${id}">
+      <div class="in">
+        ${options?.label ? html`<div class="in input-label input-label-${id}">${options.label}</div>` : ''}
+        ${options.type === 'password' && !options.disabledEye
+          ? html`
+              <div class="fl input-row-${id}">
+                <div class="in fll" style="width: 80%;">${inputElement}</div>
+                <div class="in fll btn-eye-password btn-eye-${id}" style="width: 20%;">
+                  <i class="fas fa-eye fa-eye-${id} eye-password"></i>
+                  <i class="fas fa-eye-slash fa-eye-slash-${id} eye-password" style="display: none"></i>
+                </div>
+              </div>
+            `
+          : options?.placeholderIcon
+          ? html` <div class="fl input-row-${id}">${options.placeholderIcon} ${inputElement}</div> `
+          : inputElement}
+        <div class="in input-info input-info-${id}">&nbsp</div>
+      </div>
+    </div>`;
+  },
+  parseJsonEval: (selector) => {
+    try {
+      return JSON.parse(s(selector).value);
+    } catch (error) {
+      return s(selector).value;
+    }
+  },
+  getValues: function (formData) {
+    const obj = {};
+    for (const inputData of formData) {
+      if (inputData.disableRender) continue;
+      switch (inputData.inputType) {
+        case 'file':
+          obj[inputData.model] = s(`.${inputData.id}`).inputFiles;
+          continue;
+        case 'md':
+          obj[inputData.model] = RichText.Tokens[inputData.id].easyMDE.value();
+          break;
+        case 'checkbox':
+        case 'checkbox-on-off':
+          obj[inputData.model] = s(`.${inputData.id}-checkbox`).checked;
+          continue;
+
+        default:
+          break;
+      }
+
+      if (!s(`.${inputData.id}`) || !s(`.${inputData.id}`).value || s(`.${inputData.id}`).value === 'undefined')
+        continue;
+      if ('model' in inputData) {
+        obj[inputData.model] = s(`.${inputData.id}`).value;
+      }
+    }
+    return obj;
+  },
+  cleanValues: function (formData) {
+    const obj = {};
+    for (const inputData of formData) {
+      if (!s(`.${inputData.id}`)) continue;
+
+      switch (inputData.inputType) {
+        case 'file':
+          s(`.${inputData.id}`).inputFiles = undefined;
+          s(`.${inputData.id}`).value = null;
+
+          if (s(`.file-name-render-${inputData.id}`) && s(`.${inputData.id}`).fileNameInputExtDefaultContent)
+            htmls(`.file-name-render-${inputData.id}`, `${s(`.${inputData.id}`).fileNameInputExtDefaultContent}`);
+          continue;
+          break;
+        case 'md':
+          RichText.Tokens[inputData.id].easyMDE.value('');
+          continue;
+          break;
+        case 'checkbox':
+        case 'checkbox-on-off':
+          if (s(`.${inputData.id}-checkbox`).checked) ToggleSwitch.Tokens[inputData.id].click();
+          continue;
+          break;
+
+        default:
+          break;
+      }
+
+      if ('model' in inputData) {
+        if (!['dropdown'].includes(inputData.inputType)) s(`.${inputData.id}`).value = '';
+      }
+      if (s(`.input-info-${inputData.id}`)) htmls(`.input-info-${inputData.id}`, html`&nbsp`);
+    }
+    return obj;
+  },
+  setValues: function (formData, obj, originObj, fileObj) {
+    setTimeout(() => {
+      for (const inputData of formData) {
+        if (!s(`.${inputData.id}`)) continue;
+
+        switch (inputData.inputType) {
+          case 'file':
+            if (fileObj[inputData.model] && s(`.${inputData.id}`)) {
+              const dataTransfer = new DataTransfer();
+
+              if (fileObj[inputData.model].fileBlob)
+                dataTransfer.items.add(getFileFromFileData(fileObj[inputData.model].fileBlob));
+
+              if (fileObj[inputData.model].mdBlob)
+                dataTransfer.items.add(getFileFromFileData(fileObj[inputData.model].mdBlob));
+
+              if (dataTransfer.files.length) {
+                s(`.${inputData.id}`).files = dataTransfer.files;
+                s(`.${inputData.id}`).onchange({ target: s(`.${inputData.id}`) });
+              }
+            }
+
+            continue;
+            break;
+          case 'md':
+            RichText.Tokens[inputData.id].easyMDE.value(fileObj[inputData.model].mdPlain);
+            continue;
+            break;
+          case 'checkbox':
+          case 'checkbox-on-off':
+            if (
+              (obj[inputData.model] === true && !s(`.${inputData.id}-checkbox`).checked) ||
+              (!obj[inputData.model] && s(`.${inputData.id}-checkbox`).checked === true)
+            )
+              ToggleSwitch.Tokens[inputData.id].click();
+            continue;
+            break;
+          case 'datetime-local':
+            {
+              const date = new Date(originObj[inputData.model]);
+              date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
+              s(`.${inputData.id}`).value = date.toISOString().slice(0, 16);
+            }
+            continue;
+            break;
+          default:
+            break;
+        }
+
+        if ('model' in inputData) {
+          if (!['dropdown'].includes(inputData.inputType)) s(`.${inputData.id}`).value = obj[inputData.model];
+        }
+        if (s(`.input-info-${inputData.id}`)) htmls(`.input-info-${inputData.id}`, html`&nbsp`);
+      }
+    });
+  },
+};
+
+const InputFile = {
+  Render: async function ({ id, multiple }, on = { change: () => {}, clear: () => {} }) {
+    // drag drop multi file
+    const gridId = `ag-grid-input-file-${id}`;
+    setTimeout(() => {
+      s(`.btn-clear-input-file-${id}`).onclick = (e) => {
+        e.preventDefault();
+        s(`.${id}`).value = null;
+        AgGrid.grids[gridId].setGridOption('rowData', []);
+        if (on && typeof on.clear === 'function') on.clear();
+      };
+
+      ['drag', 'dragstart', 'dragend', 'dragover', 'dragenter', 'dragleave', 'drop'].forEach(function (event) {
+        s(`.drop-zone-${id}`).addEventListener(event, function (e) {
+          e.preventDefault();
+          e.stopPropagation();
+        });
+      });
+      s(`.drop-zone-${id}`).addEventListener(
+        'dragover',
+        function (e) {
+          this.classList.add('drop-hover-container');
+        },
+        false,
+      );
+
+      s(`.drop-zone-${id}`).addEventListener(
+        'dragleave',
+        function (e) {
+          this.classList.remove('drop-hover-container');
+        },
+        false,
+      );
+      s(`.drop-zone-${id}`).addEventListener(
+        'drop',
+        function (e) {
+          this.classList.remove('drop-hover-container');
+          const files = e.dataTransfer.files;
+          const dataTransfer = new DataTransfer();
+
+          let countFiles = 0;
+          Array.prototype.forEach.call(files, (file) => {
+            // logger.info(file);
+            if (!multiple && countFiles == 1) return;
+            dataTransfer.items.add(file);
+            countFiles++;
+          });
+
+          s(`.${id}`).files = dataTransfer.files;
+          s(`.${id}`).onchange({ target: s(`.${id}`) });
+        },
+        false,
+      );
+
+      s(`.drop-zone-${id}`).addEventListener('click', function (e) {
+        s(`.${id}`).click();
+      });
+
+      s(`.${id}`).onchange = (e) => {
+        // logger.info('e', e);
+        const fileGridData = [];
+        Object.keys(e.target.files).forEach((fileKey, index) => {
+          const file = e.target.files[fileKey];
+          logger.info('Load file', file);
+          // Get raw:
+          // const read = new FileReader();
+          // read.readAsBinaryString(file);
+          // read.onloadend = () => {
+          //   console.log('Load File', e.target.files[fileKey], { fileKey, index }, read.result);
+          // };
+          fileGridData.push(file);
+        });
+        AgGrid.grids[gridId].setGridOption('rowData', fileGridData);
+        if (on && typeof on.change === 'function') on.change(e);
+      };
+    });
+    return html` <div class="fl">
+      <div class="in fll input-file-col">
+        <div class="in section-mp input-file-sub-col">
+          <input class="wfa ${id}" type="file" ${multiple ? `multiple="multiple"` : ''} />
+          <div class="in">
+            ${await BtnIcon.Render({
+              class: `wfa btn-clear-input-file-${id}`,
+              label: `<i class="fa-solid fa-broom"></i> ${Translate.Render('clear')}`,
+            })}
+          </div>
+          <div class="in">
+            ${await AgGrid.Render({
+              id: gridId,
+              darkTheme,
+              style: {
+                height: '200px',
+              },
+              gridOptions: {
+                rowData: [],
+                columnDefs: [
+                  // { field: '_id', headerName: 'ID' },
+                  { field: 'name', headerName: 'Name' },
+                  { field: 'type', headerName: 'Type' },
+                ],
+              },
+            })}
+          </div>
+        </div>
+      </div>
+      <div class="in fll input-file-col">
+        <div class="in section-mp input-file-sub-col drop-zone-${id}">
+          <div class="abs center">
+            <i class="fas fa-cloud" style="font-size: 30px"></i><br />
+            ${Translate.Render('drop-file')}
+          </div>
+        </div>
+      </div>
+    </div>`;
+  },
+};
+
+export { Input, InputFile, fileFormDataFactory, getSrcFromFileData, getFileFromFileData };

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

@@ -0,0 +1,77 @@
+import JoystickController from 'joystick-controller';
+import { getDirection, getId } from './CommonJs.js';
+import { loggerFactory } from './Logger.js';
+import { append, getProxyPath, s } from './VanillaJs.js';
+
+const logger = loggerFactory(import.meta);
+
+const JoyStick = {
+  Tokens: {},
+  Render: async function (options = { id: '', callback: ({ joyDataSet }) => {}, callBackTime: 50 }) {
+    const { callback, callBackTime } = options;
+    const id = options.id ? options.id : getId(this.Tokens, 'joystick-');
+    this.Tokens[id] = { callback };
+    append(
+      'body',
+      html`
+        <style>
+          .dynamic-joystick-container-${id} {
+            /* border: 2px solid red; */
+            left: 5px;
+            bottom: 5px;
+            height: 200px;
+            width: 200px;
+            z-index: 3;
+          }
+          .joy-img-background-${id} {
+            width: 93%;
+            height: 93%;
+            opacity: 0.8;
+          }
+          .dynamic-joystick-container-${id}:hover .joy-img-background-${id} {
+            width: 97%;
+            height: 97%;
+            opacity: 1;
+          }
+        </style>
+        <div class="abs dynamic-joystick-container-${id}">
+          <img class="abs center joy-img-background-${id}" src="${getProxyPath()}assets/joy/joy_alpha.png" />
+        </div>
+      `,
+    );
+
+    this.Tokens[id].instance = new JoystickController(
+      {
+        maxRange: 70,
+        level: 10,
+        radius: 70,
+        joystickRadius: 50,
+        opacity: 0.5,
+        // containerClass: 'joystick-container',
+        // controllerClass: 'joystick-controller',
+        // joystickClass: 'joystick',
+        distortion: true,
+        dynamicPosition: true,
+        dynamicPositionTarget: s(`.dynamic-joystick-container-${id}`),
+        mouseClickButton: 'ALL',
+        hideContextMenu: true,
+        // x: '120px',
+        // y: '120px',
+      },
+      (args = { x, y, leveledX, leveledY, distance, angle }) => {
+        const { angle } = args;
+        if (angle === 0) return (this.Tokens[id].joyDataSet = undefined);
+        const radians = parseFloat(angle);
+        const direction = getDirection({ radians });
+        this.Tokens[id].joyDataSet = { ...args, radians, direction };
+        // logger.info(this.Tokens[id].joyDataSet, id);
+      },
+    );
+    setInterval(() => {
+      if (!this.Tokens[id].joyDataSet || !this.Tokens[id].joyDataSet.direction) return;
+      this.Tokens[id].callback({ joyDataSet: this.Tokens[id].joyDataSet });
+    }, callBackTime);
+  },
+};
+
+export { JoyStick };

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

@@ -0,0 +1,73 @@
+import { cap, getId } from './CommonJs.js';
+
+const Keyboard = {
+  ActiveKey: {},
+  Event: {},
+  Init: async function (options = { callBackTime: 50 }) {
+    const { callBackTime } = options;
+    window.onkeydown = (e = new KeyboardEvent()) => {
+      this.ActiveKey[e.key] = true;
+      // e.composedPath()
+      // if (['Tab'].includes(e.key)) {
+      //   e.preventDefault();
+      //   e.stopPropagation();
+      //   e.stopImmediatePropagation();
+      // }
+    };
+    window.onkeyup = (e = new KeyboardEvent()) => {
+      delete this.ActiveKey[e.key];
+    };
+    setInterval(() => {
+      Object.keys(this.Event).map((key) => {
+        Object.keys(this.ActiveKey).map((activeKey) => {
+          if (activeKey in this.Event[key]) this.Event[key][activeKey]();
+        });
+      });
+    }, callBackTime);
+  },
+  instanceMultiPressKeyTokens: {},
+  instanceMultiPressKey: (options = { keys: [], id, timePressDelay, eventCallBack: () => {} }) => {
+    if (typeof options.keys[0] === 'string') options.keys[0] = [options.keys[0]];
+    if (!options.id) options.id = getId(Keyboard.instanceMultiPressKeyTokens, 'key-press-');
+    if (!options.timePressDelay) options.timePressDelay = 500;
+    const { id, timePressDelay, keys, eventCallBack } = options;
+    Keyboard.instanceMultiPressKeyTokens[id] = { ...options };
+
+    let indexCombined = -1;
+    for (const combinedKeys of keys) {
+      indexCombined++;
+      const privateIndexCombined = indexCombined;
+      const multiPressKey = {};
+      const triggerMultiPressKey = () => {
+        for (const key of Object.keys(multiPressKey)) {
+          if (!multiPressKey[key].press) return;
+        }
+        eventCallBack();
+      };
+      Keyboard.Event[`instanceMultiPressKey-${id}-${privateIndexCombined}`] = {};
+      for (const key of combinedKeys) {
+        multiPressKey[key] = {
+          press: false,
+          trigger: function () {
+            if (!multiPressKey[key].press) {
+              multiPressKey[key].press = true;
+              triggerMultiPressKey();
+              setTimeout(() => {
+                multiPressKey[key].press = false;
+              }, timePressDelay);
+            }
+          },
+        };
+
+        Keyboard.Event[`instanceMultiPressKey-${id}-${privateIndexCombined}`][key] = multiPressKey[key].trigger;
+        Keyboard.Event[`instanceMultiPressKey-${id}-${privateIndexCombined}`][key.toLowerCase()] =
+          multiPressKey[key].trigger;
+        Keyboard.Event[`instanceMultiPressKey-${id}-${privateIndexCombined}`][key.toUpperCase()] =
+          multiPressKey[key].trigger;
+        Keyboard.Event[`instanceMultiPressKey-${id}-${privateIndexCombined}`][cap(key)] = multiPressKey[key].trigger;
+      }
+    }
+  },
+};
+
+export { Keyboard };