@eeacms/volto-arcgis-block 0.1.25 → 0.1.26

package/CHANGELOG.md

@@ -4,8 +4,24 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [0.1.26](https://github.com/eea/volto-arcgis-block/compare/0.1.25...0.1.26)
+
+- Bug fixing [`#88`](https://github.com/eea/volto-arcgis-block/pull/88)
+- Bugs n improvements [`#87`](https://github.com/eea/volto-arcgis-block/pull/87)
+- Develop [`#86`](https://github.com/eea/volto-arcgis-block/pull/86)
+- Time slider drag/drop [`#85`](https://github.com/eea/volto-arcgis-block/pull/85)
+- Use cases [`#84`](https://github.com/eea/volto-arcgis-block/pull/84)
+- Develop [`#81`](https://github.com/eea/volto-arcgis-block/pull/81)
+- Downloadable dataset [`c48eea9`](https://github.com/eea/volto-arcgis-block/commit/c48eea93b0f71134f9aa8fee1f5d6b4cf7e1368b)
+- add flattenToAppURL to send the correct url to the MapViewerConfig action [`ca5f684`](https://github.com/eea/volto-arcgis-block/commit/ca5f684ae683e0df249d3fab3534f579583f03a8)
+- ESLint fix [`7f43112`](https://github.com/eea/volto-arcgis-block/commit/7f4311224483fb599e7cecfe65096166ed5f2026)
+- Use case highlight [`2279a5a`](https://github.com/eea/volto-arcgis-block/commit/2279a5ad669172545588e9030e3cf49ca4e30dfa)
+
 #### [0.1.25](https://github.com/eea/volto-arcgis-block/compare/0.1.24...0.1.25)
 
+> 5 January 2022
+
+- Develop [`#83`](https://github.com/eea/volto-arcgis-block/pull/83)
 - Bugs n improvements [`#82`](https://github.com/eea/volto-arcgis-block/pull/82)
 - ESLint fix [`c129348`](https://github.com/eea/volto-arcgis-block/commit/c129348ee3886e0419029dd2bfe835c28878444c)
 - Filter by product and dataset [`c89711a`](https://github.com/eea/volto-arcgis-block/commit/c89711acf4f46c8426c7e34add2baf4debe67697)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-arcgis-block",
-  "version": "0.1.25",
+  "version": "0.1.26",
   "description": "volto-arcgis-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: CodeSyntax",

package/src/components/MapViewer/BasemapWidget.jsx

@@ -15,7 +15,7 @@ class BasemapWidget extends React.Component {
     //not be showing the basemap panel
     this.state = { showMapMenu: false };
     this.menuClass =
-      'esri-icon-basemap esri-widget--button esri-widget esri-interactive esri-icon-basemap';
+      'esri-icon-basemap esri-widget--button esri-widget esri-interactive';
     this.loadFirst = true;
   }
 

package/src/components/MapViewer/InfoWidget.jsx

@@ -19,7 +19,6 @@ class InfoWidget extends React.Component {
     this.map = this.props.map;
     this.menuClass =
       'esri-icon-description esri-widget--button esri-widget esri-interactive';
-    //this.chartOptions;
   }
 
   loader() {

package/src/components/MapViewer/MapViewer.jsx

@@ -8,10 +8,12 @@ import PrintWidget from './PrintWidget';
 import AreaWidget from './AreaWidget';
 import ScaleWidget from './ScaleWidget';
 import LegendWidget from './LegendWidget';
+import InfoWidget from './InfoWidget';
 import MenuWidget from './MenuWidget';
 import { MapViewerConfig } from '../../actions';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 
 //import "isomorphic-fetch";  <-- Necessary to use fetch?
 var Map, MapView, Zoom;
@@ -87,7 +89,7 @@ class MapViewer extends React.Component {
     // After launching the MapViewerConfig action
     // we will have stored the json response here:
     // this.props.mapviewer_config
-    this.props.MapViewerConfig(this.props.url);
+    this.props.MapViewerConfig(flattenToAppURL(this.props.url));
 
     //Once we have created the MapView, we need to ensure that the map div
     //is refreshed in order to show the map on it. To do so, we need to
@@ -156,6 +158,11 @@ class MapViewer extends React.Component {
     if (this.view) return <ScaleWidget view={this.view} mapViewer={this} />;
   }
 
+  renderInfo() {
+    if (this.view)
+      return <InfoWidget view={this.view} map={this.map} mapViewer={this} />;
+  }
+
   renderMenu() {
     if (this.view)
       return (
@@ -188,6 +195,7 @@ class MapViewer extends React.Component {
           {this.renderPrint()}
           {this.renderArea()}
           {this.renderScale()}
+          {this.renderInfo()}
           {this.renderMenu()}
         </div>
       </div>

package/src/components/MapViewer/MenuWidget.jsx

@@ -8,7 +8,6 @@ import { useIntl } from 'react-intl';
 import { Message, Modal } from 'semantic-ui-react';
 import AreaWidget from './AreaWidget';
 import TimesliderWidget from './TimesliderWidget';
-import InfoWidget from './InfoWidget';
 var WMSLayer, WMTSLayer, FeatureLayer;
 
 export const AddCartItem = ({
@@ -572,7 +571,7 @@ class MenuWidget extends React.Component {
           >
             <span>{dataset.DatasetTitle}</span>
           </label>
-          {!this.props.download && (
+          {!this.props.download && dataset.Downloadable && (
             <AddCartItem
               cartData={this.compCfg}
               props={this.props}
@@ -738,21 +737,7 @@ class MenuWidget extends React.Component {
         this.map.layers.items.filter((a) => a.isTimeSeries && a.visible)
           .length > 0
       ) {
-        if (!document.querySelector('.info-container')) {
-          let div = document.createElement('div');
-          document.querySelector('.esri-ui-top-right').appendChild(div);
-          ReactDOM.render(
-            <InfoWidget
-              view={this.props.view}
-              map={this.map}
-              mapViewer={this.props.mapViewer}
-            />,
-            div,
-          );
-          div.remove();
-        } else {
-          document.querySelector('.info-container').style.display = '';
-        }
+        document.querySelector('.info-container').style.display = 'flex';
       }
     } else {
       this.map.remove(this.layers[elem.id]);

package/src/components/MapViewer/TimesliderWidget.jsx

@@ -13,9 +13,13 @@ class TimesliderWidget extends React.Component {
     this.container = createRef();
     //Initially, we set the state of the component to
     //not be showing the basemap panel
-    this.state = { showMapMenu: false };
+    this.state = {
+      showMapMenu: false,
+      styles: { bottom: '0', right: '0' },
+    };
     this.map = this.props.map;
     this.layer = this.props.layer;
+    this.drag = {};
   }
 
   loader() {
@@ -71,6 +75,42 @@ class TimesliderWidget extends React.Component {
     });
   }
 
+  /**
+   * Needed to get the desired drag-and-drop behavior
+   * @param {*} e
+   */
+  onDragStart(e) {
+    this.drag.frame = document.getElementById('slide_frame');
+    this.drag.frame.style.visibility = 'visible';
+    document.querySelector(
+      '.esri-ui-bottom-right.esri-ui-corner',
+    ).style.pointerEvents = 'auto';
+    this.drag.x = e.screenX - e.currentTarget.getBoundingClientRect().left;
+    this.drag.y = e.screenY - e.currentTarget.getBoundingClientRect().top;
+  }
+
+  onDragOver(e) {
+    e.preventDefault();
+  }
+
+  onDrop(e) {
+    let left =
+      e.screenX -
+      this.drag.x -
+      e.currentTarget.getBoundingClientRect().left +
+      'px';
+    let top =
+      e.screenY -
+      this.drag.y -
+      e.currentTarget.getBoundingClientRect().top +
+      'px';
+    this.setState({ styles: { left: left, top: top } });
+    this.drag.frame.style.visibility = 'hidden';
+    document.querySelector(
+      '.esri-ui-bottom-right.esri-ui-corner',
+    ).style.pointerEvents = '';
+  }
+
   /**
    * This method renders the component
    * @returns jsx
@@ -78,7 +118,18 @@ class TimesliderWidget extends React.Component {
   render() {
     return (
       <>
-        <div ref={this.container} className="timeslider-container">
+        <div
+          id="slide_frame"
+          onDrop={(e) => this.onDrop(e)}
+          onDragOver={(e) => this.onDragOver(e)}
+        ></div>
+        <div
+          ref={this.container}
+          className="timeslider-container"
+          draggable="true"
+          onDragStart={(e) => this.onDragStart(e)}
+          style={this.state.styles}
+        >
           <div className="timeslider-panel"></div>
         </div>
       </>

package/src/components/MapViewer/css/ArcgisMap.css

@@ -597,7 +597,7 @@
 
 /* Pixel info */
 .info-container {
-  display: flex;
+  display: none;
   box-shadow: none !important;
 }
 
@@ -615,6 +615,30 @@
   margin-bottom: 1rem;
 }
 
+/* Time slider*/
+.esri-ui-bottom-right.esri-ui-corner {
+  width: 100%;
+  height: 100%;
+}
+
+.timeslider-container {
+  position: absolute;
+  z-index: 1;
+  margin-left: 0 !important;
+}
+
+.timeslider-container .timeslider-panel {
+  cursor: move;
+}
+
+#slide_frame {
+  position: absolute;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  visibility: hidden;
+}
+
 /* Modal */
 .map-download-modal.ui.modal {
   margin: 0 !important;

package/src/components/UseCasesMapViewer/InfoWidget.jsx

@@ -5,6 +5,7 @@ let layerControl,
   view,
   mapViewer,
   layerSpatial,
+  layerHighlight,
   processedData = [];
 class InfoWidget extends React.Component {
   constructor(props) {
@@ -14,6 +15,7 @@ class InfoWidget extends React.Component {
     navigationControl = props.navigationControl;
     layerControl = props.layerControl;
     layerSpatial = props.layerSpatial;
+    layerHighlight = props.layerHighlight;
     this.container = createRef();
   }
 
@@ -97,20 +99,22 @@ class InfoWidget extends React.Component {
             key={val.Use_case_title}
             className="use-case-element"
             aria-hidden="true"
-            onClick={() =>
+            onClick={() => {
+              layerControl.getGeometry(val.Spatial_coverage, layerHighlight);
+              layerControl.showLayer(layerHighlight.id);
               mapViewer.setState((prevState) => ({
                 useCaseLevel: 4,
                 selectedUseCase: val,
                 previousState: prevState.useCaseLevel,
-              }))
-            }
+              }));
+            }}
             id={`use_case_${val.OBJECTID}`}
           >
             <div className="use-case-element-title">{val.Use_case_title}</div>
             <div className="use-case-element-description">
               <span>{val.Use_case_topics}</span>
               <span>{val.Use_case_submitting_production_year}</span>
-              <span>{val.Spatial_coverage}</span>
+              <span className="use-case-coverage">{val.Spatial_coverage}</span>
               <span>{responsibleOrganizationOrPerson}</span>
             </div>
           </div>

package/src/components/UseCasesMapViewer/LayerControl.jsx

@@ -191,19 +191,25 @@ class LayerControl {
       ) {
         mapViewer.popupOnce = false;
         document.querySelector('.map').style.cursor = 'pointer';
+        let country_code =
+          response.results[0].graphic.attributes.Spatial_coverage;
         document
-          .querySelector(
-            '#use_case_' + response.results[0].graphic.attributes.OBJECTID,
-          )
-          .classList.add('selected');
+          .querySelectorAll('.use-case-element-description .use-case-coverage')
+          .forEach((element) => {
+            if (element.innerText === country_code) {
+              element.closest('.use-case-element').classList.add('selected');
+            }
+          });
       }
     } else {
       mapViewer.popupOnce = true;
       document.querySelector('.map').style.cursor = '';
       if (document.querySelector('.use-case-element.selected'))
         document
-          .querySelector('.use-case-element.selected')
-          .classList.remove('selected');
+          .querySelectorAll('.use-case-element.selected')
+          .forEach((element) => {
+            element.closest('.use-case-element').classList.remove('selected');
+          });
     }
   }