@eeacms/volto-embed 6.0.1 → 7.0.0

package/src/Toolbar/Share.jsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { Popup, Input, Button } from 'semantic-ui-react';
+import cx from 'classnames';
+
+const useCopyToClipboard = (text) => {
+  const [copyStatus, setCopyStatus] = React.useState('inactive');
+  const copy = React.useCallback(() => {
+    navigator.clipboard.writeText(text).then(
+      () => setCopyStatus('copied'),
+      () => setCopyStatus('failed'),
+    );
+  }, [text]);
+
+  React.useEffect(() => {
+    if (copyStatus === 'inactive') {
+      return;
+    }
+
+    const timeout = setTimeout(() => setCopyStatus('inactive'), 3000);
+
+    return () => clearTimeout(timeout);
+  }, [copyStatus]);
+
+  return [copyStatus, copy];
+};
+
+const Share = ({ href = '' }) => {
+  const [open, setOpen] = React.useState(false);
+
+  const CopyUrlButton = ({ className, url, buttonText }) => {
+    const [copyUrlStatus, copyUrl] = useCopyToClipboard(url);
+
+    if (copyUrlStatus === 'copied') {
+      buttonText = 'Copied!';
+    } else if (copyUrlStatus === 'failed') {
+      buttonText = 'Copy failed. Please try again.';
+    }
+
+    return (
+      <Button
+        primary
+        onClick={copyUrl}
+        className={cx('copy-button', className)}
+      >
+        {buttonText}
+      </Button>
+    );
+  };
+
+  return (
+    <Popup
+      popper={{ id: 'vis-toolbar-popup', className: 'share-popup' }}
+      position="bottom left"
+      on="click"
+      open={open}
+      onClose={() => {
+        setOpen(false);
+      }}
+      onOpen={() => {
+        setOpen(true);
+      }}
+      trigger={
+        <div className="share">
+          <button className={cx('trigger-button', { open })}>
+            <i class="ri-share-fill"></i>
+            <span>Share</span>
+          </button>
+        </div>
+      }
+      content={
+        <>
+          <div className="item">
+            <span className="label">Copy link</span>
+            <div className="control">
+              <Input className="share-link" value={href} />
+              <CopyUrlButton
+                className="copy-button"
+                url={href}
+                buttonText="Copy"
+              />
+            </div>
+          </div>
+        </>
+      }
+    />
+  );
+};
+
+export default Share;

package/src/Toolbar/Sources.jsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import cx from 'classnames';
+import { Popup } from 'semantic-ui-react';
+import { UniversalLink } from '@plone/volto/components';
+
+const Link = ({ children, ...props }) => {
+  if (props.href) {
+    return <UniversalLink {...props}>{children}</UniversalLink>;
+  }
+  return <span {...props}>{children}</span>;
+};
+
+const Source = ({ source }) => {
+  if (source.chart_source_link && source.chart_source) {
+    return <Link href={source.chart_source_link}>{source.chart_source}</Link>;
+  }
+  if (source.chart_source) {
+    return <span>{source.chart_source}</span>;
+  }
+  return (
+    <>
+      <Link className="embed-sources-param-title" href={source.link}>
+        {source.title}
+      </Link>
+      {source.organisation && (
+        <>
+          ,{' '}
+          <span className="embed-sources-param-description">
+            {source.organisation}
+          </span>
+        </>
+      )}
+    </>
+  );
+};
+
+export default function Sources({ sources }) {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <Popup
+      popper={{ id: 'vis-toolbar-popup', className: 'sources-popup' }}
+      position="bottom left"
+      on="click"
+      open={open}
+      onClose={() => {
+        setOpen(false);
+      }}
+      onOpen={() => {
+        setOpen(true);
+      }}
+      trigger={
+        <div className="sources">
+          <button className={cx('trigger-button', { open })}>Sources</button>
+        </div>
+      }
+      content={
+        sources?.length ? (
+          <ol className="sources-list">
+            {sources?.map((source, index) => {
+              return (
+                <li key={index}>
+                  <Source source={source} />
+                </li>
+              );
+            })}
+          </ol>
+        ) : (
+          <p>Data provenance is not set for this visualization.</p>
+        )
+      }
+    />
+  );
+}

package/src/Toolbar/index.jsx

@@ -0,0 +1,5 @@
+export { default as FigureNote } from './FigureNote';
+export { default as Sources } from './Sources';
+export { default as MoreInfo } from './MoreInfo';
+export { default as Share } from './Share';
+export { default as Enlarge } from './Enlarge';

package/src/Toolbar/styles.less

@@ -0,0 +1,209 @@
+@import (multiple, reference, optional) '../../theme.config';
+
+@type: extra;
+@element: custom;
+
+.enlarge-modal.ui.modal {
+  width: 95% !important;
+  height: 85%;
+
+  .close.icon {
+    top: 1rem;
+    right: 1rem;
+    width: 24px !important;
+    height: 24px;
+    padding: 0;
+
+    > i {
+      font-size: 24px;
+    }
+  }
+
+  .content {
+    height: 90%;
+
+    .js-plotly-plot {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.visualization-toolbar,
+.legend-toolbar {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+
+  .left-col {
+    > *:not(:last-child)::after {
+      width: 1px;
+      margin: 4px 0;
+      background-color: @textColor;
+      content: '';
+    }
+  }
+
+  .left-col,
+  .right-col {
+    display: flex;
+    align-items: center;
+    column-gap: 1rem;
+
+    > * {
+      display: flex;
+      height: 100%;
+      align-items: stretch;
+      column-gap: 1rem;
+    }
+  }
+
+  .trigger-button {
+    display: inline-flex;
+    align-items: center;
+    padding: 0;
+    padding-bottom: 3px;
+    border: none;
+    background-color: transparent;
+    color: @textColor;
+    column-gap: 0.25rem;
+    cursor: pointer;
+    line-height: 1.5;
+
+    &:hover {
+      color: @secondaryColor;
+    }
+
+    &.open {
+      padding-bottom: 0;
+      border-bottom: 3px solid @secondaryColor;
+      color: @secondaryColor;
+    }
+
+    i {
+      line-height: 1;
+    }
+  }
+}
+
+.legend-toolbar {
+  display: block;
+
+  &:not(.open) {
+    margin-bottom: 0.25rem;
+  }
+
+  .trigger-button {
+    position: relative;
+    z-index: 1;
+
+    &.open {
+      margin-bottom: 0.5rem;
+    }
+  }
+}
+
+#vis-toolbar-popup {
+  .ui.popup {
+    padding-right: 1rem;
+    padding-left: 1rem;
+    background-color: @grey-1;
+    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
+
+    &::before {
+      background-color: @grey-1;
+    }
+  }
+
+  &.figure-note-popup,
+  &.sources-popup {
+    .ui.popup {
+      min-width: 600px;
+
+      @media screen and (max-width: @largestMobileScreen) {
+        min-width: 300px;
+      }
+    }
+  }
+
+  &.sources-popup {
+    .sources-list {
+      margin: 0;
+      list-style: decimal inside;
+      padding-inline-start: 0;
+    }
+  }
+
+  .item {
+    margin-bottom: 0.75rem;
+  }
+
+  .label {
+    display: block;
+    margin-bottom: 0.5rem;
+  }
+
+  .control {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: stretch;
+
+    > * {
+      display: flex;
+      margin: 0;
+    }
+  }
+
+  .types {
+    display: flex;
+    column-gap: 1rem;
+
+    > *:not(:last-child)::after {
+      display: block;
+      width: 1px;
+      height: 100%;
+      background-color: @textColor;
+      content: '';
+    }
+
+    .type {
+      display: flex;
+      column-gap: 1rem;
+    }
+
+    button {
+      display: inline-flex;
+      align-items: center;
+      padding: 0;
+      border: none;
+      background-color: transparent;
+      color: @linkColor;
+      cursor: pointer;
+
+      &:hover {
+        color: @linkHoverColor;
+        text-decoration: @linkHoverUnderline;
+      }
+    }
+  }
+}
+
+.visualization-wrapper.mobile {
+  .visualization-toolbar {
+    flex-flow: column;
+    align-items: center;
+    row-gap: 0.5rem;
+
+    .right-col {
+      .trigger-button {
+        flex-flow: column;
+      }
+    }
+  }
+}
+
+@media print {
+  .visualization-toolbar {
+    display: none;
+  }
+}

package/src/index.js

@@ -1,19 +1,13 @@
-import { ViewIframe, EditIframe } from './Iframe';
-
+import installBlocks from './Blocks';
 export {
   PrivacyProtection,
   addPrivacyProtectionToSchema,
 } from './PrivacyProtection';
 
-export default (config) => {
-  config.blocks.blocksConfig.maps = {
-    ...config.blocks.blocksConfig.maps,
-    view: ViewIframe,
-    edit: EditIframe,
-  };
+export default function applyConfig(config) {
   config.settings.allowed_cors_destinations = [
     ...config.settings.allowed_cors_destinations,
     'screenshot.eea.europa.eu',
   ];
-  return config;
-};
+  return [installBlocks].reduce((acc, apply) => apply(acc), config);
+}

package/src/Iframe/EditIframe.test.jsx

@@ -1,88 +0,0 @@
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import { Provider } from 'react-intl-redux';
-import configureStore from 'redux-mock-store';
-import Edit from './EditIframe';
-import '@testing-library/jest-dom/extend-expect';
-
-const mockStore = configureStore();
-
-const store = mockStore(() => ({
-  connected_data_parameters: {},
-  router: {
-    location: {
-      pathname: '',
-    },
-  },
-  intl: {
-    locale: 'en',
-    messages: {},
-  },
-}));
-
-describe('Edit', () => {
-  it('renders without crashing', () => {
-    render(
-      <Provider store={store}>
-        <Provider store={store}>
-          <Edit
-            selected={false}
-            block="block"
-            index={1}
-            data={{
-              url: 'test',
-            }}
-            pathname="/"
-            onChangeBlock={() => {}}
-            onSelectBlock={() => {}}
-            onDeleteBlock={() => {}}
-            onFocusPreviousBlock={() => {}}
-            onFocusNextBlock={() => {}}
-            handleKeyDown={() => {}}
-          />
-        </Provider>
-      </Provider>,
-    );
-  });
-
-  it('submits url when button is clicked', () => {
-    const { container, getByPlaceholderText } = render(
-      <Provider store={store}>
-        <Provider store={store}>
-          <Edit
-            selected={false}
-            block="block"
-            index={1}
-            data={{
-              dataprotection: {
-                privacy_statement: 'test',
-              },
-            }}
-            pathname="/"
-            onChangeBlock={() => {}}
-            onSelectBlock={() => {}}
-            onDeleteBlock={() => {}}
-            onFocusPreviousBlock={() => {}}
-            onFocusNextBlock={() => {}}
-            handleKeyDown={() => {}}
-          />
-        </Provider>
-      </Provider>,
-    );
-
-    const input = getByPlaceholderText('Enter map Embed Code');
-    fireEvent.click(input);
-    fireEvent.change(input, { target: { value: 'test url' } });
-    fireEvent.click(container.querySelector('button.cancel'));
-    fireEvent.change(input, { target: { value: 'test url' } });
-    fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
-    fireEvent.keyDown(input, { key: 'Escape', code: 'Escape' });
-    fireEvent.keyDown(input, { key: 'KeyA', code: 'KeyA' });
-
-    fireEvent.change(input, { target: { value: '<iframe src="test"/>' } });
-    fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
-
-    const button = container.querySelector('button.ui.basic.primary.button');
-    fireEvent.click(button);
-  });
-});

package/src/Iframe/index.js

@@ -1,4 +0,0 @@
-import EditIframe from './EditIframe';
-import ViewIframe from './ViewIframe';
-
-export { EditIframe, ViewIframe };

package/src/Iframe/schema.js

@@ -1,39 +0,0 @@
-const schema = {
-  title: 'Embed external content',
-
-  fieldsets: [
-    {
-      id: 'default',
-      title: 'Default',
-      fields: ['url', 'align', 'height'],
-    },
-  ],
-
-  properties: {
-    url: {
-      title: 'Embed URL',
-    },
-    align: {
-      title: 'Alignment',
-      widget: 'align',
-      type: 'string',
-    },
-    height: {
-      title: (
-        <a
-          rel="noreferrer"
-          target="_blank"
-          href="https://developer.mozilla.org/en-US/docs/Web/CSS/height"
-        >
-          CSS height
-        </a>
-      ),
-      default: '45vh',
-      description: 'Iframe height',
-    },
-  },
-
-  required: ['url'],
-};
-
-export default schema;