ublo-lib 1.14.0 → 1.14.2

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

@@ -1,12 +1,15 @@
 import * as React from "react";
 import { MapContainer, TileLayer } from "react-leaflet";
 import { useUbloContext } from "ublo/with-ublo";
+import Button from "dt-design-system/es/button";
+import * as Icons from "dt-design-system/es/icons";
 import MapEvents from "./map-events";
 import Markers from "./markers";
 import Helper from "./helper";
 import Cluster from "./cluster";
 import MarkerList from "./marker-list";
 import FullScreenButton from "./full-screen-button";
+import SlopesToggle from "./slopes-toggle";
 import css from "./editable-map.module.css";
 import "leaflet/dist/leaflet.css";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -15,7 +18,8 @@ const FRANCE_CENTER = [46.807934, 3.645097];
 const DEFAULT_ZOOM = 6;
 export default function EditableMap({
   format,
-  iconSet
+  iconSet,
+  hideSlopes
 }) {
   const ref = React.useRef();
   const containerRef = React.useRef();
@@ -29,14 +33,24 @@ export default function EditableMap({
     isInDialog
   } = format;
   const isInZone = element.closest(".cms");
-  const isEditing = cmsMode === "editing" && isInZone;
-  const [center, setCenter] = React.useState(presets?.center || FRANCE_CENTER);
-  const [zoom, setZoom] = React.useState(presets?.zoom ?? DEFAULT_ZOOM);
+  const isEditing = isInZone && cmsMode === "editing";
+  const defaultCenter = presets?.center || FRANCE_CENTER;
+  const defaultZoom = presets?.zoom || DEFAULT_ZOOM;
+  const [center, setCenter] = React.useState(defaultCenter);
+  const [zoom, setZoom] = React.useState(defaultZoom);
   const [markers, setMarkers] = React.useState(presets?.markers || []);
+  const [showSlopes, setShowSlopes] = React.useState(presets?.showSlopes || false);
   const scrollWheelZoom = Boolean(cmsMode) || isInDialog || fullScreen;
   const refreshSize = () => {
     ref.current.invalidateSize();
   };
+  const resetCenter = () => {
+    setCenter(defaultCenter);
+    setZoom(defaultZoom);
+    ref.current.setView(defaultCenter, defaultZoom, {
+      animate: true
+    });
+  };
   React.useEffect(() => {
     if (isInDialog) {
       window.refreshDialogMapSize = refreshSize;
@@ -47,11 +61,12 @@ export default function EditableMap({
       const newPresets = {
         markers,
         zoom,
-        center
+        center,
+        showSlopes
       };
       element.setAttribute("data-presets", JSON.stringify(newPresets));
     }
-  }, [center, element, isEditing, markers, zoom]);
+  }, [center, element, isEditing, markers, showSlopes, zoom]);
   return _jsxs("div", {
     ref: containerRef,
     className: css.container,
@@ -65,6 +80,8 @@ export default function EditableMap({
       attributionControl: false,
       children: [_jsx(TileLayer, {
         url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+      }), showSlopes && _jsx(TileLayer, {
+        url: "https://tiles.opensnowmap.org/pistes/{z}/{x}/{y}.png"
       }), _jsx(MapEvents, {
         mapRef: ref,
         markers: markers,
@@ -86,6 +103,13 @@ export default function EditableMap({
       fullScreen: fullScreen,
       setFullScreen: setFullScreen,
       containerRef: containerRef
+    }), _jsx(Button, {
+      className: css.resetCenter,
+      onClick: resetCenter,
+      children: _jsx(Icons.MdMyLocation, {})
+    }), !hideSlopes && _jsx(SlopesToggle, {
+      showSlopes: showSlopes,
+      setShowSlopes: setShowSlopes
     }), !isEditing && markers.length > 2 && _jsx(MarkerList, {
       mapRef: ref,
       markers: markers,

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

@@ -11,6 +11,14 @@
   display: flex;
 }
 
+.resetCenter {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  user-select: none;
+  box-shadow: var(--ds-shadow-100, 0px 3px 6px rgba(0, 0, 0, 0.12));
+}
+
 .map {
   flex: 1 1 100%;
 }
@@ -74,8 +82,11 @@
   font-size: 22px;
 }
 
-.map :global(.leaflet-tile-pane) {
-  filter: saturate(0.05) hue-rotate(100deg) contrast(1.2);
+.map :global(.leaflet-tile-pane > :first-child) {
+  filter: var(
+    --editable-map-filter,
+    saturate(0.05) hue-rotate(100deg) contrast(1.2)
+  );
 }
 
 .map :global(.marker-cluster) {

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

@@ -8,7 +8,8 @@ const Map = dynamic(() => import("./editable-map"), {
   ssr: false
 });
 export default function EditableMap({
-  iconSet = "esf"
+  iconSet = "esf",
+  hideSlopes
 }) {
   const {
     lang,
@@ -75,7 +76,8 @@ export default function EditableMap({
   });
   return formats.map(format => ReactDOM.createPortal(_jsx(Map, {
     format: format,
-    iconSet: iconSet
+    iconSet: iconSet,
+    hideSlopes: hideSlopes
   }), format.element));
 }
 function reloadWindow() {

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

@@ -0,0 +1,23 @@
+import * as React from "react";
+import Checkbox from "dt-design-system/es/checkbox";
+import css from "./slopes-toggle.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const labels = {
+  fr: "Afficher les pistes",
+  en: "Show slopes"
+};
+export default function SlopesToggle({
+  showSlopes,
+  setShowSlopes
+}) {
+  const lang = document.documentElement.getAttribute("lang");
+  const label = lang === "fr" ? labels.fr : labels.en;
+  return _jsx("div", {
+    className: css.slopesToggle,
+    children: _jsx(Checkbox, {
+      label: label,
+      value: showSlopes,
+      onCheckedChange: setShowSlopes
+    })
+  });
+}

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

@@ -0,0 +1,14 @@
+.slopesToggle {
+  position: absolute;
+  bottom: 10px;
+  left: 50px;
+  width: fit-content;
+  padding: 5px;
+  background-color: var(--ds-grey-000, #fff);
+  border-radius: var(--ds-radius-200, 8px);
+  box-shadow: var(--ds-shadow-100, 0px 3px 6px rgba(0, 0, 0, 0.12));
+}
+
+.slopesToggle span {
+  width: 24px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ublo-lib",
-  "version": "1.14.0",
+  "version": "1.14.2",
   "peerDependencies": {
     "dt-design-system": "^2.1.0",
     "leaflet": "^1.9.1",