forest theme components and customisations

razzle.extend.js

@@ -0,0 +1,15 @@
+const plugins = (defaultPlugins) => {
+  return defaultPlugins;
+};
+const modify = (config, { target, dev }, webpack) => {
+  const themeConfigPath = `${__dirname}/theme/theme.config`;
+  config.resolve.alias['../../theme.config$'] = themeConfigPath;
+  config.resolve.alias['../../theme.config'] = themeConfigPath;
+
+  return config;
+};
+
+module.exports = {
+  plugins,
+  modify,
+};

src/actions/index.js

@@ -0,0 +1,113 @@
+import {
+  GET_FRONTPAGESLIDES,
+  // SET_FOLDER_HEADER,
+  GET_DEFAULT_HEADER_IMAGE,
+  SET_FOLDER_TABS,
+  GET_PARENT_FOLDER_DATA,
+  GET_LOCALNAVIGATION,
+  GET_CHART_DATA_FROM_VISUALIZATION,
+  GET_NAVSITEMAP,
+  SET_CURRENT_VERSION,
+} from '~/constants/ActionTypes';
+
+export function setCurrentVersion(payload) {
+  return {
+    type: SET_CURRENT_VERSION,
+    payload: payload,
+  };
+}
+
+export function getFrontpageSlides() {
+  return {
+    type: GET_FRONTPAGESLIDES,
+    request: {
+      op: 'get',
+      path: `/frontpage_slides?fullobjects`,
+    },
+  };
+}
+
+export function getDefaultHeaderImage() {
+  return {
+    type: GET_DEFAULT_HEADER_IMAGE,
+    request: {
+      op: 'get',
+      path: `/default_header_image?fullobjects`,
+    },
+  };
+}
+
+export function getLocalnavigation(folder) {
+  return {
+    type: GET_LOCALNAVIGATION,
+    request: {
+      op: 'get',
+      path: `${folder}/@localnavigation`,
+    },
+  };
+}
+
+// export function setFolderHeader(payload) {
+//   const actualPayload = {};
+//   for (const key in payload) {
+//     if (payload[key] !== null && payload[key] !== undefined) {
+//       actualPayload[key] = payload[key];
+//     }
+//   }
+
+//   if (Object.keys(actualPayload)) {
+//     return {
+//       type: SET_FOLDER_HEADER,
+//       payload: actualPayload,
+//     };
+//   }
+//   return;
+// }
+
+export function setFolderTabs(payload) {
+  return {
+    type: SET_FOLDER_TABS,
+    payload: payload,
+  };
+}
+
+export function getParentFolderData(url) {
+  return {
+    type: GET_PARENT_FOLDER_DATA,
+    request: {
+      op: 'get',
+      path: `/${url}?fullobjects`,
+    },
+  };
+}
+
+// export function getDataProviders() {
+//   return {
+//     type: GET_DATA_PROVIDERS,
+//     request: {
+//       op: 'get',
+//       path: `/@mosaic-settings`,
+//     },
+//   };
+// }
+
+export function getChartDataFromVisualization(path) {
+  return {
+    type: GET_CHART_DATA_FROM_VISUALIZATION,
+    request: {
+      op: 'get',
+      path,
+    },
+  };
+}
+
+export function getNavSiteMap(url, depth) {
+  // Note: Depth can't be 0 in plone.restapi
+  return {
+    type: GET_NAVSITEMAP,
+    request: {
+      op: 'get',
+      path: `${url}/@navigation?expand.navigation.depth=${depth || 3}`,
+    },
+  };
+}

src/components/index.js

@@ -0,0 +1,11 @@
+/**
+ * Add your components here.
+ * @module components
+ * @example
+ * import Footer from './Footer/Footer';
+ *
+ * export {
+ *   Footer,
+ * };
+ */
+export CountryView from '~/components/theme/CountryView/CountryView';

src/components/manage/Blocks/NavigationBlock/Edit.jsx

@@ -0,0 +1,93 @@
+import React, { useState, useEffect } from 'react';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import _uniqueId from 'lodash/uniqueId';
+import RenderFields from '@eeacms/volto-datablocks/Utils/RenderFields';
+import View from './View';
+import config from '@plone/volto/registry';
+
+const getSchema = (props) => {
+  return {
+    parent: {
+      title: 'Parent page',
+      widget: 'object_by_path',
+    },
+    className: {
+      title: 'Classname',
+      type: 'text',
+    },
+    navFromParent: {
+      title: 'Show navigation from parent',
+      type: 'boolean',
+    },
+    pages: {
+      title: 'Specific pages',
+      type: 'schema',
+      fieldSetTitle: 'specific pages',
+      fieldSetId: 'specific-pages',
+      fieldSetSchema: {
+        fieldsets: [
+          {
+            id: 'default',
+            title: 'Default',
+            fields: ['title', 'url'],
+          },
+        ],
+        properties: {
+          title: {
+            title: 'Title',
+            type: 'text',
+          },
+          url: {
+            title: 'Url',
+            widget: 'text',
+          },
+        },
+        required: ['title', 'url'],
+      },
+      editFieldset: false,
+      deleteFieldset: false,
+    },
+  };
+};
+
+const Edit = (props) => {
+  const [state, setState] = useState({
+    schema: getSchema({ ...props, providerUrl: config.settings.providerUrl }),
+    id: _uniqueId('block_'),
+  });
+  useEffect(() => {
+    setState({
+      ...state,
+      schema: getSchema({
+        ...props,
+      }),
+    });
+    /* eslint-disable-next-line */
+  }, [state.item, props.data.components]);
+  return (
+    <div
+      style={{
+        position: 'relative',
+      }}
+    >
+      <RenderFields schema={state.schema} {...props} title="Navigation block" />
+      <View {...props} id={state.id} mode="edit" />
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          bottom: 0,
+          right: 0,
+        }}
+      ></div>
+    </div>
+  );
+};
+
+export default compose(
+  connect((state, props) => ({
+    pathname: state.router.location.pathname,
+  })),
+)(Edit);

src/components/manage/Blocks/NavigationBlock/View.jsx

@@ -0,0 +1,131 @@
+/* REACT */
+import React, { useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+/* SEMANTIC UI */
+import { Menu } from 'semantic-ui-react';
+/* HELPERS */
+import cx from 'classnames';
+import { isActive, getNavigationByParent, getBasePath } from './helpers';
+import {
+  deleteQueryParam,
+  setQueryParam,
+} from '@eeacms/volto-datablocks/actions';
+import { useEffect } from 'react';
+
+const View = ({ content, ...props }) => {
+  const { data } = props;
+  const [state, setState] = useState({
+    activeItem: '',
+  });
+  const [navigationItems, setNavigationItems] = useState([]);
+  const [pages, setPages] = useState([]);
+  const parent =
+    data?.navFromParent?.value && props.properties?.parent
+      ? getBasePath(props.properties?.parent?.['@id'])
+      : data.parent?.value;
+  const history = useHistory();
+
+  useEffect(() => {
+    const pagesProperties = data.pages?.value
+      ? data.pages?.value?.properties || {}
+      : {};
+    const newPages =
+      Object.keys(pagesProperties).map((page) => pagesProperties[page]) || [];
+    setPages(newPages);
+    setNavigationItems([...(props.navigation?.items || []), ...newPages]);
+  }, [props.navigation, data.pages?.value]);
+
+  if (navigationItems.length < 2 && props.mode !== 'edit') return null;
+  return (props.navigation?.items?.length && parent) || pages.length ? (
+    <div className="tabs-view-menu">
+      <Menu
+        widths={
+          navigationItems.length ||
+          props.navigation?.items?.length ||
+          pages.length
+        }
+        className={
+          props.data.className?.value ? props.data.className.value : ''
+        }
+      >
+        {navigationItems.map((item, index) => {
+          const url = getBasePath(item.url);
+          const name = item.title;
+          if (
+            props.navigation?.items?.filter(
+              (navItem) => navItem.title === item.title,
+            ).length
+          ) {
+            if (isActive(url, props.pathname) && url !== state.activeItem) {
+              setState({
+                ...state,
+                activeItem: url,
+              });
+            } else if (
+              !isActive(url, props.pathname) &&
+              url === state.activeItem
+            ) {
+              setState({
+                ...state,
+                activeItem: '',
+              });
+            }
+          }
+
+          return (
+            <Menu.Item
+              className={cx(
+                index > 0 ? 'sibling-on-left' : '',
+                index < navigationItems.length - 1 ? 'sibling-on-right' : '',
+              )}
+              name={name}
+              key={url}
+              active={
+                state.activeItem
+                  ? state.activeItem === url
+                  : !url
+                  ? isActive(url, props.pathname)
+                  : false
+              }
+              onClick={() => {
+                history.push(`${url}${props.query}`);
+              }}
+            />
+          );
+        })}
+      </Menu>
+    </div>
+  ) : props.mode === 'edit' ? (
+    <p>
+      There are no pages inside of selected page. Make sure you add pages or
+      delete the block
+    </p>
+  ) : (
+    ''
+  );
+};
+
+export default compose(
+  connect(
+    (state, props) => ({
+      query: state.router.location.search,
+      content: state.content.data,
+      pathname: state.router.location.pathname,
+      discodata_query: state.discodata_query,
+      discodata_resources: state.discodata_resources,
+      navItems: state.navigation?.items,
+      flags: state.flags,
+      navigation: props.properties?.parent
+        ? getNavigationByParent(
+            state.navigation?.items,
+            props.data?.navFromParent?.value
+              ? getBasePath(props.properties?.parent?.['@id'])
+              : props.data?.parent?.value,
+          )
+        : {},
+    }),
+    { deleteQueryParam, setQueryParam },
+  ),
+)(View);