@kitconcept/volto-light-theme 1.0.1 → 2.1.0

package/src/components/Navigation/Navigation.jsx

@@ -1,199 +1,215 @@
 // SemanticUI-free pre-@plone/components
-import React, { Component } from 'react';
+
+import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { defineMessages, injectIntl } from 'react-intl';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import { NavLink } from 'react-router-dom';
+import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
+import { useIntl, defineMessages, injectIntl } from 'react-intl';
 import cx from 'classnames';
-import { BodyClass, getBaseUrl, hasApiExpander } from '@plone/volto/helpers';
+import { getBaseUrl, hasApiExpander } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
+
 import { getNavigation } from '@plone/volto/actions';
-import { CSSTransition } from 'react-transition-group';
-import NavItems from '@plone/volto/components/theme/Navigation/NavItems';
+import { Icon } from '@plone/volto/components';
+import clearSVG from '@plone/volto/icons/clear.svg';
+import NavItem from '@plone/volto/components/theme/Navigation/NavItem';
 
 const messages = defineMessages({
-  closeMobileMenu: {
+  closeMenu: {
     id: 'Close menu',
     defaultMessage: 'Close menu',
   },
-  openMobileMenu: {
-    id: 'Open menu',
-    defaultMessage: 'Open menu',
-  },
 });
 
-/**
- * Navigation container class.
- * @class Navigation
- * @extends Component
- */
-class Navigation extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    getNavigation: PropTypes.func.isRequired,
-    pathname: PropTypes.string.isRequired,
-    items: PropTypes.arrayOf(
-      PropTypes.shape({
-        title: PropTypes.string,
-        url: PropTypes.string,
-      }),
-    ).isRequired,
-    lang: PropTypes.string.isRequired,
-  };
+const Navigation = ({ pathname }) => {
+  const [desktopMenuOpen, setDesktopMenuOpen] = useState(null);
+  const [currentOpenIndex, setCurrentOpenIndex] = useState(null);
+  const navigation = useRef(null);
+  const dispatch = useDispatch();
+  const intl = useIntl();
+  const enableFatMenu = config.settings.enableFatMenu;
 
-  static defaultProps = {
-    token: null,
-  };
+  const lang = useSelector((state) => state.intl.locale);
+  const token = useSelector((state) => state.userSession.token, shallowEqual);
+  const items = useSelector((state) => state.navigation.items, shallowEqual);
 
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs Navigation
-   */
-  constructor(props) {
-    super(props);
-    this.toggleMobileMenu = this.toggleMobileMenu.bind(this);
-    this.closeMobileMenu = this.closeMobileMenu.bind(this);
-    this.state = {
-      isMobileMenuOpen: false,
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (navigation.current && doesNodeContainClick(navigation.current, e))
+        return;
+      closeMenu();
     };
-  }
-
-  componentDidMount() {
-    const { settings } = config;
-    if (!hasApiExpander('navigation', getBaseUrl(this.props.pathname))) {
-      this.props.getNavigation(
-        getBaseUrl(this.props.pathname),
-        settings.navDepth,
-      );
-    }
-  }
-
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const { settings } = config;
-    if (
-      nextProps.pathname !== this.props.pathname ||
-      nextProps.token !== this.props.token
-    ) {
-      if (!hasApiExpander('navigation', getBaseUrl(this.props.pathname))) {
-        this.props.getNavigation(
-          getBaseUrl(nextProps.pathname),
-          settings.navDepth,
-        );
-      }
-    }
-  }
-
-  /**
-   * Toggle mobile menu's open state
-   * @method toggleMobileMenu
-   * @returns {undefined}
-   */
-  toggleMobileMenu() {
-    this.setState({ isMobileMenuOpen: !this.state.isMobileMenuOpen });
-  }
-
-  /**
-   * Close mobile menu
-   * @method closeMobileMenu
-   * @returns {undefined}
-   */
-  closeMobileMenu(e) {
-    if (!this.state.isMobileMenuOpen) {
-      return;
+
+    document.addEventListener('mousedown', handleClickOutside, false);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside, false);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!hasApiExpander('navigation', getBaseUrl(pathname))) {
+      dispatch(getNavigation(getBaseUrl(pathname), config.settings.navDepth));
     }
-    if (e.key && e.key !== 'Enter') {
-      return;
+  }, [pathname, token, dispatch]);
+
+  const isActive = (url) => {
+    return (url === '' && pathname === '/') || (url !== '' && pathname === url);
+  };
+
+  const openMenu = (index) => {
+    if (index === currentOpenIndex) {
+      setDesktopMenuOpen(null);
+      setCurrentOpenIndex(null);
+    } else {
+      setDesktopMenuOpen(index);
+      setCurrentOpenIndex(index);
     }
-    this.setState({ isMobileMenuOpen: false });
-  }
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      <nav className="navigation" id="navigation" aria-label="navigation">
-        <div className="hamburger-wrapper mobile tablet only">
-          <button
-            className={cx('hamburger hamburger--spin', {
-              'is-active': this.state.isMobileMenuOpen,
-            })}
-            aria-label={
-              this.state.isMobileMenuOpen
-                ? this.props.intl.formatMessage(messages.closeMobileMenu, {
-                    type: this.props.type,
-                  })
-                : this.props.intl.formatMessage(messages.openMobileMenu, {
-                    type: this.props.type,
-                  })
-            }
-            title={
-              this.state.isMobileMenuOpen
-                ? this.props.intl.formatMessage(messages.closeMobileMenu, {
-                    type: this.props.type,
-                  })
-                : this.props.intl.formatMessage(messages.openMobileMenu, {
-                    type: this.props.type,
-                  })
-            }
-            type="button"
-            onClick={this.toggleMobileMenu}
-          >
-            <span className="hamburger-box">
-              <span className="hamburger-inner" />
-            </span>
-          </button>
-        </div>
-        <div className="desktop menu computer large screen widescreen only">
-          <NavItems items={this.props.items} lang={this.props.lang} />
-        </div>
-        <CSSTransition
-          in={this.state.isMobileMenuOpen}
-          timeout={500}
-          classNames="mobile-menu"
-          unmountOnExit
-        >
-          <div key="mobile-menu-key" className="mobile-menu">
-            <BodyClass className="has-mobile-menu-open" />
-            <div className="mobile-menu-nav">
-              <div
-                role="button"
-                tabIndex={0}
-                onClick={this.closeMobileMenu}
-                onKeyUp={this.closeMobileMenu}
-              >
-                <NavItems items={this.props.items} lang={this.props.lang} />
-              </div>
-            </div>
-          </div>
-        </CSSTransition>
-      </nav>
-    );
-  }
-}
-
-export default compose(
-  injectIntl,
-  connect(
-    (state) => ({
-      token: state.userSession.token,
-      items: state.navigation.items,
-      lang: state.intl.locale,
-    }),
-    { getNavigation },
-  ),
-)(Navigation);
+  };
+
+  const closeMenu = (index) => {
+    setDesktopMenuOpen(null);
+    setCurrentOpenIndex(null);
+  };
+
+  useEffect(() => {
+    const handleEsc = (event) => {
+      if (event.keyCode === 27) {
+        closeMenu();
+      }
+    };
+    window.addEventListener('keydown', handleEsc);
+
+    return () => {
+      window.removeEventListener('keydown', handleEsc);
+    };
+  }, []);
+
+  return (
+    <nav
+      id="navigation"
+      aria-label="navigation"
+      className="navigation"
+      ref={navigation}
+    >
+      <div className={'computer large screen widescreen only'}>
+        <ul className="desktop-menu">
+          {items.map((item, index) => (
+            <li key={item.url}>
+              {enableFatMenu ? (
+                <>
+                  <button
+                    onClick={() => openMenu(index)}
+                    className={cx('item', {
+                      active:
+                        desktopMenuOpen === index ||
+                        (!desktopMenuOpen && pathname === item.url),
+                    })}
+                  >
+                    {item.title}
+                  </button>
+
+                  <div className="submenu-wrapper">
+                    <div
+                      className={cx('submenu', {
+                        active: desktopMenuOpen === index,
+                      })}
+                    >
+                      <div className="submenu-inner">
+                        <NavLink
+                          to={item.url === '' ? '/' : item.url}
+                          onClick={() => closeMenu()}
+                          className="submenu-header"
+                        >
+                          <h2>{item.nav_title ?? item.title}</h2>
+                        </NavLink>
+                        <button
+                          className="close"
+                          onClick={closeMenu}
+                          aria-label={intl.formatMessage(messages.closeMenu)}
+                        >
+                          <Icon name={clearSVG} size="48px" />
+                        </button>
+                        <ul>
+                          {item.items &&
+                            item.items.length > 0 &&
+                            item.items.map((subitem) => (
+                              <div
+                                className="subitem-wrapper"
+                                key={subitem.url}
+                              >
+                                <li key={subitem.url}>
+                                  <NavLink
+                                    to={subitem.url}
+                                    onClick={() => closeMenu()}
+                                    className={cx({
+                                      current: isActive(subitem.url),
+                                    })}
+                                  >
+                                    <span className="left-arrow">&#8212;</span>
+                                    <span>
+                                      {subitem.nav_title || subitem.title}
+                                    </span>
+                                  </NavLink>
+                                </li>
+                                <div className="sub-submenu">
+                                  <ul>
+                                    {subitem.items &&
+                                      subitem.items.length > 0 &&
+                                      subitem.items.map((subsubitem) => (
+                                        <div
+                                          className="subsubitem-wrapper"
+                                          key={subsubitem.url}
+                                        >
+                                          <li key={subsubitem.url}>
+                                            <NavLink
+                                              to={subsubitem.url}
+                                              onClick={() => closeMenu()}
+                                              className={cx({
+                                                current: isActive(
+                                                  subsubitem.url,
+                                                ),
+                                              })}
+                                            >
+                                              <span className="left-arrow">
+                                                &#8212;
+                                              </span>
+
+                                              <span>
+                                                {subsubitem.nav_title ||
+                                                  subsubitem.title}
+                                              </span>
+                                            </NavLink>
+                                          </li>
+                                        </div>
+                                      ))}
+                                  </ul>
+                                </div>
+                              </div>
+                            ))}
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                </>
+              ) : (
+                <NavItem item={item} lang={lang} key={item.url} />
+              )}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </nav>
+  );
+};
+
+Navigation.propTypes = {
+  pathname: PropTypes.string.isRequired,
+};
+
+Navigation.defaultProps = {
+  token: null,
+};
+
+export default injectIntl(Navigation);

package/src/customizations/volto/components/manage/Blocks/Listing/ImageGallery.jsx

@@ -0,0 +1,8 @@
+/**
+ * OVERRIDE ImageGallery.jsx
+ * REASON: To implement Title, Description and Copyright info.
+ */
+
+import ImageGallery from '../../../../../../components/Blocks/Listing/ImageGallery';
+
+export default ImageGallery;

package/src/icons/back-down.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36">
+  <g fill-rule="evenodd">
+    <polygon points="29 23 29 21 21 21 21 29 23 29 23 24.414 29.293 30.707 30.707 29.293 24.414 23"/>
+    <polygon points="13 11.586 6.707 5.293 5.293 6.707 11.586 13 7 13 7 15 15 15 15 7 13 7"/>
+    <polygon points="29 13 24.414 13 30.707 6.707 29.293 5.293 23 11.586 23 7 21 7 21 15 29 15"/>
+    <polygon points="7 23 11.586 23 5.293 29.293 6.707 30.707 13 24.414 13 29 15 29 15 21 7 21"/>
+  </g>
+</svg>

package/src/icons/fullscreen.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_5704_67)" transform="matrix(0.72424773,0,0,0.72424773,-0.006815,0.49090202)">
+    <path d="m 11.5,11 2.9886,11.1536 8.1649,-8.165 z M 25,24.5 25.7071,25.2071 26.4142,24.5 25.7071,23.7929 Z M 11.5,38 22.6535,35.0114 14.4886,26.8464 Z m 5.6569,-19.9289 7.136,7.136 1.4142,-1.4142 -7.136,-7.136 z m 7.136,5.7218 -7.136,7.136 1.4142,1.4142 7.136,-7.136 z"/>
+    <path d="m 38.391,11 -2.9886,11.1536 -8.165,-8.165 z m -13.5,13.5 -0.7071,0.7071 -0.7071,-0.7071 0.7071,-0.7071 z m 13.5,13.5 -11.1536,-2.9886 8.165,-8.165 z m -5.6569,-19.9289 -7.136,7.136 -1.4142,-1.4142 7.136,-7.136 z m -7.136,5.7218 7.136,7.136 -1.4142,1.4142 -7.136,-7.136 z"/>
+  </g>
+</svg>

package/src/icons/left-key.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+  <path d="M 29.100048,0.43270825 7.8737003,18.004379 29.100048,35.576057" fill="none" stroke="#000000" stroke-width="1.2"/>
+</svg>

package/src/icons/pause.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+  <g fill-rule="evenodd">
+    <path d="m 19,27 h 6 V 9 h -6 z m -8,0 h 6 V 9 h -6 z"/>
+  </g>
+</svg>

package/src/icons/play.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+  <path d="M 24.711864,18.593219 12.521032,9.1928375 V 27.993602 Z"/>
+</svg>

package/src/icons/right-key.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+  <path d="M 7.2996057,0.43270834 28.525973,18.004385 7.2996057,35.576069" fill="none" stroke="#000000" stroke-width="1.2"/>
+</svg>

package/src/index.js

@@ -51,7 +51,12 @@ defineMessages({
 const applyConfig = (config) => {
   config.settings.enableAutoBlockGroupingByBackgroundColor = true;
   config.settings.navDepth = 3;
+  config.settings.enableFatMenu = true;
   config.settings.slate.useLinkedHeadings = false;
+  config.settings.contentMetadataTagsImageField = 'preview_image';
+
+  // Remove Hero Block
+  config.blocks.blocksConfig.hero.restricted = true;
 
   // No required blocks (eg. Title)
   config.blocks.requiredBlocks = [];
@@ -126,6 +131,7 @@ const applyConfig = (config) => {
   ];
 
   config.settings.slidingSearchAnimation = true;
+  config.settings.openExternalLinkInNewTab = true;
 
   config.blocks.blocksConfig.accordion = {
     ...config.blocks.blocksConfig.accordion,
@@ -291,7 +297,7 @@ const applyConfig = (config) => {
   };
 
   // Check if the separator is present before enhancing it
-  if (config.blocks.blocksConfig.separator.id) {
+  if (config.blocks.blocksConfig?.separator?.id) {
     config.blocks.blocksConfig.separator = {
       ...config.blocks.blocksConfig.separator,
       schemaEnhancer: composeSchema(

package/src/theme/_content.scss

@@ -173,7 +173,7 @@
   .content-area {
     figure {
       img {
-        aspect-ratio: $aspect-ratio;
+        object-fit: contain;
       }
       figcaption {
         margin-top: $spacing-small;