diff --git a/jsconfig.json b/jsconfig.json
index 9847306b..6fc1de22 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -1,6 +1,9 @@
{
"compilerOptions": {
"paths": {
+ "volto-slate": [
+ "develop/volto-slate/src"
+ ],
"volto-tabsview": [
"develop/volto-tabsview/src"
],
diff --git a/mrs.developer.json b/mrs.developer.json
index 3b9a2a6f..193a3ac9 100644
--- a/mrs.developer.json
+++ b/mrs.developer.json
@@ -1,4 +1,9 @@
{
+ "volto-slate": {
+ "url": "https://github.com/eea/volto-slate.git",
+ "path": "src",
+ "branch": "develop"
+ },
"volto-tabsview": {
"url": "https://github.com/eea/volto-tabsview.git",
"branch": "master",
diff --git a/package.json b/package.json
index 270aa783..77e39944 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
"version": "0.4.1",
"private": true,
"workspaces": [
+ "src/develop/volto-slate",
"src/develop/volto-grid-block",
"src/develop/volto-addons",
"src/develop/volto-datablocks"
@@ -109,9 +110,10 @@
"@eeacms/volto-image-zoom-and-flip": "github:eea/volto-image-zoom-and-flip#0.1.0",
"@eeacms/volto-metadata-block": "github:eea/volto-metadata-block#0.2.0",
"@eeacms/volto-slate-metadata-mentions": "github:eea/volto-slate-metadata-mentions#0.2.0",
- "@eeacms/volto-widgets-view": "github:eea/volto-widgets-view#0.2.4",
"@eeacms/volto-tabs-block": "github:eea/volto-tabs-block#0.2.2",
+ "@eeacms/volto-widgets-view": "github:eea/volto-widgets-view#0.2.4",
"@plone/volto": "github:eea/volto#7.11.1-beta.1",
+ "@tinymce/tinymce-react": "^3.6.0",
"axios": "^0.20.0",
"jsonp": "^0.2.1",
"ol": "^6.4.3",
@@ -120,6 +122,7 @@
"react-component-queries": "^2.3.0",
"react-dom": "^16.13.1",
"react-highlight-words": "^0.16.0",
+ "react-iframe": "^1.8.0",
"react-loadable": "^5.5.0",
"react-sizeme": "^2.6.12",
"react-visibility-sensor": "^5.1.1",
diff --git a/src/components/manage/Blocks/Iframe/Edit.jsx b/src/components/manage/Blocks/Iframe/Edit.jsx
new file mode 100644
index 00000000..9a8d92fa
--- /dev/null
+++ b/src/components/manage/Blocks/Iframe/Edit.jsx
@@ -0,0 +1,94 @@
+import React, { useState, useEffect } from 'react';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import _uniqueId from 'lodash/uniqueId';
+import RenderFields from 'volto-addons/Widgets/RenderFields';
+import View from './View';
+import { settings } from '~/config';
+import './style.css';
+
+const getSchema = (props) => {
+ return {
+ url: {
+ title: 'Url',
+ type: 'text',
+ },
+ title: {
+ title: 'Title',
+ type: 'text',
+ },
+ width: {
+ title: 'Width',
+ type: 'text',
+ },
+ height: {
+ title: 'Height',
+ type: 'text',
+ },
+ hideToolbar: {
+ title: 'Hide toolbar',
+ type: 'boolean',
+ },
+ overflow: {
+ title: 'Overflow',
+ type: 'boolean',
+ },
+ queryParameters: {
+ title: 'Query parameters',
+ type: 'schema',
+ fieldSetTitle: 'Query parameters',
+ fieldSetId: 'query_parameters',
+ fieldSetSchema: {
+ fieldsets: [
+ {
+ id: 'default',
+ title: 'title',
+ fields: ['title', 'id', 'queryParam'],
+ },
+ ],
+ properties: {
+ title: {
+ title: 'Title',
+ type: 'text',
+ },
+ id: {
+ title: 'Id',
+ type: 'text',
+ description: 'This will be used as query param key for tableau',
+ },
+ queryParam: {
+ title: 'Query to use',
+ type: 'text',
+ },
+ },
+ required: ['id', 'title', 'key'],
+ },
+ editFieldset: false,
+ deleteFieldset: false,
+ },
+ };
+};
+
+const Edit = (props) => {
+ const [state, setState] = useState({
+ schema: getSchema({ ...props, providerUrl: settings.providerUrl }),
+ id: _uniqueId('block_'),
+ });
+ return (
+
+
+
+
+ );
+};
+
+export default compose(
+ connect((state, props) => ({
+ pathname: state.router.location.pathname,
+ })),
+)(Edit);
diff --git a/src/components/manage/Blocks/Iframe/View.jsx b/src/components/manage/Blocks/Iframe/View.jsx
new file mode 100644
index 00000000..08e49b0f
--- /dev/null
+++ b/src/components/manage/Blocks/Iframe/View.jsx
@@ -0,0 +1,72 @@
+/* REACT */
+import React, { useState, useEffect } from 'react';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import Iframe from 'react-iframe';
+import qs from 'query-string';
+import './style.css';
+
+const View = ({ content, ...props }) => {
+ const [discodataQuery, setDiscodataQuery] = useState({});
+ const { data } = props;
+ const { url = '', title = '', width = '100%', height = 'auto' } = data;
+ const { hideToolbar = false, overflow = false } = data;
+ useEffect(() => {
+ if (props.data.queryParameters?.value) {
+ try {
+ const newDiscodataQuery = {};
+ const properties = JSON.parse(props.data.queryParameters?.value)
+ .properties;
+ properties &&
+ Object.entries(properties).forEach(([key, value]) => {
+ if (props.searhc[value.queryParam]) {
+ newDiscodataQuery[key] = props.search[value.queryParam] || '';
+ }
+ });
+
+ if (
+ JSON.stringify(newDiscodataQuery) !== JSON.stringify(discodataQuery)
+ ) {
+ setDiscodataQuery(newDiscodataQuery);
+ }
+ } catch {
+ setDiscodataQuery({});
+ }
+ }
+ /* eslint-disable-next-line */
+ }, [props.data.queryParameters])
+
+ const getUrl = (url) => {
+ const newUrl = new URL(url);
+ return newUrl.protocol + '//' + newUrl.host + newUrl.pathname;
+ };
+ const applyQueryParameters = (url, query) => {
+ const queryParameters = {
+ ...query,
+ ':toolbar': hideToolbar ? 'n' : 'y',
+ ':embed': 'y',
+ };
+ return `${getUrl(url)}?${qs.stringify(queryParameters)}`;
+ };
+ return (
+
+
+
+ );
+};
+
+export default compose(
+ connect((state, props) => ({
+ query: state.router.location.search,
+ search: state.discodata_query.search,
+ })),
+)(View);
diff --git a/src/components/manage/Blocks/Iframe/style.css b/src/components/manage/Blocks/Iframe/style.css
new file mode 100644
index 00000000..4f0fd308
--- /dev/null
+++ b/src/components/manage/Blocks/Iframe/style.css
@@ -0,0 +1,3 @@
+.embeded-iframe {
+ border: none;
+}
\ No newline at end of file
diff --git a/src/components/manage/Blocks/QueryParamButton/Edit.jsx b/src/components/manage/Blocks/QueryParamButton/Edit.jsx
index 36fce7da..2edcdf3c 100644
--- a/src/components/manage/Blocks/QueryParamButton/Edit.jsx
+++ b/src/components/manage/Blocks/QueryParamButton/Edit.jsx
@@ -13,9 +13,29 @@ const getSchema = (props) => {
type: 'text',
},
page: {
- title: 'Page',
+ title: 'Internal page',
widget: 'object_by_path',
},
+ link: {
+ title: 'Outside link',
+ type: 'text',
+ },
+ linkTarget: {
+ title: 'Link target',
+ type: 'array',
+ choices: [
+ ['_blank', 'New window'],
+ ['_self', 'Current window'],
+ ],
+ },
+ use: {
+ title: 'Use',
+ type: 'array',
+ choices: [
+ ['page', 'Internal page'],
+ ['link', 'Outside link'],
+ ],
+ },
leftText: {
title: 'Left text',
widget: 'textarea',
diff --git a/src/components/manage/Blocks/QueryParamButton/View.jsx b/src/components/manage/Blocks/QueryParamButton/View.jsx
index d46cc65f..791512d4 100644
--- a/src/components/manage/Blocks/QueryParamButton/View.jsx
+++ b/src/components/manage/Blocks/QueryParamButton/View.jsx
@@ -14,11 +14,16 @@ const View = ({ content, ...props }) => {
className = '',
inlineStyle = '',
page = '',
+ link = '',
+ linkTarget = '_self',
+ use = '',
} = data;
- const queryText = props.search[queryParam];
+ const queryText = props.search[queryParam] || '';
const text = `${leftText} ${queryText} ${rightText}`;
+ const hasText = leftText || queryText || rightText;
+
let parsedInlineStyle;
try {
parsedInlineStyle = JSON.parse(inlineStyle);
@@ -27,15 +32,25 @@ const View = ({ content, ...props }) => {
}
return (
-
- {props.mode === 'edit' ? !queryText ?
Query param button
: '' : ''}
- {queryText ? (
+ <>
+ {props.mode === 'edit' && !hasText ?
Query param button
: ''}
+ {hasText ? (
+ >
);
};
diff --git a/src/components/manage/Blocks/QueryParamText/View.jsx b/src/components/manage/Blocks/QueryParamText/View.jsx
index abb8631d..eb0b8a47 100644
--- a/src/components/manage/Blocks/QueryParamText/View.jsx
+++ b/src/components/manage/Blocks/QueryParamText/View.jsx
@@ -44,12 +44,12 @@ const View = ({ content, ...props }) => {
const text = `${leftText} ${queryText} ${rightText}`;
return (
-
+ <>
{props.mode === 'edit' ? !queryText ?
Query param text
: '' : ''}
{components[component]
? components[component](text, isColor(color) ? color : '#000')
: ''}
-
+ >
);
};
diff --git a/src/components/theme/View/DefaultView.jsx b/src/components/theme/View/DefaultView.jsx
index ba56ad65..303f0ba1 100644
--- a/src/components/theme/View/DefaultView.jsx
+++ b/src/components/theme/View/DefaultView.jsx
@@ -35,13 +35,7 @@ const messages = defineMessages({
const DefaultView = ({ content, intl, location }) => {
const blocksFieldname = getBlocksFieldname(content);
const blocksLayoutFieldname = getBlocksLayoutFieldname(content);
- React.useEffect(() => {
- console.log('MOUNTING DEFAULT VIEW');
- return () => {
- console.log('UNMOUNTING DEFAULT VIEW');
- };
- /* eslint-disable-next-line */
- }, [])
+
return hasBlocksData(content) ? (
{map(content[blocksLayoutFieldname].items, (block) => {
diff --git a/src/components/theme/View/RedirectView.jsx b/src/components/theme/View/RedirectView.jsx
index 9d0fb398..b579490a 100644
--- a/src/components/theme/View/RedirectView.jsx
+++ b/src/components/theme/View/RedirectView.jsx
@@ -14,6 +14,7 @@ const RedirectView = (props) => {
setMounted(true);
/* eslint-disable-next-line */
}, [])
+ console.log(mounted, redirect, props.navigation);
if (mounted && !redirect && !props.navigation.loading) {
if (redirectPage) {
const currentPath = getBasePath(currentPage);
@@ -25,7 +26,7 @@ const RedirectView = (props) => {
}
}
return (
-
+
European Environment Agency
);
diff --git a/src/customizations/volto/components/theme/View/View.jsx b/src/customizations/volto/components/theme/View/View.jsx
index aff662e5..7973c408 100644
--- a/src/customizations/volto/components/theme/View/View.jsx
+++ b/src/customizations/volto/components/theme/View/View.jsx
@@ -186,11 +186,24 @@ class View extends Component {
this.props.content[getLayoutFieldname(this.props.content)]
] || null;
- getRenderedView = () =>
- this.props.content?.['@id'] &&
- getBasePath(this.props.content?.['@id']) === this.props.pathname
- ? this.getViewByType() || this.getViewByLayout() || this.getViewDefault()
- : null;
+ getRenderedView = () => {
+ if (this.props.content?.['@id']) {
+ const contentPathname = getBasePath(this.props.content?.['@id']).replace(
+ /\/$/,
+ '',
+ );
+ const pathname = this.props.pathname.replace(/\/$/, '');
+ if (contentPathname === pathname) {
+ return (
+ this.getViewByType() ||
+ this.getViewByLayout() ||
+ this.getViewDefault()
+ );
+ }
+ return null;
+ }
+ return null;
+ };
/**
* Cleans the component displayName (specially for connected components)
diff --git a/src/localconfig.js b/src/localconfig.js
index b21f63d9..e3953a48 100644
--- a/src/localconfig.js
+++ b/src/localconfig.js
@@ -34,6 +34,9 @@ import QueryParamTextView from '~/components/manage/Blocks/QueryParamText/View';
import QueryParamButtonEdit from '~/components/manage/Blocks/QueryParamButton/Edit';
import QueryParamButtonView from '~/components/manage/Blocks/QueryParamButton/View';
+import IframeEdit from '~/components/manage/Blocks/Iframe/Edit';
+import IframeView from '~/components/manage/Blocks/Iframe/View';
+
// import QueryParamButtonEdit from '~/components/manage/Blocks/LinkButton/Edit';
// import QueryParamButtonView from '~/components/manage/Blocks/QueryParamButton/View';
@@ -152,6 +155,15 @@ export function applyConfig(voltoConfig) {
icon: packSVG,
};
+ config.blocks.blocksConfig.eprtr_iframe = {
+ id: 'eprtr_iframe',
+ title: 'Eprtr iframe',
+ group: 'eprtr_blocks',
+ view: IframeView,
+ edit: IframeEdit,
+ icon: packSVG,
+ };
+
config.blocks.blocksConfig.eprtr_openlayers_map_block = {
id: 'eprtr_openlayers_map_block',
title: 'Eprtr openlayers map block',
diff --git a/theme/site/globals/site.overrides b/theme/site/globals/site.overrides
index 97266992..d7a2fa31 100644
--- a/theme/site/globals/site.overrides
+++ b/theme/site/globals/site.overrides
@@ -1368,4 +1368,12 @@ h3 {
b {
font-weight: bold;
-}
\ No newline at end of file
+}
+
+.tox tox-silver-sink tox-tinymce-aux {
+ display: none;
+}
+
+.ui.dimmer.redirect-loader {
+ z-index: -1
+}
diff --git a/yarn.lock b/yarn.lock
index 5c190f45..a8166d8c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2146,6 +2146,13 @@
"@testing-library/dom" "^6.3.0"
"@types/testing-library__react" "^9.1.0"
+"@tinymce/tinymce-react@^3.6.0":
+ version "3.6.0"
+ resolved "https://registry.yarnpkg.com/@tinymce/tinymce-react/-/tinymce-react-3.6.0.tgz#6e33e89b7bb0240c4ffa892a8e1924688f479b4b"
+ integrity sha512-XSyAx9Md9+Ghl3UK0YtBQxaS2dCepqtOKTjYmBS4xTAzSu1UABd44WT84B8CUCd/bdT0fv1Pd51dSbpgJ8713w==
+ dependencies:
+ prop-types "^15.6.2"
+
"@types/anymatch@*":
version "1.3.1"
resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
@@ -14073,6 +14080,13 @@ react-highlight-words@^0.16.0:
memoize-one "^4.0.0"
prop-types "^15.5.8"
+react-iframe@^1.8.0:
+ version "1.8.0"
+ resolved "https://registry.yarnpkg.com/react-iframe/-/react-iframe-1.8.0.tgz#8c78f2c59b894ca5605fa7e45e61e27e57e96091"
+ integrity sha512-NYi89+rEqREwQxW9sDf+akh6/dtwWd3bOjByoVEIQ7SicOxVawRMer3pLdWjFaHXpuxTB9NqobPf/Ohj2iAKkg==
+ dependencies:
+ object-assign "^4.1.1"
+
react-image-gallery@1.0.7:
version "1.0.7"
resolved "https://registry.yarnpkg.com/react-image-gallery/-/react-image-gallery-1.0.7.tgz#75e0d3f995d1475762f80f5a6958b4a9bb88bf97"