homeflowjs 0.13.35 → 0.13.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homeflowjs",
-  "version": "0.13.35",
+  "version": "0.13.37",
   "sideEffects": [
     "modal/**/*",
     "user/default-profile/**/*",

package/properties/properties-display/properties-display.component.jsx

@@ -126,7 +126,7 @@ const PropertiesDisplay = ({
         {items}
       </div>
       {showScrollRef && (
-        <div ref={infiniteScrollRef} />
+        <div ref={infiniteScrollRef} className="hf-property-results__infinite-scroll-trigger" style={{ height: '1px', opacity: 0 }} />
       )}
       {showScrollLoader && (
         <InfiniteScrollLoader />

package/properties/properties-map/draggable-map.css

@@ -0,0 +1,16 @@
+.draggable-map-overlay {
+  position: absolute;
+  inset: 0;
+  display: none;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.5);
+  font-size: 4rem;
+  color: white;
+  cursor: pointer;
+  user-select: none;
+}
+
+.draggable-map-overlay--show {
+  display: flex;
+}

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

@@ -8,6 +8,8 @@ import { setPlace, setSearchField } from '../../actions/search.actions';
 import { setProperties, setSelectedMarker, setPagination } from '../../actions/properties.actions';
 import { setLoading } from '../../actions/app.actions';
 
+import './draggable-map.css';
+
 const element = function (X, Y) {
   this.X = X;
   this.Y = Y;
@@ -23,6 +25,12 @@ export default class DraggableMap {
     this.render = this.render.bind(this);
     this.generateMap = this.generateMap.bind(this);
     this.properties = this.getProperties();
+    this.disableHandlers = this.disableHandlers.bind(this);
+    this.enableHandlers = this.enableHandlers.bind(this);
+    this.addOverlay = this.addOverlay.bind(this);
+    this.removeOverlay = this.removeOverlay.bind(this);
+    this.showOverlay = this.showOverlay.bind(this);
+    this.hideOverlay = this.hideOverlay.bind(this);
     this.initOnMarkerClick();
   }
 
@@ -703,4 +711,47 @@ export default class DraggableMap {
 
     return new L.LatLng(y, x);
   }
+
+  disableHandlers() {
+    this.map._handlers.forEach(function(handler) {
+      handler.disable();
+    });
+  }
+
+  enableHandlers() {
+    this.map._handlers.forEach(function(handler) {
+      handler.enable();
+    });
+  }
+
+  addOverlay({ text }) {
+    const { _container, _overlayElement } = this.map;
+    if (_overlayElement) {
+      this.removeOverlay();
+    }
+
+    const newDiv = document.createElement("div");
+    newDiv.classList.add('draggable-map-overlay');
+    this._overlayElement = newDiv;
+    if (text) {
+      const newContent = document.createTextNode(text);
+      newDiv.appendChild(newContent);
+    }
+    _container.appendChild(newDiv, _container);
+  }
+
+  removeOverlay() {
+    if (this._overlayElement) {
+      this._overlayElement?.remove();
+      this._overlayElement = null;
+    }
+  }
+
+  showOverlay() {
+    this?._overlayElement?.classList?.add('draggable-map-overlay--show')
+  }
+
+  hideOverlay() {
+    this?._overlayElement?.classList?.remove('draggable-map-overlay--show')
+  }
 }

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

@@ -16,17 +16,32 @@ import './marker_cluster.css';
 import './marker_cluster.default.css';
 
 // global callback to run when maps scripts are loaded
-window.initLegacyMap = () => {
+window.initLegacyMap = (options) => {
+  let map;
   if (Homeflow.get('geonames_map')) {
-    const map = new GeonamesMap();
+    map = new GeonamesMap();
     map.init();
   } else if (Homeflow.get('enable_draw_a_map') && !!window.CanvasRenderingContext2D && !!history.pushState) {
-    const map = new DrawableMap();
+    map = new DrawableMap();
     map.init();
   } else {
-    const map = new DraggableMap();
+    map = new DraggableMap();
     map.init();
   }
+
+  if (map && options) {
+    if (options?.disableHandlersOnInit) {
+      map.disableHandlers();
+      map.addOverlay({ text: options.overlayText || 'Click to interact' });
+      map.showOverlay();
+
+      map.map.on('click', () => {
+        map.enableHandlers();
+        map.hideOverlay();
+        map.removeOverlay();
+      })
+    }
+  }
 };
 
 // have to stub these jQuery methods as they're called in drawamap code
@@ -52,7 +67,7 @@ window.$ = () => ({
 // )
 // end
 
-const PropertiesMap = ({ leaflet, gmapKey, googleLayer }) => {
+const PropertiesMap = ({ leaflet, gmapKey, googleLayer, legacyMapOptions }) => {
   const addLegacyMaps = () => {
     const needsGoogle = !leaflet || googleLayer;
 
@@ -67,10 +82,13 @@ const PropertiesMap = ({ leaflet, gmapKey, googleLayer }) => {
       const script = document.createElement('script');
       script.setAttribute('src', '/legacy_asset_bundles/legacy_maps.js');
       script.setAttribute('id', 'hfjs-legacy-maps');
-      script.setAttribute('onload', 'window.initLegacyMap()');
+      script.setAttribute(
+        'onload',
+        `window.initLegacyMap(${legacyMapOptions ? JSON.stringify(legacyMapOptions) : ''})`,
+      );
       document.head.appendChild(script);
     } else {
-      window.initLegacyMap();
+      window.initLegacyMap(legacyMapOptions);
     }
   };
 
@@ -90,12 +108,17 @@ PropertiesMap.propTypes = {
   gmapKey: PropTypes.string,
   leaflet: PropTypes.bool,
   googleLayer: PropTypes.bool,
+  legacyMapOptions: PropTypes.shape({
+    disableHandlersOnInit: PropTypes.bool,
+    overlayText: PropTypes.string,
+  })
 };
 
 PropertiesMap.defaultProps = {
   gmapKey: null,
   leaflet: false,
   googleLayer: false,
+  legacyMapOptions: null,
 };
 
 const mapStateToProps = (state) => ({