@geops/rvf-mobility-web-component 0.1.64 → 0.1.66

package/src/Permalink/Permalink.tsx

@@ -6,8 +6,8 @@ import { useCallback, useEffect } from "preact/hooks";
 
 import { LAYER_PROP_IS_EXPORTING } from "../utils/constants";
 import getPermalinkParameters from "../utils/getPermalinkParameters";
-// import getLayersAsFlatArray from "../getLayersAsFlatArray";
 import useMapContext from "../utils/hooks/useMapContext";
+import usePermalink from "../utils/hooks/usePermalink";
 
 import type { Map } from "ol";
 import type { EventsKey } from "ol/events";
@@ -20,6 +20,9 @@ import type { EventsKey } from "ol/events";
 const Permalink = ({ replaceState = false }: { replaceState?: boolean }) => {
   const { map, setPermalinkUrlSearchParams } = useMapContext();
 
+  const permalink = usePermalink();
+
+  // Update the search parameters when the map moves
   const updatePermalink = useCallback(
     (currentMap: Map) => {
       // No update when exporting
@@ -28,15 +31,23 @@ const Permalink = ({ replaceState = false }: { replaceState?: boolean }) => {
       }
       const currentUrlParams = new URLSearchParams(window.location.search);
       const urlParams = getPermalinkParameters(currentMap, currentUrlParams);
-      urlParams.set("permalink", "true");
       setPermalinkUrlSearchParams(urlParams);
-      if (replaceState) {
-        window.history.replaceState(null, null, `?${urlParams.toString()}`);
-      }
     },
-    [map, replaceState, setPermalinkUrlSearchParams],
+    [map, setPermalinkUrlSearchParams],
   );
 
+  // Replace the window url when permalink changes
+  useEffect(() => {
+    if (
+      replaceState &&
+      permalink &&
+      permalink !== window.location.href &&
+      !permalink.includes(encodeURIComponent("{{"))
+    ) {
+      window.history.replaceState(null, null, permalink);
+    }
+  }, [map, permalink, replaceState]);
+
   useEffect(() => {
     let moveEndKey: EventsKey;
     let loadEndKey: EventsKey;

package/src/PermalinkInput/PermalinkInput.tsx

@@ -2,6 +2,7 @@ import { memo } from "preact/compat";
 
 import InputCopy from "../ui/InputCopy";
 import useI18n from "../utils/hooks/useI18n";
+import usePermalink from "../utils/hooks/usePermalink";
 
 import type { HTMLAttributes, PreactDOMAttributes } from "preact";
 
@@ -19,9 +20,11 @@ function PermalinkInput({
   ...props
 }: PermalinkInputProps) {
   const { t } = useI18n();
+  const permalink = usePermalink();
+
   return (
     <div {...props}>
-      <InputCopy value={window?.location.href} {...inputProps} />
+      <InputCopy value={permalink} {...inputProps} readonly={true} />
       <p className="py-2">{t("permalink_input_hint")}</p>
     </div>
   );

package/src/RealtimeLayer/index.tsx

@@ -1 +1 @@
-export { default } from "./RealtimeLayer";
+export { default } from "../RvfRealtimeLayer";

package/src/RvfCopyright/RvfCopyright.tsx

@@ -0,0 +1,32 @@
+import Copyright from "../Copyright/Copyright";
+
+import type { CopyrightProps } from "../Copyright/Copyright";
+
+const format = (copyrights) => {
+  const newCopyrights = [];
+  let alreadyAGeopsLink = false;
+  copyrights.forEach((copyright) => {
+    if (/geops/i.test(copyright)) {
+      // Hack until all geOps tiles are the same
+      // Currently there is some geops.com or geops.ch links
+      if (!alreadyAGeopsLink) {
+        alreadyAGeopsLink = true;
+        newCopyrights.push(copyright);
+      }
+    } else if (!/(sbb|rvf)/i.test(copyright)) {
+      newCopyrights.push(copyright);
+    }
+  });
+
+  return newCopyrights.join(" | ");
+};
+
+const options = {
+  format,
+};
+
+function RvfCopyright(props: CopyrightProps) {
+  return <Copyright options={options} {...props} />;
+}
+
+export default RvfCopyright;

package/src/RvfCopyright/index.tsx

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

package/src/RvfInputCopy/RvfInputCopy.tsx

@@ -1,37 +1,47 @@
-import { useRef, useState } from "preact/hooks";
+import { useId, useState } from "preact/hooks";
 
 import Copy from "../icons/Copy";
 import IconButton from "../ui/IconButton";
+import useI18n from "../utils/hooks/useI18n";
 
 import type { JSX, PreactDOMAttributes } from "preact";
 
 function RvfInputCopy(props: JSX.InputHTMLAttributes & PreactDOMAttributes) {
+  const { t } = useI18n();
   const [positionTooltip, setPositionTooltip] = useState<DOMRect>();
   const [isTooptipShowed, setIsTooltipShowed] = useState(false);
-  const inputRef = useRef(null);
+  const inputId = useId();
+  const [node, setNode] = useState<HTMLDivElement | null>(null);
 
   const handleCopyClick = (event) => {
     setPositionTooltip(event.currentTarget.getBoundingClientRect());
-    void navigator.clipboard.writeText(window?.location.href).then(() => {
+    const input: HTMLInputElement | null = node.querySelector(`#${inputId}`);
+    void navigator.clipboard.writeText(input?.value).then(() => {
       setIsTooltipShowed(true);
       setTimeout(() => {
         setIsTooltipShowed(false);
       }, 1000);
     });
-    inputRef.current.select();
+    input?.select();
   };
 
   const handleInputFocus = () => {
-    inputRef.current.select();
+    const input: HTMLInputElement | null = node.querySelector(`#${inputId}`);
+    input?.select();
   };
 
   return (
-    <div className="text-grey flex items-center">
+    <div
+      className="text-grey flex items-center"
+      ref={(elt) => {
+        setNode(elt);
+      }}
+    >
       <input
         className="h-7 w-full rounded-sm rounded-r-none border border-r-0 border-current p-1 leading-4 outline-none"
+        id={inputId}
         onFocus={handleInputFocus}
         readOnly
-        ref={inputRef}
         type="text"
         {...props}
       />
@@ -48,7 +58,7 @@ function RvfInputCopy(props: JSX.InputHTMLAttributes & PreactDOMAttributes) {
           top: positionTooltip?.top - 40,
         }}
       >
-        Link kopiert!
+        {t("input_copy_success")}
       </div>
     </div>
   );

package/src/RvfMapLayout/RvfMapLayout.tsx

@@ -0,0 +1,198 @@
+import { memo } from "preact/compat";
+import { twMerge } from "tailwind-merge";
+
+import Copyright from "../Copyright";
+import EmbedNavigation from "../EmbedNavigation";
+import ExportMenuButton from "../ExportMenuButton";
+import GeolocationButton from "../GeolocationButton";
+import LayerTreeButton from "../LayerTreeButton";
+import Map from "../Map";
+import Overlay from "../Overlay";
+import OverlayContent from "../OverlayContent";
+import RvfMainLinkButton from "../RvfMainLinkButton";
+import RvfPoisLayer from "../RvfPoisLayer";
+import RvfSelectedFeatureHighlightLayer from "../RvfSelectedFeatureHighlightLayer";
+import RvfSellingPointsLayer from "../RvfSellingPointsLayer";
+import RvfSharedMobilityLayerGroup from "../RvfSharedMobilityLayerGroup";
+import RvfTarifZonenLayer from "../RvfTarifZonenLayer";
+import ScaleLine from "../ScaleLine";
+import Search from "../Search";
+import SearchButton from "../SearchButton";
+import ShareMenuButton from "../ShareMenuButton";
+import StationsLayer from "../StationsLayer";
+import useMapContext from "../utils/hooks/useMapContext";
+import ZoomButtons from "../ZoomButtons";
+
+import type { HTMLAttributes } from "preact";
+
+const scrollableHandlerProps = {
+  style: { width: "calc(100% - 60px)" },
+};
+
+const stationsLayerProps = () => {
+  return {
+    layersFilter: ({ metadata }) => {
+      return metadata?.["general.filter"] === "stations";
+    },
+  };
+};
+
+function RvfMapLayout({
+  className,
+  ...props
+}: { className?: string } & HTMLAttributes<HTMLDivElement>) {
+  const {
+    hasDetails,
+    hasGeolocation,
+    hasLayerTree,
+    hasPrint,
+    hasRealtime,
+    hasSearch,
+    hasShare,
+    hasToolbar,
+    isEmbed,
+    isOverlayOpen,
+    isSearchOpen,
+    mainlink,
+  } = useMapContext();
+
+  return (
+    <div
+      className={twMerge(
+        "relative flex size-full flex-col text-base @lg/main:flex-row-reverse",
+        className,
+      )}
+      {...props}
+    >
+      <RvfSelectedFeatureHighlightLayer />
+      <StationsLayer minZoom={10} {...stationsLayerProps} />
+      <RvfTarifZonenLayer />
+      <RvfSellingPointsLayer />
+      <RvfPoisLayer />
+      <RvfSharedMobilityLayerGroup />
+
+      <Map className="relative flex-1 overflow-visible">
+        {isEmbed && <EmbedNavigation />}
+        {mainlink && (
+          <RvfMainLinkButton className="absolute inset-x-2 bottom-8 z-10" />
+        )}
+
+        <div className="pointer-events-none absolute inset-x-2 bottom-2 z-10 flex items-end justify-between gap-2 text-[10px]">
+          <ScaleLine className="bg-slate-50/70" />
+          <Copyright className="pointer-events-auto bg-slate-50/70" />
+        </div>
+        <div className="absolute top-2 right-2 z-10 flex">
+          {hasGeolocation && <GeolocationButton title={"Geolokalisierung"} />}
+        </div>
+        <div className="absolute right-2 bottom-10 z-10 flex flex-col justify-between gap-2">
+          <ZoomButtons />
+        </div>
+
+        {!hasToolbar && hasSearch && (
+          <div
+            className={twMerge(
+              "absolute top-2 right-2 left-2 z-10 max-w-96",
+              isOverlayOpen && "@lg:left-68",
+            )}
+          >
+            <Search />
+          </div>
+        )}
+      </Map>
+
+      <div className="pointer-events-none absolute top-2 bottom-2 left-2 z-10 flex flex-col gap-2">
+        {hasToolbar && (
+          <div
+            className={
+              "pointer-events-none relative z-10 w-fit rounded-2xl bg-black/10 p-0 backdrop-blur-sm *:pointer-events-auto"
+            }
+            //  className="w-fit rounded-2xl bg-black/10 p-1 backdrop-blur-sm">
+          >
+            {hasSearch && (
+              <div
+                className={twMerge(
+                  "absolute top-12 left-0 w-0 p-0 opacity-0 transition-all @sm:top-0 @sm:left-[calc(100%-43px)] @md:left-[calc(100%-47px)]",
+                  isSearchOpen ? "w-64 opacity-100" : "",
+                )}
+              >
+                <Search
+                  className={
+                    "border-grey @container m-0 h-[40px] rounded-2xl border p-2 px-4 text-base @sm/main:h-[44px] @sm/main:rounded-l-none @sm/main:rounded-r-2xl @md/main:h-[48px]"
+                  }
+                  inputClassName="h-6 text-base"
+                  inputContainerClassName="border-none"
+                  resultClassName="text-base  **:hover:cursor-pointer hover:text-red-500 p-2"
+                  resultsContainerClassName="@container rounded-b-2xl max-h-[200px] overflow-y-auto border border-grey border-t-0 "
+                  withResultsClassName="text-base !rounded-b-none"
+                />
+              </div>
+            )}
+
+            <div
+              className={twMerge(
+                "border-grey relative flex gap-[1px] overflow-hidden rounded-2xl border @sm/main:h-[44px] @md/main:h-[48px]",
+                "*:size-[38px] *:rounded-none *:border-none *:@sm/main:size-[42px] *:@md/main:!size-[46px]",
+                "*:first:!rounded-l-2xl",
+                "*:last:!rounded-r-2xl",
+                isSearchOpen
+                  ? "@sm:rounded-r-none @sm:border-r-0 @sm:*:last:!rounded-r-none @sm:*:last:border-r-0"
+                  : "",
+              )}
+            >
+              {hasPrint && <ExportMenuButton />}
+              {hasShare && <ShareMenuButton />}
+              {hasLayerTree && <LayerTreeButton />}
+              {hasSearch && <SearchButton />}
+            </div>
+          </div>
+        )}
+
+        {/* Desktop (>= lg) */}
+        <div
+          className={twMerge(
+            "pointer-events-none flex w-0 flex-1 flex-col overflow-hidden rounded-2xl",
+            isOverlayOpen ? "@lg:min-w-[320px]" : "p-0",
+          )}
+          style={{ containerType: "normal" }}
+        >
+          <Overlay
+            className={
+              "border-grey @container/overlay pointer-events-auto relative hidden flex-col overflow-hidden rounded-2xl border bg-white text-base shadow-lg @lg:flex"
+            }
+            ScrollableHandlerProps={scrollableHandlerProps}
+          >
+            <OverlayContent
+              hasDetails={hasDetails}
+              hasLayerTree={hasLayerTree}
+              hasPrint={hasPrint}
+              hasRealtime={hasRealtime}
+              hasSearch={false}
+              hasShare={hasShare}
+            />
+          </Overlay>
+        </div>
+      </div>
+
+      {/* Mobile */}
+      <Overlay
+        className={
+          isOverlayOpen
+            ? "absolute bottom-0 z-20 flex max-h-[70%] min-h-[75px] w-full flex-col border-t bg-white @lg:hidden"
+            : "@lg:hidden"
+        }
+        ScrollableHandlerProps={scrollableHandlerProps}
+      >
+        <OverlayContent
+          hasDetails={hasDetails}
+          hasLayerTree={hasLayerTree}
+          hasPrint={hasPrint}
+          hasRealtime={hasRealtime}
+          hasSearch={false} // The search could be in the overlay but we decide to put it in the toolbar for better UX
+          hasShare={hasShare}
+        />
+      </Overlay>
+    </div>
+  );
+}
+
+export default memo(RvfMapLayout);

package/src/RvfMapLayout/index.tsx

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