@maplat/ui 0.11.11 → 0.12.0

package/src/ui_init.ts

@@ -34,6 +34,7 @@ import type { MaplatUi } from "./index";
 import type { MaplatAppOption } from "./types";
 import i18n from "i18next";
 import i18nHttpBackend from "i18next-http-backend";
+import browserLanguage from "./browserlanguage";
 
 Swiper.use([Navigation, Pagination]);
 
@@ -54,12 +55,18 @@ export const META_KEYS = [
   "description"
 ];
 
-async function i18nLoader(ui: MaplatUi) {
+async function i18nLoader(ui: MaplatUi, appOption: MaplatAppOption) {
+  const appData = ui.core!.appData!;
+  const lang = appOption.lang || appData.lang || browserLanguage();
+  if (lang) ui.lang = lang;
+  if (ui.lang.toLowerCase() == "zh-hk" || ui.lang.toLowerCase() == "zh-hant")
+    ui.lang = "zh-TW";
+
   return new Promise<void>((resolve, _reject) => {
     const translib = i18n.use(i18nHttpBackend);
     translib.init(
       {
-        lng: "ja", //ui.core!.lang,
+        lng: ui.lang,
         fallbackLng: ["en"],
         backend: {
           loadPath: "assets/locales/{{lng}}/{{ns}}.json"
@@ -74,25 +81,191 @@ async function i18nLoader(ui: MaplatUi) {
   });
 }
 
+type UiReadyGate = {
+  promise: Promise<void>;
+  markControlsReady: () => void;
+  markSwipersReady: () => void;
+};
+
+function getUiReadyGate(ui: MaplatUi): UiReadyGate {
+  const key = "__uiReadyGate";
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const existing = (ui as any)[key] as UiReadyGate | undefined;
+  if (existing) return existing;
+
+  let resolveReady: (() => void) | undefined;
+  let controlsReady = false;
+  let swipersReady = false;
+  let resolved = false;
+  const promise = new Promise<void>(resolve => {
+    resolveReady = resolve;
+  });
+  const maybeResolve = () => {
+    if (resolved || !resolveReady) return;
+    if (controlsReady && swipersReady) {
+      resolved = true;
+      resolveReady();
+    }
+  };
+
+  const gate: UiReadyGate = {
+    promise,
+    markControlsReady: () => {
+      controlsReady = true;
+      maybeResolve();
+    },
+    markSwipersReady: () => {
+      swipersReady = true;
+      maybeResolve();
+    }
+  };
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (ui as any)[key] = gate;
+  return gate;
+}
+
+type UiDomGate = {
+  promise: Promise<void>;
+  isReady: () => boolean;
+  markReady: () => void;
+};
+
+function getUiDomGate(ui: MaplatUi): UiDomGate {
+  const key = "__uiDomGate";
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const existing = (ui as any)[key] as UiDomGate | undefined;
+  if (existing) return existing;
+
+  let resolveReady: (() => void) | undefined;
+  let ready = false;
+  const promise = new Promise<void>(resolve => {
+    resolveReady = resolve;
+  });
+  const gate: UiDomGate = {
+    promise,
+    isReady: () => ready,
+    markReady: () => {
+      if (ready) return;
+      ready = true;
+      resolveReady?.();
+    }
+  };
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (ui as any)[key] = gate;
+  return gate;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function applyMapChanged(ui: MaplatUi, map: any) {
+  const core = ui.core!;
+  if (!ui.baseSwiper || !ui.overlaySwiper) return;
+
+  ui.baseSwiper.setSlideMapID(map.mapID);
+  ui.overlaySwiper.setSlideMapID(map.mapID);
+
+  const title = map.officialTitle || map.title || map.label;
+  (
+    core.mapDivDocument!.querySelector(".map-title span") as HTMLElement
+  ).innerText = ui.translate!(title) || "";
+
+  if (ui.checkOverlayID(map.mapID)) {
+    ui.sliderNew.setEnable(true);
+  } else {
+    ui.sliderNew.setEnable(false);
+  }
+  const transparency = ui.sliderNew.get("slidervalue") * 100;
+  core.mapObject.setTransparency(transparency);
+
+  ui.updateEnvelope();
+  ui.updateUrl();
+}
+
 export async function uiInit(ui: MaplatUi, appOption: MaplatAppOption) {
-  await i18nLoader(ui);
-  ui.core = new Core(appOption);
+  let resolveI18nReady: (() => void) | undefined;
+  let rejectI18nReady: ((error: unknown) => void) | undefined;
+  let i18nResolved = false;
+  const i18nReady = new Promise<void>((resolve, reject) => {
+    resolveI18nReady = resolve;
+    rejectI18nReady = reject;
+  });
+  const existingUiHooks = appOption.uiHooks;
+  appOption.uiHooks = {
+    ...existingUiHooks,
+    onUiConfigure: async (context: unknown) => {
+      try {
+        await i18nLoader(ui, appOption);
+        if (!i18nResolved) {
+          i18nResolved = true;
+          resolveI18nReady?.();
+        }
+      } catch (error) {
+        if (!i18nResolved) {
+          i18nResolved = true;
+          rejectI18nReady?.(error);
+        }
+        throw error;
+      }
+      if (existingUiHooks?.onUiConfigure) {
+        return existingUiHooks.onUiConfigure(context);
+      }
+      return undefined;
+    },
+    onAppdataReady: async (context: unknown) => {
+      await initUiFromAppData(ui, appOption);
+      if (existingUiHooks?.onAppdataReady) {
+        return existingUiHooks.onAppdataReady(context);
+      }
+      return undefined;
+    },
+    onUiDomReady: async (context: unknown) => {
+      await i18nReady;
+      translateDom(ui);
+      initModalHandlers(ui);
+      initSplash(ui);
+      initDocumentTitle(ui);
+      if (existingUiHooks?.onUiDomReady) {
+        return existingUiHooks.onUiDomReady(context);
+      }
+      return undefined;
+    },
+    onCoreReady: async (context: unknown) => {
+      initControls(ui, appOption);
+      await initMapEventListeners(ui);
+      initGpsHandlers(ui, appOption);
+      if (existingUiHooks?.onCoreReady) {
+        return existingUiHooks.onCoreReady(context);
+      }
+      return undefined;
+    }
+  };
+  const core = (ui.core = new Core(appOption));
+  const uiReadyGate = getUiReadyGate(ui);
+  core.addEventListener("mapChanged", (evt: unknown) => {
+    const map = (evt as CustomEvent).detail;
+    (async () => {
+      await uiReadyGate.promise;
+      applyMapChanged(ui, map);
+    })();
+  });
+}
+
+async function initUiFromAppData(ui: MaplatUi, appOption: MaplatAppOption) {
+  const core = ui.core!;
   if (appOption.icon) {
     (pointer as Record<string, string>)["defaultpin.png"] = appOption.icon;
   }
-
   if (appOption.restore) {
     ui.setShowBorder(appOption.restore.showBorder || false);
-    if (appOption.restore.hideMarker) {
-      ui.core!.waitReady.then(() => {
-        ui.setHideMarker(appOption.restore!.hideMarker);
-      });
-    }
-    if (appOption.restore.openedMarker) {
-      console.log(appOption.restore.openedMarker);
-      ui.core!.waitReady.then(() => {
-        console.log(`Timeout ${appOption.restore!.openedMarker} `);
-        ui.handleMarkerActionById(appOption.restore!.openedMarker!);
+    if (appOption.restore.hideMarker || appOption.restore.openedMarker) {
+      core.waitReady.then(() => {
+        if (appOption.restore!.hideMarker) {
+          ui.setHideMarker(appOption.restore!.hideMarker);
+        }
+        if (appOption.restore!.openedMarker) {
+          ui.handleMarkerActionById(appOption.restore!.openedMarker!);
+        }
       });
     }
   } else if (appOption.restoreSession) {
@@ -106,46 +279,45 @@ export async function uiInit(ui: MaplatUi, appOption: MaplatAppOption) {
         !!parseInt(String(localStorage.getItem("showBorder") || "0"), 10)
       );
     }
-    if (ui.core!.initialRestore.hideMarker) {
-      ui.core!.waitReady.then(() => {
-        ui.setHideMarker(true);
-      });
+    if (core.initialRestore.hideMarker) {
+      ui.setHideMarker(true);
     }
   } else {
     ui.setShowBorder(false);
   }
 
+  const mapDivDocument = core.mapDivDocument!;
   ui.enablePoiHtmlNoScroll = appOption.enablePoiHtmlNoScroll || false;
   if (appOption.enableShare) {
-    ui.core!.mapDivDocument!.classList.add("enable_share");
+    mapDivDocument.classList.add("enable_share");
     ui.enableShare = true;
   }
   if (appOption.enableHideMarker) {
-    ui.core!.mapDivDocument!.classList.add("enable_hide_marker");
+    mapDivDocument.classList.add("enable_hide_marker");
     ui.enableHideMarker = true;
   }
   if (appOption.enableBorder) {
-    ui.core!.mapDivDocument!.classList.add("enable_border");
+    mapDivDocument.classList.add("enable_border");
     ui.enableBorder = true;
   }
   if (appOption.enableMarkerList) {
-    ui.core!.mapDivDocument!.classList.add("enable_marker_list");
+    mapDivDocument.classList.add("enable_marker_list");
     ui.enableMarkerList = true;
   }
   if (appOption.disableNoimage) {
     ui.disableNoimage = true;
   }
   if (appOption.stateUrl) {
-    ui.core!.mapDivDocument!.classList.add("state_url");
+    mapDivDocument.classList.add("state_url");
   }
   if (appOption.alwaysGpsOn) {
     ui.alwaysGpsOn = true;
   }
-  if (ui.core!.enableCache) {
-    ui.core!.mapDivDocument!.classList.add("enable_cache");
+  if (core.enableCache) {
+    mapDivDocument.classList.add("enable_cache");
   }
   if ("ontouchstart" in window) {
-    ui.core!.mapDivDocument!.classList.add("ol-touch");
+    mapDivDocument.classList.add("ol-touch");
     ui.isTouch = true;
   }
   if (appOption.mobileIF) {
@@ -156,21 +328,19 @@ export async function uiInit(ui: MaplatUi, appOption: MaplatAppOption) {
   }
 
   initDom(ui, appOption);
-  initModalHandlers(ui, appOption);
-  initMapEventListeners(ui);
-  initGpsHandlers(ui, appOption);
 }
 
 function initGpsHandlers(ui: MaplatUi, appOption: MaplatAppOption) {
+  const core = ui.core!;
   const enableOutOfMap = !appOption.presentationMode;
-  const mapDiv = ui.core!.mapDivDocument!;
+  const mapDiv = core.mapDivDocument!;
   const modalBase = mapDiv.querySelector(".modalBase")!;
   const modalTitle = mapDiv.querySelector(".modal_title") as HTMLElement;
   const modalGpsDContent = mapDiv.querySelector(
     ".modal_gpsD_content"
   ) as HTMLElement;
 
-  ui.core!.addEventListener("outOfMap", (_evt: unknown) => {
+  core.addEventListener("outOfMap", (_evt: unknown) => {
     console.log("Event: outOfMap");
     if (enableOutOfMap) {
       modalTitle.innerText = ui.t("app.out_of_map") || "";
@@ -181,7 +351,7 @@ function initGpsHandlers(ui: MaplatUi, appOption: MaplatAppOption) {
   });
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ui.core!.addEventListener("gps_error", (evt: any) => {
+  core.addEventListener("gps_error", (evt: any) => {
     console.log("GPS Error:", evt);
     const errorMap: Record<string, string> = {
       user_gps_deny: "app.user_gps_deny",
@@ -189,7 +359,6 @@ function initGpsHandlers(ui: MaplatUi, appOption: MaplatAppOption) {
       gps_timeout: "app.gps_timeout"
     };
 
-    if (!ui.core) return;
     modalTitle.innerText = ui.t("app.gps_error") || "";
     modalGpsDContent.innerText =
       ui.t(errorMap[evt.detail] || "app.gps_error") || "";
@@ -200,7 +369,7 @@ function initGpsHandlers(ui: MaplatUi, appOption: MaplatAppOption) {
   });
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ui.core!.addEventListener("gps_result", (evt: any) => {
+  core.addEventListener("gps_result", (evt: any) => {
     console.log("GPS Result:", evt);
     if (evt.detail && evt.detail.error) {
       const error = evt.detail.error;
@@ -273,6 +442,7 @@ function initSwipers(ui: MaplatUi, sources: any[]) {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const appBbox: any[] = [];
   let cIndex = 0;
+  const core = ui.core!;
 
   for (let i = 0; i < sources.length; i++) {
     const source = sources[i];
@@ -304,8 +474,8 @@ function initSwipers(ui: MaplatUi, sources: any[]) {
 
   if (ui.splashPromise) {
     ui.splashPromise.then(() => {
-      const modalElm = ui.core!.mapDivDocument!.querySelector(".modalBase")!;
-      prepareModal(modalElm, { root: ui.core!.mapDivDocument! }).hide();
+      const modalElm = core.mapDivDocument!.querySelector(".modalBase")!;
+      prepareModal(modalElm, { root: core.mapDivDocument! }).hide();
     });
   }
 
@@ -346,16 +516,16 @@ function initSwipers(ui: MaplatUi, sources: any[]) {
   baseSwiper.on("click", (_e: any) => {
     if (!baseSwiper.clickedSlide) return;
     const slide = baseSwiper.clickedSlide;
-    ui.core!.changeMap(slide.getAttribute("data")!);
+    core.changeMap(slide.getAttribute("data")!);
     delete ui._selectCandidateSources;
     baseSwiper.setSlideIndexAsSelected(
       parseInt(slide.getAttribute("data-swiper-slide-index") || "0", 10)
     );
   });
   if (baseSources.length < 2) {
-    ui.core!.mapDivDocument!.querySelector(".base-swiper")!.classList.add(
-      "single-map"
-    );
+    core
+      .mapDivDocument!.querySelector(".base-swiper")!
+      .classList.add("single-map");
   }
 
   const overlaySwiper = (ui.overlaySwiper = new Swiper(".overlay-swiper", {
@@ -383,16 +553,16 @@ function initSwipers(ui: MaplatUi, sources: any[]) {
   overlaySwiper.on("click", (_e: any) => {
     if (!overlaySwiper.clickedSlide) return;
     const slide = overlaySwiper.clickedSlide;
-    ui.core!.changeMap(slide.getAttribute("data")!);
+    core.changeMap(slide.getAttribute("data")!);
     delete ui._selectCandidateSources;
     overlaySwiper.setSlideIndexAsSelected(
       parseInt(slide.getAttribute("data-swiper-slide-index") || "0", 10)
     );
   });
   if (overlaySources.length < 2) {
-    ui.core!.mapDivDocument!.querySelector(".overlay-swiper")!.classList.add(
-      "single-map"
-    );
+    core
+      .mapDivDocument!.querySelector(".overlay-swiper")!
+      .classList.add("single-map");
   }
 
   baseSources.forEach(source => {
@@ -425,66 +595,24 @@ function initSwipers(ui: MaplatUi, sources: any[]) {
 
   baseSwiper.slideToLoop(0);
   overlaySwiper.slideToLoop(0);
-  ellips(ui.core!.mapDivDocument!);
+  ellips(core.mapDivDocument!);
+  getUiReadyGate(ui).markSwipersReady();
 }
 
-function initMapEventListeners(ui: MaplatUi) {
-  ui.core!.addEventListener("mapChanged", (evt: unknown) => {
-    const map = (evt as CustomEvent).detail;
-
-    ui.baseSwiper.setSlideMapID(map.mapID);
-    ui.overlaySwiper.setSlideMapID(map.mapID);
-
-    const title = map.officialTitle || map.title || map.label;
-    (
-      ui.core!.mapDivDocument!.querySelector(".map-title span") as HTMLElement
-    ).innerText = ui.translate!(title) || "";
-
-    if (ui.checkOverlayID(map.mapID)) {
-      ui.sliderNew.setEnable(true);
-    } else {
-      ui.sliderNew.setEnable(false);
-    }
-    const transparency = ui.sliderNew.get("slidervalue") * 100;
-    ui.core!.mapObject.setTransparency(transparency);
-
-    ui.updateEnvelope();
-    ui.updateUrl();
-  });
+async function initMapEventListeners(ui: MaplatUi) {
+  const core = ui.core!;
 
-  ui.core!.addEventListener("poi_number", (evt: unknown) => {
+  core.addEventListener("poi_number", (evt: unknown) => {
     const number = (evt as CustomEvent).detail;
     if (number) {
-      ui.core!.mapDivDocument!.classList.remove("no_poi");
+      core.mapDivDocument!.classList.remove("no_poi");
     } else {
-      ui.core!.mapDivDocument!.classList.add("no_poi");
+      core.mapDivDocument!.classList.add("no_poi");
     }
   });
 
-  ui.core!.addEventListener("sourceLoaded", (evt: unknown) => {
-    const sources = (evt as CustomEvent).detail;
-    initSwipers(ui, sources);
-  });
-
-  ui.core!.waitReady.then(() => {
-    // Capture pointerdown at viewport level to ensure we get pixel before any stopPropagation
-
-    ui.core!.mapObject.getViewport().addEventListener(
-      "pointerdown",
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (evt: any) => {
-        ui.lastClickPixel = ui.core!.mapObject.getEventPixel(evt);
-        ui.lastClickCoordinate = ui.core!.mapObject.getCoordinateFromPixel(
-          ui.lastClickPixel
-        );
-      },
-      true
-    );
-  });
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ui.core!.addEventListener("clickMarkers", (evt: any) => {
-    const data = evt.detail;
+  core.addEventListener("clickMarkers", (evt: unknown) => {
+    const data = (evt as CustomEvent).detail;
     if (data.length === 1) {
       ui.handleMarkerAction(data[0]);
     } else {
@@ -505,24 +633,49 @@ function initMapEventListeners(ui: MaplatUi) {
     }
   });
 
-  ui.core!.waitReady.then(() => {
+  if (!ui.baseSwiper) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ui.core!.mapObject.on("moveend", (_evt: any) => {
-      ui.updateUrl();
-    });
+    const sources = Object.values((core as any).cacheHash || {});
+    if (sources.length) {
+      const domGate = getUiDomGate(ui);
+      if (domGate.isReady()) {
+        initSwipers(ui, sources);
+      } else {
+        domGate.promise.then(() => {
+          if (!ui.baseSwiper) {
+            initSwipers(ui, sources);
+          }
+        });
+      }
+    }
+  }
+  const mapObject = core.mapObject;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  mapObject.on("moveend", (_evt: any) => {
+    ui.updateUrl();
   });
+
+  // Capture pointerdown at viewport level to ensure we get pixel before any stopPropagation
+  mapObject.getViewport().addEventListener(
+    "pointerdown",
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (evt: any) => {
+      ui.lastClickPixel = core.mapObject.getEventPixel(evt);
+      ui.lastClickCoordinate = core.mapObject.getCoordinateFromPixel(
+        ui.lastClickPixel
+      );
+    },
+    true
+  );
 }
 
-function initModalHandlers(ui: MaplatUi, appOption: MaplatAppOption) {
+function initModalHandlers(ui: MaplatUi) {
   let cachedMarkerListMapID: string | undefined;
-  const mapDiv = ui.core!.mapDivDocument!;
+  const core = ui.core!;
+  const mapDiv = core.mapDivDocument!;
   const modalBase = mapDiv.querySelector(".modalBase") as HTMLElement;
 
-  const restoreTransparency =
-    ui.core!.initialRestore.transparency ||
-    (appOption.restore ? appOption.restore.transparency : undefined);
-  const enableSplash = !ui.core!.initialRestore.mapID;
-
   // Delegated event listener for share buttons
   mapDiv.addEventListener("click", (evt: Event) => {
     const target = evt.target as HTMLElement;
@@ -592,155 +745,9 @@ function initModalHandlers(ui: MaplatUi, appOption: MaplatAppOption) {
     });
   });
 
-  ui.core!.addEventListener("uiPrepare", (_evt: unknown) => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const imageExtractor = function (text: any) {
-      const regexp = /\$\{([a-zA-Z0-9_\.\/\-]+)\}/g; // eslint-disable-line no-useless-escape
-      let ret = text;
-      let match;
-      while ((match = regexp.exec(text)) != null) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        ret = ret.replace(match[0], (pointer as any)[match[1]]);
-      }
-      return ret;
-    };
-
-    let i18nTargets = mapDiv.querySelectorAll("[data-i18n], [din]");
-    i18nTargets.forEach(target => {
-      const key =
-        target.getAttribute("data-i18n") || target.getAttribute("din");
-      (target as HTMLElement).innerText = imageExtractor(ui.t(key as string));
-    });
-    i18nTargets = mapDiv.querySelectorAll("[data-i18n-html], [dinh]");
-    i18nTargets.forEach(target => {
-      const key =
-        target.getAttribute("data-i18n-html") || target.getAttribute("dinh");
-      target.innerHTML = imageExtractor(ui.t(key as string));
-    });
-    // Explicitly fix app_loading_body with a more robust selector if needed, or re-run translation for it
-    const appLoadingBody = mapDiv.querySelector(
-      '[data-i18n="html.app_loading_body"], [din="html.app_loading_body"]'
-    );
-    if (appLoadingBody) {
-      (appLoadingBody as HTMLElement).innerHTML = imageExtractor(
-        ui.t("html.app_loading_body")
-      );
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const options: any = {
-      reverse: true,
-      tipLabel: ui.t("control.trans", { ns: "translation" })
-    };
-    if (restoreTransparency) {
-      options.initialValue = restoreTransparency / 100;
-    }
-    ui.sliderNew = new SliderNew(options);
-    ui.core!.appData!.controls = [
-      new Copyright({
-        tipLabel: ui.t("control.info", { ns: "translation" })
-      }),
-      new CompassRotate({
-        tipLabel: ui.t("control.compass", { ns: "translation" })
-      }),
-      new Zoom({
-        tipLabel: ui.t("control.zoom", { ns: "translation" })
-      }),
-      new SetGPS({
-        ui,
-        tipLabel: ui.t("control.gps", { ns: "translation" })
-      }),
-      new GoHome({
-        tipLabel: ui.t("control.home", { ns: "translation" })
-      }),
-      ui.sliderNew,
-      new Maplat({
-        tipLabel: ui.t("control.help", { ns: "translation" })
-      })
-    ];
-    if (ui.enableShare) {
-      ui.core!.appData!.controls.push(
-        new Share({
-          tipLabel: ui.t("control.share", { ns: "translation" })
-        })
-      );
-    }
-    if (ui.enableBorder) {
-      ui.core!.appData!.controls.push(
-        new Border({
-          tipLabel: ui.t("control.border", { ns: "translation" })
-        })
-      );
-    }
-    if (ui.enableHideMarker) {
-      ui.core!.appData!.controls.push(
-        new HideMarker({
-          tipLabel: ui.t("control.hide_marker", { ns: "translation" })
-        })
-      );
-    }
-    if (ui.enableMarkerList) {
-      ui.core!.appData!.controls.push(
-        new MarkerList({
-          tipLabel: ui.t("control.marker_list", { ns: "translation" })
-        })
-      );
-    }
-
-    // Contextmenu
-    ui.contextMenu = new ContextMenu({
-      eventType: "__dummy__",
-      width: 170,
-      defaultItems: false,
-      items: []
-    });
-    ui.core!.appData!.controls.push(ui.contextMenu);
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ui.sliderNew.on("propertychange", (evt: any) => {
-      if (evt.key === "slidervalue") {
-        ui.core!.setTransparency(ui.sliderNew.get(evt.key) * 100);
-        ui.updateUrl();
-      }
-    });
-
-    if (enableSplash) {
-      // Check Splash data
-      let splash = false;
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      if ((ui.core!.appData as any).splash) splash = true;
-
-      // const modal = new bsn.Modal(modalElm, { root: mapDiv });
-      const modal = prepareModal(modalBase, { root: mapDiv });
-
-      (mapDiv.querySelector(".modal_load_title") as HTMLElement).innerText =
-        ui.translate(ui.core!.appData!.appName) || "";
-      if (splash) {
-        mapDiv
-          .querySelector(".splash_img")!
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          .setAttribute("src", `img/${(ui.core!.appData as any).splash}`);
-        mapDiv.querySelector(".splash_div")!.classList.remove("hide");
-      }
-      ui.modalSetting("load");
-      modal.show();
-
-      const fadeTime = splash ? 1000 : 200;
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      ui.splashPromise = new Promise((resolve: any) => {
-        setTimeout(() => {
-          resolve();
-        }, fadeTime);
-      });
-    }
-
-    document.querySelector("title")!.innerHTML =
-      ui.translate(ui.core!.appName) || "";
-  });
-
-  ui.core!.waitReady.then(() => {
+  core.waitReady.then(() => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ui.core!.mapObject.on("click_control", (evt: any) => {
+    core.mapObject.on("click_control", (evt: any) => {
       const control = evt.control || (evt.frameState && evt.frameState.control);
       const modal = prepareModal(modalBase);
 
@@ -826,13 +833,13 @@ function initModalHandlers(ui: MaplatUi, appOption: MaplatAppOption) {
         modalBase.addEventListener("hidden.bs.modal", resetPanels);
 
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const currentMapID = (ui.core!.from as any).mapID;
+        const currentMapID = (core.from as any).mapID;
         if (cachedMarkerListMapID === currentMapID) return;
         cachedMarkerListMapID = currentMapID;
 
         listRoot.innerHTML = "";
 
-        const layers = ui.core!.listPoiLayers(false, true);
+        const layers = core.listPoiLayers(false, true);
 
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         layers.forEach((layer: any) => {
@@ -868,9 +875,9 @@ function initModalHandlers(ui: MaplatUi, appOption: MaplatAppOption) {
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           checkbox.addEventListener("change", (e: any) => {
             if (e.target.checked) {
-              ui.core!.showPoiLayer(layer.id);
+              core.showPoiLayer(layer.id);
             } else {
-              ui.core!.hidePoiLayer(layer.id);
+              core.hidePoiLayer(layer.id);
             }
           });
 
@@ -977,7 +984,7 @@ function initModalHandlers(ui: MaplatUi, appOption: MaplatAppOption) {
         });
       } else if (control === "copyright") {
         ui.modalSetting("map");
-        const mapData = ui.core!.from!;
+        const mapData = core.from!;
         const titleEl = mapDiv.querySelector(".modal_map .modal_title");
         if (titleEl) {
           const titleVal = mapData.get ? mapData.get("title") : mapData.title;
@@ -1030,7 +1037,7 @@ function initModalHandlers(ui: MaplatUi, appOption: MaplatAppOption) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const weiwudi = (mapData as any).weiwudi;
         if (
-          ui.core!.enableCache &&
+          core.enableCache &&
           weiwudi &&
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           !(mapData as any).vector
@@ -1206,7 +1213,7 @@ function initModalHandlers(ui: MaplatUi, appOption: MaplatAppOption) {
         modal.show();
       } else if (control === "border") {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        ui.setShowBorder(!(ui.core!.stateBuffer as any).showBorder);
+        ui.setShowBorder(!(core.stateBuffer as any).showBorder);
       } else if (control === "hideMarker") {
         const current = mapDiv.classList.contains("hide-marker");
         ui.setHideMarker(!current);
@@ -1216,7 +1223,173 @@ function initModalHandlers(ui: MaplatUi, appOption: MaplatAppOption) {
   });
 }
 
+function translateDom(ui: MaplatUi) {
+  const core = ui.core!;
+  const mapDiv = core.mapDivDocument!;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const imageExtractor = function (text: any) {
+    const regexp = /\$\{([a-zA-Z0-9_\.\/\-]+)\}/g; // eslint-disable-line no-useless-escape
+    let ret = text;
+    let match;
+    while ((match = regexp.exec(text)) != null) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ret = ret.replace(match[0], (pointer as any)[match[1]]);
+    }
+    return ret;
+  };
+
+  let i18nTargets = mapDiv.querySelectorAll("[data-i18n], [din]");
+  i18nTargets.forEach(target => {
+    const key = target.getAttribute("data-i18n") || target.getAttribute("din");
+    (target as HTMLElement).innerText = imageExtractor(ui.t(key as string));
+  });
+  i18nTargets = mapDiv.querySelectorAll("[data-i18n-html], [dinh]");
+  i18nTargets.forEach(target => {
+    const key =
+      target.getAttribute("data-i18n-html") || target.getAttribute("dinh");
+    target.innerHTML = imageExtractor(ui.t(key as string));
+  });
+  const appLoadingBody = mapDiv.querySelector(
+    '[data-i18n="html.app_loading_body"], [din="html.app_loading_body"]'
+  );
+  if (appLoadingBody) {
+    (appLoadingBody as HTMLElement).innerHTML = imageExtractor(
+      ui.t("html.app_loading_body")
+    );
+  }
+}
+
+function initSplash(ui: MaplatUi) {
+  const core = ui.core!;
+  const mapDiv = core.mapDivDocument!;
+  const modalBase = mapDiv.querySelector(".modalBase") as HTMLElement;
+  const enableSplash = !core.initialRestore.mapID;
+  if (!enableSplash) return;
+
+  // Check Splash data
+  let splash = false;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  if ((core.appData as any).splash) splash = true;
+
+  const modal = prepareModal(modalBase, { root: mapDiv });
+
+  (mapDiv.querySelector(".modal_load_title") as HTMLElement).innerText =
+    ui.translate(core.appData!.appName) || "";
+  if (splash) {
+    mapDiv
+      .querySelector(".splash_img")!
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      .setAttribute("src", `img/${(core.appData as any).splash}`);
+    mapDiv.querySelector(".splash_div")!.classList.remove("hide");
+  }
+  ui.modalSetting("load");
+  modal.show();
+
+  const fadeTime = splash ? 1000 : 200;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ui.splashPromise = new Promise((resolve: any) => {
+    setTimeout(() => {
+      resolve();
+    }, fadeTime);
+  });
+}
+
+function initDocumentTitle(ui: MaplatUi) {
+  const core = ui.core!;
+  document.querySelector("title")!.innerHTML = ui.translate(core.appName) || "";
+}
+
+function initControls(ui: MaplatUi, appOption: MaplatAppOption) {
+  const core = ui.core!;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const options: any = {
+    reverse: true,
+    tipLabel: ui.t("control.trans", { ns: "translation" })
+  };
+  const restoreTransparency =
+    core.initialRestore.transparency ||
+    (appOption.restore ? appOption.restore.transparency : undefined);
+  if (restoreTransparency) {
+    options.initialValue = restoreTransparency / 100;
+  }
+  ui.sliderNew = new SliderNew(options);
+  core.appData!.controls = [
+    new Copyright({
+      tipLabel: ui.t("control.info", { ns: "translation" })
+    }),
+    new CompassRotate({
+      tipLabel: ui.t("control.compass", { ns: "translation" })
+    }),
+    new Zoom({
+      tipLabel: ui.t("control.zoom", { ns: "translation" })
+    }),
+    new SetGPS({
+      ui,
+      tipLabel: ui.t("control.gps", { ns: "translation" })
+    }),
+    new GoHome({
+      tipLabel: ui.t("control.home", { ns: "translation" })
+    }),
+    ui.sliderNew,
+    new Maplat({
+      tipLabel: ui.t("control.help", { ns: "translation" })
+    })
+  ];
+  if (ui.enableShare) {
+    core.appData!.controls.push(
+      new Share({
+        tipLabel: ui.t("control.share", { ns: "translation" })
+      })
+    );
+  }
+  if (ui.enableBorder) {
+    core.appData!.controls.push(
+      new Border({
+        tipLabel: ui.t("control.border", { ns: "translation" })
+      })
+    );
+  }
+  if (ui.enableHideMarker) {
+    core.appData!.controls.push(
+      new HideMarker({
+        tipLabel: ui.t("control.hide_marker", { ns: "translation" })
+      })
+    );
+  }
+  if (ui.enableMarkerList) {
+    core.appData!.controls.push(
+      new MarkerList({
+        tipLabel: ui.t("control.marker_list", { ns: "translation" })
+      })
+    );
+  }
+
+  // Contextmenu
+  ui.contextMenu = new ContextMenu({
+    eventType: "__dummy__",
+    width: 170,
+    defaultItems: false,
+    items: []
+  });
+  core.appData!.controls.push(ui.contextMenu);
+
+  core.appData!.controls.forEach(control => {
+    core.mapObject.addControl(control);
+  });
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ui.sliderNew.on("propertychange", (evt: any) => {
+    if (evt.key === "slidervalue") {
+      core.setTransparency(ui.sliderNew.get(evt.key) * 100);
+      ui.updateUrl();
+    }
+  });
+  getUiReadyGate(ui).markControlsReady();
+}
+
 function initDom(ui: MaplatUi, appOption: MaplatAppOption) {
+  const core = ui.core!;
   // Inject Custom Toast Styles
   const style = document.createElement("style");
   style.innerHTML = `
@@ -1261,11 +1434,12 @@ function initDom(ui: MaplatUi, appOption: MaplatAppOption) {
                 <d c="swiper-button-prev overlay-prev swiper-button-white"> </d>
                   </d> `);
   for (let i = newElems.length - 1; i >= 0; i--) {
-    ui.core!.mapDivDocument!.insertBefore(
+    core.mapDivDocument!.insertBefore(
       newElems[i],
-      ui.core!.mapDivDocument!.firstChild
+      core.mapDivDocument!.lastChild
     );
   }
+  getUiDomGate(ui).markReady();
 
   newElems = createElement(`<d c="modal modalBase" tabindex="-1" role="dialog"
     aria-labelledby="staticModalLabel" aria-hidden="true" data-show="true" data-keyboard="false"
@@ -1386,16 +1560,16 @@ function initDom(ui: MaplatUi, appOption: MaplatAppOption) {
 </d> `);
 
   for (let i = newElems.length - 1; i >= 0; i--) {
-    ui.core!.mapDivDocument!.insertBefore(
+    core.mapDivDocument!.insertBefore(
       newElems[i],
-      ui.core!.mapDivDocument!.firstChild
+      core.mapDivDocument!.firstChild
     );
   }
 
   // PWA
   if (pwaManifest) {
     if (pwaManifest === true) {
-      pwaManifest = `./pwa/${ui.core!.appid}_manifest.json`;
+      pwaManifest = `./pwa/${core.appid}_manifest.json`;
     }
     if (!pwaWorker) {
       pwaWorker = "./service-worker.js";