Add alphabet navigation to glossary view

rohberg · Oct 25, 2024 · c14fee9 · c14fee9
1 parent 2e9f0b1
commit c14fee9
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 32 deletions.
diff --git a/packages/policy/src/index.js b/packages/policy/src/index.js
@@ -4,6 +4,7 @@ const applyConfig = (config) => {
   // glossary tooltips
   config.settings.glossary.caseSensitive = false;
   config.settings.glossary.matchOnlyFirstOccurence = false;
+  config.settings.glossary.showAlphabetNavigation = true;
 
   // Tooltips everywhere
   config.settings.appExtras = [

diff --git a/packages/volto-slate-glossary/news/11.feature b/packages/volto-slate-glossary/news/11.feature
@@ -1,3 +1 @@
-When viewing a Glossary, show an alphabet at the top.
-Clicking a letter scrolls the entries for that letter into view.
-@mauritsvanrees
+Show an alphabet navigation on glossary. Clicking a letter scrolls the entries for this letter into view. @mauritsvanrees
diff --git a/packages/volto-slate-glossary/src/components/GlossaryView.jsx b/packages/volto-slate-glossary/src/components/GlossaryView.jsx
@@ -1,9 +1,15 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { Container } from 'semantic-ui-react';
 import { useSelector, useDispatch } from 'react-redux';
+import cx from 'classnames';
 import { getGlossaryTerms } from '../actions';
+import config from '@plone/volto/registry';
 
 const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+const showAlphabetNavigation =
+  config.settings?.glossary?.showAlphabetNavigation || true;
+
 const GlossaryView = ({ content }) => {
   const dispatch = useDispatch();
   const pathname = useSelector((state) => state.router.location.pathname);
@@ -12,41 +18,49 @@ const GlossaryView = ({ content }) => {
     dispatch(getGlossaryTerms());
   }, [dispatch, pathname]);
 
-  let glossaryentries = useSelector(
+  const glossaryentries = useSelector(
     (state) => state.glossaryterms.result.items,
   );
+  const lettersWithTerm = Object.keys(glossaryentries || {});
 
   return (
-    <div id="page-document" className="q-container">
-      <div className="blocks-group-wrapper transparent">
-        <h1 className="documentFirstHeading">{content.title}</h1>
-        {content.description && (
-          <p className="documentDescription">{content.description}</p>
-        )}
+    <Container className="view-wrapper glossary-view">
+      <article id="content">
+        <header>
+          <h1 className="documentFirstHeading">{content.title}</h1>
+          {content.description && (
+            <p className="documentDescription">{content.description}</p>
+          )}
+        </header>
 
-        <div className="glossaryAlphabet">
-          {alphabet.split('').map((letter) => (
-            <Link
-              key={letter}
-              to={'#' + letter}
-              className="alphabetLetter"
-              onClick={() => {
-                document
-                  .getElementById(letter)
-                  ?.scrollIntoView({ behavior: 'smooth' });
-              }}
-            >
-              <span>{letter}</span>
-            </Link>
-          ))}
-        </div>
+        {showAlphabetNavigation ? (
+          <div className="glossaryAlphabet">
+            {alphabet.split('').map((letter) => (
+              <Link
+                key={letter}
+                to={'#' + letter}
+                className={cx(
+                  'alphabetLetter',
+                  `${!lettersWithTerm.includes(letter) ? 'unmatched' : 'matched'}`,
+                )}
+                onClick={() => {
+                  document
+                    .getElementById(letter)
+                    ?.scrollIntoView({ behavior: 'smooth' });
+                }}
+              >
+                <span>{letter}</span>
+              </Link>
+            ))}
+          </div>
+        ) : null}
 
-        <section className="glossary">
+        <section id="content-core" className="glossary">
           {Object.keys(glossaryentries || {})?.map((letter) => (
             <div key={letter}>
-              <a id={letter} anchor={letter} href={false}>
-                <h2 className="letter">{letter}</h2>
-              </a>
+              <h2 id={letter} className="letter">
+                {letter}
+              </h2>
               {glossaryentries[letter].map((item) => (
                 <article className="term" key={item['@id']}>
                   <h3>
@@ -68,8 +82,8 @@ const GlossaryView = ({ content }) => {
             </div>
           ))}
         </section>
-      </div>
-    </div>
+      </article>
+    </Container>
   );
 };
 

diff --git a/packages/volto-slate-glossary/src/components/glossarytooltips.less b/packages/volto-slate-glossary/src/components/glossarytooltips.less
@@ -21,6 +21,15 @@
   background: #963c38;
   color: white;
 }
+.glossary-view .glossaryAlphabet {
+  padding: 1em 0;
+  .alphabetLetter {
+    padding-right: 0.3em;
+    &.unmatched {
+      filter: opacity(0.5);
+    }
+  }
+}
 .term h3 {
   span {
     font-size: 80%;

diff --git a/packages/volto-slate-glossary/src/index.js b/packages/volto-slate-glossary/src/index.js
@@ -8,6 +8,7 @@ const applyConfig = (config) => {
   config.settings.glossary = {
     caseSensitive: false,
     matchOnlyFirstOccurence: false,
+    showAlphabetNavigation: true,
   };
 
   config.settings.slate.leafs = {