homeflowjs 0.12.3 → 0.12.5

package/branches/branch-map/branch-map.component.jsx

@@ -8,6 +8,8 @@ import { simpleBW } from '../../shared/custom-gmap-styles';
 
 const BranchLeafletMap = React.lazy(() => import('./branch-leaflet-map.component'));
 
+import 'leaflet/dist/leaflet.css';
+
 const LazyLeafletMap = (props) => (
   <Suspense fallback={<div>Loading</div>}>
     <BranchLeafletMap {...props} />

package/package.json

@@ -1,6 +1,12 @@
 {
   "name": "homeflowjs",
-  "version": "0.12.3",
+  "version": "0.12.5",
+  "sideEffects": [
+    "modal/**/*",
+    "properties/properties-map/**/*",
+    "properties/property-map/**/*",
+    "properties/property-streetview/**/*"
+  ],
   "description": "JavaScript toolkit for Homeflow themes",
   "main": "index.js",
   "scripts": {

package/properties/properties-map/draggable-map.js

@@ -59,7 +59,7 @@ export default class DraggableMap {
       this.buildPolygon();
       this.setMarkers();
       if (this.noLocationfound || Homeflow.get('breadcrumbs_map')) { this.setToMarkeredBounds(); }
-      if (Homeflow.get('custom_map_zoom') !== null) {
+      if (Homeflow.get('custom_map_zoom')) {
         this.map.setZoom(Homeflow.get('custom_map_zoom'));
       }
     }
@@ -293,6 +293,12 @@ export default class DraggableMap {
   }
 
   setToMarkeredBounds() {
+    const viewport = store.getState().search.currentSearch.place?.viewport;
+
+    if (viewport && this.viewport !== viewport) {
+      this.viewport = viewport;
+    }
+
     const options = Homeflow.get('custom_map_bounds_padding');
     const bounds = this.getMarkerBounds();
 
@@ -311,27 +317,38 @@ export default class DraggableMap {
     if (this.bounds && this.bounds.isValid()) {
       return this.bounds;
     } else {
-      const bounds = [this.getTopLeftMarkerCoordinates(), this.getBottomRightMarkerCoordinates()];
-      if (bounds.flat().find(coordinate => coordinate === Infinity)) return null;
+      if (Homeflow.get('breadcrumbs_map')) {
+        const viewportBounds = this.getViewportBounds();
+        if (viewportBounds.flat().find(coordinate => coordinate === Infinity)) return null;
+
+        return L.latLngBounds(...viewportBounds.map(bound => L.latLng(...bound)));
+      } else {
+        const bounds = [this.getTopRightMarkerCoordinates(), this.getBottomLeftMarkerCoordinates()];
+        if (bounds.flat().find(coordinate => coordinate === Infinity)) return null;
 
-      return L.latLngBounds(...bounds.map(bound => L.latLng(...bound)));
+        return L.latLngBounds(...bounds.map(bound => L.latLng(...bound)));
+      }
     }
   }
 
-  getTopLeftMarkerCoordinates() {
-    return [
-      Math.min(...this.parseCoordinateArray([this.properties, this.breadcrumbs].flat(), 'lat')),
-      Math.min(...this.parseCoordinateArray([this.properties, this.breadcrumbs].flat(), 'lng'))
-    ];
+  getViewportBounds() {
+    return [...this.viewport[0].filter((coords, index) => index === 0 || index === 2).map(coords => [...coords.toReversed()])];
   }
 
-  getBottomRightMarkerCoordinates() {
+  getTopRightMarkerCoordinates() {
     return [
       Math.max(...this.parseCoordinateArray([this.properties, this.breadcrumbs].flat(), 'lat')),
       Math.max(...this.parseCoordinateArray([this.properties, this.breadcrumbs].flat(), 'lng'))
     ];
   }
 
+  getBottomLeftMarkerCoordinates() {
+    return [
+      Math.min(...this.parseCoordinateArray([this.properties, this.breadcrumbs].flat(), 'lat')),
+      Math.min(...this.parseCoordinateArray([this.properties, this.breadcrumbs].flat(), 'lng'))
+    ];
+  }
+
   parseCoordinateArray(items, coordinateType) {
     if (!items) return [];
 
@@ -444,9 +461,12 @@ export default class DraggableMap {
         url = `/search.ljson?${buildQueryString(this.getSearch())}/view-${bounds.toBBoxString()}&count=50`;
       } else {
         // unset place
-        store.dispatch(setPlace(null));
+        // Leaving this commented as it may be needed
+        // It is causing issues as the place state is never reset after the request
+        // so the place is just empty
+        // Not sure it has to be set to null for the request to work
+        // store.dispatch(setPlace(null));
         const newSearch = this.getSearch();
-        newSearch.place = null;
         url = `/search.ljson?${buildQueryString(newSearch)}/view-${bounds.toBBoxString()}&count=50`;
       }
       if (Homeflow.get('get_geo_features')) {
@@ -708,6 +728,7 @@ export default class DraggableMap {
     if (breadcrumbs && this.breadcrumbs !== breadcrumbs) {
       this.breadcrumbs = breadcrumbs;
       this.setMarkers();
+      this.setToMarkeredBounds();
     }
   }
 }

package/properties/property-map/property-map.component.jsx

@@ -6,6 +6,8 @@ import PropTypes from 'prop-types';
 import { initGoogleMaps } from '../../actions/app.actions';
 import { simpleBW } from '../../shared/custom-gmap-styles';
 
+import '../properties-map/leaflet.css';
+
 const PropertyLeafletMap = React.lazy(() => import('./property-leaflet-map.component'));
 
 const LazyLeafletMap = (props) => (

package/properties/property-streetview/property-streetview.component.jsx

@@ -8,20 +8,10 @@ const PropertyStreetview = ({ initGoogleMaps, ...otherProps }) => {
   const initializeMap = () => {
     // Should this be added to Redux?
     const property = Homeflow.get('property');
-
-    const panorama = new google.maps.StreetViewPanorama(document.getElementById('hfjs-property-streetview'));
-    panorama.setPosition(new google.maps.LatLng(property.lat, property.lng));
-
-    if (property.streetview) {
-      const { pitch, heading } = property.streetview.orientation;
-      const { lat, lng } = property.streetview.position;
-
-      panorama.setPosition(new google.maps.LatLng(lat, lng));
-      panorama.setPov({ heading, pitch });
-    } else {
-      panorama.setPosition(new google.maps.LatLng(property.lat, property.lng));
-    }
-
+    const panorama = new google.maps.StreetViewPanorama(document.getElementById('hfjs-property-streetview'), {
+      position: {lat: property.lat, lng: property.lng},
+      pov: {heading: 0, pitch: 0}
+    });
     panorama.setVisible(true);
   };
 

package/reducers/search.reducer.js

@@ -11,6 +11,7 @@ const INITIAL_STATE = {
     tags: [],
     poly: '',
     auctionDate: '',
+    viewport: [],
   },
   initialSearch: {}, // original search when the page first loads
   savedSearches: [],
@@ -120,8 +121,11 @@ const searchReducer = (state = INITIAL_STATE, action) => {
       if (!place) {
         return {
           ...state,
-          place: null,
-          placeId: null,
+          currentSearch: {
+            ...state.currentSearch,
+            place: null,
+            placeId: null,
+          }
         };
       }