open tab if footnote in it

eea · Jan 23, 2024 · 191c39a · 191c39a
1 parent c4162c9
commit 191c39a
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 14 deletions.
diff --git a/src/Blocks/Footnote/FootnotesBlockView.jsx b/src/Blocks/Footnote/FootnotesBlockView.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-  openAccordionIfContainsFootnoteReference,
+  openAccordionOrTabIfContainsFootnoteReference,
   getAllBlocksAndSlateFields,
   makeFootnoteListOfUniqueItems,
   makeFootnote,
@@ -107,7 +107,7 @@ const FootnotesBlockView = (props) => {
                         href={`#ref-${parentUid || uid}`}
                         aria-label="Back to content"
                         onClick={() =>
-                          openAccordionIfContainsFootnoteReference(
+                          openAccordionOrTabIfContainsFootnoteReference(
                             `#ref-${parentUid || uid}`,
                           )
                         }
@@ -122,7 +122,7 @@ const FootnotesBlockView = (props) => {
                           href={`#ref-${ref}`}
                           aria-label="Back to content"
                           onClick={() =>
-                            openAccordionIfContainsFootnoteReference(
+                            openAccordionOrTabIfContainsFootnoteReference(
                               `#ref-${ref}`,
                             )
                           }
@@ -139,7 +139,7 @@ const FootnotesBlockView = (props) => {
                       href={`#ref-${parentUid || uid}`}
                       aria-label="Back to content"
                       onClick={() =>
-                        openAccordionIfContainsFootnoteReference(
+                        openAccordionOrTabIfContainsFootnoteReference(
                           `#ref-${parentUid || uid}`,
                         )
                       }

diff --git a/src/editor/render.jsx b/src/editor/render.jsx
@@ -4,7 +4,7 @@ import { useEditorContext } from '@plone/volto-slate/hooks';
 import { getAllBlocksAndSlateFields } from '@eeacms/volto-slate-footnote/editor/utils';
 import {
   makeFootnoteListOfUniqueItems,
-  openAccordionIfContainsFootnoteReference,
+  openAccordionOrTabIfContainsFootnoteReference,
 } from './utils';
 import { isEmpty } from 'lodash';
 import { useSelector } from 'react-redux';
@@ -112,7 +112,7 @@ export const FootnoteElement = (props) => {
                   as={UniversalLink}
                   href={`#footnote-${citationRefId}`}
                   onClick={() =>
-                    openAccordionIfContainsFootnoteReference(
+                    openAccordionOrTabIfContainsFootnoteReference(
                       `#footnote-${citationRefId}`,
                     )
                   }
@@ -134,7 +134,7 @@ export const FootnoteElement = (props) => {
                       as={UniversalLink}
                       href={`#footnote-${item.zoteroId || item.uid}`}
                       onClick={() =>
-                        openAccordionIfContainsFootnoteReference(
+                        openAccordionOrTabIfContainsFootnoteReference(
                           `#footnote-${item.zoteroId || item.uid}`,
                         )
                       }
@@ -176,7 +176,7 @@ export const FootnoteElement = (props) => {
                 as={UniversalLink}
                 href={`#footnote-${citationRefId}`}
                 onClick={() =>
-                  openAccordionIfContainsFootnoteReference(
+                  openAccordionOrTabIfContainsFootnoteReference(
                     `#footnote-${citationRefId}`,
                   )
                 }
@@ -198,7 +198,7 @@ export const FootnoteElement = (props) => {
                     as={UniversalLink}
                     href={`#footnote-${item.zoteroId || item.uid}`}
                     onClick={() =>
-                      openAccordionIfContainsFootnoteReference(
+                      openAccordionOrTabIfContainsFootnoteReference(
                         `#footnote-${item.zoteroId || item.uid}`,
                       )
                     }

diff --git a/src/editor/utils.js b/src/editor/utils.js
@@ -46,15 +46,34 @@ const retriveValuesOfSlateFromNestedPath = (path, value) => {
  * Will open accordion if contains footnote reference
  * @param {string} footnoteId
  */
-export const openAccordionIfContainsFootnoteReference = (footnoteId) => {
+export const openAccordionOrTabIfContainsFootnoteReference = (footnoteId) => {
   if (typeof window !== 'undefined') {
     const footnote = document.querySelector(footnoteId);
+
     if (footnote !== null && footnote.closest('.accordion') !== null) {
       const comp = footnote.closest('.accordion').querySelector('.title');
       if (!comp.className.includes('active')) {
         comp.click();
       }
     }
+
+    if (footnote !== null && footnote.closest('.tab-name') !== null) {
+      const idOfTabBlock = footnote.closest('.tabs-block').id;
+
+      const idOfTabPanel = footnote.closest('.tab-name').id;
+      const allTabs = document
+        .getElementById(idOfTabBlock)
+        .getElementsByClassName('menu-item-text');
+
+      (Array.from(allTabs) || []).forEach((tab) => {
+        if (
+          tab.textContent === idOfTabPanel &&
+          !tab.parentElement.classList.contains('active')
+        ) {
+          tab.parentElement.click();
+        }
+      });
+    }
   }
 
   return true;

diff --git a/src/editor/utils.test.js b/src/editor/utils.test.js
@@ -1,6 +1,6 @@
 import {
   makeFootnote,
-  openAccordionIfContainsFootnoteReference,
+  openAccordionOrTabIfContainsFootnoteReference,
   getAllBlocksAndSlateFields,
 } from './utils';
 import { getAllBlocks } from '@plone/volto-slate/utils';
@@ -22,7 +22,7 @@ describe('makeFootnote', () => {
   });
 });
 
-describe('openAccordionIfContainsFootnoteReference', () => {
+describe('openAccordionOrTabIfContainsFootnoteReference', () => {
   it('should open accordion if it contains footnote reference', () => {
     document.body.innerHTML = `
       <div class="accordion">
@@ -34,7 +34,7 @@ describe('openAccordionIfContainsFootnoteReference', () => {
     const title = document.querySelector('.title');
     title.click = jest.fn();
 
-    openAccordionIfContainsFootnoteReference('#footnote');
+    openAccordionOrTabIfContainsFootnoteReference('#footnote');
 
     expect(title.click).toHaveBeenCalled();
   });
@@ -49,7 +49,7 @@ describe('openAccordionIfContainsFootnoteReference', () => {
     const title = document.querySelector('.title');
     title.click = jest.fn();
 
-    openAccordionIfContainsFootnoteReference('#footnote');
+    openAccordionOrTabIfContainsFootnoteReference('#footnote');
 
     expect(title.click).not.toHaveBeenCalled();
   });