Search Layers Scrolling issue fixed

county-of-simcoe-gis · Jan 14, 2020 · 63e6ab7 · 63e6ab7
1 parent ff65e78
commit 63e6ab7
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 37 deletions.
diff --git a/src/header/Search.jsx b/src/header/Search.jsx
@@ -317,7 +317,9 @@ class Search extends Component {
   // WHEN USER SELECTS ITEM
   onItemSelect(value, item) {
     if (item.type === "Map Layer") {
-      window.emitter.emit("activeTocLayer", item);
+      window.emitter.emit("activeTocLayerGroup", item.layerGroup, () => {
+        window.emitter.emit("activeTocLayer", item);
+      });
       return;
     }
 
@@ -422,7 +424,8 @@ class Search extends Component {
         const layerItems = row[1];
         layerItems.forEach(layer => {
           if (layer.name.toUpperCase().indexOf(this.state.value.toUpperCase()) >= 0) {
-            layers.push({ name: helpers.replaceAllInString(layer.name, "_", " "), type: "Map Layer", layerGroup: groupName, imageName: "layers.png" });
+            //console.log(layer);
+            layers.push({ name: helpers.replaceAllInString(layer.name, "_", " "), type: "Map Layer", layerGroup: groupName, imageName: "layers.png", index: layer.index });
           }
         });
       });

diff --git a/src/map/OLOverrides.css b/src/map/OLOverrides.css
@@ -1,8 +1,8 @@
-.ol-zoom{
-    display: none;
+.ol-zoom {
+  display: none;
 }
 
-.ol-scale-line{
+.ol-scale-line {
   right: 5px;
   left: auto !important;
   bottom: 5px;
@@ -27,7 +27,8 @@
   border-radius: 3px !important;
 }
 
-.ol-popup:after, .ol-popup:before {
+.ol-popup:after,
+.ol-popup:before {
   top: 100%;
   border: solid transparent;
   content: " ";
@@ -57,13 +58,11 @@
   max-width: 258px !important;
   z-index: 1;
   padding: 6px !important;
-  background-color: #FFFFFF !important;
-  overflow: hidden;
-  max-height: 320px !important;
+  background-color: #fff !important;
+  max-height: 240px !important;
   min-height: 50px !important;
-  /* min-width: 170px;
-  max-height: 200px;
-  overflow-x: auto; */
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
 .ol-popup-closer {
@@ -97,7 +96,7 @@
   margin-bottom: 30px;
 }
 
-.ol-full-screen{
+.ol-full-screen {
   bottom: 5px;
   left: 4px;
   position: absolute;
@@ -113,24 +112,23 @@
   z-index: 100 !important;
 }
 
-.ol-attribution{
+.ol-attribution {
   display: none;
 }
 @media only screen and (max-width: 770px) {
   .ol-full-screen {
     display: none !important;
   }
-  .ol-scale-line{
+  .ol-scale-line {
     left: 5px;
   }
-
 }
 
 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .ol-full-screen {
     display: none !important;
   }
-  .ol-scale-line{
+  .ol-scale-line {
     left: 5px;
-  }  
+  }
 }
diff --git a/src/sidebar/components/reports/Reports.css b/src/sidebar/components/reports/Reports.css
@@ -1,14 +1,15 @@
-.sc-reports-tab-init{
+.sc-reports-tab-init {
   text-align: center;
   padding: 10px;
 }
 
-.sc-reports-tab-content{
+.sc-reports-tab-content {
   position: absolute;
   margin-bottom: 0px;
-  overflow: auto;
   padding: 0px !important;
   bottom: 0px;
   top: 67px;
   width: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
diff --git a/src/sidebar/components/toc/Layers.jsx b/src/sidebar/components/toc/Layers.jsx
@@ -43,12 +43,9 @@ class Layers extends Component {
     layersCopy.forEach(layer => {
       if (helpers.replaceAllInString(layer.name, "_", " ") === layerItem.name) {
         layer.visible = true;
-        layer.layer.setVisible(true);
-
-        //document.getElementById(layer.elementId).scrollIntoView();
         document.getElementById(this.virtualId).scrollTop = 0;
+
         var i = 0;
-        // var isScrolling = false;
         var elemFound = false;
         for (var i = 1; i <= 100; i++) {
           if (elemFound) return;
@@ -58,14 +55,16 @@ class Layers extends Component {
               if (elemFound) return;
 
               const elem = document.getElementById(layer.elementId);
+              console.log(elem);
               if (elem !== null) {
                 elemFound = true;
                 const topPos = elem.offsetTop;
-                document.getElementById(this.virtualId).scrollTop = topPos;
+                document.getElementById(this.virtualId).scrollTop = topPos + 1;
+                setTimeout(() => {
+                  document.getElementById(this.virtualId).scrollTop = topPos;
+                }, 50);
               } else {
-                // isScrolling = true;
                 document.getElementById(this.virtualId).scrollTop += i * 10;
-                // isScrolling = false;
               }
             }, i * 100);
           })(i);
@@ -517,6 +516,7 @@ class Layers extends Component {
                 searchText={this.props.searchText}
                 onLayerOptionsClick={this.onLayerOptionsClick}
                 sortAlpha={this.props.sortAlpha}
+                //scrollToIndex={50}
               />
             );
           }}

diff --git a/src/sidebar/components/toc/TOC.jsx b/src/sidebar/components/toc/TOC.jsx
@@ -33,16 +33,16 @@ class TOC extends Component {
     window.emitter.addListener("layersLoaded", numLayers => this.onLayersLoad(numLayers));
 
     // LISTEN FOR SEARCH RESULT
-    window.emitter.addListener("activeTocLayer", layerItem => this.onActivateLayer(layerItem));
+    window.emitter.addListener("activeTocLayerGroup", (groupName, callback) => this.onActivateLayer(groupName, callback));
   }
 
-  onActivateLayer = layerItem => {
+  onActivateLayer = (groupName, callback) => {
     window.emitter.emit("setSidebarVisiblity", "OPEN");
     window.emitter.emit("activateTab", "layers");
 
     this.state.layerGroups.forEach(layerGroup => {
-      if (layerGroup.label === layerItem.layerGroup) {
-        this.setState({ selectedGroup: layerGroup });
+      if (layerGroup.label === groupName) {
+        this.setState({ selectedGroup: layerGroup }, () => callback());
         return;
       }
     });

diff --git a/src/sidebar/components/toc/VirtualLayers.jsx b/src/sidebar/components/toc/VirtualLayers.jsx
@@ -68,6 +68,7 @@ class VirtualLayers extends Component {
         width={mobileAdjustment !== -1 ? 360 - mobileAdjustment : 360}
         height={height}
         style={{ outline: "none" }}
+        //scrollToIndex={50}
       />
     );
   }

diff --git a/src/sidebar/components/tools/weather/WeatherForecast.css b/src/sidebar/components/tools/weather/WeatherForecast.css
@@ -23,6 +23,9 @@
   display: inline-table;
 }
 
+.sc-tool-weather-forecast-days-container.two-warnings {
+  margin-top: 30px;
+}
 .sc-tool-weather-forecast-day-details {
   display: inline-grid;
   text-align: center;

diff --git a/src/sidebar/components/tools/weather/WeatherForecast.jsx b/src/sidebar/components/tools/weather/WeatherForecast.jsx
@@ -82,7 +82,7 @@ const Forecast = props => {
               <Warning key={helpers.getUID()} info={event} url={warningUrl}></Warning>
             ))}
           </div>
-          <div className="sc-tool-weather-forecast-days-container">
+          <div className={warningEvents.length === 2 ? "sc-tool-weather-forecast-days-container two-warnings" : "sc-tool-weather-forecast-days-container"}>
             <div className="sc-tool-weather-forecast-day-container" title={forecast1.textSummary[0]}>
               <div className="sc-tool-weather-forecast-day-details">
                 <label>{forecast1.period[0].$.textForecastName}</label>

diff --git a/src/sidebar/components/tools/weather/WeatherRadar.jsx b/src/sidebar/components/tools/weather/WeatherRadar.jsx
@@ -96,10 +96,20 @@ class WeatherRadar extends Component {
     const lastImage = this.radarImages[this.radarImages.length - 1];
     const endDate = lastImage.get("radarDate");
     this.setState({ startDate: startDate, endDate: endDate, radarDateSliderValue: endDate }, () => {
-      window.map.once("postrender", event => {
-        this.updateRadarVisibility();
-        this.setState({ isLoading: false });
-      });
+      window.map.once(
+        "postrender",
+        event => {
+          this.updateRadarVisibility();
+          this.setState({ isLoading: false });
+        },
+        () => {
+          //const steps = Math.round((this.state.endDate - this.state.startDate) / (1000 * 60) / 10);
+          //var stepValue = this.state.startDate;
+          this.setState({ radarDateSliderValue: this.state.endDate }, () => {
+            this.updateRadarVisibility();
+          });
+        }
+      );
     });
   };
 
@@ -129,6 +139,7 @@ class WeatherRadar extends Component {
 
   // SLIDER CHANGE EVENT
   onRadarDateSliderChange = value => {
+    console.log(value);
     this.setState(prevState => ({ radarDateSliderValue: value }));
     this.updateRadarVisibility();
   };