volto-dropdownmenu 2.2.8 → 2.4.0

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

@@ -50,6 +50,11 @@ const Navigation = ({ pathname, type }) => {
     dispatch(getDropdownMenuNavitems());
   }, [dispatch, token]);
 
+  useEffect(() => {
+    setMobileMenuOpen(false);
+    setOpenDropodownIndex(-1);
+  }, [pathname]);
+
   const getAnchorTarget = (nodeElement) => {
     if (nodeElement.nodeName === 'A') {
       return nodeElement;

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>

package/src/i18n.js

@@ -1,183 +0,0 @@
-/* eslint no-console: 0 */
-/**
- * i18n script.
- * @module scripts/i18n
- */
-
-const { find, keys, map, concat, reduce } = require('lodash');
-const glob = require('glob').sync;
-const fs = require('fs');
-const Pofile = require('pofile');
-const babel = require('@babel/core');
-
-/**
- * Extract messages into separate JSON files
- * @function extractMessages
- * @return {undefined}
- */
-function extractMessages() {
-  map(glob('src/**/*.js?(x)'), (filename) => {
-    babel.transformFileSync(filename, {}, (err) => {
-      if (err) {
-        console.log(err);
-      }
-    });
-  });
-}
-
-/**
- * Get messages from separate JSON files
- * @function getMessages
- * @return {Object} Object with messages
- */
-function getMessages() {
-  return reduce(
-    concat(
-      {},
-      ...map(
-        // We ignore the existing customized shadowed components ones, since most
-        // probably we won't be overriding them
-        // If so, we should do it in the config object or somewhere else
-        glob(
-          'build/messages/src/**/*.json',
-          // , {
-          //   ignore: 'build/messages/src/customizations/**',
-          // }
-        ),
-        (filename) =>
-          map(JSON.parse(fs.readFileSync(filename, 'utf8')), (message) => ({
-            ...message,
-            filename: filename.match(/build\/messages\/src\/(.*).json$/)[1],
-          })),
-      ),
-    ),
-    (current, value) => {
-      let result = current;
-      if (current.id) {
-        result = {
-          [current.id]: {
-            defaultMessage: current.defaultMessage,
-            filenames: [current.filename],
-          },
-        };
-      }
-
-      if (result[value.id]) {
-        result[value.id].filenames.push(value.filename);
-      } else {
-        result[value.id] = {
-          defaultMessage: value.defaultMessage,
-          filenames: [value.filename],
-        };
-      }
-      return result;
-    },
-  );
-}
-
-/**
- * Convert messages to pot format
- * @function messagesToPot
- * @param {Object} messages Messages
- * @return {string} Formatted pot string
- */
-function messagesToPot(messages) {
-  return map(keys(messages).sort(), (key) =>
-    [
-      ...map(messages[key].filenames, (filename) => `#: ${filename}`),
-      `# defaultMessage: ${messages[key].defaultMessage}`,
-      `msgid "${key}"`,
-      'msgstr ""',
-    ].join('\n'),
-  ).join('\n\n');
-}
-
-/**
- * Pot header
- * @function potHeader
- * @return {string} Formatted pot header
- */
-function potHeader() {
-  return `msgid ""
- msgstr ""
- "Project-Id-Version: Plone\\n"
- "POT-Creation-Date: ${new Date().toISOString()}\\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"
- "Content-Type: text/plain; charset=utf-8\\n"
- "Content-Transfer-Encoding: 8bit\\n"
- "Plural-Forms: nplurals=1; plural=0;\\n"
- "Language-Code: en\\n"
- "Language-Name: English\\n"
- "Preferred-Encodings: utf-8\\n"
- "Domain: volto\\n"
-
- `;
-}
-
-/**
- * Format header
- * @function formatHeader
- * @param {Array} comments Array of comments
- * @param {Object} headers Object of header items
- * @return {string} Formatted header
- */
-function formatHeader(comments, headers) {
-  return [
-    ...map(comments, (comment) => `# ${comment}`),
-    'msgid ""',
-    'msgstr ""',
-    ...map(keys(headers), (key) => `"${key}: ${headers[key]}\\n"`),
-    '',
-  ].join('\n');
-}
-
-/**
- * Sync po by the pot file
- * @function syncPoByPot
- * @return {undefined}
- */
-function syncPoByPot() {
-  const pot = Pofile.parse(fs.readFileSync('locales/volto.pot', 'utf8'));
-
-  map(glob('locales/**/*.po'), (filename) => {
-    const po = Pofile.parse(fs.readFileSync(filename, 'utf8'));
-
-    fs.writeFileSync(
-      filename,
-      `${formatHeader(po.comments, po.headers)}
- ${map(pot.items, (item) => {
-   const poItem = find(po.items, { msgid: item.msgid });
-   return [
-     `${map(item.references, (ref) => `#: ${ref}`).join('\n')}`,
-     `msgid "${item.msgid}"`,
-     `msgstr "${poItem ? poItem.msgstr : ''}"`,
-   ].join('\n');
- }).join('\n\n')}\n`,
-    );
-  });
-}
-
-// Main tasks
-console.log('Extracting messages from source files...');
-extractMessages();
-console.log('Synchronizing messages to pot file...');
-// We only write the pot file if it's really different
-const newPot = `${potHeader()}${messagesToPot(getMessages())}\n`.replace(
-  /"POT-Creation-Date:(.*)\\n"/,
-  '',
-);
-const oldPot = fs
-  .readFileSync('locales/volto.pot', 'utf8')
-  .replace(/"POT-Creation-Date:(.*)\\n"/, '');
-
-if (newPot !== oldPot) {
-  fs.writeFileSync(
-    'locales/volto.pot',
-    `${potHeader()}${messagesToPot(getMessages())}\n`,
-  );
-}
-console.log('Synchronizing messages to po files...');
-syncPoByPot();
-console.log('done!');