@eeacms/volto-cca-policy 0.1.18 → 0.1.19

package/CHANGELOG.md

@@ -4,7 +4,54 @@ 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.18](https://github.com/eea/volto-cca-policy/compare/0.1.17...0.1.18) - 16 May 2023
+### [0.1.19](https://github.com/eea/volto-cca-policy/compare/0.1.18...0.1.19) - 7 June 2023
+
+#### :house: Internal changes
+
+
+#### :hammer_and_wrench: Others
+
+- Comment junk [Tiberiu Ichim - [`2951a7e`](https://github.com/eea/volto-cca-policy/commit/2951a7e1063595d512c64308c6df67fa270d8b17)]
+- cca show counter for all [Tripon Eugen - [`7fb70d0`](https://github.com/eea/volto-cca-policy/commit/7fb70d0060e14019f5c4f655447d908c3d54188a)]
+- Add missing useEffect dependency [Tiberiu Ichim - [`954df35`](https://github.com/eea/volto-cca-policy/commit/954df35ce84a89422d21ada979442b5063eda391)]
+- Remove console.log [Tiberiu Ichim - [`79de9fd`](https://github.com/eea/volto-cca-policy/commit/79de9fd35241ab83012b81e9073d901686c61292)]
+- Dynamic import [Tiberiu Ichim - [`200ab64`](https://github.com/eea/volto-cca-policy/commit/200ab648cdeaf59b13ac3580da1f9e24900506f1)]
+- Fix import [Tiberiu Ichim - [`973ece8`](https://github.com/eea/volto-cca-policy/commit/973ece8bbd1a56dbba29b2efecd5b17280143eea)]
+- Rename json to js [Tiberiu Ichim - [`3c23c18`](https://github.com/eea/volto-cca-policy/commit/3c23c1831952831bf3ba1b490d81f9fe4f36c515)]
+- dos2unix [Tiberiu Ichim - [`19e39f7`](https://github.com/eea/volto-cca-policy/commit/19e39f71d3a0b09318966db5626be8560dcc6300)]
+- Format json file [Tiberiu Ichim - [`f7620d8`](https://github.com/eea/volto-cca-policy/commit/f7620d8a8aa8959e231a1e320822efc48fc2eba6)]
+- cca mission search path [Tripon Eugen - [`20379e9`](https://github.com/eea/volto-cca-policy/commit/20379e97aec8bfc725b1dfa253e83113a51f6111)]
+- Eslint [Tiberiu Ichim - [`e2a931b`](https://github.com/eea/volto-cca-policy/commit/e2a931bd70d78eed3c725fadfb3e351b14eadfe8)]
+- Prettier [kreafox - [`db81941`](https://github.com/eea/volto-cca-policy/commit/db81941f2ece8d78a2a5f455c73d4192733337c7)]
+- RAST: Make active state work on substeps [kreafox - [`df54655`](https://github.com/eea/volto-cca-policy/commit/df54655df2be166d3859400727b0ce5d2b6b3246)]
+- Add hover and active state on RAST block [kreafox - [`5fb25ea`](https://github.com/eea/volto-cca-policy/commit/5fb25eac21311c9ca79c42e3c8f077a494f054f3)]
+- Add missing file [Tiberiu Ichim - [`b490f4a`](https://github.com/eea/volto-cca-policy/commit/b490f4a8c0153c81b305e422d706897b585edf5b)]
+- WIP on rast block [Tiberiu Ichim - [`8c4668b`](https://github.com/eea/volto-cca-policy/commit/8c4668bbad499ff4690861d4fbb73f86f929a8cd)]
+- Improve condition for setting external routes using an ENV var. [GhitaB - [`674693e`](https://github.com/eea/volto-cca-policy/commit/674693e266a9088176bda187cf50b3c2f9e170ba)]
+- WIP RAST block [kreafox - [`fd4f18a`](https://github.com/eea/volto-cca-policy/commit/fd4f18ab053c0ae0abcc17c49665631904033efc)]
+- cca mission search portal types permanentFilter [Tripon Eugen - [`4b97280`](https://github.com/eea/volto-cca-policy/commit/4b972809ec8d8fb6c6a21cff6c875a44502b342f)]
+- cca mission search config updates [Tripon Eugen - [`e9b7df5`](https://github.com/eea/volto-cca-policy/commit/e9b7df51af1550a445dd7f409b68bdbfcbef4cec)]
+- Remove context nav custom style [kreafox - [`f5be52f`](https://github.com/eea/volto-cca-policy/commit/f5be52f7215f6c21fafc635abb0373a855478fd1)]
+- Change heading in ace content blocks [kreafox - [`1afb621`](https://github.com/eea/volto-cca-policy/commit/1afb621e0324966e6d9a5b84a96bd2e7d36a6243)]
+- cca search show only mission items [Tripon Eugen - [`45906cb`](https://github.com/eea/volto-cca-policy/commit/45906cba7d5ebe108ccef98cd38fcef3277b02a0)]
+- Update context nav locations [kreafox - [`15c0bb3`](https://github.com/eea/volto-cca-policy/commit/15c0bb3a215f986437f1890b17f45b23b42ac669)]
+- Fix contextnavigation [Tiberiu Ichim - [`14ac468`](https://github.com/eea/volto-cca-policy/commit/14ac468ab5fe52ddee6012e8d74a03cf2743194c)]
+- Fix permanentFilters [Tiberiu Ichim - [`5f326c8`](https://github.com/eea/volto-cca-policy/commit/5f326c843f2c0345a968006cca0428c5a5682f2f)]
+- Bring back Header override for mission logo [kreafox - [`c86896b`](https://github.com/eea/volto-cca-policy/commit/c86896b2616728eb1967fcc75b537eb89310f786)]
+- cca search headers and add filter [Tripon Eugen - [`0cef408`](https://github.com/eea/volto-cca-policy/commit/0cef408038397255999d0a900e2b585c2d4b7fff)]
+- Update context navigation locations [kreafox - [`74debb2`](https://github.com/eea/volto-cca-policy/commit/74debb25737c365bc09dab55ff9a7c54c26a37e0)]
+- Add responsive container [Tiberiu Ichim - [`a76ca88`](https://github.com/eea/volto-cca-policy/commit/a76ca886e56117d086a28531c9f629a19c6cb9d1)]
+- Remove layout settings block override on restriction [kreafox - [`e0bf0f8`](https://github.com/eea/volto-cca-policy/commit/e0bf0f80d9475f53d416e79f3da053812a40b514)]
+- add breadcrumbs to apiExpanders, fixes breadcrumbs in the /contents view [Tiberiu Ichim - [`10a17f2`](https://github.com/eea/volto-cca-policy/commit/10a17f270b267985dd078a9470329d1d15254813)]
+- Fix clicking in overlay [Tiberiu Ichim - [`442d726`](https://github.com/eea/volto-cca-policy/commit/442d7264c738179b0411dda6f3ee9341b356d5e1)]
+- Enable layout settings block [kreafox - [`e7c3741`](https://github.com/eea/volto-cca-policy/commit/e7c37419bb74e3590d3676d83f774bc6923e417e)]
+- Refs #251121 - facets update [Tripon Eugen - [`80a44c7`](https://github.com/eea/volto-cca-policy/commit/80a44c7a37ce0dd04b82cfdde748aca72c642f38)]
+- testing volto search [Tripon Eugen - [`0fbe836`](https://github.com/eea/volto-cca-policy/commit/0fbe836345cf0ca8d8765f8df6b8e3914bdc6d3d)]
+- Add clientOnly wrapper [Tiberiu Ichim - [`b82818a`](https://github.com/eea/volto-cca-policy/commit/b82818ab02f1867931fbd9e206382878d8652fb6)]
+- test CountryMap [Tripon Eugen - [`718cd95`](https://github.com/eea/volto-cca-policy/commit/718cd95578bda3efcf6fcf3e7ebdc8a2aebc893e)]
+- Lazyload d3 [Tiberiu Ichim - [`1846032`](https://github.com/eea/volto-cca-policy/commit/1846032bef84b6c623d03f964d63bbc22ea4cd78)]
+- test d3 [Tripon Eugen - [`1bfc89c`](https://github.com/eea/volto-cca-policy/commit/1bfc89c54294cb1dc70d1c7a6e2ad69a49c2c88f)]
+### [0.1.18](https://github.com/eea/volto-cca-policy/compare/0.1.17...0.1.18) - 18 May 2023
 
 #### :hammer_and_wrench: Others
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -24,7 +24,8 @@
   "dependencies": {
     "@eeacms/volto-eea-design-system": "*",
     "@eeacms/volto-globalsearch": "*",
-    "@eeacms/volto-openlayers-map": "*"
+    "@eeacms/volto-openlayers-map": "*",
+    "d3": "3"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.10.0",

package/src/components/manage/Blocks/CaseStudyExplorer/InfoOverlay.jsx

@@ -45,6 +45,8 @@ export default function InfoOverlay({
         overlay.setPosition(coordinate);
         setShowTooltip(true);
       } else {
+        // handle a click in an overlay popup
+        if (evt.originalEvent.target.tagName === 'A') return;
         setShowTooltip(false);
         onFeatureSelect(null);
       }

package/src/components/manage/Blocks/CountryMap/CountryMapEdit.js

@@ -0,0 +1,5 @@
+import CountryMapView from './CountryMapView';
+
+export default function CountryMapEdit(props) {
+  return <CountryMapView {...props} mode="edit" />;
+}

package/src/components/manage/Blocks/CountryMap/CountryMapView.js

@@ -0,0 +1,444 @@
+import React, { useRef, useEffect } from 'react';
+//import * as d3 from 'd3';
+// import cpath from './euro-countries-simplified';
+import flags from './flags.js';
+import './styles.css';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+import { compose } from 'redux';
+import { clientOnly } from '@eeacms/volto-cca-policy/helpers';
+// import loadable from '@loadable/component';
+//
+//
+const withResponsiveContainer = (WrappedComponent) => {
+  return (props) => {
+    const [size, setSize] = React.useState();
+    return (
+      <div
+        className="sized-wrapper"
+        ref={(node) => {
+          // console.log(node, node.clientHeight);
+          if (node && !size)
+            setSize({ height: node.clientHeight, width: node.clientWidth });
+        }}
+      >
+        {size ? <WrappedComponent size={size} {...props} /> : null}
+      </div>
+    );
+  };
+};
+
+const CountryMapView = (props) => {
+  const svgRef = useRef(null);
+  const { d3, size } = props;
+  const { height, width } = size;
+  let [cpath, setCpath] = React.useState();
+
+  useEffect(() => {
+    if (!cpath) {
+      import('./euro-countries-simplified').then((mod) => {
+        setCpath(mod.default);
+      });
+    }
+  }, [cpath]);
+
+  useEffect(() => {
+    // D3 Code
+
+    // Dimensions
+    //const parentDiv = document.getElementById('page-document');
+    let dimensions = {
+      //width: parentDiv.offsetWidth,
+      width,
+      height,
+      margins: 50,
+    };
+
+    dimensions.containerWidth = dimensions.width - dimensions.margins * 2;
+    dimensions.containerHeight = dimensions.height - dimensions.margins * 2;
+
+    //const d3 = loadable.lib(() => import('d3'));
+    // SELECTIONS
+    const svg = d3
+      .select(svgRef.current)
+      .attr('id', 'country_map')
+      //.classed("line-chart", true)
+      .attr('width', dimensions.width)
+      .attr('height', dimensions.height);
+    //console.log('SVG x-y', svg.getBBox());
+    /*
+    const container = svg
+      .append('g')
+      .classed('container', true)
+      .attr(
+        'transform',
+        `translate(${dimensions.margins}, ${dimensions.margins})`,
+      );
+      */
+
+    cpath.features = cpath.features.map(function (c) {
+      //console.log(c);
+      var name = c.properties.SHRT_ENGL;
+      if (!name) {
+        // console.log('No flag for', c.properties);
+        return c;
+      } else if (name === 'Czechia') {
+        name = 'Czech Republic';
+      }
+      var cname = name.replace(' ', '_');
+      flags.forEach(function (f) {
+        if (f.indexOf(cname) > -1) {
+          c.url = f;
+          //console.log(c.url);
+        }
+      });
+      return c;
+    });
+
+    //console.log('cpath', cpath);
+    //console.log(fpath);
+    //console.log('Flags',flags);
+    //console.log('filtered', getFocusCountriesFeature(cpath));
+
+    window.countrySettings = cpath.features;
+
+    var opts = {
+      world: cpath.features,
+      svg: svg,
+      coordinates: {
+        x: 0,
+        y: 0,
+        width: dimensions.containerWidth,
+        height: dimensions.containerHeight,
+      },
+      focusCountries: {
+        names: getFocusCountryNames(),
+        feature: getFocusCountriesFeature(cpath),
+      },
+      zoom: 0.95,
+    };
+    renderCountriesBox(opts, d3);
+    // Draw Circle
+    //container.append("circle").attr("r", 25).style("color","blue");
+  }, [props.Data, d3, width, height, cpath]); // redraw chart if data changes
+
+  return <svg ref={svgRef} />;
+};
+
+function getFocusCountryNames() {
+  return [
+    'Austria',
+    'Belgium',
+    'Cyprus',
+    'Czechia',
+    'Denmark',
+    'Estonia',
+    'Finland',
+    'France',
+    'Germany',
+    'Greece',
+    'Hungary',
+    'Iceland',
+    'Ireland',
+    'Italy',
+    'Lithuania',
+    'Luxembourg',
+    'Malta',
+    'Netherlands',
+    'Poland',
+    'Portugal',
+    'Romania',
+    'Slovakia',
+    'Slovenia',
+    'Spain',
+    'Sweden',
+    'United Kingdom',
+    'Liechtenstein',
+    'Norway',
+    'Switzerland',
+    'Turkey',
+  ];
+}
+function getFocusCountriesFeature(world) {
+  const focusCountryNames = getFocusCountryNames();
+  let features = {
+    type: 'FeatureCollection',
+    features: [],
+  };
+  world.features.forEach(function (c) {
+    if (focusCountryNames.indexOf(c.properties.SHRT_ENGL) === -1) {
+      return;
+    }
+    features.features.push(c);
+  });
+  return features;
+}
+
+function renderCountriesBox(opts, d3) {
+  var coords = opts.coordinates;
+  var countries = opts.focusCountries;
+
+  var svg = opts.svg;
+  var world = opts.world;
+  var zoom = opts.zoom;
+  var cprectid = makeid(); // unique id for this map drawing
+
+  var globalMapProjection = d3.geoAzimuthalEqualArea();
+
+  globalMapProjection.scale(1).translate([0, 0]);
+
+  // the path transformer
+  var path = d3.geoPath().projection(globalMapProjection);
+
+  var x = coords.x;
+  var y = coords.y;
+  var width = coords.width;
+  var height = coords.height;
+  // var extent = [[x + 20, y + 20], [x + coords.width - 20 , y + coords.height - 20]];
+  // console.log('fitting extent', extent);
+  // globalMapProjection.fitExtent(extent, countries.feature);
+
+  var b = path.bounds(countries.feature);
+  var cwRatio = (b[1][0] - b[0][0]) / width; // bounds to width ratio
+  var chRatio = (b[1][1] - b[0][1]) / height; // bounds to height ratio
+  var s = zoom / Math.max(cwRatio, chRatio);
+  var t = [
+    (width - s * (b[1][0] + b[0][0])) / 2 + x,
+    (height - s * (b[0][1] + b[1][1])) / 2 + y,
+  ];
+
+  globalMapProjection.scale(s).translate(t);
+
+  svg
+    .append('defs') // rectangular clipping path for the whole drawn map
+    .append('clipPath')
+    .attr('id', cprectid)
+    .append('rect')
+    .attr('x', x)
+    .attr('y', y)
+    .attr('height', height)
+    .attr('width', width);
+
+  var map = svg // the map will be drawn in this group
+    .append('g');
+  // .attr('clip-path', 'url(#' + cprectid + ')')
+  //.attr("clip-path", opts.isMaplet ? "url(#" + cprectid + ")" : null
+  map // the world sphere, acts as ocean
+    .append('path')
+    .datum({
+      type: 'Sphere',
+    })
+    .attr('class', 'sphere')
+    .attr('d', path);
+
+  renderGraticule(map, 'graticule', [20, 10], path, d3);
+  renderGraticule(map, 'semi-graticule', [5, 5], path, d3);
+
+  //setCountryFlags(countries.feature.features, window._flags);
+
+  world.forEach(function (country) {
+    renderCountry(map, country, path, countries, x, y, d3);
+  });
+
+  return path;
+}
+
+function renderGraticule(container, klass, steps, pathTransformer, d3) {
+  container // draw primary graticule lines
+    .append('g')
+    .attr('class', klass)
+    .selectAll('path')
+    .data(d3.geoGraticule().step(steps).lines())
+    .enter()
+    .append('path')
+    .attr('d', pathTransformer);
+}
+
+function makeid() {
+  var text = '';
+  var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+
+  for (var i = 0; i < 5; i++)
+    text += possible.charAt(Math.floor(Math.random() * possible.length));
+
+  return text;
+}
+
+function renderCountry(map, country, path, countries, x, y, d3) {
+  var cprectid = makeid(); // unique id for this map drawing
+  var klass = getCountryClass(country, countries);
+  var cId = 'c-' + cprectid + '-' + country.properties.id;
+  var cpId = 'cp-' + cprectid + '-' + country.properties.id;
+
+  var available = countries.names.indexOf(country.properties.SHRT_ENGL) !== -1;
+
+  var parent = map.append('g').attr('class', klass);
+  parent // define clipping path for this country
+    .append('defs')
+    .append('clipPath')
+    .attr('id', cpId)
+    .append('path')
+    .attr('d', path(country))
+    .attr('x', x)
+    .attr('y', y);
+
+  var outline = parent // this is the country fill and outline
+    .append('path')
+    .attr('id', cId)
+    .attr('x', x)
+    .attr('y', y)
+    .attr('d', path(country));
+  if (available) {
+    var bbox = outline.node().getBBox();
+    renderCountryFlag(parent, country, bbox, cpId, d3);
+    //renderCountryLabel(country, path);
+  }
+}
+
+function getCountryClass(country, countries) {
+  //console.log('getCountryClass',country, countries);
+  var k = 'country-outline';
+  //var k = "country-blue";
+  //var available =
+  //window.countrySettings.indexOf(country.properties.SHRT_ENGL) !== -1;
+  //if (available) k += " country-available";
+
+  //var meta = window.countrySettings[country.properties.SHRT_ENGL];
+  //var _selectedMapSection = null;
+
+  if (getFocusCountryNames().includes(country.properties.SHRT_ENGL)) {
+    k += ' country-available';
+  }
+  //if (available && meta && meta[0] && meta[0][_selectedMapSection]) {
+  //  k += " country-blue";
+  //}
+  return k;
+}
+
+export function renderCountryLabel(country, path, force, d3) {
+  var parent = d3.select('.svg-map-container svg');
+  var klass = force ? 'country-label maplet-label' : 'country-label';
+  var g = parent.append('g').attr('class', klass);
+  if (
+    // these are very small countries that we will create a maplet for;
+    (country.properties.SHRT_ENGL === 'Liechtenstein' ||
+      country.properties.SHRT_ENGL === 'Luxembourg' ||
+      country.properties.SHRT_ENGL === 'Malta') &&
+    !force
+  ) {
+    return;
+  }
+
+  var delta = force ? 20 : 0;
+
+  var pId = 'pl-' + country.id;
+  var center = path.centroid(country);
+  // console.log(center, path);
+
+  var label = g
+    .append('text')
+    // .attr('class', 'place-label')
+    .attr('id', pId)
+    .attr('x', center[0])
+    .attr('y', center[1] + delta)
+    .attr('text-anchor', 'middle')
+    .text(country.properties.SHRT_ENGL.toUpperCase());
+  var bbox = label.node().getBBox();
+
+  g.append('rect')
+    // .attr('class', 'place-label-bg')
+    .attr('x', bbox.x - 1)
+    .attr('y', bbox.y - 1)
+    .attr('width', bbox.width + 2)
+    .attr('height', bbox.height + 2);
+
+  label.raise();
+  //passThruEvents(g);
+}
+
+// tooltip with country names on hover
+/*
+var countryNameTooltip = d3
+  .select('body')
+  .append('div')
+  .attr('class', 'tooltip');
+  */
+
+function renderCountryFlag(parent, country, bbox, cpId, d3) {
+  var flag = parent
+    .append('image')
+    .attr('class', 'country-flag')
+    .attr('href', function () {
+      if (getIEVersion() > 0) {
+        return '++theme++climateadaptv2/static/images/fallback.svg';
+      } else {
+        return country.url;
+      }
+    })
+    .attr('preserveAspectRatio', 'none')
+    .attr('opacity', '0')
+    .attr('clip-path', 'url(#' + cpId + ')')
+    .attr('x', bbox.x)
+    .attr('y', bbox.y)
+
+    .attr('height', bbox.height)
+    .attr('width', bbox.width)
+    .on('click', function () {
+      // var link = country.properties.SHRT_ENGL.toLowerCase().replace(' ', '-');
+      // if (getFocusCountryNames().indexOf(country.properties.SHRT_ENGL) > -1)
+      //   // console.log('will redirect to country:', link);
+      // //location.href = location.href.endsWith('/') ? location.href + link : location.href + '/' + link;
+      // console.log(
+      //   window.location.href.endsWith('/')
+      //     ? window.location.href + link
+      //     : window.location.href + '/' + link,
+      // );
+    })
+    .on('mouseover', function () {
+      // var countryName = country.properties.SHRT_ENGL.toUpperCase();
+      d3.select(this).attr('opacity', 1);
+      //return countryNameTooltip.style('display', 'block').html(countryName);
+    })
+    .on('mousemove', function (event) {
+      // var countryName = country.properties.SHRT_ENGL.toUpperCase();
+      //console.log(event, d3.select(this));
+      //console.log(event.screenX, event.screenY, event, d3.select(this),this.getAttribute("cx"));
+      //console.log(d3.mouse(this));
+      // var bbox = this.getBBox();
+      /*
+      const cmt = countryNameTooltip
+        .style('display', 'block')
+        //.style("top", event.layerY+ "px")
+        //.style("left", event.layerX+ 10 + "px")
+        .style('top', event.layerY + bbox.height + 'px')
+        .style('left', event.layerX + 50 + 'px')
+        //.style("top", d3.currentEvent.pageY + "px")
+        //.style("left", d3.currentEvent.pageX + 10 + "px")
+        .html(countryName);
+      return cmt;
+      */
+    })
+    .on('mouseout', function () {
+      d3.select(this).attr('opacity', 0);
+      //return countryNameTooltip.style('display', 'none');
+    });
+  return flag;
+}
+
+function getIEVersion() {
+  var sAgent = window.navigator.userAgent;
+  var Idx = sAgent.indexOf('MSIE');
+
+  // If IE, return version number.
+  if (Idx > 0)
+    return parseInt(sAgent.substring(Idx + 5, sAgent.indexOf('.', Idx)));
+  // If IE 11 then look for Updated user agent string.
+  else if (navigator.userAgent.match(/Trident\/7\./)) return 11;
+  else return 0; //It is not IE
+}
+
+//export default CountryMapView;
+export default compose(
+  clientOnly,
+  injectLazyLibs(['d3']),
+  withResponsiveContainer,
+)(CountryMapView);