@woosmap/ui 2.33.0 → 2.37.0

package/src/components/Map/drawOnMap.js

@@ -76,3 +76,70 @@ export const extendedBounds = function extendedBounds(boundsArray) {
 
     return bounds;
 };
+
+export const woosmapBoundsFromViewport = function woosmapBoundsFromViewport(viewportObj) {
+    return new window.woosmap.map.LatLngBounds(
+        new window.woosmap.map.LatLng(viewportObj.southwest),
+        new window.woosmap.map.LatLng(viewportObj.northeast)
+    );
+};
+
+export class WoosmapMapBoundingBox {
+    constructor(bounds, padding) {
+        this.overlayView = new window.woosmap.map.OverlayView();
+
+        this.bounds = !(bounds instanceof window.woosmap.map.LatLngBounds)
+            ? new window.woosmap.map.LatLngBounds(
+                  { lng: bounds.east, lat: bounds.north },
+                  { lng: bounds.west, lat: bounds.south }
+              )
+            : bounds;
+
+        this.padding = {
+            right: padding?.right || 0,
+            left: padding?.left || 0,
+            top: padding?.top || 0,
+            bottom: padding?.bottom || 0,
+        };
+
+        const self = this;
+
+        this.overlayView.onAdd = () => {
+            const panes = this.overlayView.getPanes();
+
+            this.div = document.createElement('div');
+            this.div.style.borderStyle = 'solid';
+            this.div.style.borderWidth = '1px';
+            this.div.style.borderColor = 'rgba(0, 0, 255, 0.8)';
+            this.div.style.position = 'absolute';
+            this.div.style.backgroundColor = 'rgba(0, 0, 255, 0.2)';
+
+            panes.overlayLayer.appendChild(this.div);
+        };
+
+        this.overlayView.draw = () => {
+            const overlayProjection = this.overlayView.getProjection();
+
+            const sw = overlayProjection.fromLatLngToDivPixel(self.bounds.getSouthWest());
+            const ne = overlayProjection.fromLatLngToDivPixel(self.bounds.getNorthEast());
+
+            if (this.div) {
+                this.div.style.left = `${sw.x - self.padding.left}px`;
+                this.div.style.top = `${ne.y - self.padding.top}px`;
+                this.div.style.width = `${ne.x - sw.x + (self.padding.left + self.padding.right)}px`;
+                this.div.style.height = `${sw.y - ne.y + (self.padding.top + self.padding.bottom)}px`;
+            }
+        };
+
+        this.overlayView.onRemove = () => {
+            if (this.div) {
+                this.div.parentNode.removeChild(this.div);
+                delete this.div;
+            }
+        };
+    }
+
+    setMap(map) {
+        this.overlayView.setMap(map);
+    }
+}

package/src/components/Map/marker.styl

@@ -1,4 +1,4 @@
-.marker
+.ui-marker
 	position absolute
 	width 3rem
 	height 4.6rem

package/src/locales/en/translation.json

@@ -29,6 +29,7 @@
   "Default": "Default",
   "Destination": "Destination",
   "Display Map POIs": "Display Map POIs",
+  "Display Geolocation POIs": "Display points of interest",
   "Display Woosmap Stores overlay": "Display Woosmap Stores overlay",
   "Display your regional promotions and catchment area.": "Display your regional promotions and catchment area.",
   "Distance API": "Distance API",
@@ -44,7 +45,7 @@
   "Grey": "Grey",
   "Identify the country to redirect users to the suitable website, or adapt your services according to the timezone.": "Identify the country to redirect users to the suitable website, or adapt your services according to the timezone.",
   "In Store Wifi": "In Store Wifi",
-  "Initialise your map display around the end user and retrieve your own Points of Interest.": "Initialise your map display around the end user and retrieve your own Points of Interest.",
+  "Initialise your map display around the end user and retrieve your own Points of Interest.": "Initialise your map display around the end user and retrieve your own points of interest.",
   "Language": "Language",
   "Light Grey": "Light Grey",
   "Loading...": "Loading...",

package/src/locales/fr/translation.json

@@ -29,8 +29,9 @@
   "Default": "Défaut",
   "Destination": "Destination",
   "Display Map POIs": "Afficher les POIs de la carte",
+  "Display Geolocation POIs": "Afficher les points de vente",
   "Display Woosmap Stores overlay": "Afficher la couche de magasins Woosmap",
-  "Display your regional promotions and catchment area.": "Affichez les offres promotionnelles de la région, et la zone de chalandise.",
+  "Display your regional promotions and catchment area.": "Affichez les offres promotionnelles de la région et la zone de chalandise.",
   "Distance API": "Distance API",
   "Features": "Caractéristiques",
   "Filter by": "Filtrer par",
@@ -44,7 +45,7 @@
   "Grey": "Gris",
   "Identify the country to redirect users to the suitable website, or adapt your services according to the timezone.": "Identifiez le pays pour rediriger vers le bon site et adaptez vos offres de services en fonction du fuseau horaire de vos visiteurs.",
   "In Store Wifi": "Wifi",
-  "Initialise your map display around the end user and retrieve your own Points of Interest.": "Listez vos propres points de vente et centrez votre affichage cartographique autour de sa position.",
+  "Initialise your map display around the end user and retrieve your own Points of Interest.": "Centrez la carte autour de la position de votre visiteur et affichez vos propres points de vente.",
   "Language": "Language",
   "Light Grey": "Gris clair",
   "Loading...": "Chargement...",

package/src/styles/console/button.styl

@@ -155,32 +155,32 @@
 				.icon
 					fill $secondary
 	&--inverse
-			btn()
-			background-color transparent
-			border .1rem solid $light
+		btn()
+		background-color transparent
+		border .1rem solid $light
+		color $light
+		.icon
+			fill $light
+		&.btn--has-icon
+			&:not(.btn--mini):not(.btn--small):not(.btn--large)
+				mbi(.4)
+		&.btn--icon
+			flex-shrink 0
+			.icon
+				flex-shrink 0
+		&:hover
+			border-color $success
 			color $light
 			.icon
 				fill $light
-			&.btn--has-icon
-				&:not(.btn--mini):not(.btn--small):not(.btn--large)
-					mbi(.4)
-			&.btn--icon
-				flex-shrink 0
-				.icon
-					flex-shrink 0
+		&:disabled
+			opacity .3
 			&:hover
+				cursor default
 				border-color $success
 				color $light
 				.icon
 					fill $light
-			&:disabled
-				opacity .3
-				&:hover
-					cursor default
-					border-color $success
-					color $light
-					.icon
-						fill $light
 	&--dropdown-item
 		flexBtn()
 		ellipsis()
@@ -332,7 +332,6 @@
 		.btn__label
 			trans()
 
-
 	&--has-icon
 		&:not(.btn--icon):not(.btn--link):not(.btn--link-primary):not(.btn--link-info):not(.btn--link-flex):not(.btn--link-flex-info):not(.btn--loading):not(.btn--mini):not(.btn--small):not(.btn--large):not(.btn--dropdown-item):not(.btn--tab):not(.btn--sidebar-link)
 			padding 0 $padding 0 $padding - .6
@@ -344,6 +343,29 @@
 				background-color $error
 		.icon
 			sq(2.2)
+	&--switch
+		btn()
+		color $secondary-medium
+		background-color $light
+		border .1rem solid $inputBorderColor
+		&.btn--has-icon
+			&:not(.btn--mini):not(.btn--small):not(.btn--large)
+				mbi(.4)
+		&.btn--icon
+			flex-shrink 0
+			.icon
+				flex-shrink 0
+		&:hover
+			color $secondary
+			background-color $primary10
+		&.active
+			color $light
+			border-color $secondary
+			background-color $secondary
+			.icon
+				fill $light
+			&:hover
+				background-color $secondary
 	&--group
 		btn()
 		color $secondary-medium
@@ -543,13 +565,15 @@
 	&--small
 		buttonSmall()
 		&.btn--group
+		&.btn--switch
 			buttonSmall()
 			&.btn--icon
 				width auto
 				img
 					max-width 2.2rem
-		.icon
-			sq(1.8)
+		&:not(.btn--custom-icon-size)
+			.icon
+				sq(1.8)
 		&:not(.btn--icon)
 			.icon
 				margin-right .4rem
@@ -562,8 +586,9 @@
 						sq(1.8)
 	&--mini
 		buttonMini()
-		.icon
-			sq(1.6)
+		&:not(.btn--custom-icon-size)
+			.icon
+				sq(1.6)
 		&:not(.btn--icon)
 			.icon
 				margin-right .4rem
@@ -577,8 +602,9 @@
 					
 	&--large
 		buttonLarge()
-		.icon
-			sq(3.2)
+		&:not(.btn--custom-icon-size)
+			.icon
+				sq(3.2)
 		&:not(.btn--icon)
 			.icon
 				margin-right .6rem

package/src/styles/console/colors.styl

@@ -70,6 +70,8 @@ $special2 = #ff3260
 $special3 =  #46cebc
 $focus = #3633ff
 
+$favorite = #ffc200
+
 $modalBg = rgba(0, 11, 31, .85)
 
 // Labels

package/src/styles/console/mixins.styl

@@ -34,7 +34,7 @@ box()
 // Buttons mixins
 	
 hover()
-	&:not(.btn--group)
+	&:not(.btn--group):not(.btn--switch)
 		&:hover
 			background-color $buttonHover
 			color $light