When viewing a Glossary, show an alphabet at the top.

Clicking a letter scrolls the entries for that letter into view.
rohberg · Oct 25, 2024 · 0bd29de · 0bd29de
1 parent 553b5db
commit 0bd29de
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 13 deletions.
diff --git a/packages/volto-slate-glossary/news/11.feature b/packages/volto-slate-glossary/news/11.feature
@@ -0,0 +1,3 @@
+When viewing a Glossary, show an alphabet at the top.
+Clicking a letter scrolls the entries for that 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,9 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { Container } from 'semantic-ui-react';
 import { useSelector, useDispatch } from 'react-redux';
 import { getGlossaryTerms } from '../actions';
 
+const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
 const GlossaryView = ({ content }) => {
   const dispatch = useDispatch();
   const pathname = useSelector((state) => state.router.location.pathname);
@@ -17,18 +17,36 @@ const GlossaryView = ({ content }) => {
   );
 
   return (
-    <Container className="view-wrapper">
-      <article id="content">
-        <header>
-          <h1 className="documentFirstHeading">{content.title}</h1>
-          {content.description && (
-            <p className="documentDescription">{content.description}</p>
-          )}
-        </header>
-        <section id="content-core" className="glossary">
+    <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>
+        )}
+
+        <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>
+
+        <section className="glossary">
           {Object.keys(glossaryentries || {})?.map((letter) => (
             <div key={letter}>
-              <h2 className="letter">{letter}</h2>
+              <a id={letter} anchor={letter} href={false}>
+                <h2 className="letter">{letter}</h2>
+              </a>
               {glossaryentries[letter].map((item) => (
                 <article className="term" key={item['@id']}>
                   <h3>
@@ -50,8 +68,8 @@ const GlossaryView = ({ content }) => {
             </div>
           ))}
         </section>
-      </article>
-    </Container>
+      </div>
+    </div>
   );
 };