underpost 2.7.1 → 2.7.2

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

@@ -1,77 +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 };
+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

@@ -1,73 +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 };
+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 };

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

@@ -1,157 +1,179 @@
-import { CoreService } from '../../services/core/core.service.js';
-import { s4 } from './CommonJs.js';
-import { darkTheme } from './Css.js';
-import { loggerFactory } from './Logger.js';
-import { append, getProxyPath, htmls, s } from './VanillaJs.js';
-
-const logger = loggerFactory(import.meta);
-
-const LoadingAnimation = {
-  bar: {
-    tokens: {},
-    getId: (id) => `bar-progress-${id.slice(1)}`,
-    play: async function (container) {
-      const id = this.getId(container);
-      const idEvent = s4() + s4() + s4();
-      this.tokens[container] = `${idEvent}`;
-      // diagonal-bar-background-animation
-      // #6d68ff #790079
-      append(
-        'body',
-        html`
-          <div
-            class="fix progress-bar box-shadow ${id}"
-            style="left: -100%; background: ${darkTheme
-              ? LoadingAnimation.darkColor
-                ? LoadingAnimation.darkColor
-                : `#c9c9c9`
-              : LoadingAnimation.lightColor
-              ? LoadingAnimation.lightColor
-              : `#515151`};"
-          ></div>
-        `,
-      );
-      for (const frame of [
-        { time: 500, value: 35 },
-        { time: 1250, value: 15 },
-        { time: 3000, value: 5 },
-        { time: 5000, value: 1 },
-      ])
-        setTimeout(() => {
-          if (this.tokens[container] === idEvent && s(`.${id}`)) {
-            s(`.${id}`).style.left = `-${frame.value}%`;
-            // const percentageRender = html`${100 - frame.value}%`;
-          }
-        }, frame.time);
-    },
-    stop: function (container) {
-      const id = this.getId(container);
-      delete this.tokens[container];
-      if (!s(`.${id}`)) return;
-      s(`.${id}`).style.left = '0%';
-      s(`.${id}`).style.opacity = 1;
-      setTimeout(() => (s(`.${id}`).style.opacity = 0));
-      setTimeout(() => s(`.${id}`).remove(), 400);
-    },
-  },
-  spinner: {
-    spinners: {},
-    getId: (id) => `spinner-progress-${id.slice(1)}`,
-    spinnerSrcValidator: async function (spinner) {
-      if (!this.spinners[spinner]) {
-        const url = getProxyPath() + 'dist/loadingio/' + spinner + '/index.html';
-        this.spinners[spinner] = {
-          url,
-          html: await CoreService.getRaw({ url }),
-        };
-        append(
-          'head',
-          html`<link
-            rel="stylesheet"
-            type="text/css"
-            href="${getProxyPath()}dist/loadingio/${spinner}/index.min.css"
-          />`,
-        );
-      }
-    },
-    play: async function (container, spinner = 'dual-ring') {
-      await this.spinnerSrcValidator(spinner);
-      const id = this.getId(container);
-      if (s(container))
-        append(
-          container,
-          html` <div class="in ${id} loading-animation-container">${this.spinners[spinner].html}</div> `,
-        );
-    },
-    stop: function (container) {
-      const id = this.getId(container);
-      if (!s(`.${id}`)) return;
-      s(`.${id}`).remove();
-    },
-  },
-  img: {
-    tokens: {},
-    load: function ({ key, src, classes, style }) {
-      this.tokens[key] = { src, classes, style };
-    },
-    play: function (container, key) {
-      append(
-        container,
-        html`<img
-          ${this.tokens[key].classes ? `class="${this.tokens[key].classes}"` : ''}
-          ${this.tokens[key].style ? `style="${this.tokens[key].style}"` : ''}
-          src="${getProxyPath()}${this.tokens[key].src}"
-        />`,
-      );
-    },
-  },
-  barLevel: {
-    append: () => {
-      s(`.ssr-blink-bar`).classList.remove('ssr-blink-bar');
-      append('.ssr-loading-bar', html`<div class="ssr-loading-bar-block ssr-blink-bar"></div>`);
-    },
-    clear: () => {
-      htmls('.ssr-loading-bar', html`<div class="ssr-loading-bar-block ssr-blink-bar"></div>`);
-    },
-  },
-  removeSplashScreen: function () {
-    if (s(`.clean-cache-container`)) s(`.clean-cache-container`).style.display = 'none';
-    if (s('.ssr-background'))
-      setTimeout(() => {
-        s('.ssr-background').style.opacity = 0;
-        setTimeout(async () => {
-          s('.ssr-background').style.display = 'none';
-        }, 300);
-      });
-  },
-  lightColor: null,
-  setLightColor: function (color) {
-    this.lightColor = color;
-  },
-  darkColor: null,
-  setDarkColor: function (color) {
-    this.darkColor = color;
-  },
-  RenderCurrentSrcLoad: function (event) {
-    if (s(`.ssr-loading-info`)) {
-      let nameSrcLoad = event.data.path;
-      if (nameSrcLoad) {
-        if (nameSrcLoad.match('assets'))
-          nameSrcLoad =
-            location.hostname +
-            location.pathname +
-            (location.pathname[location.pathname.length - 1] !== '/' ? '/' : '') +
-            'assets';
-        else if (!nameSrcLoad.match('api')) nameSrcLoad = undefined;
-        if (nameSrcLoad)
-          htmls(
-            `.ssr-loading-info`,
-            html`<span style="color: white">Download </span> <br />
-              <br />
-              ...${nameSrcLoad.slice(-30)}`,
-          );
-      }
-    }
-  },
-};
-export { LoadingAnimation };
+import { CoreService } from '../../services/core/core.service.js';
+import { BtnIcon } from './BtnIcon.js';
+import { s4 } from './CommonJs.js';
+import { darkTheme, renderCssAttr } from './Css.js';
+import { loggerFactory } from './Logger.js';
+import { append, getAllChildNodes, getProxyPath, htmls, s } from './VanillaJs.js';
+
+const logger = loggerFactory(import.meta);
+
+const LoadingAnimation = {
+  bar: {
+    tokens: {},
+    getId: (id) => `bar-progress-${id.slice(1)}`,
+    play: async function (container) {
+      const id = this.getId(container);
+      const idEvent = s4() + s4() + s4();
+      this.tokens[container] = `${idEvent}`;
+      // diagonal-bar-background-animation
+      // #6d68ff #790079
+      append(
+        'body',
+        html`
+          <div
+            class="fix progress-bar box-shadow ${id}"
+            style="left: -100%; background: ${darkTheme
+              ? LoadingAnimation.darkColor
+                ? LoadingAnimation.darkColor
+                : `#c9c9c9`
+              : LoadingAnimation.lightColor
+              ? LoadingAnimation.lightColor
+              : `#515151`};"
+          ></div>
+        `,
+      );
+      for (const frame of [
+        { time: 500, value: 35 },
+        { time: 1250, value: 15 },
+        { time: 3000, value: 5 },
+        { time: 5000, value: 1 },
+      ])
+        setTimeout(() => {
+          if (this.tokens[container] === idEvent && s(`.${id}`)) {
+            s(`.${id}`).style.left = `-${frame.value}%`;
+            // const percentageRender = html`${100 - frame.value}%`;
+          }
+        }, frame.time);
+    },
+    stop: function (container) {
+      const id = this.getId(container);
+      delete this.tokens[container];
+      if (!s(`.${id}`)) return;
+      s(`.${id}`).style.left = '0%';
+      s(`.${id}`).style.opacity = 1;
+      setTimeout(() => (s(`.${id}`).style.opacity = 0));
+      setTimeout(() => s(`.${id}`).remove(), 400);
+    },
+  },
+  spinner: {
+    getId: (id) => `spinner-progress-${id.slice(1)}`,
+    play: async function (container, spinner) {
+      if (!s(container)) return;
+      const id = this.getId(container);
+
+      let render;
+      switch (spinner) {
+        case 'dual-ring':
+          render = html`<div class="lds-dual-ring"></div>`;
+          break;
+        case 'dual-ring-mini':
+        default:
+          render = html`<div class="lds-dual-ring-mini"></div>`;
+          break;
+      }
+
+      const style = {
+        'text-align': 'center',
+      };
+
+      if (s(container).classList) {
+        const classes = Array.from(s(container).classList);
+        if (classes.find((e) => e.match('management-table-btn-mini'))) {
+          style.top = '-2px';
+          style.left = '-2px';
+        } else if (classes.find((e) => e.match('action-bar-box'))) {
+          style.top = '-30px';
+          style.left = '-12px';
+        }
+      }
+
+      append(
+        container,
+        html`
+          <div
+            class="in ${id}"
+            style="${renderCssAttr({
+              style,
+            })}"
+          >
+            ${render}
+          </div>
+        `,
+      );
+      const label = BtnIcon.findLabel(s(container));
+      if (label) label.classList.add('hide');
+    },
+    stop: function (container) {
+      const id = this.getId(container);
+      if (!s(`.${id}`)) return;
+      s(`.${id}`).remove();
+      const label = BtnIcon.findLabel(s(container));
+      if (label) label.classList.remove('hide');
+    },
+  },
+  img: {
+    tokens: {},
+    load: function ({ key, src, classes, style }) {
+      this.tokens[key] = { src, classes, style };
+    },
+    play: function (container, key) {
+      append(
+        container,
+        html`<img
+          ${this.tokens[key].classes ? `class="${this.tokens[key].classes}"` : ''}
+          ${this.tokens[key].style ? `style="${this.tokens[key].style}"` : ''}
+          src="${getProxyPath()}${this.tokens[key].src}"
+        />`,
+      );
+    },
+  },
+  barLevel: {
+    append: () => {
+      s(`.ssr-blink-bar`).classList.remove('ssr-blink-bar');
+      append('.ssr-loading-bar', html`<div class="ssr-loading-bar-block ssr-blink-bar"></div>`);
+    },
+    clear: () => {
+      htmls('.ssr-loading-bar', html`<div class="ssr-loading-bar-block ssr-blink-bar"></div>`);
+    },
+  },
+  removeSplashScreen: function () {
+    if (s(`.clean-cache-container`)) s(`.clean-cache-container`).style.display = 'none';
+    if (s('.ssr-background'))
+      setTimeout(() => {
+        s('.ssr-background').style.opacity = 0;
+        setTimeout(async () => {
+          s('.ssr-background').style.display = 'none';
+        }, 300);
+      });
+  },
+  lightColor: null,
+  setLightColor: function (color) {
+    this.lightColor = color;
+  },
+  darkColor: null,
+  setDarkColor: function (color) {
+    this.darkColor = color;
+  },
+  RenderCurrentSrcLoad: function (event) {
+    if (s(`.ssr-loading-info`)) {
+      let nameSrcLoad = event.data.path;
+      if (nameSrcLoad) {
+        if (nameSrcLoad.match('assets'))
+          nameSrcLoad =
+            location.hostname +
+            location.pathname +
+            (location.pathname[location.pathname.length - 1] !== '/' ? '/' : '') +
+            'assets';
+        else if (!nameSrcLoad.match('api')) nameSrcLoad = undefined;
+        if (nameSrcLoad)
+          htmls(
+            `.ssr-loading-info`,
+            html`<span style="color: white">Download </span> <br />
+              <br />
+              ...${nameSrcLoad.slice(-30)}`,
+          );
+      }
+    }
+  },
+};
+export { LoadingAnimation };