@geops/rvf-mobility-web-component 0.1.90 → 0.1.91

package/package.json

@@ -2,7 +2,7 @@
   "name": "@geops/rvf-mobility-web-component",
   "license": "UNLICENSED",
   "description": "Web components for rvf in the domains of mobility and logistics.",
-  "version": "0.1.90",
+  "version": "0.1.91",
   "homepage": "https://rvf-mobility-web-component-geops.vercel.app/",
   "type": "module",
   "main": "index.js",
@@ -65,7 +65,7 @@
     "dev": "node scripts/dev.mjs",
     "doc": "yarn build && cd doc && yarn build",
     "doc:dev": "yarn build && cd doc && yarn dev",
-    "format": "prettier --write 'src/**/*.(tsx|ts)' && eslint 'src/**/*.tsx' 'src/**/*.ts' --fix ",
+    "format": "prettier --write 'src/**/*.(tsx|ts)' && eslint 'src/**/*.tsx' 'src/**/*.ts' --fix",
     "lint": "eslint 'src/**/*.tsx' 'src/**/*.ts'",
     "prepare": "husky",
     "publish:beta": "HUSKY=0 yarn release -- --prerelease beta --skip.changelog && yarn run build && HUSKY=0 yarn publish --access public --tag beta && git push origin HEAD && git push --tags ",

package/src/EmbedNavigation/DragPanWarning.ts

@@ -6,8 +6,9 @@ import type { Map, MapBrowserEvent } from "ol";
 import type { Options } from "ol/control/Control";
 import type { EventsKey } from "ol/events";
 
-type DragPanWarningOptions = {
+export type DragPanWarningOptions = {
   className?: string;
+  element?: HTMLElement;
 } & Options;
 
 class DragPanWarning extends Control {
@@ -20,11 +21,16 @@ class DragPanWarning extends Control {
   text: HTMLParagraphElement;
 
   constructor(options: DragPanWarningOptions = {}) {
-    const element = document.createElement("div");
-    element.className =
-      options.className !== undefined
-        ? options.className
-        : "ol-drag-pan-warning";
+    let element = options.element;
+
+    if (!element) {
+      element = document.createElement("div");
+      element.className =
+        options.className !== undefined
+          ? options.className
+          : "ol-drag-pan-warning";
+    }
+
     element.style.display = "none";
     element.style.pointerEvents = "auto";
 
@@ -34,21 +40,23 @@ class DragPanWarning extends Control {
       target: options.target,
     });
 
-    this.icon = document.createElement("div");
-    this.icon.className = `${element.className}-icon`;
+    if (!options.element) {
+      this.icon = document.createElement("div");
+      this.icon.className = `${element.className}-icon`;
 
-    // sbb icons: sbb/two-finger-tap-large.svg';
-    this.icon.innerHTML = `
+      // sbb icons: sbb/two-finger-tap-large.svg';
+      this.icon.innerHTML = `
       <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
         <path fill="none" stroke="currentColor" stroke-width="2" d="M22.999,25 L22.997,13.002 C22.997,11.896 23.893,11 24.999,11 C26.105,11 27.001,11.896 27.001,13.002 L26.999,26.002 M31,25.003 C31,23.897 31.896,23.001 33.002,23.001 C34.11,23.001 35.006,23.897 35.006,25.003 C35.006,25.003 35,26.125 35,32.001 C35,37.875 33.2,41.001 33.2,41.001 L19,41.001 C19,41.001 12.21,29.483 11.586,28.419 C10.962,27.355 10.804,26.369 11.586,25.587 C12.37,24.805 13.636,24.805 14.418,25.587 L18.998,30.169 L19,30.169 L19,25.001 L18.996,15.003 C18.996,13.897 19.894,13.001 21,13.001 C22.106,13.001 23.002,13.897 23.002,15.003 L23,26.015 M26.9942,22.997 C26.9942,21.891 27.8902,20.995 28.9962,20.995 C30.1042,20.995 31.0002,21.891 31.0002,22.997 L31.0002,26.001 M30,16.3046 C30.632,15.3606 31,14.2246 31,13.0006 C31,9.6846 28.314,7.0006 25,7.0006 C23.208,7.0006 21.616,7.8026 20.518,9.0486 C17.432,9.2986 15,11.8506 15,15.0006 C15,16.2166 15.368,17.3426 15.988,18.2866"/>
       </svg>
     `;
-    this.element.appendChild(this.icon);
+      this.element.appendChild(this.icon);
 
-    this.text = document.createElement("p");
-    this.text.className = `${element.className}-text`;
-    this.text.innerHTML = "Benutzen Sie 2 Finger um die Karte zu bedienen.";
-    this.element.appendChild(this.text);
+      this.text = document.createElement("p");
+      this.text.className = `${element.className}-text`;
+      this.text.innerHTML = "Benutzen Sie 2 Finger um die Karte zu bedienen.";
+      this.element.appendChild(this.text);
+    }
 
     this.dragPan = undefined;
     this.onPointerDragRef = undefined;

package/src/EmbedNavigation/EmbedNavigation.tsx

@@ -1,18 +1,36 @@
 import { MouseWheelZoom } from "ol/interaction";
 import { useEffect, useState } from "preact/hooks";
+import { twMerge } from "tailwind-merge";
 
+import TouchFingers from "../icons/TouchFingers";
+import useI18n from "../utils/hooks/useI18n";
 import useMapContext from "../utils/hooks/useMapContext";
 
 import DragPanWarning from "./DragPanWarning";
 
-function EmbedNavigation() {
+import type { HTMLAttributes, PreactDOMAttributes } from "preact";
+
+export type EmbedNavigationProps = {
+  contentClassName?: string;
+  elementClassName?: string;
+  iconProps?: React.SVGProps<SVGSVGElement>;
+} & HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
+
+function EmbedNavigation({
+  contentClassName,
+  elementClassName,
+  iconProps,
+}: EmbedNavigationProps) {
+  const { t } = useI18n();
   const { isEmbed, map } = useMapContext();
   const [target, setTarget] = useState(null);
+  const [element, setElement] = useState(null);
 
   useEffect(() => {
     let dragPanWarningControl = null;
 
-    if (!map || !target || !isEmbed) {
+    if (!map || !target || !isEmbed || !element) {
       return;
     }
 
@@ -23,7 +41,10 @@ function EmbedNavigation() {
       }
     });
 
-    dragPanWarningControl = new DragPanWarning({ target: target });
+    dragPanWarningControl = new DragPanWarning({
+      element: element,
+      target: target,
+    });
     map.addControl(dragPanWarningControl);
 
     return () => {
@@ -38,14 +59,35 @@ function EmbedNavigation() {
         }
       });
     };
-  }, [map, target, isEmbed]);
+  }, [map, target, isEmbed, element]);
 
   return (
     <div
       ref={(node) => {
         return setTarget(node);
       }}
-    ></div>
+    >
+      <div
+        className={twMerge(
+          "absolute inset-0 z-100000 flex h-full w-full flex-col items-center justify-center font-bold",
+          elementClassName,
+          "hidden",
+        )}
+        ref={(node) => {
+          return setElement(node);
+        }}
+      >
+        <div
+          className={twMerge(
+            "flex flex-col items-center gap-2 rounded-2xl bg-white p-10 shadow-lg",
+            contentClassName,
+          )}
+        >
+          <TouchFingers height="48" width="48" {...iconProps}></TouchFingers>
+          <p>{t("use_2_fingers")}</p>
+        </div>
+      </div>
+    </div>
   );
 }
 

package/src/ExportMenu/ExportMenu.tsx

@@ -102,12 +102,9 @@ function ExportMenu({ ...props }: ExportMenuButtonProps) {
             }, 1000);
           }}
         >
-          {/* eslint-disable-next-line no-nested-ternary */}
-          {isExporting
-            ? t("exporting")
-            : isExportingError
-              ? t("error")
-              : t("download")}
+          {isExporting && t("exporting")}
+          {!isExporting && isExportingError && t("error")}
+          {!isExporting && !isExportingError && t("download")}
         </Button>
       </div>
     </div>

package/src/OverlayDetailsHeader/OverlayDetailsHeader.tsx

@@ -14,12 +14,7 @@ export type OverlayDetailsHeaderProps = {
   layer?: BaseLayer;
 } & OverlayHeaderProps;
 
-function OverlayDetailsHeader({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  feature,
-  layer,
-  ...props
-}: OverlayDetailsHeaderProps) {
+function OverlayDetailsHeader({ layer, ...props }: OverlayDetailsHeaderProps) {
   const { t } = useI18n();
   const layerConfig = useLayerConfig(layer?.get("name"));
   if (!layer) {

package/src/icons/TouchFingers/TouchFingers.tsx

@@ -0,0 +1,20 @@
+function TouchFingers(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      height="24"
+      viewBox="0 0 48 48"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M22.999,25 L22.997,13.002 C22.997,11.896 23.893,11 24.999,11 C26.105,11 27.001,11.896 27.001,13.002 L26.999,26.002 M31,25.003 C31,23.897 31.896,23.001 33.002,23.001 C34.11,23.001 35.006,23.897 35.006,25.003 C35.006,25.003 35,26.125 35,32.001 C35,37.875 33.2,41.001 33.2,41.001 L19,41.001 C19,41.001 12.21,29.483 11.586,28.419 C10.962,27.355 10.804,26.369 11.586,25.587 C12.37,24.805 13.636,24.805 14.418,25.587 L18.998,30.169 L19,30.169 L19,25.001 L18.996,15.003 C18.996,13.897 19.894,13.001 21,13.001 C22.106,13.001 23.002,13.897 23.002,15.003 L23,26.015 M26.9942,22.997 C26.9942,21.891 27.8902,20.995 28.9962,20.995 C30.1042,20.995 31.0002,21.891 31.0002,22.997 L31.0002,26.001 M30,16.3046 C30.632,15.3606 31,14.2246 31,13.0006 C31,9.6846 28.314,7.0006 25,7.0006 C23.208,7.0006 21.616,7.8026 20.518,9.0486 C17.432,9.2986 15,11.8506 15,15.0006 C15,16.2166 15.368,17.3426 15.988,18.2866"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+}
+
+export default TouchFingers;

package/src/icons/TouchFingers/index.tsx

@@ -0,0 +1 @@
+export { default } from "./TouchFingers";

package/src/utils/translations.ts

@@ -63,6 +63,7 @@ const translations: Translations = {
     share_image_save: "Bild speichern",
     share_menu_title: "Teilen",
     stops_search_placeholder: "Haltestelle suchen",
+    use_2_fingers: "Benutzen Sie 2 Finger um die Karte zu bedienen.",
     zoomin: "Hineinzoomen",
     zoomout: "Herauszoomen",
   },
@@ -121,6 +122,7 @@ const translations: Translations = {
     share_image_save: "Save image",
     share_menu_title: "Share",
     stops_search_placeholder: "Search for stop",
+    use_2_fingers: "Use 2 fingers to operate the map.",
     zoomin: "Zoom in",
     zoomout: "Zoom out",
   },
@@ -179,6 +181,7 @@ const translations: Translations = {
     share_image_save: "Enregistrer l'image",
     share_menu_title: "Partager",
     stops_search_placeholder: "Chercher un arrêt",
+    use_2_fingers: "Utilisez 2 doigts pour manipuler la carte.",
     zoomin: "Zoomer",
     zoomout: "Dézoomer",
   },
@@ -237,6 +240,7 @@ const translations: Translations = {
     share_image_save: "Salva immagine",
     share_menu_title: "Condividi",
     stops_search_placeholder: "Ricerca delle fermate",
+    use_2_fingers: "Usa 2 dita per operare la mappa.",
     zoomin: "Zoom avanti",
     zoomout: "Zoom indietro",
   },