@eeacms/volto-bise-policy 1.2.32 → 1.2.34

package/src/components/manage/Blocks/CaseStudyExplorer/styles.less

@@ -0,0 +1,359 @@
+.nrr-case-study-map-container .listing .u-item:first-child .slot-top {
+  padding-top: 2em;
+}
+
+#csepopup > span {
+  display: 'block';
+  margin-bottom: '10px';
+  background-color: '#ddd';
+}
+
+#csepopup {
+  // width: 300px;
+  width: 100%;
+  // height: 100%;
+  padding: 1em;
+  // border: 1px solid black;
+  // font-size: 14px;
+  // line-height: initial;
+  font-size: 1rem;
+
+  a:hover {
+    color: #289588;
+  }
+
+  h3 {
+    font-size: 1.4rem;
+  }
+
+  h4 {
+    margin: 0px;
+  }
+
+  div {
+    margin-bottom: 16px;
+  }
+
+  ul {
+    margin: 0px;
+
+    li {
+      line-height: 22px;
+    }
+  }
+
+  p {
+    font-size: 13px;
+
+    p {
+      margin-bottom: 10px;
+    }
+  }
+
+  span.blue {
+    color: #069;
+  }
+
+  span.img {
+    display: block;
+    margin-bottom: 10px;
+    background-color: #ddd;
+
+    img {
+      max-height: 133px;
+    }
+  }
+}
+
+#external-popup-overlay {
+  width: 370px;
+  height: 100%;
+
+  .ol-overlay-container {
+    position: relative !important;
+    // display: block !important;
+    width: 100%;
+    height: 100%;
+    background-color: #dae8f4;
+
+    #popup-overlay {
+      position: relative !important;
+      display: flex;
+      width: 100%;
+      height: 100%;
+      align-items: center;
+    }
+  }
+}
+
+#cse-filter {
+  display: flex;
+  flex-direction: row;
+  margin-top: 1em;
+  font-family: sans-serif;
+  // gap: 3em;
+
+  .filter-wrapper {
+    // flex-grow: 1;
+
+    &.active {
+      button span {
+        //   box-shadow: 0 5px 0 #ffffff, 0 0 4px rgba(0, 0, 0, 0.25);
+        color: #289588;
+      }
+
+      button {
+        box-shadow:
+          0 5px 0 #ffffff,
+          0 0 4px rgba(0, 0, 0, 0.25) !important;
+      }
+
+      .filter-inputs-wrapper {
+        display: block;
+      }
+    }
+
+    .ri-arrow-down-s-line:before {
+      content: '\ea4e';
+    }
+
+    .ui.basic.button.facet-btn {
+      position: relative !important;
+      z-index: 99999;
+      display: inline-block;
+      overflow: hidden;
+      padding: 0.5em 0em;
+      margin: 0 0.25em 0.25em 0;
+      background-color: white !important;
+      color: #3d5265 !important;
+
+      &:active {
+        background: white !important;
+      }
+
+      // &:hover,
+      // &:focus {
+      //   color: rgba(0, 0, 0, 0.6) !important;
+      // }
+      &:hover {
+        box-shadow: none;
+      }
+
+      span {
+        position: relative !important;
+        z-index: 99999;
+        display: inline-block;
+        overflow: hidden;
+        padding: 0.5em 1em;
+        background-color: white;
+      }
+    }
+
+    .filter-inputs-wrapper {
+      position: absolute;
+      z-index: 1;
+      display: none;
+      padding: 1em;
+      margin-top: -3px;
+      background-color: #fff;
+      box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
+      color: #4f4f4f;
+
+      .filterInputText {
+        padding: 6px;
+        border: 0.5px solid #c4c4c4;
+        border-radius: 0;
+        margin-bottom: 0.7em;
+        font-size: 14px;
+      }
+
+      .filter-inputs {
+        overflow: auto;
+        min-width: 200px;
+        max-width: 400px;
+        max-height: 200px;
+
+        &::-webkit-scrollbar {
+          width: 8px;
+          height: 0.3rem !important;
+        }
+
+        &::-webkit-scrollbar-track {
+          border-radius: 10px;
+          background-color: #d9d9d9;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          border-radius: 10px;
+          background: #004b7f;
+        }
+
+        .filter-input {
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          cursor: pointer;
+          font-size: 14px;
+
+          span {
+            padding-right: 5px;
+          }
+
+          input {
+            margin-right: 8px;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+
+  h4 {
+    position: relative;
+    padding: 10px;
+    border-bottom: 1px solid #d8d8d8;
+    margin-bottom: 0 !important;
+    background-color: #005c96;
+    color: #fff;
+    cursor: pointer;
+    font-size: 14px;
+  }
+}
+
+.active-filter-list {
+  border: 1px solid #e6e7e8;
+  background-color: #f9f9f9 !important;
+
+  .filter-list-header {
+    display: flex;
+    align-items: center;
+    gap: 1em;
+
+    h4 {
+      margin: 0;
+      color: #3d5265;
+    }
+  }
+
+  .filter-list-content {
+    padding: 1em 0 0;
+    background-color: transparent;
+
+    .filter {
+      display: flex;
+      flex-wrap: wrap;
+      font-size: 15px;
+
+      .filter-wrapper {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: baseline;
+        padding: 8px 15px;
+        margin-top: 10px;
+        margin-right: 11px;
+        background-color: #ebebeb;
+        gap: 1em;
+
+        .filter-label {
+          font-weight: 500;
+        }
+
+        .filter-value {
+          position: relative;
+          display: flex;
+          align-items: center;
+          padding: 0;
+          border: none;
+          margin: 0;
+          background-color: transparent;
+          font-size: 15px;
+
+          .close.icon {
+            position: relative;
+            width: 16px;
+            height: 16px;
+            padding: 3px;
+            border: 1px solid #004b7f !important;
+            border-radius: 2px;
+            color: #2e3e4c;
+            opacity: 1;
+
+            &:before,
+            &:after {
+              position: absolute;
+              top: 2px;
+              left: 7px;
+              width: 1px;
+              height: 9px;
+              background-color: #004b7f !important;
+              content: ' ';
+            }
+
+            &:before {
+              transform: rotate(45deg);
+            }
+
+            &:after {
+              transform: rotate(-45deg);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.sui-search-box .search-input .terms-box .terms-box-left .search-icon img {
+  fill: #004b7f !important;
+}
+
+.searchlib-block .ui.basic.button.clear-btn {
+  color: #289588 !important;
+}
+
+.searchlib-block .result-item .result-info {
+  align-items: center;
+
+  &.show-on-map {
+    color: #289588 !important;
+    cursor: pointer;
+
+    .result-info-title {
+      color: #289588 !important;
+    }
+  }
+}
+
+.searchlib-block .search-body-footer {
+  margin-top: 2em;
+}
+
+.reset-map-button.ui.button.secondary {
+  position: absolute;
+  z-index: 2;
+  top: 1.3em;
+  right: 0.7em;
+  display: flex;
+  padding: 8px 6px 8px 12px;
+  border: 4px solid #efefef;
+  border-radius: 2px;
+  background-color: #289588;
+  gap: 0.5em;
+  opacity: 0.6;
+
+  &.active {
+    display: flex;
+  }
+
+  &.inactive {
+    display: none;
+  }
+}
+
+.ol-zoom.ol-control {
+  .ol-zoom-in,
+  .ol-zoom-out {
+    background-color: rgba(0, 131, 224, 0.5);
+  }
+}

package/src/components/manage/Blocks/CaseStudyExplorer/styles.less_old

@@ -0,0 +1,201 @@
+#csepopup > span {
+  display: 'block';
+  margin-bottom: '10px';
+  background-color: '#ddd';
+}
+
+#csepopup {
+  // width: 300px;
+  width: 100%;
+  // height: 100%;
+  padding: 1em;
+  // border: 1px solid black;
+  // font-size: 14px;
+  // line-height: initial;
+  font-size: 1rem;
+
+  a:hover {
+    color: #0099bb;
+  }
+
+  h3 {
+    font-size: 1.4rem;
+  }
+
+  h4 {
+    margin: 0px;
+  }
+
+  div {
+    margin-bottom: 16px;
+  }
+
+  ul {
+    margin: 0px;
+
+    li {
+      line-height: 22px;
+    }
+  }
+
+  p {
+    font-size: 13px;
+
+    p {
+      margin-bottom: 10px;
+    }
+  }
+
+  span.blue {
+    color: #069;
+  }
+
+  span.img {
+    display: block;
+    margin-bottom: 10px;
+    background-color: #ddd;
+
+    img {
+      max-height: 133px;
+    }
+  }
+}
+
+#external-popup-overlay {
+  width: 370px;
+  height: 100%;
+
+  .ol-overlay-container {
+    position: relative !important;
+    // display: block !important;
+    width: 100%;
+    height: 100%;
+    background-color: #dae8f4;
+
+    #popup-overlay {
+      position: relative !important;
+      display: flex;
+      width: 100%;
+      height: 100%;
+      align-items: center;
+    }
+  }
+}
+
+#cse-filter {
+  display: flex;
+  flex-direction: row;
+  font-family: sans-serif;
+  // gap: 3em;
+
+  .filter-wrapper {
+    // flex-grow: 1;
+
+    &.active {
+      button span {
+        // box-shadow: 0 0 4px #aaa !important;
+        box-shadow: 0 5px 0 #ffffff, 0 0 4px rgba(0, 0, 0, 0.25);
+        color: #0099bb;
+      }
+
+      .filter-inputs-wrapper {
+        display: block;
+      }
+    }
+
+    .ri-arrow-down-s-line:before {
+      content: '\ea4e';
+    }
+
+    .ui.basic.button.facet-btn {
+      margin: 0 0.25em 0.25em 0;
+
+      &:active {
+        background: white !important;
+      }
+
+      &:hover,
+      &:focus {
+        color: rgba(0, 0, 0, 0.6) !important;
+      }
+
+      span {
+        position: relative !important;
+        z-index: 99999;
+        display: inline-block;
+        overflow: hidden;
+        padding: 0.5em 1em;
+        background-color: white;
+      }
+    }
+
+    .filter-inputs-wrapper {
+      position: absolute;
+      z-index: 1;
+      display: none;
+      padding: 1em;
+      margin-top: -6px;
+      background-color: #fff;
+      box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
+      color: #4f4f4f;
+
+      .filterInputText {
+        padding: 6px;
+        border: 0.5px solid #c4c4c4;
+        margin-bottom: 0.7em;
+        border-radius: 0;
+        font-size: 14px;
+      }
+
+      .filter-inputs {
+        overflow: auto;
+        min-width: 200px;
+        max-width: 400px;
+        max-height: 200px;
+
+        &::-webkit-scrollbar {
+          width: 8px;
+          height: 0.3rem !important;
+        }
+
+        &::-webkit-scrollbar-track {
+          background-color: #d9d9d9;
+          border-radius: 10px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          background: #004b7f;
+          border-radius: 10px;
+        }
+
+        .filter-input {
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          cursor: pointer;
+          font-size: 14px;
+
+          span {
+            padding-right: 5px;
+          }
+
+          input {
+            margin-right: 8px;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+
+  h4 {
+    position: relative;
+    padding: 10px;
+    border-bottom: 1px solid #d8d8d8;
+    margin-bottom: 0 !important;
+    background-color: #005c96;
+    color: #fff;
+    cursor: pointer;
+    font-size: 14px;
+  }
+}

package/src/components/manage/Blocks/CaseStudyExplorer/utils.js

@@ -0,0 +1,144 @@
+export function centerAndResetMapZoom({ map, ol }) {
+  map.getView().animate({
+    zoom: 4,
+    duration: 1000,
+    center: ol.proj.transform([10, 49], 'EPSG:4326', 'EPSG:3857'),
+  });
+}
+
+export function scrollToElement(elementId) {
+  const element = document.getElementById(elementId);
+  element.scrollIntoView({
+    behavior: 'smooth',
+  });
+}
+
+export function getExtentOfFeatures({ features, ol }) {
+  const points = features.map((f) => f.getGeometry().flatCoordinates);
+  const point = new ol.geom.MultiPoint(points);
+  return point.getExtent();
+}
+
+export function zoomMapToFeatures({ map, features, threshold = 500, ol }) {
+  const extent = getExtentOfFeatures({ features, ol });
+  let extentBuffer = (extent[3] - extent[1] + extent[2] - extent[0]) / 4;
+  extentBuffer = extentBuffer < threshold ? threshold : extentBuffer;
+  const paddedExtent = ol.extent.buffer(extent, extentBuffer);
+  map.getView().fit(paddedExtent, { ...map.getSize(), duration: 1000 });
+}
+
+export function getFeatures({ cases, ol }) {
+  const Feature = ol.ol.Feature;
+
+  return cases.map((c, index) => {
+    const {
+      geometry: { coordinates },
+    } = c;
+    const point = new Feature(
+      new ol.geom.Point(ol.proj.fromLonLat(coordinates)),
+    );
+    point.setId(index);
+    point.setProperties(
+      {
+        title: c.properties.title,
+        image: c.properties.image,
+        nwrm_type: c.properties.nwrm_type,
+        measures_implemented: c.properties.measures,
+        typology_of_measures: c.properties.typology_of_measures,
+        description: c.properties.description,
+        index: index,
+        path: c.properties.path,
+        color: c.properties.nwrm_type === 'Light' ? '#50B0A4' : '#0083E0',
+      },
+      false,
+    );
+    return point;
+  });
+}
+
+export function filterCases(cases, activeFilters, caseStudiesIds, searchInput) {
+  const data = cases.filter((_case) => {
+    let flag_searchInput = false;
+    let flag_implemented = false;
+    let flag_typology_of_measures = false;
+    let flag_case = caseStudiesIds
+      ? caseStudiesIds.includes(_case.properties.url.split('/').pop())
+      : true;
+
+    if (!searchInput) {
+      flag_searchInput = true;
+    } else {
+      if (_case.properties.title.toLowerCase().match(searchInput)) {
+        flag_searchInput = true;
+      } else if (
+        _case.properties.description.toLowerCase().match(searchInput)
+      ) {
+        flag_searchInput = true;
+      }
+    }
+
+    if (!activeFilters.measures_implemented.length) {
+      flag_implemented = true;
+    } else {
+      let measures_implemented = _case.properties.measures?.map((item) => {
+        return item['id'].toString();
+      });
+
+      activeFilters.measures_implemented.forEach((filter) => {
+        if (measures_implemented?.includes(filter)) flag_implemented = true;
+      });
+    }
+
+    if (!activeFilters.typology_of_measures.length) {
+      flag_typology_of_measures = true;
+    } else {
+      let typology_of_measures = _case.properties.typology_of_measures?.map(
+        (item) => {
+          return item.toString();
+        },
+      );
+
+      activeFilters.typology_of_measures.forEach((filter) => {
+        if (typology_of_measures?.includes(filter))
+          flag_typology_of_measures = true;
+      });
+    }
+
+    return flag_case &&
+      flag_implemented &&
+      flag_typology_of_measures &&
+      flag_searchInput
+      ? _case
+      : false;
+  });
+
+  return data;
+}
+
+export function getFilters(cases) {
+  let _filters = {
+    measures_implemented: {},
+    typology_of_measures: {},
+  };
+
+  for (let key of Object.keys(cases)) {
+    const _case = cases[key];
+    let measures_implemented = _case.properties.measures;
+    measures_implemented.map((item) => {
+      if (!_filters.measures_implemented.hasOwnProperty(item['id'])) {
+        _filters.measures_implemented[item['id']] = item['title'];
+      }
+      return [];
+    });
+
+    let typology_of_measures = _case.properties.typology_of_measures;
+    typology_of_measures.map((item) => {
+      if (!_filters.typology_of_measures.hasOwnProperty(item)) {
+        _filters.typology_of_measures[item] = item;
+      }
+      return [];
+    });
+  }
+
+  return _filters;
+}