ublo-lib 1.12.15 → 1.12.17

package/es/common/components/editable-map/editable-map.js

@@ -4,10 +4,11 @@ import { useUbloContext } from "ublo/with-ublo";
 import MapEvents from "./map-events";
 import Markers from "./markers";
 import Helper from "./helper";
-import css from "./editable-map.module.css";
-import "leaflet/dist/leaflet.css";
 import Cluster from "./cluster";
 import MarkerList from "./marker-list";
+import FullScreenButton from "./full-screen-button";
+import css from "./editable-map.module.css";
+import "leaflet/dist/leaflet.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const FRANCE_CENTER = [46.807934, 3.645097];
@@ -17,9 +18,11 @@ export default function EditableMap({
   iconSet
 }) {
   const ref = React.useRef();
+  const containerRef = React.useRef();
   const {
     cmsMode
   } = useUbloContext();
+  const [fullScreen, setFullScreen] = React.useState(false);
   const {
     element,
     presets,
@@ -30,7 +33,7 @@ export default function EditableMap({
   const [center, setCenter] = React.useState(presets?.center || FRANCE_CENTER);
   const [zoom, setZoom] = React.useState(presets?.zoom ?? DEFAULT_ZOOM);
   const [markers, setMarkers] = React.useState(presets?.markers || []);
-  const scrollWheelZoom = isInDialog || Boolean(cmsMode);
+  const scrollWheelZoom = Boolean(cmsMode) || isInDialog || fullScreen;
   const refreshSize = () => {
     ref.current.invalidateSize();
   };
@@ -50,6 +53,7 @@ export default function EditableMap({
     }
   }, [center, element, isEditing, markers, zoom]);
   return _jsxs("div", {
+    ref: containerRef,
     className: css.container,
     "data-cms-remove": "",
     children: [_jsxs(MapContainer, {
@@ -78,10 +82,15 @@ export default function EditableMap({
           isEditing: isEditing
         })
       })]
+    }), !isEditing && _jsx(FullScreenButton, {
+      fullScreen: fullScreen,
+      setFullScreen: setFullScreen,
+      containerRef: containerRef
     }), !isEditing && markers.length > 2 && _jsx(MarkerList, {
       mapRef: ref,
       markers: markers,
-      iconSet: iconSet
+      iconSet: iconSet,
+      isInDialog: !fullScreen && isInDialog
     }), isEditing && _jsx(Helper, {})]
   });
 }

package/es/common/components/editable-map/editable-map.module.css

@@ -2,10 +2,17 @@
 .map {
   width: 100%;
   height: 100%;
+  font-family: inherit !important;
+  border-radius: var(--ds-radius-100, 6px);
 }
 
 .container {
   position: relative;
+  display: flex;
+}
+
+.map {
+  flex: 1 1 100%;
 }
 
 .map :global(.leaflet-pane) {
@@ -35,18 +42,38 @@
   transform: translate(-50%, -50%);
 }
 
-@media (max-width: 992px) {
-  .map :global(.leaflet-tooltip) {
-    display: none !important;
-  }
-}
-
 .map :global(.leaflet-popup-tip-container),
 .map :global(.leaflet-tooltip::before) {
   content: none;
   display: none;
 }
 
+.map :global(.leaflet-popup-content-wrapper) {
+  position: relative;
+  background-color: transparent;
+  backdrop-filter: brightness(110%) contrast(90%) blur(var(--ds-blur, 5px));
+  box-shadow: var(--ds-shadow-100, 0px 3px 6px rgba(0, 0, 0, 0.12));
+}
+
+.map :global(.leaflet-popup-content-wrapper::before) {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--ds-grey-000, #fff);
+  border-radius: inherit;
+  opacity: 0.8;
+}
+
+.map:global(.leaflet-container) :global(a.leaflet-popup-close-button) {
+  top: 5px;
+  right: 5px;
+  color: var(--ds-grey-700, #232324);
+  font-size: 22px;
+}
+
 .map :global(.leaflet-tile-pane) {
   filter: saturate(0.05) hue-rotate(100deg) contrast(1.2);
 }
@@ -54,27 +81,64 @@
 .map :global(.marker-cluster) {
   color: var(--ds-grey-000, #fff);
   background-color: transparent;
-  opacity: 0.85;
 }
 
 .map :global(.marker-cluster::before) {
   content: "";
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: var(--ds-secondary, var(--ds-blue-400, #4177f6));
-  opacity: 0.45;
+  top: 1px;
+  left: 1px;
+  width: calc(100% - 2px);
+  height: calc(100% - 2px);
+  background-color: var(--ds-grey-700, #232324);
   border-radius: 50%;
+  opacity: 0.3;
   pointer-events: none;
+  filter: drop-shadow(var(--ds-shadow-100, 0px 3px 6px rgba(0, 0, 0, 0.12)));
+  transition: transform 160ms
+    var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
 }
 
-.map :global(.marker-cluster:hover) {
-  opacity: 1;
+.map :global(.marker-cluster:hover::before) {
+  transform: scale(1.08);
 }
 
 .map :global(.marker-cluster > div) {
   position: relative;
+  font-weight: 700;
+  font-size: 16px;
   background-color: var(--ds-secondary, var(--ds-blue-400, #4177f6));
+  transition: transform 160ms
+    var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
+}
+
+.map :global(.marker-cluster:hover > div) {
+  transform: scale(1.1);
+}
+
+.map :global(.leaflet-tooltip) {
+  padding: 10px 16px;
+  font-size: 15px;
+  font-weight: 700;
+  font-family: inherit;
+  text-shadow: -1px 0px 1px white, 0px -1px 1px white, 1px 0px 1px white,
+    0px 1px 1px white;
+  /* text-shadow: 0px 0px 4px magenta; */
+  background-color: transparent;
+  box-shadow: none;
+  border: 0;
+  animation: leaflet-tooltip-appearance 320ms
+    var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
+}
+
+@keyframes leaflet-tooltip-appearance {
+  0% {
+    opacity: 0;
+  }
+}
+
+@media (max-width: 992px) {
+  .map :global(.leaflet-tooltip) {
+    display: none !important;
+  }
 }

package/es/common/components/editable-map/full-screen-button.js

@@ -0,0 +1,69 @@
+import * as React from "react";
+import Button from "dt-design-system/es/button";
+import * as Icons from "dt-design-system/es/icons";
+import css from "./full-screen-button.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function FullScreenButton({
+  fullScreen,
+  setFullScreen,
+  containerRef
+}) {
+  const [fullScreenCompatible, setFullScreenCompatible] = React.useState(true);
+  const cleanupFullScreen = React.useCallback(e => {
+    if (!document.fullscreenElement) {
+      setFullScreen(false);
+    }
+  }, [setFullScreen]);
+  React.useEffect(() => {
+    setFullScreenCompatible(isFullScreenCompatible());
+    return () => {
+      document.removeEventListener("fullscreenchange", cleanupFullScreen);
+    };
+  }, [cleanupFullScreen]);
+  if (!fullScreenCompatible) return null;
+  const Icon = Icons[fullScreen ? "Minimize" : "Maximize"];
+  const toggleFullScreen = e => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!fullScreen) {
+      enterFullScreen(containerRef.current, setFullScreen);
+      document.addEventListener("fullscreenchange", cleanupFullScreen);
+    } else {
+      exitFullScreen(setFullScreen);
+      document.removeEventListener("fullscreenchange", cleanupFullScreen);
+    }
+  };
+  return _jsx(Button, {
+    type: "button",
+    className: css.button,
+    onClick: toggleFullScreen,
+    children: _jsx(Icon, {})
+  });
+}
+function isFullScreenCompatible() {
+  return document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullscreenEnabled || document.msFullscreenEnabled;
+}
+function enterFullScreen(el, setFullScreen) {
+  if (el.requestFullscreen) {
+    el.requestFullscreen();
+  } else if (el.mozRequestFullScreen) {
+    el.mozRequestFullScreen();
+  } else if (el.webkitRequestFullscreen) {
+    el.webkitRequestFullscreen();
+  } else if (el.msRequestFullscreen) {
+    el.msRequestFullscreen();
+  }
+  setFullScreen(true);
+}
+function exitFullScreen(setFullScreen) {
+  if (document.exitFullscreen) {
+    document.exitFullscreen();
+  } else if (document.webkitExitFullscreen) {
+    document.webkitExitFullscreen();
+  } else if (document.mozCancelFullScreen) {
+    document.mozCancelFullScreen();
+  } else if (document.msExitFullscreen) {
+    document.msExitFullscreen();
+  }
+  setFullScreen(false);
+}

package/es/common/components/editable-map/full-screen-button.module.css

@@ -0,0 +1,5 @@
+.button {
+  position: absolute;
+  top: 80px;
+  left: 10px;
+}

package/es/common/components/editable-map/icon-picker.js

@@ -12,7 +12,15 @@ export default function IconPicker({
 }) {
   const [opened, setOpened] = React.useState(false);
   const Icon = Icons[iconSet][selectedIcon] || Icons[iconSet].Location;
-  const keys = Object.keys(Icons[iconSet]);
+  const keys = Object.keys(Icons[iconSet]).sort((a, b) => {
+    const {
+      key: aKey
+    } = Icons[iconSet][a]();
+    const {
+      key: bKey
+    } = Icons[iconSet][b]();
+    return Number(aKey) - Number(bKey);
+  });
   const togglePicker = () => {
     setOpened(!opened);
   };

package/es/common/components/editable-map/icon-picker.module.css

@@ -1,7 +1,7 @@
 svg.selectedIcon {
-  flex: 0 0 24px;
-  width: 24px;
-  height: 24px;
+  flex: 0 0 44px;
+  width: 44px;
+  height: 44px;
   fill: var(--ds-secondary, var(--ds-blue-400, #4177f6));
   z-index: initial !important;
 }
@@ -13,12 +13,14 @@ svg.selectedIcon {
   width: 100%;
   height: 100%;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
   grid-template-rows: max-content;
   justify-items: start;
   gap: 10px;
   background-color: var(--ds-grey-000, #fff);
+  border-radius: var(--ds-radius-100, 6px);
   overflow: auto;
+  overscroll-behavior: contain;
   z-index: 1;
 }
 
@@ -27,25 +29,31 @@ svg.selectedIcon {
 }
 
 .helper {
+  position: sticky;
+  bottom: 0;
   grid-column: 1 / -1;
   width: 100%;
   margin-top: auto;
+  padding-top: 6px;
   text-align: center;
   font-weight: 700;
   font-family: var(--ds-sans-serif-font, "Open Sans", sans-serif);
   font-size: 12px;
+  background-color: white;
+  z-index: 1;
 }
 
 .iconButton {
-  width: 40px;
-  height: 40px;
+  width: 60px;
+  height: 60px;
   padding: 0;
   margin: 0 auto;
 }
 
 .icon {
-  flex: 0 0 24px !important;
-  width: 24px !important;
-  height: 24px !important;
+  flex: 0 0 50px !important;
+  width: 50px !important;
+  height: 50px !important;
   fill: var(--ds-secondary, var(--ds-blue-400, #4177f6)) !important;
+  z-index: 0 !important;
 }