Feature/popup record selector (#221)

* added previous/next record to popup content * updated theme feature handling to allow for multiple features * fixed styling and behaviour of next/prev buttons
county-of-simcoe-gis · Nov 28, 2023 · 4626594 · 4626594
1 parent 4603771
commit 4626594
Show file tree

Hide file tree

Showing 8 changed files with 242 additions and 102 deletions.
diff --git a/src/helpers/Popup.css b/src/helpers/Popup.css
@@ -1,73 +1,75 @@
 .map-theme .sc-popup-header {
-	height: 25px;
-	padding-top: 6px;
-	background: linear-gradient(to bottom, #3980cc 0%, #2865a2 100%);
-	border-bottom: 2px solid #e7a614;
-	color: #fff !important;
-	line-height: 20px;
-	padding-left: 6px;
-	cursor: default;
-	font-size: 15px;
-	border-radius: 3px !important;
+  height: 25px;
+  padding-top: 6px;
+  background: linear-gradient(to bottom, #3980cc 0%, #2865a2 100%);
+  border-bottom: 2px solid #e7a614;
+  color: #fff !important;
+  line-height: 20px;
+  padding-left: 6px;
+  cursor: default;
+  font-size: 15px;
+  border-radius: 3px !important;
 }
 
 .map-theme .sc-popup-header-close-button {
-	z-index: 500;
-	/* position: absolute;
-    top: 2px;
-    cursor: pointer;
-    background: url(../dijit/images/popup.png) no-repeat; */
+  z-index: 500;
+}
+.sc-popup-content-next-button {
+  z-index: 500;
+}
+.sc-popup-content-prev-button {
+  z-index: 500;
 }
 
 @media only screen and (max-width: 770px) {
-	.map-theme .sc-property-report-click-more-info {
-		width: 60% !important;
-	}
+  .map-theme .sc-property-report-click-more-info {
+    width: 60% !important;
+  }
 
-	.map-theme .sc-property-report-click-close {
-		width: 37% !important;
-	}
-	.map-theme .ol-popup {
-		position: absolute;
-		background-color: white;
-		/* padding: 15px 25px 15px 15px; */
-		border: 1px solid #cccccc;
-		bottom: 0px;
-		top: unset;
-		right: 0px;
-		left: -50px;
-		border-radius: 3px !important;
-		width: 100%;
-		max-width: none !important;
-	}
+  .map-theme .sc-property-report-click-close {
+    width: 37% !important;
+  }
+  .map-theme .ol-popup {
+    position: absolute;
+    background-color: white;
+    /* padding: 15px 25px 15px 15px; */
+    border: 1px solid #cccccc;
+    bottom: 0px;
+    top: unset;
+    right: 0px;
+    left: -50px;
+    border-radius: 3px !important;
+    width: 100%;
+    max-width: none !important;
+  }
 
-	.map-theme .ol-popup-content {
-		max-width: none;
-		width: 100%;
-	}
+  .map-theme .ol-popup-content {
+    max-width: none;
+    width: 100%;
+  }
 
-	.map-theme .ol-selectable {
-		transform: unset !important;
-		position: absolute;
-		left: 50px !important;
-		/*top: 238px !important;*/
-		right: 0px !important;
-		bottom: 0px;
-		width: 100%;
-	}
-	.map-theme .ol-selectable.hidden {
-		bottom: -1000px;
-	}
+  .map-theme .ol-selectable {
+    transform: unset !important;
+    position: absolute;
+    left: 50px !important;
+    /*top: 238px !important;*/
+    right: 0px !important;
+    bottom: 0px;
+    width: 100%;
+  }
+  .map-theme .ol-selectable.hidden {
+    bottom: -1000px;
+  }
 
-	.map-theme .ol-popup-content {
-		position: relative;
-		width: 100%;
-		max-width: none !important;
-		z-index: 1;
-		padding: 6px !important;
-		background-color: #ffffff !important;
-		overflow: scroll;
-		/* max-height: 320px !important; */
-		/* min-height: 50px !important; */
-	}
+  .map-theme .ol-popup-content {
+    position: relative;
+    width: 100%;
+    max-width: none !important;
+    z-index: 1;
+    padding: 6px !important;
+    background-color: #ffffff !important;
+    overflow: scroll;
+    /* max-height: 320px !important; */
+    /* min-height: 50px !important; */
+  }
 }
diff --git a/src/helpers/Popup.jsx b/src/helpers/Popup.jsx
@@ -48,7 +48,81 @@ export default class Popup extends Overlay {
     this.headerContainer = document.createElement("div");
     this.headerContainer.id = "sc-popup-header";
     this.headerContainer.className = "sc-popup-header sc-no-select";
-
+    this.contentArray = [];
+    this.contentIndex = 0;
+    this.contentNextButtonContainer = document.createElement("div");
+    this.contentPrevButtonContainer = document.createElement("div");
+
+    this.contentNextButtonContainer.className = "sc-popup-content-next-button";
+    this.contentPrevButtonContainer.className = "sc-popup-content-prev-button";
+    this.contentNextButtonContainer.title = "Next";
+    this.contentPrevButtonContainer.title = "Previous";
+    // this.contentNextButton.innerHTML = "&#9205;";
+    // this.contentPrevButton.innerHTML = "&#9204;";
+    this.contentPrevButton = document.createElement("a");
+    this.contentPrevButton.className = "ol-popup-previous";
+    this.contentPrevButton.href = "#";
+    this.contentNextButton = document.createElement("a");
+    this.contentNextButton.className = "ol-popup-next";
+    this.contentNextButton.href = "#";
+    this.contentNextButtonContainer.appendChild(this.contentNextButton);
+    this.contentPrevButtonContainer.appendChild(this.contentPrevButton);
+
+    this.contentNextButton.addEventListener("click", () => {
+      this.contentIndex++;
+      if (this.contentIndex >= this.contentArray.length) {
+        this.contentIndex = this.contentArray.length - 1;
+      }
+
+      if (this.contentIndex + 1 >= this.contentArray.length) {
+        this.contentNextButtonContainer.className = "sc-popup-content-next-button disabled";
+        this.contentPrevButtonContainer.className = "sc-popup-content-prev-button";
+      } else if (this.contentIndex - 1 < 0) {
+        this.contentNextButtonContainer.className = "sc-popup-content-next-button";
+        this.contentPrevButtonContainer.className = "sc-popup-content-prev-button disabled";
+      } else {
+        this.contentNextButtonContainer.className = "sc-popup-content-next-button";
+        this.contentPrevButtonContainer.className = "sc-popup-content-prev-button";
+      }
+
+      this.headerTitle.innerHTML = this.contentArray[this.contentIndex].title;
+      //ReactDOM.render(html, this.content);
+      if (isDOMTypeElement(this.contentArray[this.contentIndex].html)) {
+        // REGULAR HTML
+        this.content.innerHTML = "";
+        this.content.appendChild(this.contentArray[this.contentIndex].html);
+      } else {
+        // REACT COMPONENT
+        ReactDOM.render(this.contentArray[this.contentIndex].html, this.content);
+      }
+    });
+    this.contentPrevButton.addEventListener("click", () => {
+      this.contentIndex--;
+      if (this.contentIndex < 0) {
+        this.contentIndex = 0;
+      }
+      if (this.contentIndex - 1 < 0) {
+        this.contentNextButtonContainer.className = "sc-popup-content-next-button";
+        this.contentPrevButtonContainer.className = "sc-popup-content-prev-button disabled";
+      } else if (this.contentIndex + 1 >= this.contentArray.length) {
+        this.contentNextButtonContainer.className = "sc-popup-content-next-button disabled";
+        this.contentPrevButtonContainer.className = "sc-popup-content-prev-button";
+      } else {
+        this.contentNextButtonContainer.className = "sc-popup-content-next-button";
+        this.contentPrevButtonContainer.className = "sc-popup-content-prev-button";
+      }
+      // SET TITLE
+      this.headerTitle.innerHTML = this.contentArray[this.contentIndex].title;
+      //ReactDOM.render(html, this.content);
+      if (isDOMTypeElement(this.contentArray[this.contentIndex].html)) {
+        // REGULAR HTML
+        this.content.innerHTML = "";
+        this.content.appendChild(this.contentArray[this.contentIndex].html);
+      } else {
+        // REACT COMPONENT
+        ReactDOM.render(this.contentArray[this.contentIndex].html, this.content);
+      }
+    });
     this.headerCloseContainer = document.createElement("div");
     this.headerCloseContainer.className = "sc-popup-header-close-button";
 
@@ -65,7 +139,8 @@ export default class Popup extends Overlay {
     this.closer.href = "#";
 
     this.headerCloseContainer.appendChild(this.closer);
-
+    this.headerContainer.appendChild(this.contentNextButtonContainer);
+    this.headerContainer.appendChild(this.contentPrevButtonContainer);
     this.headerContainer.appendChild(this.headerCloseContainer);
     this.container.appendChild(this.headerContainer);
 
@@ -118,10 +193,28 @@ export default class Popup extends Overlay {
   show(coord, html, title = "Info", callback = null) {
     if (!window.activeClick || window.activeClick.coordinates[0] !== coord[0] || window.activeClick.coordinates[1] !== coord[1]) {
       window.activeClick = { coordinates: coord, time: performance.now() };
+      this.contentArray = [{ html: html, title: title }];
+      this.contentIndex = 0;
+      this.contentNextButton.style.display = "none";
+      this.contentPrevButton.style.display = "none";
     } else if (window.activeClick && window.activeClick.coordinates[0] === coord[0] && window.activeClick.coordinates[1] === coord[1]) {
+      this.contentArray.push({ html: html, title: title });
+      if (this.contentArray.length > 1) {
+        this.contentNextButton.style.display = "block";
+        this.contentPrevButton.style.display = "block";
+      } else {
+        this.contentNextButton.style.display = "none";
+        this.contentPrevButton.style.display = "none";
+      }
+      if (this.contentIndex <= 0) {
+        // this.contentPrevButton.style.display = "none";
+        this.contentNextButtonContainer.className = "sc-popup-content-next-button";
+        this.contentPrevButtonContainer.className = "sc-popup-content-prev-button disabled";
+      }
       if (callback) callback();
       return;
     }
+
     // WEIRD MOBILE STUFF PATCH WHERE CONTAINER STAYS OVER MAP
     // var x = document.getElementsByClassName("ol-selectable")[0];
     // x.classList.remove("sc-hidden");
@@ -245,6 +338,8 @@ export default class Popup extends Overlay {
    * @returns {Popup} The Popup instance
    */
   hide() {
+    this.contentArray = [];
+    this.contentIndex = 0;
     window.activeClick = null;
     const containers = document.getElementsByClassName("ol-overlay-container ol-selectable");
     Array.prototype.forEach.call(containers, (el) => {

diff --git a/src/map/OLOverrides.css b/src/map/OLOverrides.css
@@ -76,6 +76,41 @@
   padding: 0 4px;
   color: white;
   text-decoration: none;
+  /* border: 1px solid #fff; */
+}
+.map-theme .ol-popup-previous {
+  position: absolute;
+  top: 6px;
+  right: 48px;
+  /* width: 10px; */
+  font-size: 15pt;
+  padding: 0 4px;
+  color: white;
+  text-decoration: none;
+  /* border: 1px solid #fff; */
+
+  padding-left: 0px !important;
+  padding-right: 0px !important;
+}
+.map-theme .ol-popup-next {
+  position: absolute;
+  top: 6px;
+  right: 27px;
+  /* width: 10px; */
+  font-size: 15pt;
+  padding: 0 4px;
+  color: white;
+  text-decoration: none;
+  /* border: 1px solid #fff; */
+
+  padding-left: 0px !important;
+  padding-right: 0px !important;
+}
+.map-theme .ol-popup-previous:after {
+  content: "\23F4";
+}
+.map-theme .ol-popup-next:after {
+  content: "\23F5";
 }
 
 .map-theme .ol-popup-closer:after {

diff --git a/src/sidebar/components/themes/commercialrealestate/CommercialRealEstate.jsx b/src/sidebar/components/themes/commercialrealestate/CommercialRealEstate.jsx
@@ -95,8 +95,9 @@ class CommercialRealEstate extends Component {
             }
 
             const geoJSON = new GeoJSON().readFeatures(result);
-            const feature = geoJSON[0];
-            window.popup.show(evt.coordinate, <CommercialRealEstatePopupContent key={helpers.getUID()} feature={feature} />, "Real Estate");
+            geoJSON.forEach((feature) => {
+              window.popup.show(evt.coordinate, <CommercialRealEstatePopupContent key={helpers.getUID()} feature={feature} />, "Real Estate");
+            });
           });
         }
       });

diff --git a/src/sidebar/components/themes/immigrationservices/ImmigrationServicesLayerToggler.jsx b/src/sidebar/components/themes/immigrationservices/ImmigrationServicesLayerToggler.jsx
@@ -45,9 +45,10 @@ class ImmigrationServicesLayerToggler extends Component {
             return;
           }
           const geoJSON = new GeoJSON().readFeatures(result);
-          const feature = geoJSON[0];
-          const entries = Object.entries(feature.getProperties());
-          window.popup.show(evt.coordinate, <ThemePopupContent key={helpers.getUID()} values={entries} layerConfig={this.props.layer} />, this.props.layer.displayName);
+          geoJSON.forEach((feature) => {
+            const entries = Object.entries(feature.getProperties());
+            window.popup.show(evt.coordinate, <ThemePopupContent key={helpers.getUID()} values={entries} layerConfig={this.props.layer} />, this.props.layer.displayName);
+          });
         });
       }
     });

diff --git a/src/sidebar/components/themes/localrealestate/LocalRealEstateLayerToggler.jsx b/src/sidebar/components/themes/localrealestate/LocalRealEstateLayerToggler.jsx
@@ -40,11 +40,13 @@ class LocalRealEstateLayerToggler extends Component {
         const extent = feature.getGeometry().getExtent();
         const center = getCenter(extent);
         helpers.zoomToFeature(feature);
-        window.popup.show(
-          center,
-          <LocalRealEstatePopupContent key={helpers.getUID()} feature={feature} photosUrl={this.props.photosUrl} onViewed={this.props.onViewed} />,
-          this.props.layerConfig.displayName
-        );
+        result.forEach((currentFeature) => {
+          window.popup.show(
+            center,
+            <LocalRealEstatePopupContent key={helpers.getUID()} feature={currentFeature} photosUrl={this.props.photosUrl} onViewed={this.props.onViewed} />,
+            this.props.layerConfig.displayName
+          );
+        });
       },
       null,
       null,
@@ -97,12 +99,13 @@ class LocalRealEstateLayerToggler extends Component {
           }
 
           const geoJSON = new GeoJSON().readFeatures(result);
-          const feature = geoJSON[0];
-          window.popup.show(
-            evt.coordinate,
-            <LocalRealEstatePopupContent key={helpers.getUID()} feature={feature} photosUrl={this.props.config.photosUrl} onViewed={this.props.onViewed} />,
-            this.props.layerConfig.displayName
-          );
+          geoJSON.forEach((feature) => {
+            window.popup.show(
+              evt.coordinate,
+              <LocalRealEstatePopupContent key={helpers.getUID()} feature={feature} photosUrl={this.props.config.photosUrl} onViewed={this.props.onViewed} />,
+              this.props.layerConfig.displayName
+            );
+          });
         });
       }
     });