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

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";