@eeacms/volto-n2k 0.1.1

package/src/components/manage/Blocks/HabitatsBanner/style.less

@@ -0,0 +1,49 @@
+div#view .habitat-banner-details .ui.container > * {
+  margin-bottom: 0;
+}
+
+.habitat-banner-details {
+  padding: 1.5em 0;
+  background-color: #04a77d;
+  color: #fff;
+  font-family: 'RajdhaniB';
+
+  .habitat-details {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+
+    @media only screen and (max-width: 765px) {
+      flex-flow: column;
+
+      .habitat-metadata {
+        margin-bottom: 1rem;
+      }
+    }
+
+    .habitat-metadata {
+      .name {
+        margin-top: 0.5em !important;
+        margin-bottom: 0 !important;
+        color: #fff;
+        font-family: inherit;
+        font-size: 54px;
+        line-height: 54px;
+        text-transform: uppercase;
+      }
+
+      .info {
+        font-family: 'RajdhaniR';
+        font-size: 18px;
+        font-weight: 600;
+        line-height: 18px;
+      }
+    }
+
+    img {
+      max-height: 200px;
+      border-radius: 10px;
+      filter: drop-shadow(-2px 2px 3px rgba(0, 0, 0, 0.4));
+    }
+  }
+}

package/src/components/manage/Blocks/ImageText/Edit.jsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import config from '@plone/volto/registry';
+import { SidebarPortal } from '@plone/volto/components';
+import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
+import SlateEditor from 'volto-slate/editor/SlateEditor';
+import { Editor } from 'volto-slate/utils';
+import getSchema from './schema';
+import cx from 'classnames';
+import './styles.less';
+
+const createParagraph = (text) => {
+  return {
+    children: [{ text }],
+  };
+};
+
+const Edit = (props) => {
+  const { data = {}, selected = false } = props;
+  const schema = getSchema();
+  const value = { children: data.value || [], isVoid: Editor.isVoid };
+  const valueUndefined =
+    !value.children.length || Editor.string(value, []) === '';
+
+  const handleKeyDown = (e, index, { disableEnter = false } = {}) => {
+    if (e.key === 'Enter' && !e.shiftKey && !disableEnter) {
+      props.onAddBlock(config.settings.defaultBlockType, index + 1);
+      e.preventDefault();
+    }
+  };
+
+  return (
+    <div
+      className={cx('image-text edit', data.theme || 'light')}
+      role="presentation"
+      onKeyDown={(e) => {
+        handleKeyDown(e, props.index);
+      }}
+      // The tabIndex is required for the keyboard navigation
+      /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
+      tabIndex={-1}
+    >
+      {data.image ? (
+        <p
+          className={cx('p-image', {
+            'with-border': data.hasBorder ?? true,
+            'rounded-border': data.rounded ?? true,
+          })}
+        >
+          <img
+            src={`${data.image}/@@images/image`}
+            alt={data.imageTitle}
+            style={
+              data.imageSize
+                ? {
+                    width: `${data.imageSize}px`,
+                    height: `${data.imageSize}px`,
+                  }
+                : {}
+            }
+          />
+        </p>
+      ) : (
+        ''
+      )}
+      <SlateEditor
+        id={`image-text-${props.id}`}
+        name={`image-text-${props.id}`}
+        value={valueUndefined ? [createParagraph('')] : value.children}
+        onChange={(value) => {
+          props.onChangeBlock(props.block, {
+            ...data,
+            value,
+          });
+        }}
+        block={null}
+        renderExtensions={[]}
+        selected={true}
+        properties={props.metadata}
+        placeholder="Enter some rich text..."
+      />
+      <SidebarPortal selected={selected}>
+        <InlineForm
+          schema={schema}
+          title={schema.title}
+          onChangeField={(id, value) => {
+            props.onChangeBlock(props.block, {
+              ...props.data,
+              [id]: value,
+            });
+          }}
+          formData={props.data}
+        />
+      </SidebarPortal>
+    </div>
+  );
+};
+
+export default Edit;

package/src/components/manage/Blocks/ImageText/View.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { UniversalLink } from '@plone/volto/components';
+import { serializeNodes } from 'volto-slate/editor/render';
+import { Editor } from 'volto-slate/utils';
+import cx from 'classnames';
+import './styles.less';
+
+const View = (props) => {
+  const { data = {} } = props;
+  const value = { children: data.value || [], isVoid: Editor.isVoid };
+  const valueUndefined =
+    !value.children.length || Editor.string(value, []) === '';
+
+  const ImageText = () => {
+    return (
+      <>
+        {data.image ? (
+          <p
+            className={cx('p-image', {
+              'with-border': data.hasBorder ?? true,
+              'rounded-border': data.rounded ?? true,
+            })}
+          >
+            <img
+              src={`${data.image}/@@images/image/mini`}
+              alt={data.imageTitle}
+              style={
+                data.imageSize
+                  ? {
+                      width: `${data.imageSize}px`,
+                      height: `${data.imageSize}px`,
+                    }
+                  : {}
+              }
+            />
+          </p>
+        ) : (
+          ''
+        )}
+
+        {!valueUndefined ? (
+          <div className="text-wrapper">{serializeNodes(value.children)}</div>
+        ) : (
+          ''
+        )}
+      </>
+    );
+  };
+
+  return data.href ? (
+    <UniversalLink
+      className={cx('image-text view', data.theme || 'light')}
+      href={data.href || '/'}
+      openLinkInNewTab={data.target === '_blank'}
+      title={data.linkTitle}
+    >
+      <ImageText />
+    </UniversalLink>
+  ) : (
+    <div className={cx('image-text view', data.theme || 'light')}>
+      <ImageText />
+    </div>
+  );
+};
+
+export default View;

package/src/components/manage/Blocks/ImageText/index.js

@@ -0,0 +1,24 @@
+import ImageTextEdit from './Edit';
+import ImageTextView from './View';
+import worldSVG from '@plone/volto/icons/world.svg';
+
+export default (config) => {
+  config.blocks.blocksConfig.image_text = {
+    id: 'image_text',
+    title: 'Image text',
+    icon: worldSVG,
+    group: 'natura_2000',
+    edit: ImageTextEdit,
+    view: ImageTextView,
+    restricted: false,
+    mostUsed: false,
+    sidebarTab: 1,
+    blockHasOwnFocusManagement: true,
+    blocks: {},
+    security: {
+      addPermission: [],
+      view: [],
+    },
+  };
+  return config;
+};

package/src/components/manage/Blocks/ImageText/schema.js

@@ -0,0 +1,69 @@
+export default () => ({
+  title: 'Image text',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['theme', 'hasBorder', 'rounded'],
+    },
+    {
+      id: 'image',
+      title: 'Image',
+      fields: ['image', 'imageSize', 'imageTitle'],
+    },
+    {
+      id: 'link',
+      title: 'Link',
+      fields: ['linkTitle', 'href', 'target'],
+    },
+  ],
+  properties: {
+    theme: {
+      title: 'Theme',
+      type: 'array',
+      choices: [
+        ['light', 'Light'],
+        ['grey', 'Grey'],
+        ['dark', 'Dark'],
+      ],
+      default: 'light',
+    },
+    hasBorder: {
+      title: 'With border',
+      type: 'boolean',
+      default: true,
+    },
+    rounded: {
+      title: 'Rounded',
+      type: 'boolean',
+      default: true,
+    },
+    image: {
+      title: 'Image',
+      widget: 'object_by_path',
+    },
+    imageSize: {
+      title: 'Size',
+      type: 'number',
+    },
+    imageTitle: {
+      title: 'Title',
+    },
+    linkTitle: {
+      title: 'Title',
+    },
+    href: {
+      title: 'Url',
+      widget: 'textarea',
+    },
+    target: {
+      title: 'Target',
+      choices: [
+        ['_blank', 'New tab'],
+        ['_self', 'Same tab'],
+      ],
+      defaultValue: '_self',
+    },
+  },
+  required: [],
+});

package/src/components/manage/Blocks/ImageText/styles.less

@@ -0,0 +1,87 @@
+a.image-text:hover {
+  opacity: 0.9;
+}
+
+.image-text {
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  margin-bottom: 1rem;
+
+  .slate-editor {
+    width: 100%;
+  }
+
+  &.light {
+    .p-image.with-border img {
+      border: 1px solid #fff;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    p,
+    span {
+      color: #fff;
+    }
+  }
+
+  &.grey {
+    .p-image.with-border img {
+      border: 1px solid #c9c9c9;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    p,
+    span {
+      color: #c9c9c9;
+    }
+  }
+
+  &.dark {
+    .p-image.with-border img {
+      border: 1px solid #000;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    p,
+    span {
+      color: #000;
+    }
+  }
+
+  .p-image {
+    margin-bottom: 0 !important;
+
+    a {
+      display: block;
+    }
+
+    img {
+      width: 130px;
+      height: 130px;
+      padding: 6px;
+      margin-right: 1rem;
+      margin-bottom: 0;
+    }
+  }
+
+  .p-image.rounded-border {
+    border-radius: 50%;
+
+    img {
+      border-radius: 50%;
+    }
+  }
+
+  .p-image.with-border {
+    margin: 0 0.5rem;
+  }
+}

package/src/components/manage/Blocks/Landing/DefalutView.jsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { generatePath } from 'react-router';
+import { Grid } from 'semantic-ui-react';
+import { UniversalLink } from '@plone/volto/components';
+import { withLocalStorage } from '@eeacms/volto-n2k/hocs';
+import hiker from './images/hiker.webp';
+import { tiles, tileProps, getStyle } from './index';
+
+const DefaultView = (props) => {
+  const currentLang = props.localStorage.get('N2K_LANGUAGE');
+
+  return (
+    <>
+      <div
+        className="landing-page-wrapper default full-width"
+        style={getStyle(props)}
+      >
+        <Grid className="landing-page" container columns="12">
+          <Grid.Row>
+            <Grid.Column
+              className="landing-page-description"
+              widescreen="6"
+              largeScreen="6"
+              computer="6"
+              tablet="12"
+              mobile="12"
+            >
+              <p>
+                DISCOVER EUROPE'S NATURE WITH ITS STUNNING DIVERSITY OF WILD
+                PLANTS, ANIMALS AND LANDSCAPES, MANY OF WHICH ARE FOUND NOWHERE
+                ELSE IN THE WORLD.
+              </p>
+              <p>
+                WELCOME TO <strong>NATURA 2000</strong>, THE EUROPEAN NETWORK OF
+                PROTECTED NATURAL AREAS.
+              </p>
+            </Grid.Column>
+            <Grid.Column
+              className="landing-page-tiles"
+              widescreen="6"
+              largeScreen="6"
+              computer="6"
+              tablet="5"
+              mobile="7"
+            >
+              <Grid style={{ justifyContent: 'space-around' }}>
+                {currentLang
+                  ? tiles.map((item, index) => {
+                      const link = generatePath(item.link, {
+                        lang: currentLang,
+                      });
+                      return (
+                        <Grid.Column
+                          key={`item-${index}`}
+                          className="item"
+                          {...tileProps}
+                        >
+                          <UniversalLink href={link || '#'} title={item.title}>
+                            <img
+                              className="image"
+                              src={item.image}
+                              alt={item.title}
+                            />
+                            <p className="description">{item.description}</p>
+                          </UniversalLink>
+                        </Grid.Column>
+                      );
+                    })
+                  : ''}
+              </Grid>
+            </Grid.Column>
+          </Grid.Row>
+        </Grid>
+        <img className="slick-image" src={hiker} alt="Hiker" />
+      </div>
+    </>
+  );
+};
+
+export default connect((state) => ({
+  screen: state.screen,
+}))(withLocalStorage(DefaultView));

package/src/components/manage/Blocks/Landing/Edit.jsx

@@ -0,0 +1,219 @@
+import React from 'react';
+import { Grid, Button } from 'semantic-ui-react';
+import { isEmpty } from 'lodash';
+import EditBlockWrapper from './EditBlockWrapper';
+import { BlocksForm, Icon } from '@plone/volto/components';
+import { emptyBlocksForm } from '@plone/volto/helpers';
+import { SidebarPortal, UniversalLink } from '@plone/volto/components';
+import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
+import config from '@plone/volto/registry';
+import settingsSVG from '@plone/volto/icons/settings.svg';
+import DefaultView from './DefalutView';
+import getSchema from './schema';
+import hiker from './images/hiker.webp';
+import { tileProps, getStyle } from './index';
+import './style.less';
+
+const Edit = (props) => {
+  const schema = getSchema();
+  const blocksState = React.useRef({});
+  const [activeBlock, setActiveBlock] = React.useState(null);
+  const {
+    block = null,
+    data = {},
+    manage = false,
+    selected = false,
+    onChangeBlock = () => {},
+  } = props;
+  const { useDefault = true, tiles = [] } = data;
+  const metadata = props.metadata || props.properties;
+  const blocksData = data?.data || emptyBlocksForm();
+
+  React.useEffect(() => {
+    if (isEmpty(data?.data)) {
+      onChangeBlock(block, {
+        ...data,
+        data: {
+          ...blocksData,
+        },
+      });
+    }
+    /* eslint-disable-next-line */
+  }, []);
+
+  const handleKeyDown = (
+    e,
+    index,
+    block,
+    node,
+    {
+      disableEnter = false,
+      disableArrowUp = false,
+      disableArrowDown = false,
+    } = {},
+  ) => {
+    if (e.key === 'ArrowUp' && !disableArrowUp && !activeBlock) {
+      props.onFocusPreviousBlock(block, node);
+      e.preventDefault();
+    }
+    if (e.key === 'ArrowDown' && !disableArrowDown && !activeBlock) {
+      props.onFocusNextBlock(block, node);
+      e.preventDefault();
+    }
+    if (e.key === 'Enter' && !disableEnter && !activeBlock) {
+      props.onAddBlock(config.settings.defaultBlockType, index + 1);
+      e.preventDefault();
+    }
+  };
+
+  const onChangeField = (id, value) => {
+    // special handling of blocks and blocks_layout
+    if (['blocks', 'blocks_layout'].indexOf(id) > -1) {
+      blocksState.current[id] = value;
+      onChangeBlock(block, {
+        ...data,
+        data: {
+          ...(data?.data || {}),
+          ...blocksState.current,
+        },
+      });
+    }
+  };
+
+  return (
+    <>
+      {useDefault ? (
+        <DefaultView {...props} />
+      ) : (
+        <div
+          className="landing-page-wrapper full-width edit"
+          style={getStyle(props)}
+          role="presentation"
+          onKeyDown={(e) => {
+            handleKeyDown(e, props.index, props.block, props.blockNode.current);
+          }}
+          // The tabIndex is required for the keyboard navigation
+          /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
+          tabIndex={-1}
+        >
+          <Grid className="landing-page" container columns="12">
+            <Grid.Row>
+              <Grid.Column
+                className="landing-page-description"
+                widescreen="6"
+                largeScreen="6"
+                computer="6"
+                tablet="12"
+                mobile="12"
+              >
+                <BlocksForm
+                  allowedBlocks={data?.allowedBlocks}
+                  description={data?.instrunctions?.data}
+                  manage={manage}
+                  metadata={metadata}
+                  pathname={props.pathname}
+                  properties={blocksData}
+                  selected={selected}
+                  selectedBlock={selected && activeBlock ? activeBlock : null}
+                  title={data?.placeholder}
+                  onChangeField={onChangeField}
+                  onChangeFormData={(newFormData) => {
+                    onChangeBlock(block, {
+                      ...data,
+                      data: {
+                        ...(data?.data || {}),
+                        ...(newFormData.blocks_layout.items.length > 0
+                          ? newFormData
+                          : emptyBlocksForm()),
+                      },
+                    });
+                  }}
+                  onSelectBlock={(id) => {
+                    if (activeBlock !== id) {
+                      setActiveBlock(id);
+                    }
+                  }}
+                >
+                  {({ draginfo }, editBlock, blockProps) => {
+                    return (
+                      <EditBlockWrapper
+                        blockProps={blockProps}
+                        draginfo={draginfo}
+                        extraControls={
+                          <>
+                            <>
+                              <Button
+                                icon
+                                basic
+                                title="Settings"
+                                onClick={() => {
+                                  setActiveBlock(null);
+                                }}
+                              >
+                                <Icon
+                                  name={settingsSVG}
+                                  className=""
+                                  size="19px"
+                                />
+                              </Button>
+                            </>
+                          </>
+                        }
+                      >
+                        {editBlock}
+                      </EditBlockWrapper>
+                    );
+                  }}
+                </BlocksForm>
+              </Grid.Column>
+              <Grid.Column
+                className="landing-page-tiles"
+                widescreen="6"
+                largeScreen="6"
+                computer="6"
+                tablet="5"
+                mobile="7"
+              >
+                <Grid style={{ justifyContent: 'space-around' }}>
+                  {tiles.map((item, index) => (
+                    <Grid.Column
+                      key={`item-${index}`}
+                      className="item"
+                      {...tileProps}
+                    >
+                      <UniversalLink href={item.link || '#'} title={item.title}>
+                        <img
+                          className="image"
+                          src={`${item.image}/@@images/image`}
+                          alt={item.title}
+                        />
+                        <p className="description">{item.description}</p>
+                      </UniversalLink>
+                    </Grid.Column>
+                  ))}
+                </Grid>
+              </Grid.Column>
+            </Grid.Row>
+          </Grid>
+          <img className="slick-image" src={hiker} alt="Hiker" />
+        </div>
+      )}
+
+      <SidebarPortal selected={props.selected}>
+        <InlineForm
+          schema={schema}
+          title={schema.title}
+          onChangeField={(id, value) => {
+            onChangeBlock(props.block, {
+              ...props.data,
+              [id]: value,
+            });
+          }}
+          formData={props.data}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default Edit;