@maplat/ui 0.11.4 → 0.11.5

package/src/ui_marker.ts

@@ -29,7 +29,8 @@ import type { MarkerData, MediaSetting, MediaObject } from "./types";
 export function poiWebControl(
   ui: MaplatUi,
   div: HTMLElement,
-  data: MarkerData
+  data: MarkerData,
+  showShare: boolean = true
 ) {
   // let poiSwiper: SwiperInstance | undefined;
   div.innerHTML = "";
@@ -113,15 +114,15 @@ export function poiWebControl(
         }
 
         // Map other attributes
-        Object.keys(mediaObj).forEach(key => {
-          if (["src", "type", "thumbnail", "desc"].includes(key)) return;
+        for (const key of Object.keys(mediaObj)) {
+          if (["src", "type", "thumbnail", "desc"].includes(key)) continue;
           const val = mediaObj[key];
           if (typeof val === "boolean") {
             if (val) slideAttrs += ` ${key}`;
           } else if (val !== undefined && val !== null) {
             slideAttrs += ` ${key}="${val}"`;
           }
-        });
+        }
 
         slides.push(`<cc-swiper-slide ${slideAttrs}></cc-swiper-slide>`);
       });
@@ -153,6 +154,36 @@ export function poiWebControl(
     (htmlDiv.querySelector(".poi_desc") as HTMLElement).innerHTML = (
       ui.core!.translate(data.desc) || ""
     ).replace(/\n/g, "<br>");
+
+    // Show/hide share buttons based on showShare parameter
+    const shareButtons =
+      ui.core!.mapDivDocument!.querySelector(".poi_share_buttons");
+    const qrDiv = ui.core!.mapDivDocument!.querySelector(".qr_view_poi");
+
+    if (showShare) {
+      shareButtons?.classList.remove("hide");
+      qrDiv?.classList.remove("hide");
+
+      // Auto-generate QR code
+      if (qrDiv) {
+        import("qrcode").then(QRCode => {
+          QRCode.toCanvas(
+            window.location.href,
+            { width: 128, margin: 1 },
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            (err: any, canvas: any) => {
+              if (!err) {
+                qrDiv.innerHTML = "";
+                qrDiv.appendChild(canvas);
+              }
+            }
+          );
+        });
+      }
+    } else {
+      shareButtons?.classList.add("hide");
+      qrDiv?.classList.add("hide");
+    }
   }
 
   return undefined;
@@ -204,18 +235,26 @@ export function handleMarkerAction(ui: MaplatUi, data: MarkerData) {
     }
   }
 
-  poiWebControl(ui, poiWebDiv as HTMLElement, data);
+  // Show share buttons only if both enableShare and stateUrl are true
+  const showShare = ui.enableShare && !!ui.appOption.stateUrl;
+  poiWebControl(ui, poiWebDiv as HTMLElement, data, showShare);
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const hiddenFunc = (_event: any) => {
     modalElm.removeEventListener("hidden.bs.modal", hiddenFunc, false);
-    ui.core!.unselectMarker();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (ui.core as any).unselectMarker?.();
+    ui.selectedMarkerNamespaceID = undefined;
+    ui.updateUrl();
   };
   modalElm.addEventListener("hidden.bs.modal", hiddenFunc, false);
 
-  ui.core!.selectMarker(data.namespaceID);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (ui.core as any).selectMarker?.(data.namespaceID);
+  ui.selectedMarkerNamespaceID = data.namespaceID;
   ui.modalSetting("poi");
   modal.show();
+  ui.updateUrl();
 }
 
 export function showContextMenu(ui: MaplatUi, list: MarkerData[]) {
@@ -354,16 +393,14 @@ export function setHideMarker(ui: MaplatUi, flag: boolean) {
 
 export function checkOverlayID(ui: MaplatUi, mapID: string) {
   const swiper = ui.overlaySwiper;
-  const sliders = swiper.$el[0].querySelectorAll(".swiper-slide");
-  for (let i = 0; i < sliders.length; i++) {
-    const slider = sliders[i];
-    if (slider.getAttribute("data") === mapID) {
-      return true;
-    }
-  }
-  return false;
+  const sliders = Array.from(swiper.$el[0].querySelectorAll(".swiper-slide"));
+  return sliders.some(slider => slider.getAttribute("data") === mapID);
 }
 
-export function handleMarkerActionById(_ui: MaplatUi, markerId: string) {
-  console.log(`Open marker: ${markerId}`);
+export function handleMarkerActionById(ui: MaplatUi, markerId: string) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const data = (ui.core as any).getMarker(markerId);
+  if (data) {
+    handleMarkerAction(ui, data);
+  }
 }

package/src/ui_utils.ts

@@ -12,11 +12,11 @@ export function prepareModal(modalElm: Element | HTMLElement, options?: any) {
 
   if (!el.hasAttribute(MODAL_CLOSE_ATTACHED)) {
     const closeBtns = el.querySelectorAll(".close, .modal-footer button");
-    for (let i = 0; i < closeBtns.length; i++) {
-      closeBtns[i].addEventListener("click", () => {
+    closeBtns.forEach(btn => {
+      btn.addEventListener("click", () => {
         modal.hide();
       });
-    }
+    });
     el.setAttribute(MODAL_CLOSE_ATTACHED, "true");
   }
 
@@ -85,11 +85,11 @@ export function ellips(mapDivDocument: HTMLElement) {
     }
   };
   const swiperItems = mapDivDocument.querySelectorAll(".swiper-slide div");
-  for (let i = 0; i < swiperItems.length; i++) {
-    const swiperItem = swiperItems[i] as HTMLElement;
+  swiperItems.forEach(item => {
+    const swiperItem = item as HTMLElement;
     stringSplit(swiperItem);
     omitCheck(swiperItem);
-  }
+  });
 }
 
 export function isMaplatSource(source: unknown): source is {