@eeacms/volto-n2k 0.1.1

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

@@ -0,0 +1,161 @@
+import React from 'react';
+import { Icon, BlockChooser } from '@plone/volto/components';
+import { blockHasValue } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
+import { Button } from 'semantic-ui-react';
+import includes from 'lodash/includes';
+import isBoolean from 'lodash/isBoolean';
+import { defineMessages, injectIntl } from 'react-intl';
+import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
+import cx from 'classnames';
+
+import dragSVG from '@plone/volto/icons/drag.svg';
+import addSVG from '@plone/volto/icons/circle-plus.svg';
+import trashSVG from '@plone/volto/icons/delete.svg';
+
+const messages = defineMessages({
+  unknownBlock: {
+    id: 'Unknown Block',
+    defaultMessage: 'Unknown Block {block}',
+  },
+  delete: {
+    id: 'delete',
+    defaultMessage: 'delete',
+  },
+});
+
+class EditBlockWrapper extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      addNewBlockOpened: false,
+    };
+  }
+
+  componentDidMount() {
+    document.addEventListener('mousedown', this.handleClickOutside, false);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.handleClickOutside);
+  }
+
+  handleClickOutside = (e) => {
+    if (
+      this.blockNode.current &&
+      doesNodeContainClick(this.blockNode.current, e)
+    ) {
+      return;
+    }
+
+    if (this.state.addNewBlockOpened) {
+      this.setState({
+        addNewBlockOpened: false,
+      });
+      return true;
+    }
+  };
+
+  blockNode = React.createRef();
+
+  render() {
+    const { intl, blockProps, draginfo, extraControls, children } = this.props;
+
+    const {
+      allowedBlocks,
+      block,
+      data,
+      onDeleteBlock,
+      onMutateBlock,
+      selected,
+    } = blockProps;
+    const type = data['@type'];
+    const { disableNewBlocks } = data;
+    const visible = !data.fixed;
+
+    const required = isBoolean(data.required)
+      ? data.required
+      : includes(config.blocks.requiredBlocks, type);
+
+    return (
+      <div ref={this.blockNode} className="block-wrapper">
+        <div
+          ref={draginfo?.innerRef}
+          {...(selected ? draginfo?.draggableProps : null)}
+          className={`block-editor-${data['@type']}`}
+        >
+          {!selected && (
+            <div
+              style={{
+                display: 'none',
+                // keep react-beautiful-dnd happy
+              }}
+              {...draginfo.dragHandleProps}
+            ></div>
+          )}
+          {selected && (
+            <div className="block-toolbar">
+              <div
+                style={{
+                  display: visible ? 'inline-block' : 'none',
+                }}
+                {...draginfo.dragHandleProps}
+                className="drag handle wrapper-column-block"
+              >
+                <Button icon basic title="Drag and drop">
+                  <Icon name={dragSVG} size="19px" />
+                </Button>
+              </div>
+
+              {extraControls}
+
+              {!disableNewBlocks && !blockHasValue(data) && (
+                <Button
+                  icon
+                  basic
+                  title="Add block"
+                  onClick={() => {
+                    this.setState({
+                      addNewBlockOpened: !this.state.addNewBlockOpened,
+                    });
+                  }}
+                  className="column-block-add-button"
+                >
+                  <Icon name={addSVG} className="" size="19px" />
+                </Button>
+              )}
+              {!required && (
+                <Button
+                  icon
+                  basic
+                  title="Remove block"
+                  onClick={() => onDeleteBlock(block)}
+                  className="delete-button-column-block"
+                  aria-label={intl.formatMessage(messages.delete)}
+                >
+                  <Icon name={trashSVG} size="19px" />
+                </Button>
+              )}
+              {this.state.addNewBlockOpened && (
+                <BlockChooser
+                  onMutateBlock={(id, value) => {
+                    this.setState({ addNewBlockOpened: false });
+                    onMutateBlock(id, value);
+                  }}
+                  currentBlock={block}
+                  allowedBlocks={allowedBlocks}
+                />
+              )}
+            </div>
+          )}
+
+          <div className={cx('ui drag block wrapper inner', type)}>
+            {children}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default injectIntl(EditBlockWrapper);

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Grid } from 'semantic-ui-react';
+import { RenderBlocks, UniversalLink } from '@plone/volto/components';
+import DefaultView from './DefalutView';
+import hiker from './images/hiker.webp';
+import { tileProps, getStyle } from './index';
+import './style.less';
+
+const View = (props) => {
+  const { data = {} } = props;
+  const { useDefault = true, tiles = [] } = data;
+  const metadata = props.metadata || props.properties;
+  const blocksData = data?.data || {};
+
+  return useDefault ? (
+    <DefaultView {...props} />
+  ) : (
+    <div className="landing-page-wrapper 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"
+          >
+            <RenderBlocks {...props} metadata={metadata} content={blocksData} />
+          </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>
+  );
+};
+
+export default View;

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

@@ -0,0 +1,104 @@
+import worldSVG from '@plone/volto/icons/world.svg';
+import Edit from './Edit';
+import View from './View';
+import coasts_and_seas from './images/coasts_and_seas.webp';
+import forests from './images/forests.webp';
+import mountains from './images/mountains.webp';
+import grasslands from './images/grasslands.webp';
+import rivers from './images/rivers.webp';
+import islands from './images/islands.webp';
+import peatlands from './images/peatlands.webp';
+import natura2000 from './images/natura2000.webp';
+
+export const tiles = [
+  {
+    image: natura2000,
+    title: 'Natura 2000',
+    description: 'NATURA 2000',
+    link: '/natura2000/natura2000',
+  },
+  {
+    image: coasts_and_seas,
+    title: 'Coasts and seas',
+    description: 'COASTS AND SEAS',
+    link: '/natura2000/:lang/coasts-and-seas',
+  },
+  {
+    image: peatlands,
+    title: 'Peatlands',
+    description: 'PEATLANDS',
+    link: '/natura2000/:lang/peatlands',
+  },
+  {
+    image: forests,
+    title: 'Forests',
+    description: 'FORESTS',
+    link: '/natura2000/:lang/forests',
+  },
+  {
+    image: mountains,
+    title: 'Mountains',
+    description: 'MOUNTAINS',
+    link: '/natura2000/:lang/mountains',
+  },
+  {
+    image: grasslands,
+    title: 'Grasslands',
+    description: 'GRASSLANDS',
+    link: '/natura2000/:lang/grasslands',
+  },
+  {
+    image: rivers,
+    title: 'Rivers and lakes',
+    description: 'RIVERS AND LAKES',
+    link: '/natura2000/:lang/rivers-and-lakes',
+  },
+  {
+    image: islands,
+    title: 'Islands',
+    description: 'ISLANDS',
+    link: '/natura2000/:lang/islands',
+  },
+];
+
+export const tileProps = {
+  mobile: 12,
+  tablet: 12,
+  computer: 6,
+  largeScreen: 6,
+  widescreen: 6,
+};
+
+export const getStyle = (props) => {
+  if (!props.screen) return {};
+  if (!props.screen.width || !props.screen.height) return {};
+  return {
+    minHeight: (
+      props.screen.height - props.screen.browserToolbarHeight
+    ).toPixel(),
+    maxHeight: (
+      props.screen.height - props.screen.browserToolbarHeight
+    ).toPixel(),
+  };
+};
+
+export default (config) => {
+  config.blocks.blocksConfig.landing_block = {
+    id: 'landing_block',
+    title: 'Landing block',
+    icon: worldSVG,
+    group: 'natura_2000',
+    edit: Edit,
+    view: View,
+    restricted: false,
+    mostUsed: false,
+    sidebarTab: 1,
+    blocks: {},
+    security: {
+      addPermission: [],
+      view: [],
+    },
+    blockHasOwnFocusManagement: true,
+  };
+  return config;
+};

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

@@ -0,0 +1,62 @@
+const tileSchema = () => ({
+  title: 'Tile',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['title', 'description', 'link', 'image', 'copyright'],
+    },
+  ],
+
+  properties: {
+    title: {
+      title: 'Title',
+      type: 'text',
+    },
+    description: {
+      title: 'Description',
+      type: 'text',
+    },
+    link: {
+      title: 'Link',
+      widget: 'object_by_path',
+    },
+    image: {
+      title: 'Image',
+      widget: 'object_by_path',
+    },
+    copyright: {
+      title: 'Copyright',
+      type: 'text',
+    },
+  },
+
+  required: ['attachedimage'],
+});
+
+const getSchema = () => ({
+  title: 'Landing block',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['useDefault', 'tiles'],
+    },
+  ],
+  properties: {
+    useDefault: {
+      title: 'Use default tiles',
+      type: 'boolean',
+      default: true,
+    },
+    tiles: {
+      title: 'Tiles',
+      widget: 'object_list_inline',
+      description: 'Add a list of tiles',
+      schema: tileSchema(),
+    },
+  },
+  required: [],
+});
+
+export default getSchema;

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

@@ -0,0 +1,174 @@
+@import (multiple, reference, optional) '../../theme.config';
+@type: extra;
+@element: custom;
+
+div#view .ui.container > {
+  .landing-page-wrapper {
+    margin-bottom: 0;
+  }
+}
+
+.landing-page-wrapper {
+  position: relative;
+  padding-top: 4rem;
+  background-image: url('./images/background.webp');
+  background-repeat: no-repeat;
+  background-size: cover;
+
+  &:not(.edit) {
+    overflow-y: hidden;
+
+    .ui.grid.landing-page {
+      overflow-y: auto;
+    }
+  }
+
+  .ui.grid.landing-page {
+    z-index: 1;
+    max-height: inherit;
+
+    /* Hide scrollbar for IE, Edge and Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+
+    > .row {
+      z-index: 1;
+      justify-content: space-between;
+      padding-bottom: 5rem;
+    }
+
+    /* Hide scrollbar for Chrome, Safari and Opera */
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .landing-page-description {
+      margin-bottom: 3rem;
+      color: #fff;
+
+      p {
+        font-size: 20px;
+        font-weight: 600;
+      }
+    }
+  }
+
+  .landing-page-tiles {
+    a:hover {
+      opacity: 0.9;
+    }
+
+    a:active {
+      opacity: 1;
+    }
+
+    .item a {
+      display: flex;
+      flex-flow: column;
+    }
+
+    .item img.image {
+      width: 100%;
+      // max-width: 200px;
+    }
+
+    .item p.description {
+      position: relative;
+      margin-top: 1rem;
+      color: #fff;
+      font-size: 0.9em;
+      font-weight: bold;
+    }
+
+    .column {
+      text-align: center;
+    }
+  }
+
+  .block-toolbar {
+    position: absolute;
+    z-index: 3;
+    left: -9px;
+    display: flex;
+    padding: 5px;
+    border: none;
+    border: 1px solid #78c0d7bf;
+    border-bottom: 1px solid #fff;
+    margin-top: -45px;
+    background-color: #fff;
+
+    .ui.basic.button {
+      padding: 3px;
+      padding-right: 0;
+    }
+
+    .wrapper-column-block {
+      > .ui.basic.button {
+        &:hover {
+          background-color: transparent !important;
+        }
+      }
+    }
+
+    > .ui.basic.button {
+      &:hover {
+        background-color: transparent !important;
+      }
+
+      svg {
+        color: #134448;
+      }
+    }
+
+    .drag.handle.wrapper-column-block {
+      position: initial;
+      left: initial;
+      min-height: 1em;
+      margin-left: initial !important;
+      font-size: 1rem;
+      line-height: 1em;
+      vertical-align: baseline;
+    }
+  }
+
+  .blocks-chooser {
+    left: 0;
+    margin-top: 50px;
+  }
+
+  .block {
+    .block-add-button,
+    .delete-button {
+      display: none;
+    }
+  }
+
+  .slick-image {
+    z-index: 0 !important;
+    pointer-events: none;
+  }
+}
+
+// @media only screen and (max-width: @largeMonitorBreakpoint + @offset) {
+//   .natura2000-theme {
+//     .landing-page-wrapper {
+//       .ui.grid.landing-page {
+//         > .row {
+//           justify-content: flex-end;
+//         }
+//       }
+//     }
+//   }
+// }
+
+@media only screen and (max-width: @largestTabletScreen) {
+  .natura2000-theme {
+    .landing-page-wrapper {
+      .ui.grid.landing-page {
+        > .row {
+          justify-content: flex-end;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Grid } from 'semantic-ui-react';
+import './style.less';
+
+const View = (props) => {
+  const { data = {} } = props;
+  const provider_data = props.provider_data || {};
+  const columns = provider_data[Object.keys(provider_data)?.[0]]?.length || 0;
+
+  return (
+    <div className="connected-list">
+      {props.mode === 'edit' ? <p>Connected list</p> : ''}
+      <Grid columns={data.grid_size}>
+        <Grid.Row>
+          {Array(Math.max(0, columns))
+            .fill()
+            .map((_, column) => (
+              <Grid.Column key={`connected-list-${column}`}>
+                {(data.labeled ?? true) && data.label ? (
+                  <p className="label">{provider_data[data.label][column]}</p>
+                ) : (
+                  ''
+                )}
+                {data.value ? (
+                  <p className="value">{provider_data[data.value][column]}</p>
+                ) : (
+                  ''
+                )}
+              </Grid.Column>
+            ))}
+        </Grid.Row>
+      </Grid>
+    </div>
+  );
+};
+
+export default View;

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

@@ -0,0 +1,17 @@
+import ListView from './View';
+import getSchema from './schema';
+
+export default (config) => {
+  config.blocks.blocksConfig.custom_connected_block = {
+    ...config.blocks.blocksConfig.custom_connected_block,
+    blocks: {
+      ...config.blocks.blocksConfig.custom_connected_block.blocks,
+      list: {
+        view: ListView,
+        getSchema: getSchema,
+        title: 'List',
+      },
+    },
+  };
+  return config;
+};

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

@@ -0,0 +1,49 @@
+const getSchema = (props) => {
+  const data = props.provider_data || {};
+  const choices = Object.keys(data).map((key) => [key, key]);
+
+  return {
+    title: 'List',
+
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: [
+          'labeled',
+          'value',
+          ...(props.data.labeled ?? true ? ['label'] : []),
+          'grid_size',
+        ],
+      },
+    ],
+
+    properties: {
+      labeled: {
+        title: 'Has label',
+        type: 'boolean',
+        default: true,
+      },
+      value: {
+        title: 'Value',
+        type: 'array',
+        choices,
+      },
+      label: {
+        title: 'Label',
+        type: 'array',
+        choices,
+      },
+      grid_size: {
+        title: 'Grid size',
+        widget: 'number',
+        min: 0,
+        max: 12,
+      },
+    },
+
+    required: [],
+  };
+};
+
+export default getSchema;