From 0bd29de1ec329c853f4fbb8b44017e0e6b202b62 Mon Sep 17 00:00:00 2001
From: Maurits van Rees <maurits@vanrees.org>
Date: Thu, 24 Oct 2024 21:43:41 +0200
Subject: [PATCH 1/5] When viewing a Glossary, show an alphabet at the top.

Clicking a letter scrolls the entries for that letter into view.
---
 packages/volto-slate-glossary/news/11.feature |  3 ++
 .../src/components/GlossaryView.jsx           | 44 +++++++++++++------
 2 files changed, 34 insertions(+), 13 deletions(-)
 create mode 100644 packages/volto-slate-glossary/news/11.feature

diff --git a/packages/volto-slate-glossary/news/11.feature b/packages/volto-slate-glossary/news/11.feature
new file mode 100644
index 0000000..f7b92bd
--- /dev/null
+++ 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
index b3df2d4..68f4601 100644
--- 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>
   );
 };
 

From 2e9f0b115e95b7085bbbe552386a8e7ae3f2e136 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Katja=20Su=CC=88ss?= <k.suess@rohberg.ch>
Date: Fri, 25 Oct 2024 13:42:01 +0200
Subject: [PATCH 2/5] Update contributors

---
 backend/CONTRIBUTORS.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/backend/CONTRIBUTORS.md b/backend/CONTRIBUTORS.md
index 5a1aabd..3284368 100644
--- a/backend/CONTRIBUTORS.md
+++ b/backend/CONTRIBUTORS.md
@@ -1,3 +1,4 @@
 # Contributors
 
-- Plone Foundation [collective@plone.org]
+- Katja Süss [@ksuess]
+- Maurits van Rees [@mauritsvanrees]

From c14fee983d09663e0f3159ec081dc1cd9df74aed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Katja=20Su=CC=88ss?= <k.suess@rohberg.ch>
Date: Fri, 25 Oct 2024 13:44:33 +0200
Subject: [PATCH 3/5] Add alphabet navigation to glossary view

---
 packages/policy/src/index.js                  |  1 +
 packages/volto-slate-glossary/news/11.feature |  4 +-
 .../src/components/GlossaryView.jsx           | 72 +++++++++++--------
 .../src/components/glossarytooltips.less      |  9 +++
 packages/volto-slate-glossary/src/index.js    |  1 +
 5 files changed, 55 insertions(+), 32 deletions(-)

diff --git a/packages/policy/src/index.js b/packages/policy/src/index.js
index 51562a3..c3ac63d 100644
--- 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
index f7b92bd..1b733bc 100644
--- 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
index 68f4601..8f854ae 100644
--- 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
index 62b713d..c47a483 100644
--- 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
index 6568c9d..3cc4670 100644
--- 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 = {

From 4c11a61cb5c4b9b790c7d4e1e4ecef9aadce7a11 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Katja=20Su=CC=88ss?= <k.suess@rohberg.ch>
Date: Fri, 25 Oct 2024 16:51:31 +0200
Subject: [PATCH 4/5] Update README and changelog

---
 README.md                                     | 20 +++++++++----------
 packages/volto-slate-glossary/news/11.feature |  2 +-
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index f828e48..4ecbcc5 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # @rohberg/volto-slate-glossary
 
-Volto Add-On `@rohberg/volto-slate-glossary` adds tooltips for glossary terms of [collective.glossary](https://github.com/collective/collective.glossary)
+Volto add-on `@rohberg/volto-slate-glossary` adds tooltips for glossary terms of [collective.glossary](https://github.com/collective/collective.glossary)
 
 [![npm](https://img.shields.io/npm/v/@rohberg/volto-slate-glossary)](https://www.npmjs.com/package/@rohberg/volto-slate-glossary)
 [![Unit tests](https://github.com/rohberg/volto-slate-glossary/actions/workflows/unit.yml/badge.svg)](https://github.com/rohberg/volto-slate-glossary/actions/workflows/unit.yml)
@@ -9,8 +9,12 @@ Volto Add-On `@rohberg/volto-slate-glossary` adds tooltips for glossary terms of
 
 ![Tooltips @rohberg/volto-slate-glossary](https://github.com/rohberg/volto-slate-glossary/raw/main/docs/volto-slate-glossary-tooltips.png)
 
+Install Plone add-on [collective.glossary](https://github.com/collective/collective.glossary) in your backend.
+This provides the content type `glossary`.
+
 Determine where to apply tooltips in your project by match configuration:
 
+```javascript
     import { Tooltips } from '@rohberg/volto-slate-glossary/components';
 
     export default function applyConfig(config) {
@@ -28,6 +32,7 @@ Determine where to apply tooltips in your project by match configuration:
 
         return config;
     }
+```
 
 By default we show a tooltip when a word matches case insensitively: when the term is "Hello" or "hello", a tooltip is shown for "Hello", "hello", "HELLO", "hElLo", etcetera.
 
@@ -39,19 +44,14 @@ config.settings.glossary.caseSensitive = true;
 
 Regardless of this setting, when you have a fully uppercase term, for example `REST` (Representational State Transfer), always only the exact word `REST` gets a tooltip, not `rest` or `Rest`.
 
-By default we show a tooltip for all matches on a page.
-You can configure this to only show a tooltip for the first match:
+By default we show tooltips for all occurrences of a term.
 
-```
+Since version 2.0.0 you can configure to only show tooltips for the first occurence on a page.
+
+```js
 config.settings.glossary.matchOnlyFirstOccurence = true;
 ```
 
-Install Plone add-on [collective.glossary](https://github.com/collective/collective.glossary) in your backend.
-This provides the content type `glossary`.
-
 
 User can opt-out by setting glossarytooltips to false.
 Add a boolean member field *glossarytooltips* for it.
-
-
-This add-on requires Volto with Slate editor. Be sure to upgrade to Volto >= 16.0.0-alpha.15.
diff --git a/packages/volto-slate-glossary/news/11.feature b/packages/volto-slate-glossary/news/11.feature
index 1b733bc..229f27d 100644
--- a/packages/volto-slate-glossary/news/11.feature
+++ b/packages/volto-slate-glossary/news/11.feature
@@ -1 +1 @@
-Show an alphabet navigation on glossary. Clicking a letter scrolls the entries for this letter into view. @mauritsvanrees
+Show an alphabet navigation on glossary. Clicking a letter scrolls the entries for this letter into view. @mauritsvanrees, @ksuess

From 1e7f5e76acc15dc9aa2b13fcc523517f479a96f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Katja=20Su=CC=88ss?= <k.suess@rohberg.ch>
Date: Fri, 25 Oct 2024 16:52:29 +0200
Subject: [PATCH 5/5] Update README.md

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 4ecbcc5..d562da2 100644
--- a/README.md
+++ b/README.md
@@ -14,7 +14,7 @@ This provides the content type `glossary`.
 
 Determine where to apply tooltips in your project by match configuration:
 
-```javascript
+```js
     import { Tooltips } from '@rohberg/volto-slate-glossary/components';
 
     export default function applyConfig(config) {
@@ -38,7 +38,7 @@ By default we show a tooltip when a word matches case insensitively: when the te
 
 You can configure this to be case sensitive for all terms, so "Hello" only matches for "Hello":
 
-```
+```js
 config.settings.glossary.caseSensitive = true;
 ```