shoptime/com.twin.app.shoptime/src/utils/helperMethods.js

import Enact_$L from "@enact/i18n/$L";

import stringReSourceEn from "../../resources/en/GB/strings.json";
import stringReSourceDe from "../../resources/de/strings.json";
import stringReSourceRu from "../../resources/ru/strings.json";
import { Job } from "@enact/core/util";

let _boundingRectCache = {};
const BOUNDING_RECT_IGNORE_TIME = 100;

const generateUUID = () => {
  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
    var r = (Math.random() * 16) | 0,
      v = c === "x" ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  });
};

/**
 * prevent multiple call
 * @param {*} node
 * @returns
 */
const clearBoundingRectCache = new Job(() => {
  _boundingRectCache = {};
}, 5000);

export const getBoundingClientRect = (node) => {
  clearBoundingRectCache.start();
  if (!node.dataset.uuid) {
    node.dataset.uuid = generateUUID();
  }

  const uuid = node.dataset.uuid;

  if (_boundingRectCache[uuid]) {
    if (
      Date.now() - _boundingRectCache[uuid].called <
      BOUNDING_RECT_IGNORE_TIME
    ) {
      return _boundingRectCache[uuid].boundingRect;
    }
  }

  const boundingRect = node.getBoundingClientRect();

  _boundingRectCache[uuid] = {
    boundingRect: boundingRect?.toJSON(),
    called: Date.now(),
  };

  return boundingRect;
};

const stringReSource = {
  en: stringReSourceEn,
  de: stringReSourceDe,
  ru: stringReSourceRu,
};

export const $L = (str) => {
  let languageSetting = "system";
  let language = "en";

  if (
    typeof window === "object" &&
    window.store &&
    window.store.getState().common &&
    window.store.getState().common.localSettings
  ) {
    languageSetting =
      window.store.getState().common.localSettings.languageSetting;
  }

  if (
    typeof window === "object" &&
    window.PalmSystem &&
    languageSetting === "system"
  ) {
    return Enact_$L(str).replace(/{br}/g, "{br}");
  } else if (typeof window === "object") {
    language =
      typeof window.navigator === "object"
        ? window.navigator.language || window.navigator.userLanguage
        : "en-GB";

    if (languageSetting !== "system") {
      language = languageSetting;
    }

    language = language.split("-")[0];
    //to test
    // language = 'de';
    const resource = stringReSource[language] || stringReSource.en;

    if (typeof str === "object") {
      if (resource && resource[str.key]) {
        return resource[str.key].replace(/{br}/g, "{br}");
      } else {
        return str.value;
      }
    } else if (resource && resource[str]) {
      return resource[str].replace(/{br}/g, "{br}");
    }
  }

  return str && str.replace(/{br}/g, "{br}");
};

export const createQueryString = (object) => {
  const parts = [];
  for (const key of Object.getOwnPropertyNames(object)) {
    if (
      object[key] !== null &&
      object[key] !== undefined &&
      object[key] !== ""
    ) {
      parts.push(`${key}=${encodeURIComponent(object[key])}`);
    }
  }
  return parts.join("&");
};

export const wait = (time) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, time);
  });
};

export const scaleW = (value) => {
  if (typeof window === "object") {
    return value * (window.innerWidth / 1920);
  }
  return value;
};

export const scaleH = (value) => {
  if (typeof window === "object") {
    return value * (window.innerHeight / 1080);
  }
  return value;
};

//for test

let localLaunchParams = {
  // contentTarget: "V3_8001_Tv_PD_1_A639507_0_766",
  // contentTarget: "V3_8001_Tv_LS_1_USQVC_0_766",
  // contentTarget: "V3_8001_Tv_VS_1_6643524e649d1d4bf0ad523f_0_766",
  // contentTarget: "V3_8001_Tv_TD_11_820_3705018",
  // contentTarget: "V3_8001_Tv_HD_7_527_0",
  // contentTarget: "V3_8001_Tv_HP_7_527_0",
  // contentTarget: "V3_8001_Tv_WE_twin",
  // contentTarget: "V3_8001_Tv_OS_1006_Home",
  // contentTarget: "V3_8001_Tv_BS",
  // contentTarget: "V3_8001_Tv_PS",
  // contentTarget: "V3_8001_Tv_SC_1000_Fashion_Item",
  // contentTarget: "V3_8001_Tv_FB_1",
};

export const getLaunchParams = () => {
  let params = {};

  if (
    typeof window === "object" &&
    window.PalmSystem &&
    window.PalmSystem.launchParams
  ) {
    try {
      params = JSON.parse(window.PalmSystem.launchParams);
      if (params["x-webos-app-container-launch"] === true) {
        params = params.details;
      }
    } catch (e) {
      params = {};
    }
    return params;
  } else {
    return localLaunchParams;
  }
};

export const clearLaunchParams = () => {
  console.log("common.clearLaunchParams");
  if (
    typeof window === "object" &&
    window.PalmSystem &&
    window.PalmSystem.launchParams
  ) {
    window.PalmSystem.launchParams = "";
  } else {
    localLaunchParams = {};
  }
};

export const readLocalStorage = (key, defaultValue) => {
  const value = typeof window === "object" && window.localStorage.getItem(key);
  if (!value && defaultValue !== undefined) {
    return defaultValue;
  }
  return value === "undefined" ? null : JSON.parse(value);
};

export const writeLocalStorage = (key, value) => {
  if (typeof window === "object") {
    window.localStorage.setItem(key, JSON.stringify(value));
  }
};

export const convertToTimeFormat = (timeString, isIncludeDate = false) => {
  const date = new Date(timeString);

  let options = { hour: "numeric", minute: "2-digit", hour12: true };
  let pattern = " ";

  if (isIncludeDate) {
    options = {
      ...options,
      month: "2-digit",
      day: "2-digit",
      year: "numeric",
      hour: "2-digit",
    };
    pattern = ",";
  }

  return new Intl.DateTimeFormat("en-US", options)
    .format(date)
    .replace(pattern, "");
};

export const getTranslate3dValueByDirection = (
  element,
  isHorizontal = true
) => {
  try {
    const transformStyle = window.getComputedStyle(element).transform;

    if (!transformStyle || transformStyle === "none") {
      throw new Error("transfrom style not found");
    }

    const transformMatrix = transformStyle.match(/^matrix\((.+)\)$/);

    let index, value;

    if (transformMatrix) {
      const matrixValues = transformMatrix[1].split(", ");

      index = isHorizontal ? 4 : 5;

      value = parseFloat(Math.abs(matrixValues[index]));
    }

    return value;
  } catch (error) {
    console.error(error.message);
  }
};

export const formatGMTString = (date) => {
  let string = date.toISOString().replace(/T/, " ").replace(/\..+/, "");

  return string;
};

export const getSpottableDescendants = (containerId) => {
  let container = document.querySelector(
    `[data-spotlight-id="${containerId}"]`
  );
  if (container) {
    return container.querySelectorAll('[class*="spottable"]');
  }
  return [];
};

export const isElementInContainer = (element, container) => {
  // 요소와 컨테이너의 사각형 정보 가져오기
  if (typeof window === "object") {
    const elementRect = getBoundingClientRect(element);
    const containerRect = container
      ? getBoundingClientRect(container)
      : {
          top: 0,
          left: 0,
          bottom: window.innerHeight,
          right: window.innerWidth,
        };

    // 요소가 컨테이너의 가시 영역 안에 있는지 판단
    return (
      elementRect.top >= containerRect.top &&
      elementRect.left >= containerRect.left &&
      elementRect.bottom <= containerRect.bottom &&
      elementRect.right <= containerRect.right
    );
  } else {
    return false;
  }
};

export const isChildFullyShowing = (parentNode, childNode) => {
  try {
    const parentRect = getBoundingClientRect(parentNode);
    const childRect = getBoundingClientRect(childNode);

    if (
      childRect.top >= parentRect.top &&
      childRect.left >= parentRect.left &&
      childRect.bottom <= parentRect.bottom &&
      childRect.right <= parentRect.right
    ) {
      return true;
    }
  } catch (e) {
    return true;
  }

  return false;
};