homeflowjs 0.11.8 → 0.11.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homeflowjs",
-  "version": "0.11.8",
+  "version": "0.11.10",
   "description": "JavaScript toolkit for Homeflow themes",
   "main": "index.js",
   "scripts": {

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

@@ -7,6 +7,7 @@ import { buildQueryString } from '../../search/property-search/property-search';
 import { setPlace, setSearchField } from '../../actions/search.actions';
 import { setProperties, setSelectedMarker, setPagination } from '../../actions/properties.actions';
 import { setLoading } from '../../actions/app.actions';
+import { currentGeonameId } from '../../utils/index';
 
 const element = function (X, Y) {
   this.X = X;
@@ -56,8 +57,8 @@ export default class DraggableMap {
       this.mapLoadedTimes = 1;
       this.render();
       this.buildPolygon();
-      this.setMarkersFor(this.propertiesOrBreadcrumbs());
-      if (this.noLocationfound) { this.setToMarkeredBounds(); }
+      this.setMarkers();
+      if (this.noLocationfound || Homeflow.get('breadcrumbs_map')) { this.setToMarkeredBounds(); }
       if (Homeflow.get('custom_map_zoom') !== null) {
         this.map.setZoom(Homeflow.get('custom_map_zoom'));
       }
@@ -122,7 +123,10 @@ export default class DraggableMap {
   }
 
   generateMarker(property) {
-    const marker = L.marker([property.lat, property.lng], { icon: Homeflow.get('custom_property_pin')(property) });
+    const marker = L.marker(
+      [property.lat, property.lng],
+      { title: property.name, icon: Homeflow.get('custom_property_pin')(property) }
+    );
 
     // add the property to marker attributes so they can be accessed on click
     marker.property = property;
@@ -138,7 +142,6 @@ export default class DraggableMap {
 
       if (Homeflow.get('pop_up_on_mouseover')) {
         marker.on("mouseover", e => marker.openPopup());
-
         marker.on("mouseout", e => setTimeout((() => marker.closePopup()), 4000));
       }
     }
@@ -244,47 +247,105 @@ export default class DraggableMap {
     }
   }
 
-  setMarkersFor(propertiesOrBreadcrumbs) {
-    let bounds;
-    if (this.marker_layer != null) { this.map.removeLayer(this.marker_layer); }
-    if (!propertiesOrBreadcrumbs) { return null }
+  initLayers() {
+    if (this.clusteringMarkerLayer) this.map.removeLayer(this.clusteringMarkerLayer);
+    if (this.nonClusteringMarkerLayer) this.map.removeLayer(this.nonClusteringMarkerLayer);
 
-    if (Homeflow.get('pin_clustering') && !this.breadcrumbs?.length) {
-      let radius = Homeflow.get('custom_clustering_radius');
-      if (!radius) {
-        radius = 10;
-      }
-      this.marker_layer = new L.MarkerClusterGroup({ maxClusterRadius: radius, showCoverageOnHover: false });
+    const radius = Homeflow.get('custom_clustering_radius') || 10;
+
+    this.clusteringMarkerLayer = new L.MarkerClusterGroup({ maxClusterRadius: radius, showCoverageOnHover: false });
+    this.nonClusteringMarkerLayer = L.featureGroup();
+  }
+
+  setMarkers() {
+    this.initLayers();
+
+    if (!this.properties && !this.breadcrumbs) { return null }
+
+
+    if (this.isDisplayProperties()) {
+      this.properties?.map(property => this.setPropertyMarker(property));
     } else {
-      this.marker_layer = L.featureGroup();
-    }
-    const markers = propertiesOrBreadcrumbs.map((propertyOrBreadcrumb) => {
-      if (propertyOrBreadcrumb.property_id != null || Homeflow.get('breadcrumbs_map')) {
-        if (propertyOrBreadcrumb.lat !== 0 && propertyOrBreadcrumb.lng !== 0) {
-          const m = this.generateMarker(propertyOrBreadcrumb);
-          this.marker_layer.addLayer(m);
-          return m;
-        }
-      }
-    });
-    this.marker_layer.addTo(this.map);
-    this.bounds = this.marker_layer.getBounds();
-    return bounds = [this.marker_layer.getBounds()];
+      this.breadcrumbs?.map(breadcrumb => this.setBreadcrumbMarker(breadcrumb));
+    }
+
+    this.clusteringMarkerLayer.addTo(this.map);
+    this.nonClusteringMarkerLayer.addTo(this.map);
+
+    return this.bounds;
+  }
+
+  setPropertyMarker(property) {
+    const geonameId = property.geoname_ids?.slice(-1)[0];
+    const layer = Homeflow.get('pin_clustering') ? this.clusteringMarkerLayer : this.nonClusteringMarkerLayer;
+
+    if (property.property_id === null || property.lat === 0 || property.lng === 0) return;
+    if (geonameId && Homeflow.get('breadcrumbs_map') && geonameId !== currentGeonameId()) return;
+
+    layer.addLayer(this.generateMarker(property));
+  }
+
+  setBreadcrumbMarker(breadcrumb) {
+    if (!breadcrumb.lat || !breadcrumb.lng) return;
+
+    this.nonClusteringMarkerLayer.addLayer(this.generateMarker(breadcrumb));
   }
 
   setToMarkeredBounds() {
-    if (this.bounds != null) {
-      if (Homeflow.get('custom_map_bounds_padding')) {
-        this.map.fitBounds(this.bounds, Homeflow.get('custom_map_bounds_padding'));
-      } else {
-        this.map.fitBounds(this.bounds);
-      }
+    const options = Homeflow.get('custom_map_bounds_padding');
+    const bounds = this.getMarkerBounds();
 
-      if (Homeflow.get('custom_map_centre_lat') && Homeflow.get('custom_map_centre_lng')) {
-        this.map.setView([Homeflow.get('custom_map_centre_lat'), Homeflow.get('custom_map_centre_lng')], 7);
-      }
+    if (!bounds || !bounds.isValid()) return;
+
+    this.map.fitBounds(bounds, options);
+
+    if (Homeflow.get('custom_map_centre_lat') && Homeflow.get('custom_map_centre_lng')) {
+      this.map.setView([Homeflow.get('custom_map_centre_lat'), Homeflow.get('custom_map_centre_lng')], 7);
+    }
 
-      return Homeflow.kickEvent('non_standard_zoom', this.map, 4);
+    Homeflow.kickEvent('non_standard_zoom', this.map, 4);
+  }
+
+  getMarkerBounds() {
+    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;
+
+      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'))
+    ];
+  }
+
+  getBottomRightMarkerCoordinates() {
+    return [
+      Math.max(...this.parseCoordinateArray([this.properties, this.breadcrumbs].flat(), 'lat')),
+      Math.max(...this.parseCoordinateArray([this.properties, this.breadcrumbs].flat(), 'lng'))
+    ];
+  }
+
+  parseCoordinateArray(items, coordinateType) {
+    if (!items) return [];
+
+    return items.filter(item => item).map(item => parseFloat(item[coordinateType])).filter(Number);
+  }
+
+  isDisplayProperties() {
+    const { properties: { pagination: { total_count: totalCount } } } = store.getState();
+
+    if (!this.breadcrumbs || !Homeflow.get('breadcrumbs_map')) {
+      return true;
+    } else if (this.properties && totalCount <= this.properties.length) {
+      return true;
+    } else {
+      return false;
     }
   }
 
@@ -411,7 +472,7 @@ export default class DraggableMap {
                 // if (this.tile_view != null) {
                 //   this.tile_view = new Ctesius.Views.Tiles({ collection: this.collection });
                 // }
-                return this.setMarkersFor(this.propertiesOrBreadcrumbs());
+                return this.setMarkers();
               });
     }
   }
@@ -575,7 +636,7 @@ export default class DraggableMap {
           //   this.tile_view = new Ctesius.Views.Tiles({ collection: this.collection });
           // }
 
-          return this.setMarkersFor(this.propertiesOrBreadcrumbs());
+          return this.setMarkers();
       })
     // return $.get(url, (res, status, xhr) => {
     //   s.set('performed_data', res);
@@ -591,7 +652,7 @@ export default class DraggableMap {
     //   }
     //   else { }
     //   //@tile_view.collection(@collection)
-    //   return this.setMarkersFor(this.collection.models);
+    //   return this.setMarkers();
     // });
   }
 
@@ -645,7 +706,7 @@ export default class DraggableMap {
 
     if (breadcrumbs && this.breadcrumbs !== breadcrumbs) {
       this.breadcrumbs = breadcrumbs;
-      this.setMarkersFor(breadcrumbs);
+      this.setMarkers();
     }
   }
 }

package/utils/index.js

@@ -80,4 +80,10 @@ export const compact = (array) => array.filter((item) => typeof item !== 'undefi
 
 export const sanitizeText = (string) => new Option(string).innerHTML;
 
+export const currentGeonameId = (path) => {
+  const pathname = path || window.location.pathname;
+  const segment = pathname.split('/').reverse().find(item => item.startsWith('gid-'))?.replace(/^gid-/, '')
+  return parseInt(segment, 10) || null;
+};
+
 export const DEBOUNCE_DELAY = 200;

package/utils/index.test.js

@@ -19,3 +19,13 @@ describe('sanitizeText', () => {
     expect(utils.sanitizeText('<hello>')).toEqual('&lt;hello&gt;');
   });
 });
+
+describe('currentGeonameId', () => {
+  it('returns Geoname ID from path', () => {
+    expect(utils.currentGeonameId('/foo/bar/baz/gid-12345/qux')).toEqual(12345);
+  });
+
+  it('returns `null` when no Geoname ID detected', () => {
+    expect(utils.currentGeonameId('/foo/bar/baz/qux')).toEqual(null);
+  });
+});