@eeacms/volto-cca-policy 0.1.11 → 0.1.13

package/CHANGELOG.md

@@ -4,6 +4,20 @@ 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.13](https://github.com/eea/volto-cca-policy/compare/0.1.12...0.1.13) - 23 March 2023
+
+#### :hammer_and_wrench: Others
+
+- Clear console.logs [kreafox - [`7a6098f`](https://github.com/eea/volto-cca-policy/commit/7a6098f63de6eba9eb2d4122893f38893900f945)]
+- Add AddLinkForm override [kreafox - [`83bd2f4`](https://github.com/eea/volto-cca-policy/commit/83bd2f482bfc5bfa6a7795849778dc34e4d07fa1)]
+- Enable video block [kreafox - [`69f4c1d`](https://github.com/eea/volto-cca-policy/commit/69f4c1d8bb6bd08a29a6ab50d1e5532295c8d2f3)]
+- Update footer links [kreafox - [`9d32e61`](https://github.com/eea/volto-cca-policy/commit/9d32e6132892e310d6215e8d0e87b4e6052de6d3)]
+### [0.1.12](https://github.com/eea/volto-cca-policy/compare/0.1.11...0.1.12) - 21 March 2023
+
+#### :hammer_and_wrench: Others
+
+- Add readme [Tiberiu Ichim - [`d674ea0`](https://github.com/eea/volto-cca-policy/commit/d674ea01c314b20f5891a593f8e44d1fcadde63d)]
+- Add customization [Tiberiu Ichim - [`2d3b3b8`](https://github.com/eea/volto-cca-policy/commit/2d3b3b821a31b91caffccb280c376ff2285965e2)]
 ### [0.1.11](https://github.com/eea/volto-cca-policy/compare/0.1.10...0.1.11) - 21 March 2023
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/customizations/volto/components/manage/AnchorPlugin/components/LinkButton/AddLinkForm.jsx

@@ -0,0 +1,321 @@
+/**
+ * Add link form.
+ * @module components/manage/AnchorPlugin/components/LinkButton/AddLinkForm
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { compose } from 'redux';
+
+// import unionClassNames from 'union-class-names';
+import cx from 'classnames';
+import {
+  addAppURL,
+  isInternalURL,
+  flattenToAppURL,
+  URLUtils,
+} from '@plone/volto/helpers';
+
+import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
+import { Input, Form, Button } from 'semantic-ui-react';
+import { defineMessages, injectIntl } from 'react-intl';
+
+import clearSVG from '@plone/volto/icons/clear.svg';
+import navTreeSVG from '@plone/volto/icons/nav.svg';
+import aheadSVG from '@plone/volto/icons/ahead.svg';
+
+import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrowser';
+import { withRouter } from 'react-router';
+
+import { Icon } from '@plone/volto/components';
+
+const messages = defineMessages({
+  placeholder: {
+    id: 'Enter URL or select an item',
+    defaultMessage: 'Enter URL or select an item',
+  },
+});
+
+/**
+ * Add link form class.
+ * @class AddLinkForm
+ * @extends Component
+ */
+class AddLinkForm extends Component {
+  static propTypes = {
+    onChangeValue: PropTypes.func.isRequired,
+    onClear: PropTypes.func.isRequired,
+    onOverrideContent: PropTypes.func.isRequired,
+    theme: PropTypes.objectOf(PropTypes.any).isRequired,
+    openObjectBrowser: PropTypes.func.isRequired,
+  };
+
+  static defaultProps = {
+    placeholder: 'Enter URL or select an item',
+  };
+
+  /**
+   * Constructor
+   * @method constructor
+   * @param {Object} props Component properties
+   * @constructs AddLinkForm
+   */
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      value: isInternalURL(props.data.url)
+        ? flattenToAppURL(props.data.url)
+        : props.data.url || '',
+      isInvalid: false,
+    };
+    this.onRef = this.onRef.bind(this);
+    this.onChange = this.onChange.bind(this);
+    this.onKeyDown = this.onKeyDown.bind(this);
+    this.onSubmit = this.onSubmit.bind(this);
+  }
+
+  /**
+   * Component did mount
+   * @method componentDidMount
+   * @returns {undefined}
+   */
+  componentDidMount() {
+    setTimeout(() => this.input.focus(), 50);
+    document.addEventListener('mousedown', this.handleClickOutside, false);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.handleClickOutside, false);
+  }
+
+  handleClickOutside = (e) => {
+    if (
+      this.linkFormContainer.current &&
+      doesNodeContainClick(this.linkFormContainer.current, e)
+    )
+      return;
+    if (this.linkFormContainer.current && this.props.isObjectBrowserOpen)
+      return;
+    this.onClose();
+  };
+
+  /**
+   * Ref handler
+   * @method onRef
+   * @param {Object} node Node
+   * @returns {undefined}
+   */
+  onRef(node) {
+    this.input = node;
+  }
+
+  linkFormContainer = React.createRef();
+
+  /**
+   * Change handler
+   * @method onChange
+   * @param {Object} value Value
+   * @returns {undefined}
+   */
+  onChange(value, clear, callback) {
+    let nextState = { value };
+    // debugger;
+    if (!clear) {
+      if (
+        this.state.isInvalid &&
+        URLUtils.isUrl(URLUtils.normalizeUrl(value))
+      ) {
+        nextState.isInvalid = false;
+      }
+
+      if (isInternalURL(value)) {
+        nextState = { value: flattenToAppURL(value) };
+      }
+    }
+    this.setState(nextState, callback);
+
+    if (clear) this.props.onClear();
+  }
+
+  /**
+   * Select item handler
+   * @method onSelectItem
+   * @param {string} e event
+   * @param {string} url Url
+   * @returns {undefined}
+   */
+  onSelectItem = (e, url) => {
+    e.preventDefault();
+    this.setState({
+      value: url,
+      isInvalid: false,
+    });
+    this.props.onChangeValue(addAppURL(url));
+  };
+
+  /**
+   * Clear handler
+   * @method clear
+   * @param {Object} value Value
+   * @returns {undefined}
+   */
+  clear() {
+    const nextState = { value: '' };
+    this.setState(nextState);
+
+    this.props.onClear();
+  }
+
+  /**
+   * Close handler
+   * @method onClose
+   * @returns {undefined}
+   */
+  onClose = () => this.props.onOverrideContent(undefined);
+
+  /**
+   * Keydown handler
+   * @method onKeyDown
+   * @param {Object} e Event object
+   * @returns {undefined}
+   */
+  onKeyDown(e) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      e.stopPropagation();
+      this.onSubmit();
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      this.onClose();
+    }
+  }
+
+  /**
+   * Submit handler
+   * @method onSubmit
+   * @returns {undefined}
+   */
+  onSubmit() {
+    let { value: url } = this.state;
+
+    const checkedURL = URLUtils.checkAndNormalizeUrl(url);
+    url = checkedURL.url;
+    if (!checkedURL.isValid) {
+      this.setState({ isInvalid: true });
+      return;
+    }
+
+    const editorStateUrl = isInternalURL(url) ? addAppURL(url) : url;
+
+    this.props.onChangeValue(editorStateUrl);
+    this.onClose();
+  }
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    const { value, isInvalid } = this.state;
+    const className = isInvalid
+      ? cx(
+          'ui input editor-link',
+          'input-anchorlink-theme',
+          'input-anchorlink-theme-Invalid',
+        )
+      : cx('ui input editor-link', 'input-anchorlink-theme');
+
+    return (
+      <div className="link-form-container" ref={this.linkFormContainer}>
+        <div
+          style={{ marginLeft: '5px', display: 'flex', alignItems: 'center' }}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 36 36"
+            fill="#B8B2C8"
+          >
+            <g fillRule="evenodd">
+              <path d="M27.1318,7.333 C24.4028,4.604 19.9618,4.604 17.2328,7.333 L12.9898,11.576 C11.8428,12.723 11.1288,14.248 10.9778,15.871 C10.8228,17.541 11.2708,19.211 12.2378,20.576 C12.4818,20.919 12.7278,21.213 12.9888,21.475 C13.7848,22.271 14.7778,22.868 15.8608,23.202 C16.5498,23.415 17.2548,23.519 17.9518,23.518 C19.7808,23.518 21.5598,22.804 22.8888,21.475 L23.9498,20.414 L22.5358,19 L21.4748,20.061 C20.1648,21.371 18.2388,21.842 16.4498,21.291 C15.6668,21.049 14.9778,20.635 14.4038,20.061 C14.2218,19.879 14.0478,19.668 13.8698,19.418 C13.1778,18.443 12.8588,17.249 12.9688,16.056 C13.0768,14.896 13.5868,13.808 14.4038,12.99 L18.6468,8.747 C20.5958,6.798 23.7688,6.798 25.7178,8.747 C26.6568,9.687 27.1748,10.942 27.1748,12.283 C27.1748,13.623 26.6568,14.878 25.7178,15.818 L27.1318,17.232 C28.4488,15.915 29.1748,14.157 29.1748,12.283 C29.1748,10.408 28.4488,8.65 27.1318,7.333" />
+              <path d="M25.0107,16.5254 C24.2147,15.7294 23.2217,15.1324 22.1387,14.7984 C19.6417,14.0284 16.9477,14.6894 15.1107,16.5254 L14.0507,17.5864 L15.4647,19.0004 L16.5247,17.9394 C17.8357,16.6294 19.7587,16.1554 21.5497,16.7094 C22.3337,16.9514 23.0217,17.3644 23.5957,17.9394 C23.7777,18.1214 23.9527,18.3314 24.1307,18.5824 C24.8217,19.5564 25.1417,20.7514 25.0317,21.9444 C24.9237,23.1034 24.4137,24.1924 23.5957,25.0104 L19.3537,29.2534 C17.4047,31.2024 14.2317,31.2024 12.2817,29.2534 C11.3427,28.3134 10.8247,27.0574 10.8247,25.7174 C10.8247,24.3774 11.3427,23.1214 12.2817,22.1824 L10.8677,20.7684 C9.5507,22.0854 8.8247,23.8424 8.8247,25.7174 C8.8247,27.5924 9.5507,29.3504 10.8677,30.6674 C12.2327,32.0314 14.0257,32.7134 15.8177,32.7134 C17.6107,32.7134 19.4027,32.0314 20.7677,30.6674 L25.0107,26.4244 C26.1567,25.2774 26.8717,23.7524 27.0227,22.1294 C27.1777,20.4594 26.7297,18.7894 25.7617,17.4244 C25.5177,17.0814 25.2717,16.7874 25.0107,16.5254" />
+            </g>
+          </svg>
+          <Form.Field inline>
+            <div className="wrapper">
+              <Input
+                className={className}
+                id={`field-link`}
+                name="link"
+                value={value || ''}
+                onChange={({ target }) => this.onChange(target.value)}
+                placeholder={this.props.intl.formatMessage(
+                  messages.placeholder,
+                )}
+                onKeyDown={this.onKeyDown}
+                ref={this.onRef}
+              />
+              {value.length > 0 ? (
+                <Button.Group>
+                  <Button
+                    basic
+                    className="cancel"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      this.clear();
+                    }}
+                  >
+                    <Icon name={clearSVG} size="24px" />
+                  </Button>
+                </Button.Group>
+              ) : (
+                <Button.Group>
+                  <Button
+                    basic
+                    icon
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      this.props.openObjectBrowser({
+                        mode: 'link',
+                        overlay: true,
+                        onSelectItem: (url) => {
+                          // console.log('incoming onchange', url);
+                          this.onChange(url, null, this.onSubmit);
+                          // console.log('now state is', this.state);
+                          // this.onSubmit();
+                        },
+                      });
+                    }}
+                  >
+                    <Icon name={navTreeSVG} size="24px" />
+                  </Button>
+                </Button.Group>
+              )}
+              <Button.Group>
+                <Button
+                  basic
+                  primary
+                  disabled={!value.length > 0}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.onSubmit();
+                  }}
+                >
+                  <Icon name={aheadSVG} size="24px" />
+                </Button>
+              </Button.Group>
+            </div>
+          </Form.Field>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default compose(injectIntl, withRouter, withObjectBrowser)(AddLinkForm);

package/src/customizations/volto/helpers/Url/Readme.md

@@ -0,0 +1,3 @@
+Copy of https://raw.githubusercontent.com/plone/volto/9c1af8bdb5d6abd78adbd08d6b86499d133471cb/src/helpers/Url/Url.js
+
+fixes mail regex crash

package/src/customizations/volto/helpers/Url/Url.js

@@ -0,0 +1,320 @@
+/**
+ * Url helper.
+ * @module helpers/Url
+ */
+
+import { last, memoize } from 'lodash';
+import {
+  urlRegex,
+  telRegex,
+  mailRegex,
+} from '@plone/volto/helpers/Url/urlRegex';
+import prependHttp from 'prepend-http';
+import config from '@plone/volto/registry';
+
+/**
+ * Get base url.
+ * @function getBaseUrl
+ * @param {string} url Url to be parsed.
+ * @return {string} Base url of content object.
+ */
+export const getBaseUrl = memoize((url) => {
+  const { settings } = config;
+  if (url === undefined) return;
+
+  // We allow settings.nonContentRoutes to have strings (that are supposed to match
+  // ending strings of pathnames, so we are converting them to RegEx to match also
+  const normalized_nonContentRoutes = settings.nonContentRoutes.map((item) => {
+    if (item.test) {
+      return item;
+    } else {
+      return new RegExp(item + '$');
+    }
+  });
+
+  let adjustedUrl = normalized_nonContentRoutes.reduce(
+    (acc, item) => acc.replace(item, ''),
+    url,
+  );
+
+  adjustedUrl = adjustedUrl || '/';
+  return adjustedUrl === '/' ? '' : adjustedUrl;
+});
+
+/**
+ * Get parent url.
+ * @function getParentUrl
+ * @param {string} url Url to be parsed.
+ * @return {string} Parent url of content object.
+ */
+export const getParentUrl = memoize((url) => {
+  return url.substring(0, url.lastIndexOf('/'));
+});
+
+/**
+ * Get id from url.
+ * @function getId
+ * @param {string} url Url to be parsed.
+ * @return {string} Id of content object.
+ */
+export function getId(url) {
+  return last(url.replace(/\?.*$/, '').split('/'));
+}
+
+/**
+ * Get view of an url.
+ * @function getView
+ * @param {string} url Url to be parsed.
+ * @return {string} View of content object.
+ */
+export function getView(url) {
+  const view = last(url.replace(/\?.*$/, '').split('/'));
+  if (
+    [
+      'add',
+      'layout',
+      'contents',
+      'edit',
+      'delete',
+      'diff',
+      'history',
+      'sharing',
+      'controlpanel',
+    ].indexOf(view) === -1
+  ) {
+    return 'view';
+  }
+  return view === 'layout' ? 'edit' : view;
+}
+
+/**
+ * Flatten to app server URL - Given a URL if it starts with the API server URL
+ * this method flattens it (removes) the server part
+ * TODO: Update it when implementing non-root based app location (on a
+ * directory other than /, eg. /myapp)
+ * @method flattenToAppURL
+ * @param {string} url URL of the object
+ * @returns {string} Flattened URL to the app server
+ */
+export function flattenToAppURL(url) {
+  const { settings } = config;
+  return (
+    url &&
+    url
+      .replace(settings.internalApiPath, '')
+      .replace(settings.apiPath, '')
+      .replace(settings.publicURL, '')
+  );
+}
+/**
+ * Given a URL it remove the querystring from the URL.
+ * @method stripQuerystring
+ * @param {string} url URL of the object
+ * @returns {string} URL without querystring
+ */
+export function stripQuerystring(url) {
+  return url.replace(/\?.*$/, '');
+}
+
+/**
+ * Given a URL if it starts with the API server URL
+ * this method removes the /api or the /Plone part.
+ * @method toPublicURL
+ * @param {string} url URL of the object
+ * @returns {string} public URL
+ */
+export function toPublicURL(url) {
+  const { settings } = config;
+  return settings.publicURL.concat(flattenToAppURL(url));
+}
+
+/**
+ * Returns true if the current view is a cms ui view
+ * @method isCmsUi
+ * @param {string} currentPathname pathname of the current view
+ * @returns {boolean} true if the current view is a cms ui view
+ */
+export const isCmsUi = memoize((currentPathname) => {
+  const { settings } = config;
+  const fullPath = currentPathname.replace(/\?.*$/, '');
+  // WARNING:
+  // not working properly for paths like /editors or similar
+  // because the regexp test does not take that into account
+  // https://github.com/plone/volto/issues/870
+  return settings.nonContentRoutes.reduce(
+    (acc, route) => acc || new RegExp(route).test(`/${fullPath}`),
+    false,
+  );
+});
+
+/**
+ * Flatten to app server HTML - Given a text if it contains some urls that starts
+ * with the API server URL this method flattens it (removes) the server part.
+ * TODO: Update it when implementing non-root based app location (on a
+ * directory other than /, eg. /myapp)
+ * @method flattenHTMLToAppURL
+ * @param {string} html Some html snippet
+ * @returns {string} Same HTML with Flattened URLs to the app server
+ */
+export function flattenHTMLToAppURL(html) {
+  const { settings } = config;
+  return settings.internalApiPath
+    ? html
+        .replace(new RegExp(settings.internalApiPath, 'g'), '')
+        .replace(new RegExp(settings.apiPath, 'g'), '')
+    : html.replace(new RegExp(settings.apiPath, 'g'), '');
+}
+
+/**
+ * Add the app url
+ * @method addAppURL
+ * @param {string} url URL of the object
+ * @returns {string} New URL with app
+ */
+export function addAppURL(url) {
+  const { settings } = config;
+  return url.indexOf(settings.apiPath) === 0
+    ? url
+    : `${settings.apiPath}${url}`;
+}
+
+/**
+ * Given a URL expands it to the backend URL
+ * Useful when you have to actually call the backend from the
+ * frontend code (eg. ICS calendar download)
+ * It is seamless mode aware
+ * @method expandToBackendURL
+ * @param {string} url URL or path of the object
+ * @returns {string} New URL with the backend URL
+ */
+export function expandToBackendURL(path) {
+  const { settings } = config;
+  const APISUFIX = settings.legacyTraverse ? '' : '/++api++';
+  let adjustedPath;
+  if (path.startsWith('http://') || path.startsWith('https://')) {
+    // flattenToAppURL first if we get a full URL
+    adjustedPath = flattenToAppURL(path);
+  } else {
+    // Next adds a / in front if not a full URL to make sure it's a valid relative path
+    adjustedPath = path[0] !== '/' ? `/${path}` : path;
+  }
+
+  let apiPath = '';
+  if (settings.internalApiPath && __SERVER__) {
+    apiPath = settings.internalApiPath;
+  } else if (settings.apiPath) {
+    apiPath = settings.apiPath;
+  }
+
+  return `${apiPath}${APISUFIX}${adjustedPath}`;
+}
+
+/**
+ * Check if internal url
+ * @method isInternalURL
+ * @param {string} url URL of the object
+ * @returns {boolean} True if internal url
+ */
+export function isInternalURL(url) {
+  const { settings } = config;
+  return (
+    url &&
+    (url.indexOf(settings.publicURL) !== -1 ||
+      (settings.internalApiPath &&
+        url.indexOf(settings.internalApiPath) !== -1) ||
+      url.indexOf(settings.apiPath) !== -1 ||
+      url.charAt(0) === '/' ||
+      url.charAt(0) === '.' ||
+      url.startsWith('#'))
+  );
+}
+
+/**
+ * Check if it's a valid url
+ * @method isUrl
+ * @param {string} url URL of the object
+ * @returns {boolean} True if is a valid url
+ */
+export function isUrl(url) {
+  return urlRegex().test(url);
+}
+
+/**
+ * Normalize URL, adds protocol (if required eg. user has not entered the protocol)
+ * @method normalizeUrl
+ * @param {string} url URL of the object
+ * @returns {boolean} URL with the protocol
+ */
+export function normalizeUrl(url) {
+  return prependHttp(url);
+}
+
+/**
+ * Removes protocol from URL (for display)
+ * @method removeProtocol
+ * @param {string} url URL of the object
+ * @returns {string} URL without the protocol part
+ */
+export function removeProtocol(url) {
+  return url.replace('https://', '').replace('http://', '');
+}
+
+export function isMail(text) {
+  return mailRegex().test(text);
+}
+
+export function isTelephone(text) {
+  return telRegex().test(text);
+}
+
+export function normaliseMail(email) {
+  if (email?.toLowerCase()?.startsWith('mailto:')) {
+    return email;
+  }
+  return `mailto:${email}`;
+}
+
+export function normalizeTelephone(tel) {
+  if (tel?.toLowerCase()?.startsWith('tel:')) {
+    return tel;
+  }
+  return `tel:${tel}`;
+}
+
+export function checkAndNormalizeUrl(url) {
+  let res = {
+    isMail: false,
+    isTelephone: false,
+    url: url,
+    isValid: true,
+  };
+  if (URLUtils.isMail(URLUtils.normaliseMail(url))) {
+    //Mail
+    res.isMail = true;
+    res.url = URLUtils.normaliseMail(url);
+  } else if (URLUtils.isTelephone(url)) {
+    //Phone
+    res.isTelephone = true;
+    res.url = URLUtils.normalizeTelephone(url);
+  } else {
+    //url
+    if (res.url && !res.url.startsWith('/') && !res.url.startsWith('#')) {
+      res.url = URLUtils.normalizeUrl(url);
+      if (!URLUtils.isUrl(res.url)) {
+        res.isValid = false;
+      }
+    }
+    if (res.url === undefined || res.url === null) res.isValid = false;
+  }
+  return res;
+}
+
+export const URLUtils = {
+  normalizeTelephone,
+  normaliseMail,
+  normalizeUrl,
+  isTelephone,
+  isMail,
+  isUrl,
+  checkAndNormalizeUrl,
+};

package/src/index.js

@@ -86,13 +86,13 @@ const applyConfig = (config) => {
         {
           icon: 'comment outline',
           text: 'About us',
-          link: '/en/mission/about-us',
+          link: '/en/mission/about',
           children: [],
         },
         {
           icon: 'comment outline',
           text: 'Contact us',
-          link: '/en/mission/about-us/contact-us',
+          link: '/en/mission/about/contact',
         },
         // {
         //   icon: 'envelope outline',
@@ -119,6 +119,11 @@ const applyConfig = (config) => {
     config.blocks.blocksConfig.maps.restricted = false;
   }
 
+  // Enable video
+  if (config.blocks.blocksConfig.video) {
+    config.blocks.blocksConfig.video.restricted = false;
+  }
+
   //console.log(config);
   config.views.contentTypesViews = {
     ...config.views.contentTypesViews,
@@ -137,7 +142,7 @@ const applyConfig = (config) => {
 
   config.settings.contextNavigationLocations = [
     {
-      title: 'Regional Adaptation Tool',
+      title: 'Regional Adaptation Support Tool',
       columns: 4,
       topLevel: 2,
       bottomLevel: 0,