@maplat/ui 0.11.4 → 0.11.5

package/dist/ui_marker.d.ts

@@ -1,9 +1,9 @@
 import { MaplatUi } from './index';
 import { MarkerData } from './types';
-export declare function poiWebControl(ui: MaplatUi, div: HTMLElement, data: MarkerData): undefined;
+export declare function poiWebControl(ui: MaplatUi, div: HTMLElement, data: MarkerData, showShare?: boolean): undefined;
 export declare function handleMarkerAction(ui: MaplatUi, data: MarkerData): void;
 export declare function showContextMenu(ui: MaplatUi, list: MarkerData[]): void;
 export declare function xyToMapIDs(ui: MaplatUi, xy: any, threshold?: number): Promise<any>;
 export declare function setHideMarker(ui: MaplatUi, flag: boolean): void;
 export declare function checkOverlayID(ui: MaplatUi, mapID: string): boolean;
-export declare function handleMarkerActionById(_ui: MaplatUi, markerId: string): void;
+export declare function handleMarkerActionById(ui: MaplatUi, markerId: string): void;

package/less/maplat-specific.less

@@ -87,6 +87,7 @@ li:has(+ .open) .dli-chevron {
 
 .modal_cache_content,
 .modal_share_pos,
+.modal_share_state,
 .share_help,
 .border_help,
 .hide_marker_help,
@@ -95,6 +96,7 @@ li:has(+ .open) .dli-chevron {
 }
 
 &.enable_cache .modal_cache_content,
+&.state_url .modal_share_state,
 &.state_url .modal_share_pos {
   display: block;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maplat/ui",
-  "version": "0.11.4",
+  "version": "0.11.5",
   "description": "Maplat is the cool Historical Map/Illustrated Map Viewer.\nIt can transform each map coordinates with nonlinear but homeomorphic projection and makes possible that the maps can collaborate with GPS/accurate maps, without distorting original maps.",
   "type": "module",
   "main": "dist/maplat-ui.umd.js",
@@ -36,7 +36,7 @@
   "dependencies": {
     "@c4h/chuci": "0.2.4",
     "@c4h/weiwudi": "^0.2.0",
-    "@maplat/core": "0.12.2",
+    "@maplat/core": "0.12.3",
     "@turf/turf": "^7.3.1",
     "@types/page": "^1.11.9",
     "bootstrap.native": "^5.1.6",

package/src/contextmenu/base.ts

@@ -62,10 +62,9 @@ export default class Base extends Control {
    * Remove all elements from the menu.
    */
   clear() {
-    Object.keys(this.Internal.items).forEach(
-      this.Html.removeMenuEntry,
-      this.Html
-    );
+    for (const key of Object.keys(this.Internal.items)) {
+      this.Html.removeMenuEntry(key);
+    }
   }
 
   /**

package/src/contextmenu/helpers/mix.ts

@@ -33,7 +33,7 @@ export function assert(
  * @returns Boolean
  */
 export function contains(str_test: string, str: string) {
-  return !!~str.indexOf(str_test);
+  return str.includes(str_test);
 }
 
 export function getUniqueId(prefix: string = "id_") {
@@ -100,21 +100,20 @@ export function emptyArray(array: unknown[]) {
 }
 
 export function anyMatchInArray(source: unknown[], target: unknown[]) {
-  return source.some((each: unknown) => target.indexOf(each) >= 0);
+  return source.some((each: unknown) => target.includes(each));
 }
 
 export function everyMatchInArray(arr1: unknown[], arr2: unknown[]) {
-  return arr2.every((each: unknown) => arr1.indexOf(each) >= 0);
+  return arr2.every((each: unknown) => arr1.includes(each));
 }
 
 export function anyItemHasValue(
   obj: Record<string, unknown>,
   has: boolean = false
 ) {
-  const keys = Object.keys(obj);
-  keys.forEach(key => {
+  for (const key of Object.keys(obj)) {
     const value = obj[key];
     if (!isEmpty(typeof value === "string" ? value : null)) has = true;
-  });
+  }
   return has;
 }

package/src/contextmenu/html.ts

@@ -97,7 +97,7 @@ export class Html {
       if (cItem.icon) {
         if (cItem.classname === "") {
           cItem.classname = CSS_VARS.icon;
-        } else if (cItem.classname.indexOf(CSS_VARS.icon) === -1) {
+        } else if (!cItem.classname.includes(CSS_VARS.icon)) {
           cItem.classname += ` ${CSS_VARS.icon}`;
         }
         element.setAttribute("style", `background-image:url(${cItem.icon})`);

package/src/contextmenu/internal.ts

@@ -102,10 +102,10 @@ export class Internal {
 
   getItemsLength() {
     let count = 0;
-    Object.keys(this.items).forEach(k => {
-      if (this.items[k].submenu || this.items[k].separator) return;
+    for (const k of Object.keys(this.items)) {
+      if (this.items[k].submenu || this.items[k].separator) continue;
       count++;
-    });
+    }
     return count;
   }
 

package/src/index.ts

@@ -75,6 +75,7 @@ export class MaplatUi extends EventTarget {
   lastClickPixel: Pixel | undefined;
   lastClickCoordinate: Coordinate | undefined;
   lastGPSError: string | undefined;
+  selectedMarkerNamespaceID: string | undefined;
 
   constructor(appOption: MaplatAppOption) {
     super();
@@ -86,9 +87,6 @@ export class MaplatUi extends EventTarget {
       page((ctx: any, _next: any) => {
         let pathes = ctx.canonicalPath.split("#!");
         let path = pathes.length > 1 ? pathes[1] : pathes[0];
-        console.log(
-          `[Debug] Page callback.Canonical: ${ctx.canonicalPath}, Path: ${path} `
-        );
 
         pathes = path.split("?");
         path = pathes[0];
@@ -107,7 +105,6 @@ export class MaplatUi extends EventTarget {
         path.split("/").forEach((state: any) => {
           if (!state) return;
           const line = state.split(":");
-          console.log(`[Debug] Parsing state: ${state} `, line);
           switch (line[0]) {
             case "s":
               restore.mapID = line[1];
@@ -159,44 +156,17 @@ export class MaplatUi extends EventTarget {
         });
         if (!this.core) {
           if (restore.mapID) {
-            console.log(
-              `[Debug] Init with restore: `,
-              JSON.parse(JSON.stringify(restore))
-            );
             appOption.restore = restore;
             this.restoring = true;
           }
-          const preRot = restore.position
-            ? restore.position.rotation
-            : "undefined";
-          console.log(`[Debug] Before initializer: rotation = ${preRot} `);
 
           this.initializer(appOption).then(() => {
             this.core!.waitReady.then(() => {
-              // Fix: Manually apply rotation as Core 0.11.1 preserves it but fails to apply it view-side
-              // if (restore.position && restore.position.rotation !== undefined) {
-              //   console.log(`[Debug] Manually applying rotation: ${ restore.position.rotation } `);
-              //   this.core!.mapObject.getView().setRotation(restore.position.rotation);
-              // }
-              // Fix: Verify transparency state before updating URL
-              if (this.sliderNew) {
-                // Ensure map transparency matches restore if slider is ready
-                const currentTrans = this.sliderNew.get("slidervalue") * 100;
-                console.log(`[Debug] Slider transparency: ${currentTrans} `);
-              } else {
-                console.log(`[Debug] Slider not ready yet`);
-              }
-
               this.restoring = false;
-              console.log(`[Debug] Calling updateUrl from Init`);
               this.updateUrl();
             });
           });
         } else if (restore.mapID) {
-          console.log(
-            `[Debug] ChangeMap with restore: `,
-            JSON.parse(JSON.stringify(restore))
-          );
           this.restoring = true;
 
           this.core!.waitReady.then(() => {
@@ -343,6 +313,11 @@ export class MaplatUi extends EventTarget {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       path += `/om:${(this.core!.stateBuffer as any).markerList}`;
 
+    // Add selected marker to URL
+    if (this.selectedMarkerNamespaceID) {
+      path += `/om:${this.selectedMarkerNamespaceID}`;
+    }
+
     if (this.pathThatSet !== path) {
       this.pathThatSet = path;
       page(`#!${path}`);
@@ -354,7 +329,7 @@ export class MaplatUi extends EventTarget {
 
     this.core!.mapObject.resetEnvelope();
     if (this._selectCandidateSources) {
-      Object.keys(this._selectCandidateSources).forEach(key => {
+      for (const key of Object.keys(this._selectCandidateSources)) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if ((this.core!.mapObject as any).removeEnvelope) {
           console.log(`[Debug] Removing envelope for ${key}`);
@@ -363,7 +338,7 @@ export class MaplatUi extends EventTarget {
             this._selectCandidateSources![key]
           );
         }
-      });
+      }
     }
 
     this._selectCandidateSources = {};

package/src/maplat_control.ts

@@ -45,12 +45,12 @@ function hexRgb(hex: string) {
 
 export function setControlSettings(options: Record<string, string>) {
   control_settings = options;
-  Object.keys(control_settings).forEach(key => {
+  for (const key of Object.keys(control_settings)) {
     if (delegator[key]) {
       (pointer as Record<string, string>)[delegator[key]] =
         control_settings[key];
     }
-  });
+  }
 }
 
 export class SliderNew extends Control {

package/src/ui_init.ts

@@ -1,4 +1,4 @@
-import { MaplatApp as Core, createElement } from "@maplat/core";
+import { MaplatApp as Core, createElement, MaplatApp } from "@maplat/core";
 
 import pointer from "./pointer_images";
 import { Swiper } from "./swiper_ex";
@@ -286,14 +286,13 @@ function initSwipers(ui: MaplatUi, sources: any[]) {
   const baseSources: any[] = [];
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const overlaySources: any[] = [];
-  for (let i = 0; i < sources.length; i++) {
-    const source = sources[i];
+  sources.forEach(source => {
     if (isBasemap(source)) {
       baseSources.push(source);
     } else {
       overlaySources.push(source);
     }
-  }
+  });
 
   const baseSwiper = (ui.baseSwiper = new Swiper(".base-swiper", {
     slidesPerView: 2,
@@ -369,8 +368,7 @@ function initSwipers(ui: MaplatUi, sources: any[]) {
     );
   }
 
-  for (let i = 0; i < baseSources.length; i++) {
-    const source = baseSources[i];
+  baseSources.forEach(source => {
     const thumbKey = source.thumbnail ? source.thumbnail.split("/").pop() : "";
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const thumbUrl = (pointer as any)[thumbKey] || source.thumbnail;
@@ -380,9 +378,8 @@ function initSwipers(ui: MaplatUi, sources: any[]) {
           thumbUrl
         }"><div> ${ui.core!.translate(source.label)}</div> </div> `
     );
-  }
-  for (let i = 0; i < overlaySources.length; i++) {
-    const source = overlaySources[i];
+  });
+  overlaySources.forEach(source => {
     const colorCss = source.envelope ? ` ${source.envelopeColor}` : "";
     const thumbKey = source.thumbnail ? source.thumbnail.split("/").pop() : "";
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -393,7 +390,7 @@ function initSwipers(ui: MaplatUi, sources: any[]) {
           thumbUrl
         }"><div> ${ui.core!.translate(source.label)}</div> </div> `
     );
-  }
+  });
 
   overlaySwiper.on("slideChange", () => {
     ui.updateEnvelope();
@@ -502,7 +499,7 @@ function initModalHandlers(ui: MaplatUi, appOption: MaplatAppOption) {
   // Delegated event listener for share buttons
   mapDiv.addEventListener("click", (evt: Event) => {
     const target = evt.target as HTMLElement;
-    const btn = target.closest(".share");
+    const btn = target.closest(".share") || target.closest(".share_button");
     if (!btn) return;
 
     console.log("Share button clicked:", btn);
@@ -540,16 +537,33 @@ function initModalHandlers(ui: MaplatUi, appOption: MaplatAppOption) {
         "_blank",
         "width=650,height=450,menubar=no,toolbar=no,scrollbars=yes"
       );
+    } else if (cmds[0] === "qr") {
+      const qrDiv =
+        mapDiv.querySelector(".qr_view_poi") ||
+        mapDiv.querySelector(".qr_view");
+
+      if (qrDiv) {
+        QRCode.toCanvas(
+          uri,
+          { width: 128, margin: 1 },
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          (err: any, canvas: any) => {
+            if (!err) {
+              qrDiv.innerHTML = "";
+              qrDiv.appendChild(canvas);
+            }
+          }
+        );
+      }
     }
   });
 
   const prevDefs = mapDiv.querySelectorAll(".prevent-default-ui");
-  for (let i = 0; i < prevDefs.length; i++) {
-    const target = prevDefs[i];
+  prevDefs.forEach(target => {
     target.addEventListener("touchstart", (evt: Event) => {
       evt.preventDefault();
     });
-  }
+  });
 
   ui.core!.addEventListener("uiPrepare", (_evt: unknown) => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -565,19 +579,17 @@ function initModalHandlers(ui: MaplatUi, appOption: MaplatAppOption) {
     };
 
     let i18nTargets = mapDiv.querySelectorAll("[data-i18n], [din]");
-    for (let i = 0; i < i18nTargets.length; i++) {
-      const target = i18nTargets[i];
+    i18nTargets.forEach(target => {
       const key =
         target.getAttribute("data-i18n") || target.getAttribute("din");
       (target as HTMLElement).innerText = imageExtractor(ui.core!.t(key));
-    }
+    });
     i18nTargets = mapDiv.querySelectorAll("[data-i18n-html], [dinh]");
-    for (let i = 0; i < i18nTargets.length; i++) {
-      const target = i18nTargets[i];
+    i18nTargets.forEach(target => {
       const key =
         target.getAttribute("data-i18n-html") || target.getAttribute("dinh");
       target.innerHTML = imageExtractor(ui.core!.t(key));
-    }
+    });
     // 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"]'
@@ -752,14 +764,45 @@ function initModalHandlers(ui: MaplatUi, appOption: MaplatAppOption) {
         ui.modalSetting("marker_list");
         modal.show();
 
+        const listRoot = modalBase.querySelector(
+          ".modal_marker_list_content ul.list-group"
+        ) as HTMLElement;
+
+        // Reset all panel states when modal is closed
+        const resetPanels = () => {
+          // Close all Layer panels
+          const allLayerPanels =
+            listRoot.querySelectorAll(".list_poiitems_div");
+          allLayerPanels.forEach(panel => {
+            panel.classList.remove("open");
+          });
+
+          // Close and reset all POI Content panels
+          const allPoiContentDivs = listRoot.querySelectorAll(
+            ".list_poicontent_div"
+          );
+          allPoiContentDivs.forEach(contentDiv => {
+            contentDiv.classList.remove("open");
+            contentDiv.innerHTML = "";
+          });
+
+          // Unselect marker
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          (ui.core as any).unselectMarker?.();
+
+          // Remove this event listener after execution
+          modalBase.removeEventListener("hidden.bs.modal", resetPanels);
+        };
+
+        // Remove old listener if exists and add new one
+        modalBase.removeEventListener("hidden.bs.modal", resetPanels);
+        modalBase.addEventListener("hidden.bs.modal", resetPanels);
+
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const currentMapID = (ui.core!.from as any).mapID;
         if (cachedMarkerListMapID === currentMapID) return;
         cachedMarkerListMapID = currentMapID;
 
-        const listRoot = modalBase.querySelector(
-          ".modal_marker_list_content ul.list-group"
-        ) as HTMLElement;
         listRoot.innerHTML = "";
 
         const layers = ui.core!.listPoiLayers(false, true);
@@ -811,7 +854,40 @@ function initModalHandlers(ui: MaplatUi, appOption: MaplatAppOption) {
           layerLi
             .querySelector(".layer_label")!
             .addEventListener("click", () => {
-              poiListUl.classList.toggle("open");
+              const isCurrentlyOpen = poiListUl.classList.contains("open");
+
+              // Close all other Layer panels at the same level
+              const allLayerPanels =
+                listRoot.querySelectorAll(".list_poiitems_div");
+              allLayerPanels.forEach(panel => {
+                if (panel !== poiListUl) {
+                  panel.classList.remove("open");
+                  // Reset all child POI Content panels
+                  const poiContentDivs = panel.parentElement!.querySelectorAll(
+                    ".list_poicontent_div"
+                  );
+                  poiContentDivs.forEach(contentDiv => {
+                    contentDiv.classList.remove("open");
+                    contentDiv.innerHTML = "";
+                  });
+                }
+              });
+
+              // Toggle current panel
+              if (isCurrentlyOpen) {
+                poiListUl.classList.remove("open");
+                // Reset all child POI Content panels in this Layer
+                const poiContentDivs = poiListUl.querySelectorAll(
+                  ".list_poicontent_div"
+                );
+                poiContentDivs.forEach(contentDiv => {
+                  contentDiv.classList.remove("open");
+                  contentDiv.innerHTML = "";
+                });
+                (ui.core as MaplatApp).unselectMarker?.();
+              } else {
+                poiListUl.classList.add("open");
+              }
             });
 
           listRoot.appendChild(layerLi);
@@ -836,18 +912,34 @@ function initModalHandlers(ui: MaplatUi, appOption: MaplatAppOption) {
               // let poiImgHide: any;
 
               poiLi.addEventListener("click", () => {
-                if (!poiContentDiv.classList.contains("open")) {
-                  poiContentDiv.classList.add("open");
-
-                  poiWebControl(ui, poiContentDiv, poi);
+                const isCurrentlyOpen =
+                  poiContentDiv.classList.contains("open");
+
+                // Close all other POI panels at the same level (within the same Layer)
+                const allPoiContentDivs = poiListUl.querySelectorAll(
+                  ".list_poicontent_div"
+                );
+                allPoiContentDivs.forEach(contentDiv => {
+                  if (
+                    contentDiv !== poiContentDiv &&
+                    contentDiv.classList.contains("open")
+                  ) {
+                    contentDiv.classList.remove("open");
+                    contentDiv.innerHTML = "";
+                  }
+                });
 
-                  ui.core!.selectMarker?.(poi.namespaceID);
-                } else {
+                // Toggle current panel
+                if (isCurrentlyOpen) {
                   poiContentDiv.classList.remove("open");
-
-                  // if (poiImgHide) poiImgHide();
                   poiContentDiv.innerHTML = "";
-                  ui.core!.unselectMarker?.();
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  (ui.core as any).unselectMarker?.();
+                } else {
+                  poiContentDiv.classList.add("open");
+                  poiWebControl(ui, poiContentDiv, poi, false);
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  (ui.core as any).selectMarker?.(poi.namespaceID);
                 }
               });
 
@@ -856,7 +948,6 @@ function initModalHandlers(ui: MaplatUi, appOption: MaplatAppOption) {
             });
           }
         });
-        modal.show();
       } else if (control === "copyright") {
         ui.modalSetting("map");
         const mapData = ui.core!.from!;
@@ -1210,6 +1301,12 @@ function initDom(ui: MaplatUi, appOption: MaplatAppOption) {
 
         <d c="modal_poi_content">
           <d c="poi_web_div"></d>
+          <d c="poi_share_buttons recipient row">
+            <d c="form-group col-xs-4 text-center"><button title="Copy to clipboard" class="share btn btn-light" data="cp_view"><svg style="width:14px;height:14px;vertical-align:text-bottom;" viewBox="0 0 512 512"><path fill="currentColor" d="M224 0c-35.3 0-64 28.7-64 64V96H96c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H288c35.3 0 64-28.7 64-64V384h64c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H224zM288 384H96V160H224c0-17.7 14.3-32 32-32h64V256c0 17.7 14.3 32 32 32h96V384H288z"/></svg>&nbsp;<small din="html.share_copy"></small></button></d>
+            <d c="form-group col-xs-4 text-center"><button title="Twitter" class="share btn btn-light" data="tw_view"><svg style="width:14px;height:14px;vertical-align:text-bottom;" viewBox="0 0 512 512"><path fill="currentColor" d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>&nbsp;<small>Twitter</small></button></d>
+            <d c="form-group col-xs-4 text-center"><button title="Facebook" class="share btn btn-light" data="fb_view"><svg style="width:14px;height:14px;vertical-align:text-bottom;" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256C504 119 393 8 256 8S8 119 8 256c0 121.3 87.1 222.4 203 240.5V327.9h-61v-71.9h61V203c0-60.8 35.8-93.7 89.2-93.7 25.5 0 50.4 1.8 56.1 2.6v62.4h-35.4c-29.5 0-37.4 18.2-37.4 42.1v59.6h68.9l-11 71.9h-57.9V496.5C416.9 478.4 504 377.3 504 256z"/></svg>&nbsp;<small>Facebook</small></button></d>
+          </d>
+          <d c="qr_view_poi center-block" style="width:128px;"></d>
           <d c="modal_share_poi"></d>
           <p><img src="" height="0px" width="0px"></p>
         </d> 
@@ -1304,25 +1401,21 @@ function initDom(ui: MaplatUi, appOption: MaplatAppOption) {
     } catch (_e) {} // eslint-disable-line no-empty
 
     if (head && !head.querySelector('link[rel="apple-touch-icon"]')) {
-      const xhr = new XMLHttpRequest();
-      xhr.open("GET", pwaManifest, true);
-      xhr.responseType = "json";
-
-      xhr.onload = function (_e: ProgressEvent) {
-        let value = this.response;
-        if (!value) return;
-        if (typeof value != "object") value = JSON.parse(value);
-
-        if (value.icons) {
-          for (let i = 0; i < value.icons.length; i++) {
-            const src = absoluteUrl(pwaManifest as string, value.icons[i].src);
-            const sizes = value.icons[i].sizes;
-            const tag = `<link rel="apple-touch-icon" sizes="${sizes}" href="${src}">`;
-            head.appendChild(createElement(tag)[0]);
+      fetch(pwaManifest)
+        .then(response => response.json())
+        .then(value => {
+          if (value.icons) {
+            value.icons.forEach((icon: { src: string; sizes: string }) => {
+              const src = absoluteUrl(pwaManifest as string, icon.src);
+              const sizes = icon.sizes;
+              const tag = `<link rel="apple-touch-icon" sizes="${sizes}" href="${src}">`;
+              head.appendChild(createElement(tag)[0]);
+            });
           }
-        }
-      };
-      xhr.send();
+        })
+        .catch(err => {
+          console.error("Failed to fetch PWA manifest:", err);
+        });
     }
   }
 }