volto-dropdownmenu 2.3.0 → 2.4.2

package/CHANGELOG.md

@@ -4,6 +4,28 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v2.4.2](https://github.com/collective/volto-dropdownmenu/compare/v2.4.1...v2.4.2)
+
+> 25 May 2022
+
+- feat: added mobile-menu-opend class to body when mobile menu is opened [`659960c`](https://github.com/collective/volto-dropdownmenu/commit/659960c07782af2b0fe7d0686029bfea2ee0bac2)
+
+#### [v2.4.1](https://github.com/collective/volto-dropdownmenu/compare/v2.4.0...v2.4.1)
+
+> 14 March 2022
+
+- Release 2.4.1 [`4fa2990`](https://github.com/collective/volto-dropdownmenu/commit/4fa2990e03ed41d2dddc5f7fecc6b271c2c356f6)
+- chore: added close event on clickableNavigationRoots [`2cc495a`](https://github.com/collective/volto-dropdownmenu/commit/2cc495a7bd8db9dd6fd90dcafcf31ca31a06c2e8)
+
+#### [v2.4.0](https://github.com/collective/volto-dropdownmenu/compare/v2.3.0...v2.4.0)
+
+> 4 March 2022
+
+- feat: added clickableNavigationRoots configurable option [`4f75f3b`](https://github.com/collective/volto-dropdownmenu/commit/4f75f3b8e1714b2e159bfe964d8ff7ca0bf445a9)
+- Release 2.4.0 [`d20252a`](https://github.com/collective/volto-dropdownmenu/commit/d20252adb03fc04beb05a8189d51dd166eb8c6b8)
+- fix: fix hasBlocks data if has only one empty text block [`584f6a2`](https://github.com/collective/volto-dropdownmenu/commit/584f6a280e38c8f2f589acb18534c8ca5d8163af)
+- fix: fixed readme [`d16175a`](https://github.com/collective/volto-dropdownmenu/commit/d16175a99a68c6bc33c4b102f44d2479a30fafca)
+
 #### [v2.3.0](https://github.com/collective/volto-dropdownmenu/compare/v2.2.9...v2.3.0)
 
 > 26 October 2021
@@ -11,6 +33,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - chore: added npm publish true [`b8b1b6c`](https://github.com/collective/volto-dropdownmenu/commit/b8b1b6c6428fac759a7345bb33df95533524e517)
 - chore: removed yarn.lock [`3037dd0`](https://github.com/collective/volto-dropdownmenu/commit/3037dd0f53a23d7b6dfd1835b5454a824481315c)
 - chore: updated volto 14 [`a81180e`](https://github.com/collective/volto-dropdownmenu/commit/a81180e8ff81e08045ea2c45abe658475bbfa195)
+- Release 2.3.0 [`5f785c5`](https://github.com/collective/volto-dropdownmenu/commit/5f785c58cee5351c8b6996b9f2c715a07c2bd04d)
 
 #### [v2.2.9](https://github.com/collective/volto-dropdownmenu/compare/v2.2.8...v2.2.9)
 

package/README.md

@@ -23,6 +23,19 @@ To use the default template for the dropdown menu, add `src/addons/volto-dropdow
   ]
 ```
 
+### Navigation roots
+
+By default, navigations roots are clickable, but there's the possibility to make them not clickable.
+Enabling the field 'clickableNavigationRoots' in volto-dropdownmenu config, a field appears in configuration form and let editor to decide if make navigation roots clickable or not.
+
+```json
+  config.settings["volto-dropdownmenu"] = {
+    "options": {
+      "clickableNavigationRoots": true, //if true, a checkbox option in dropdown menu appears
+    },
+  };
+```
+
 ## Screenshots and demo
 
 ### Controlpanel

package/locales/de/LC_MESSAGES/volto.po

@@ -46,6 +46,11 @@ msgstr ""
 msgid "dropdownmenu-blocks-description"
 msgstr ""
 
+#: widget/MenuConfigurationForm
+# defaultMessage: Clickable navigation roots
+msgid "dropdownmenu-clickableNavigationRoots"
+msgstr ""
+
 #: components/DropdownMenu
 # defaultMessage: Close menu
 msgid "dropdownmenu-close-menu-button"

package/locales/en/LC_MESSAGES/volto.po

@@ -46,6 +46,11 @@ msgstr "Blocks"
 msgid "dropdownmenu-blocks-description"
 msgstr "Add some blocks to show in dropdown menu."
 
+#: widget/MenuConfigurationForm
+# defaultMessage: Clickable navigation roots
+msgid "dropdownmenu-clickableNavigationRoots"
+msgstr ""
+
 #: components/DropdownMenu
 # defaultMessage: Close menu
 msgid "dropdownmenu-close-menu-button"

package/locales/es/LC_MESSAGES/volto.po

@@ -46,6 +46,11 @@ msgstr ""
 msgid "dropdownmenu-blocks-description"
 msgstr ""
 
+#: widget/MenuConfigurationForm
+# defaultMessage: Clickable navigation roots
+msgid "dropdownmenu-clickableNavigationRoots"
+msgstr ""
+
 #: components/DropdownMenu
 # defaultMessage: Close menu
 msgid "dropdownmenu-close-menu-button"

package/locales/eu/LC_MESSAGES/volto.po

@@ -46,6 +46,11 @@ msgstr ""
 msgid "dropdownmenu-blocks-description"
 msgstr ""
 
+#: widget/MenuConfigurationForm
+# defaultMessage: Clickable navigation roots
+msgid "dropdownmenu-clickableNavigationRoots"
+msgstr ""
+
 #: components/DropdownMenu
 # defaultMessage: Close menu
 msgid "dropdownmenu-close-menu-button"

package/locales/fr/LC_MESSAGES/volto.po

@@ -46,6 +46,11 @@ msgstr ""
 msgid "dropdownmenu-blocks-description"
 msgstr ""
 
+#: widget/MenuConfigurationForm
+# defaultMessage: Clickable navigation roots
+msgid "dropdownmenu-clickableNavigationRoots"
+msgstr ""
+
 #: components/DropdownMenu
 # defaultMessage: Close menu
 msgid "dropdownmenu-close-menu-button"

package/locales/it/LC_MESSAGES/volto.po

@@ -46,6 +46,11 @@ msgstr "Blocchi"
 msgid "dropdownmenu-blocks-description"
 msgstr "Aggiungi i blocchi che verranno mostrati nel megamenu"
 
+#: widget/MenuConfigurationForm
+# defaultMessage: Clickable navigation roots
+msgid "dropdownmenu-clickableNavigationRoots"
+msgstr "Rendi cliccabili le radici di navigazione"
+
 #: components/DropdownMenu
 # defaultMessage: Close menu
 msgid "dropdownmenu-close-menu-button"

package/locales/ja/LC_MESSAGES/volto.po

@@ -46,6 +46,11 @@ msgstr ""
 msgid "dropdownmenu-blocks-description"
 msgstr ""
 
+#: widget/MenuConfigurationForm
+# defaultMessage: Clickable navigation roots
+msgid "dropdownmenu-clickableNavigationRoots"
+msgstr ""
+
 #: components/DropdownMenu
 # defaultMessage: Close menu
 msgid "dropdownmenu-close-menu-button"

package/locales/nl/LC_MESSAGES/volto.po

@@ -46,6 +46,11 @@ msgstr ""
 msgid "dropdownmenu-blocks-description"
 msgstr ""
 
+#: widget/MenuConfigurationForm
+# defaultMessage: Clickable navigation roots
+msgid "dropdownmenu-clickableNavigationRoots"
+msgstr ""
+
 #: components/DropdownMenu
 # defaultMessage: Close menu
 msgid "dropdownmenu-close-menu-button"

package/locales/pt/LC_MESSAGES/volto.po

@@ -46,6 +46,11 @@ msgstr ""
 msgid "dropdownmenu-blocks-description"
 msgstr ""
 
+#: widget/MenuConfigurationForm
+# defaultMessage: Clickable navigation roots
+msgid "dropdownmenu-clickableNavigationRoots"
+msgstr ""
+
 #: components/DropdownMenu
 # defaultMessage: Close menu
 msgid "dropdownmenu-close-menu-button"

package/locales/pt_BR/LC_MESSAGES/volto.po

@@ -46,6 +46,11 @@ msgstr ""
 msgid "dropdownmenu-blocks-description"
 msgstr ""
 
+#: widget/MenuConfigurationForm
+# defaultMessage: Clickable navigation roots
+msgid "dropdownmenu-clickableNavigationRoots"
+msgstr ""
+
 #: components/DropdownMenu
 # defaultMessage: Close menu
 msgid "dropdownmenu-close-menu-button"

package/locales/ro/LC_MESSAGES/volto.po

@@ -46,6 +46,11 @@ msgstr ""
 msgid "dropdownmenu-blocks-description"
 msgstr ""
 
+#: widget/MenuConfigurationForm
+# defaultMessage: Clickable navigation roots
+msgid "dropdownmenu-clickableNavigationRoots"
+msgstr ""
+
 #: components/DropdownMenu
 # defaultMessage: Close menu
 msgid "dropdownmenu-close-menu-button"

package/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2021-10-26T09:00:18.836Z\n"
+"POT-Creation-Date: 2022-03-04T16:04:33.047Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "MIME-Version: 1.0\n"
@@ -48,6 +48,11 @@ msgstr ""
 msgid "dropdownmenu-blocks-description"
 msgstr ""
 
+#: widget/MenuConfigurationForm
+# defaultMessage: Clickable navigation roots
+msgid "dropdownmenu-clickableNavigationRoots"
+msgstr ""
+
 #: components/DropdownMenu
 # defaultMessage: Close menu
 msgid "dropdownmenu-close-menu-button"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "volto-dropdownmenu",
-  "version": "2.3.0",
+  "version": "2.4.2",
   "description": "Volto addon for a customizable dropdown menu",
   "main": "src/index.js",
   "repository": "https://github.com/collective/volto-dropdownmenu.git",

package/src/components/DropdownMenu.jsx

@@ -32,7 +32,7 @@ const DropdownMenu = ({ menu, open = false, closeMenu }) => {
   const location = useLocation();
   const blocksFieldname = getBlocksFieldname(menu);
   const blocksLayoutFieldname = getBlocksLayoutFieldname(menu);
-
+  const { clickableNavigationRoots = true } = menu;
   const navItemWidth = menu.navigationRoot?.length > 1 ? 3 : 4;
   const blocksWidth =
     menu.navigationRoot?.length === 1
@@ -40,6 +40,13 @@ const DropdownMenu = ({ menu, open = false, closeMenu }) => {
       : menu.navigationRoot?.length > 2 || menu.navigationRoot?.length === 0
       ? 12
       : 6;
+  let hasBlocks = hasBlocksData(menu);
+  if (menu?.blocks && Object.keys(menu.blocks).length === 1) {
+    let b = menu.blocks[Object.keys(menu.blocks)[0]];
+    if (b['@type'] === 'text' && (!b.text || b.text?.length === 0)) {
+      hasBlocks = false;
+    }
+  }
 
   return (
     <div
@@ -69,7 +76,10 @@ const DropdownMenu = ({ menu, open = false, closeMenu }) => {
                 <h2>
                   <ConditionalLink
                     to={flattenToAppURL(navRoot['@id'])}
-                    condition={menu.navigationRoot?.length > 1}
+                    condition={
+                      menu.navigationRoot?.length > 1 &&
+                      clickableNavigationRoots
+                    }
                   >
                     <span>{navRoot.title}</span>
                   </ConditionalLink>
@@ -87,7 +97,7 @@ const DropdownMenu = ({ menu, open = false, closeMenu }) => {
                 )}
               </Grid.Column>
             ))}
-            {hasBlocksData(menu) && (
+            {hasBlocks && (
               <Grid.Column
                 width={blocksWidth}
                 className="dropdownmenu-blocks-column"

package/src/customizations/components/theme/Navigation/Navigation.jsx

@@ -70,7 +70,7 @@ const Navigation = ({ pathname, type }) => {
       const targetItem = getAnchorTarget(e.target);
       const dropdownmenuLinks = [
         ...(document?.querySelectorAll(
-          '.navigation-dropdownmenu .dropdown-menu-wrapper ul li a, .navigation-dropdownmenu .dropdownmenu-blocks-column a, .dropdownmenu-footer a, .navigation-dropdownmenu .menu > a',
+          '.navigation-dropdownmenu .dropdown-menu-wrapper ul li a, .navigation-dropdownmenu .dropdown-menu-wrapper h2 a, .navigation-dropdownmenu .dropdownmenu-blocks-column a, .dropdownmenu-footer a, .navigation-dropdownmenu .menu > a',
         ) ?? []),
       ];
 
@@ -88,6 +88,14 @@ const Navigation = ({ pathname, type }) => {
     return () => document.body.removeEventListener('click', clickListener);
   }, []);
 
+  useEffect(() => {
+    if (isMobileMenuOpen) {
+      document.body.classList.add('mobile-menu-opened'); //to prevent scroll body
+    } else {
+      document.body.classList.remove('mobile-menu-opened'); //re-enable scroll body
+    }
+  }, [isMobileMenuOpen]);
+
   const toggleMobileMenu = () => {
     setMobileMenuOpen(!isMobileMenuOpen);
   };

package/src/index.js

@@ -40,5 +40,11 @@ export default (config) => {
 
   config.settings.controlPanelsIcons['dropdown-menu-settings'] = menuSVG;
 
+  config.settings['volto-dropdownmenu'] = {
+    options: {
+      clickableNavigationRoots: false, //if true, a checkbox option in dropdown menu appears
+    },
+  };
+
   return config;
 };

package/src/widget/MenuConfigurationForm.jsx

@@ -76,6 +76,10 @@ const messages = defineMessages({
     id: 'dropdownmenu-deletemenuitem-button',
     defaultMessage: 'Delete menu item',
   },
+  clickableNavigationRoots: {
+    id: 'dropdownmenu-clickableNavigationRoots',
+    defaultMessage: 'Clickable navigation roots',
+  },
 });
 
 const MenuConfigurationForm = ({ id, menuItem, onChange, deleteMenuItem }) => {
@@ -117,11 +121,12 @@ const MenuConfigurationForm = ({ id, menuItem, onChange, deleteMenuItem }) => {
     return () => {
       document
         .querySelector('form.ui.form')
-        .removeEventListener('click', preventClick);
+        ?.removeEventListener('click', preventClick);
       document.querySelectorAll('form.ui.form input').forEach((item) => {
-        item.removeEventListener('keypress', preventEnter);
+        item?.removeEventListener('keypress', preventEnter);
       });
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const onChangeFormData = (id, value) => {
@@ -201,6 +206,22 @@ const MenuConfigurationForm = ({ id, menuItem, onChange, deleteMenuItem }) => {
               }
             />
           </div>
+
+          {config.settings?.['volto-dropdownmenu']?.options
+            ?.clickableNavigationRoots && (
+            <div className="menu-item-field-clickableNavigationRoots">
+              <CheckboxWidget
+                id={`${id}-clickableNavigationRoots`}
+                title={intl.formatMessage(messages.clickableNavigationRoots)}
+                description=""
+                defaultValue={true}
+                value={!!menuItem.clickableNavigationRoots}
+                onChange={(id, value) =>
+                  onChangeFormData('clickableNavigationRoots', value)
+                }
+              />
+            </div>
+          )}
           <div className="menu-item-field-showMoreLink">
             <ObjectBrowserWidget
               id={`${id}-showMoreLink`}
@@ -233,7 +254,6 @@ const MenuConfigurationForm = ({ id, menuItem, onChange, deleteMenuItem }) => {
               }
             />
           </div>
-
           <UIForm.Field inline className="help wide" id="menu-blocks">
             <Grid>
               <Grid.Row stretched>