@eeacms/volto-eea-map 4.1.0 → 5.0.0

package/src/hooks/useCopyToClipboard.jsx

@@ -0,0 +1,25 @@
+import { useState, useEffect, useCallback } from 'react';
+
+const useCopyToClipboard = (text) => {
+  const [copyStatus, setCopyStatus] = useState('inactive');
+  const copy = useCallback(() => {
+    navigator.clipboard.writeText(text).then(
+      () => setCopyStatus('copied'),
+      () => setCopyStatus('failed'),
+    );
+  }, [text]);
+
+  useEffect(() => {
+    if (copyStatus === 'inactive') {
+      return;
+    }
+
+    const timeout = setTimeout(() => setCopyStatus('inactive'), 3000);
+
+    return () => clearTimeout(timeout);
+  }, [copyStatus]);
+
+  return [copyStatus, copy];
+};
+
+export default useCopyToClipboard;

package/src/index.js

@@ -1,20 +1,20 @@
 import { uniqBy } from 'lodash';
 
-import EmbedMapView from './components/Blocks/EmbedEEAMap/View';
-import EmbedMapEdit from './components/Blocks/EmbedEEAMap/Edit';
+import EmbedMapView from './Blocks/EmbedEEAMap/View';
+import EmbedMapEdit from './Blocks/EmbedEEAMap/Edit';
 
 import world from '@plone/volto/icons/world.svg';
 
-import DataQueryWidget from './components/widgets/DataQueryWidget';
-import LayerSelectWidget from './components/widgets/LayerSelectWidget';
+import VisualizationWidget from './Widgets/VisualizationWidget';
 
-import VisualizationEditorWidget from './components/visualization/VisualizationEditorWidget';
-import VisualizationViewWidget from './components/visualization/VisualizationViewWidget';
-import VisualizationView from './components/visualization/VisualizationView';
+import ArcgisRendererWidget from './Widgets/ArcgisRendererWidget/ArcgisRendererWidget';
+import ArcgisColorPickerWidget from './Widgets/ArcgisColorPickerWidget';
+import ArcgisSliderWidget from './Widgets/ArcgisSliderWidget';
+import ArcgisViewpointWidget from './Widgets/ArcgisViewpointWidget';
 
-import SimpleColorPickerWidget from './components/widgets/SimpleColorPickerWidget';
+import VisualizationViewWidget from './Widgets/VisualizationViewWidget';
 
-import './less/global.less';
+import VisualizationView from './Views/VisualizationView';
 
 const applyConfig = (config) => {
   config.settings.allowed_cors_destinations = [
@@ -64,15 +64,15 @@ const applyConfig = (config) => {
     'id',
   );
 
-  config.widgets.widget.map_layers_widget = LayerSelectWidget;
-  config.widgets.widget.data_query_widget = DataQueryWidget;
-  config.widgets.widget.simple_color_picker_widget = SimpleColorPickerWidget;
+  config.views.contentTypesViews.map_visualization = VisualizationView;
+
+  config.widgets.widget.arcgis_renderer = ArcgisRendererWidget;
+  config.widgets.widget.arcgis_color_picker = ArcgisColorPickerWidget;
+  config.widgets.widget.arcgis_slider = ArcgisSliderWidget;
+  config.widgets.widget.arcgis_viewpoint = ArcgisViewpointWidget;
 
-  //map editor for the visualization(content-type)
-  config.widgets.id.map_visualization_data = VisualizationEditorWidget;
+  config.widgets.id.map_visualization_data = VisualizationWidget;
   config.widgets.views.id.map_visualization_data = VisualizationViewWidget;
-  //map viewer for the visualization(content-type)
-  config.views.contentTypesViews.map_visualization = VisualizationView;
 
   return config;
 };

package/src/jsoneditor.js

@@ -0,0 +1,72 @@
+import { isString } from 'lodash';
+import { toast } from 'react-toastify';
+import { Toast } from '@plone/volto/components';
+
+import loadable from '@loadable/component';
+
+const LoadableJsonEditor = loadable.lib(() => import('jsoneditor'));
+
+const jsoneditor = __CLIENT__ && LoadableJsonEditor;
+
+export async function initEditor({ el, editor, dflt, options, onInit }) {
+  if (!jsoneditor) return;
+  const module = await jsoneditor.load();
+  const { default: JSONEditor } = module;
+  // create the editor
+  const container = isString(el) ? document.getElementById(el) : el;
+
+  if (!container) {
+    return;
+  }
+
+  container.innerHTML = '';
+
+  const _options = {
+    mode: 'code',
+    enableTransform: false,
+    schema: {
+      type: 'array',
+      items: {
+        type: 'object',
+      },
+    },
+    ...options,
+  };
+
+  editor.current = new JSONEditor(container, _options);
+  // set initial json
+  editor.current.set(dflt);
+
+  if (onInit) onInit();
+}
+
+export function destroyEditor(editor) {
+  if (editor) {
+    editor.destroy();
+    editor = null;
+  }
+}
+
+export async function validateEditor(editor) {
+  const err = await editor.current.validate();
+
+  if (err.length) {
+    toast.warn(
+      <Toast
+        error
+        title={'JSON validation'}
+        content={'Please make sure all the fields are in the correct format'}
+      />,
+    );
+    return false;
+  }
+
+  return true;
+}
+
+export function onPasteEditor(editor) {
+  try {
+    editor.current.repair();
+    editor.current.format();
+  } catch {}
+}

package/src/styles/editor.less

@@ -0,0 +1,446 @@
+.arcgis-map {
+  &__editor {
+    --color-background-light: #f3f6fa;
+    --color-background-top: #fff;
+    --color-border-default: #c8d4e3;
+    --color-border-light: #dfe8f3;
+    --color-text-active: #2a3f5f;
+    --color-accent: #119dff;
+    --color-accent-shade: #0d76bf;
+    --color-accent-shade-mid: #0d76bf;
+    --color-button-primary-base-fill: var(--color-accent);
+    --color-button-primary-base-border: var(--color-accent-shade);
+    --color-button-primary-hover-fill: var(--color-accent-shade-mid);
+    --color-button-primary-hover-border: var(--color-accent-shade);
+    --color-button-primary-base-text: #fff;
+    --color-button-primary-hover-text: #fff;
+    --text-shadow-dark-color: rgba(42, 63, 95, 0.7);
+    --border-default: 1px solid var(--color-border-default);
+    --border-light: 1px solid var(--color-border-light);
+    --border-radius: 5px;
+    --spacing-half-unit: 12px;
+    --spacing-quarter-unit: 6px;
+    --sidebar-background: #fff;
+    --sidebar-group-background-base: var(--sidebar-background);
+    --sidebar-item-background-base: var(--color-background-light);
+    --sidebar-width: 100px;
+    --panel-width: 500px;
+    --panel-background: #ebf0f8;
+    --editor-width: calc(var(--sidebar-width) + var(--panel-width) + 1px);
+    --font-weight-normal: 400;
+    --font-weight-semibold: 600;
+    --font-size-small: 12px;
+    --font-size-base: 13px;
+    --font-size-medium: 14px;
+    --color-text-base: #506784;
+    --text-shadow-dark-ui: 0 1px 2px var(--text-shadow-dark-color);
+    --text-shadow-dark-ui-inactive: 0 1px 1px rgba(42, 63, 95, 0.4);
+    --box-shadow-base-color: rgba(80, 103, 132, 0.2);
+    --box-shadow-base: 0px 2px 9px var(--box-shadow-base-color);
+    --fold-header-background-base: #506784;
+    --fold-header-border-color-base: #506784;
+    --fold-header-text-color-closed: #fff;
+    --fold-header-text-color-base: #fff;
+    --fold-header-border-color-closed: #2a3f5f;
+    --fold-header-background-closed: #2a3f5f;
+
+    display: flex;
+    width: 100%;
+    height: 100%;
+    max-height: 100%;
+    flex-grow: 1;
+
+    button {
+      display: inline-flex;
+      height: 36px;
+      align-items: center;
+      padding: var(--spacing-quarter-unit) var(--spacing-half-unit);
+      border-width: 1px;
+      border-style: solid;
+      border-color: transparent;
+      border-radius: var(--border-radius);
+      column-gap: 0.25rem;
+      cursor: pointer;
+      font-size: var(--font-size-medium);
+      font-weight: var(--font-weight-semibold);
+      letter-spacing: 0.5px;
+      line-height: 1;
+      outline: none;
+      text-align: center;
+      transition: all 0.15s ease-in-out;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      &:first-letter {
+        text-transform: capitalize;
+      }
+
+      &.btn-primary {
+        border-color: var(--color-button-primary-base-border);
+        background-color: var(--color-button-primary-base-fill);
+        color: var(--color-button-primary-base-text);
+        text-shadow: var(--text-shadow-dark-ui);
+
+        &:hover {
+          border: 1px solid var(--color-button-primary-hover-border);
+          background-color: var(--color-button-primary-hover-fill);
+          color: var(--color-button-primary-hover-text);
+        }
+      }
+    }
+
+    .ruleGroup .rule .rule-value:has(.rule-value-list-item) {
+      input {
+        width: 50%;
+      }
+    }
+
+    .ruleGroup .ruleGroup-body {
+      gap: 1rem;
+    }
+
+    .ruleGroup .custom-rule {
+      display: flex;
+      flex-flow: column;
+      gap: 0.5rem;
+
+      .react-select {
+        .react-select__control {
+          width: 100%;
+          min-height: auto;
+        }
+
+        .react-select__value-container {
+          padding: 0.3em !important;
+        }
+
+        .react-select__indicator {
+          padding: 0.3em !important;
+        }
+      }
+    }
+  }
+
+  &__view {
+    .esri-view {
+      --ag-map-height: 100% !important;
+    }
+  }
+
+  &__controls {
+    position: relative;
+    display: flex;
+    overflow: hidden;
+    width: var(--editor-width);
+    flex-shrink: 0;
+    margin-right: 1rem;
+  }
+
+  &__view {
+    position: sticky;
+    top: 10px;
+    width: 100%;
+    height: 100%;
+  }
+
+  &__sidebar {
+    width: var(--sidebar-width);
+    min-width: var(--sidebar-width);
+    max-width: var(--sidebar-width);
+    height: 100%;
+    flex-grow: 1;
+    border-right: var(--border-default);
+    background: var(--sidebar-background);
+    float: left;
+    -webkit-overflow-scrolling: touch;
+    overflow-x: hidden;
+    overflow-y: auto;
+    text-align: center;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
+    .sidebar-group {
+      &--title {
+        position: relative;
+        display: flex;
+        width: 100%;
+        align-items: center;
+        padding: var(--spacing-half-unit) 0;
+        border-bottom: var(--border-light);
+        background-color: var(--sidebar-group-background-base);
+
+        color: var(--color-text-base);
+        cursor: pointer;
+        font-size: var(--font-size-medium);
+        font-weight: var(--font-weight-normal);
+        text-align: left;
+        text-transform: capitalize;
+
+        &__icon {
+          height: 20px;
+
+          svg {
+            rotate: 90deg;
+          }
+        }
+      }
+
+      &--item {
+        position: relative;
+        overflow: hidden;
+        padding: 10px;
+        padding-right: var(--spacing-quarter-unit);
+        padding-left: 18px;
+        border-bottom: var(--border-light);
+        background-color: var(--sidebar-item-background-base);
+        color: var(--color-text-base);
+        cursor: pointer;
+        font-size: var(--font-size-medium);
+        font-weight: var(--font-weight-normal);
+        line-height: var(--font-size-medium);
+        text-align: left;
+        text-transform: capitalize;
+
+        &::before {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 5px;
+          height: 100%;
+          background-color: var(--color-accent);
+          content: '';
+          transform: scaleX(0);
+          transform-origin: left center;
+          transition: all 0.15s ease-in-out;
+          will-change: transform;
+        }
+
+        &__is-active {
+          color: var(--color-text-active);
+          cursor: default;
+          font-weight: var(--font-weight-semibold);
+
+          &::before {
+            transform: none;
+          }
+        }
+      }
+
+      &--expanded {
+        .sidebar-group--title {
+          position: relative;
+          z-index: 4;
+          box-shadow: var(--box-shadow-base);
+
+          &__icon svg {
+            rotate: 180deg;
+          }
+        }
+      }
+
+      &--is-active {
+        .sidebar-group--title {
+          color: var(--color-text-active);
+          font-weight: var(--font-weight-semibold);
+
+          &__icon svg {
+            fill: var(--color-accent) !important;
+          }
+        }
+      }
+    }
+  }
+
+  &__panel {
+    position: relative;
+    display: flex;
+    width: var(--panel-width);
+    box-sizing: border-box;
+    flex-direction: column;
+    flex-grow: 1;
+    padding: var(--spacing-half-unit);
+    border-right: var(--border-default);
+    background-color: var(--panel-background);
+    -webkit-overflow-scrolling: touch;
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    .panel {
+      &--header {
+        display: flex;
+        flex-shrink: 0;
+        margin-bottom: var(--spacing-half-unit);
+      }
+    }
+
+    .fold {
+      position: relative;
+      width: 100%;
+      margin-bottom: var(--spacing-half-unit);
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      &.foldable {
+        .fold--top {
+          cursor: pointer;
+        }
+      }
+
+      &--top {
+        display: flex;
+        height: auto;
+        justify-content: space-between;
+        padding: var(--spacing-quarter-unit) var(--spacing-half-unit);
+        border: 1px solid var(--fold-header-border-color-closed);
+        border-radius: var(--border-radius);
+        background-color: var(--fold-header-background-closed);
+        clear: both;
+        color: var(--fold-header-text-color-closed);
+        font-size: var(--font-size-base);
+        text-shadow: var(--text-shadow-dark-ui);
+        transition:
+          background-color 0.1s ease-in-out,
+          color 0.1s ease-in-out,
+          border 0.1s ease-in-out;
+
+        &__content {
+          display: flex;
+          flex-grow: 1;
+        }
+
+        &__fold {
+          rotate: 90deg;
+        }
+
+        &__title {
+          overflow: hidden;
+          max-width: 230px;
+          margin-left: calc(var(--spacing-half-unit) / 3);
+          font-size: var(--font-size-medium);
+          font-weight: var(--font-weight-semibold);
+          letter-spacing: 0.2px;
+          line-height: var(--font-size-medium);
+          text-overflow: ellipsis;
+          transform: translateY(1px);
+          white-space: nowrap;
+        }
+      }
+
+      &--content {
+        padding: 0.5rem;
+        border: var(--border-default);
+        border-width: 0 1px 1px 1px;
+        background: var(--color-background-top);
+        border-bottom-left-radius: 5px;
+        border-bottom-right-radius: 5px;
+      }
+
+      &__open {
+        .fold--top {
+          border: 1px solid var(--fold-header-border-color-base);
+          border-radius: var(--border-radius) var(--border-radius) 0 0;
+          background-color: var(--fold-header-background-base);
+          color: var(--fold-header-text-color-base);
+          text-shadow: var(--text-shadow-dark-ui-inactive);
+        }
+
+        .fold--top__fold {
+          rotate: 180deg;
+        }
+      }
+    }
+  }
+}
+
+.arcgis-map__editor {
+  .queryBuilder {
+    font-size: var(--font-size-small);
+
+    button {
+      height: auto !important;
+      font-size: var(--font-size-small);
+    }
+
+    select.rule-fields {
+      max-width: 100px;
+    }
+
+    input.rule-value {
+      width: 100%;
+    }
+  }
+
+  .ui.segment.form.attached .field:last-child {
+    margin-bottom: 0;
+  }
+
+  .ui.form .field .wrapper > label,
+  .inline.field {
+    font-size: var(--font-size-small);
+  }
+
+  .ui.form.accordion .title {
+    display: flex;
+    height: auto;
+    flex-flow: row-reverse;
+    align-items: center;
+    justify-content: flex-end;
+    padding: var(--spacing-quarter-unit) var(--spacing-half-unit);
+    border: 1px solid var(--fold-header-border-color-base);
+    border-radius: var(--border-radius) var(--border-radius) 0 0;
+    background-color: var(--fold-header-background-base) !important;
+    clear: both;
+    color: var(--fold-header-text-color-base) !important;
+    column-gap: calc(var(--spacing-half-unit) / 3);
+    font-size: var(--font-size-medium);
+    text-shadow: var(--text-shadow-dark-ui-inactive);
+    transition:
+      background-color 0.1s ease-in-out,
+      color 0.1s ease-in-out,
+      border 0.1s ease-in-out;
+
+    svg {
+      height: 16px !important;
+      rotate: 180deg !important;
+    }
+
+    &:not(.active) {
+      border: 1px solid var(--fold-header-border-color-closed) !important;
+      border-radius: var(--border-radius) !important;
+      background-color: var(--fold-header-background-closed) !important;
+      color: var(--fold-header-text-color-closed) !important;
+      text-shadow: var(--text-shadow-dark-ui) !important;
+
+      svg {
+        rotate: -90deg !important;
+      }
+    }
+  }
+
+  #blockform-fieldset-default {
+    .ui.segment.form:empty {
+      display: none;
+    }
+  }
+}
+
+.arcgis-renderer-editor {
+  padding: 1rem 0.625rem;
+  font-size: var(--font-size-small);
+
+  .ui.form.segment {
+    padding: 0;
+  }
+}
+
+.arcgis-viewpoint-editor {
+  .ui.form.segment {
+    padding: 0;
+  }
+}

package/src/styles/map.less

@@ -0,0 +1,3 @@
+.esri-view {
+  height: var(--ag-map-height, 600px);
+}