Fixed blocks

eea · Sep 3, 2020 · c559424 · c559424
1 parent ea45091
commit c559424
Show file tree

Hide file tree

Showing 9 changed files with 106 additions and 13 deletions.
diff --git a/src/components/manage/Blocks/DetailedLink/View.jsx b/src/components/manage/Blocks/DetailedLink/View.jsx
@@ -63,7 +63,7 @@ const View = (props) => {
               onClick={(e) => e.preventDefault}
               to={getPath(detailedLink.path)}
             >
-              {buttonTitle || detailedLink.title || 'Go'}
+              <span>{buttonTitle || detailedLink.title || 'Go'}</span>
             </Link>
           </div>
         </>

diff --git a/src/components/manage/Blocks/Iframe/View.jsx b/src/components/manage/Blocks/Iframe/View.jsx
@@ -36,17 +36,37 @@ const View = ({ content, ...props }) => {
     /* eslint-disable-next-line */
   }, [props.data.queryParameters])
 
+  useEffect(() => {
+    try {
+      new URL(url);
+      const newUrl = getUrl(url);
+      if (props.mode === 'edit' && url !== newUrl) {
+        props.onChangeBlock(props.block, {
+          ...props.data,
+          url: newUrl,
+        });
+      }
+    } catch {}
+
+    /* eslint-disable-next-line */
+  }, [url])
+
   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)}`;
+    try {
+      new URL(url);
+      const queryParameters = {
+        ...query,
+        ':toolbar': hideToolbar ? 'n' : 'y',
+        ':embed': 'y',
+      };
+      return `${getUrl(url)}?${qs.stringify(queryParameters)}`;
+    } catch {
+      return '';
+    }
   };
   return (
     <div>
@@ -59,6 +79,7 @@ const View = ({ content, ...props }) => {
         display="initial"
         position="relative"
         overflow={overflow ? 'visible' : 'hidden'}
+        scrolling={false}
       />
     </div>
   );

diff --git a/src/components/manage/Blocks/QueryParamButton/Edit.jsx b/src/components/manage/Blocks/QueryParamButton/Edit.jsx
@@ -36,6 +36,14 @@ const getSchema = (props) => {
         ['link', 'Outside link'],
       ],
     },
+    visible: {
+      title: 'Visible when',
+      type: 'array',
+      choices: [
+        ['hasQuery', 'Query parameter exists'],
+        ['always', 'Always'],
+      ],
+    },
     leftText: {
       title: 'Left text',
       widget: 'textarea',

diff --git a/src/components/manage/Blocks/QueryParamButton/View.jsx b/src/components/manage/Blocks/QueryParamButton/View.jsx
@@ -17,14 +17,19 @@ const View = ({ content, ...props }) => {
     link = '',
     linkTarget = '_self',
     use = '',
+    visible = 'always',
   } = data;
   const queryText = props.search[queryParam] || '';
 
   const text = `${leftText} ${queryText} ${rightText}`;
 
   const hasText = leftText || queryText || rightText;
 
+  const buttonMayRender =
+    (visible === 'always' && hasText) || (visible === 'hasQuery' && queryText);
+
   let parsedInlineStyle;
+
   try {
     parsedInlineStyle = JSON.parse(inlineStyle);
   } catch {
@@ -33,8 +38,12 @@ const View = ({ content, ...props }) => {
 
   return (
     <>
-      {props.mode === 'edit' && !hasText ? <p>Query param button</p> : ''}
-      {hasText ? (
+      {props.mode === 'edit' && !buttonMayRender ? (
+        <p>Query param button</p>
+      ) : (
+        ''
+      )}
+      {buttonMayRender ? (
         <button
           className={className}
           style={parsedInlineStyle}

diff --git a/src/components/manage/Blocks/QueryParamText/Edit.jsx b/src/components/manage/Blocks/QueryParamText/Edit.jsx
@@ -12,6 +12,14 @@ const getSchema = (props) => {
       title: 'Query parameter',
       type: 'text',
     },
+    visible: {
+      title: 'Visible when',
+      type: 'array',
+      choices: [
+        ['hasQuery', 'Query parameter exists'],
+        ['always', 'Always'],
+      ],
+    },
     leftText: {
       title: 'Left text',
       widget: 'textarea',

diff --git a/src/components/manage/Blocks/QueryParamText/View.jsx b/src/components/manage/Blocks/QueryParamText/View.jsx
@@ -33,20 +33,35 @@ const components = {
 const View = ({ content, ...props }) => {
   const { data } = props;
   const {
+    visible = 'always',
     component = 'h1',
     queryParam = '',
     leftText = '',
     rightText = '',
     color = '#000',
   } = data;
+
   const queryText = props.search[queryParam] || '';
 
   const text = `${leftText} ${queryText} ${rightText}`;
 
+  const hasText = leftText || queryText || rightText;
+
+  const textMayRender =
+    (visible === 'always' && hasText) || (visible === 'hasQuery' && queryText);
+
   return (
     <>
-      {props.mode === 'edit' ? !queryText ? <p>Query param text</p> : '' : ''}
-      {components[component]
+      {props.mode === 'edit' ? (
+        !textMayRender ? (
+          <p>Query param text</p>
+        ) : (
+          ''
+        )
+      ) : (
+        ''
+      )}
+      {textMayRender && components[component]
         ? components[component](text, isColor(color) ? color : '#000')
         : ''}
     </>

diff --git a/src/components/theme/View/RedirectView.jsx b/src/components/theme/View/RedirectView.jsx
@@ -14,7 +14,6 @@ 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);

diff --git a/src/customizations/volto/components/theme/Navigation/Navigation.jsx b/src/customizations/volto/components/theme/Navigation/Navigation.jsx
@@ -15,6 +15,7 @@ import { getBaseUrl } from '@plone/volto/helpers';
 import { settings } from '~/config';
 
 import { getNavigation } from '@plone/volto/actions';
+import { resetQueryParam } from 'volto-datablocks/actions';
 
 const messages = defineMessages({
   closeMobileMenu: {
@@ -171,6 +172,14 @@ class Navigation extends Component {
               key={item.url}
               className="item"
               activeClassName="active"
+              onClick={() => {
+                if (
+                  !item.url.includes('/industrial-site') &&
+                  !item.url.includes('/analysis')
+                ) {
+                  this.props.resetQueryParam();
+                }
+              }}
               exact={
                 settings.isMultilingual
                   ? item.url === `/${lang}`
@@ -192,7 +201,8 @@ export default compose(
     (state) => ({
       items: state.navigation.items,
       lang: state.intl.locale,
+      discodata_query: state.discodata_query,
     }),
-    { getNavigation },
+    { getNavigation, resetQueryParam },
   ),
 )(Navigation);
diff --git a/theme/site/globals/site.overrides b/theme/site/globals/site.overrides
@@ -1019,6 +1019,29 @@ button.outline,
   }
 }
 
+a.back,
+button.back {
+  font-weight: bold;
+  display: inline-flex;
+  align-items: center;
+  border: none !important;
+  &.red {
+    color: #EC776A !important;
+  }
+  &.dark-blue {
+    color: #32536B !important;
+  }
+  padding: 0 !important;
+  &:before {
+    content: '\21E6';
+    font-size: 2em;
+    font-weight: bold;
+  }
+  span {
+    margin-left: 4px;
+  }
+}
+
 .bold {
   font-weight: bold;
 }