Merge pull request #12 from rohberg/maurits-tooltip-header

Show a header in the tooltip.

README.md

@@ -55,3 +55,17 @@ config.settings.glossary.matchOnlyFirstOccurence = true;
 
 User can opt-out by setting glossarytooltips to false.
 Add a boolean member field *glossarytooltips* for it.
+
+## Further configurations
+
+Hide alphabet navigation of glossary view:
+
+```js
+config.settings.glossary.showAlphabetNavigation = false;
+```
+
+Show glossary term in tooltips header:
+
+```js
+config.settings.glossary.mentionTermInTooltip = true;
+```

packages/policy/src/index.js

@@ -5,6 +5,7 @@ const applyConfig = (config) => {
   config.settings.glossary.caseSensitive = false;
   config.settings.glossary.matchOnlyFirstOccurence = false;
   config.settings.glossary.showAlphabetNavigation = true;
+  config.settings.glossary.mentionTermInTooltip = false;
 
   // Tooltips everywhere
   config.settings.appExtras = [

packages/volto-slate-glossary/news/12.feature

@@ -0,0 +1 @@
+Mention the term in the header of its tooltip. @mauritsvanrees, @ksuess

packages/volto-slate-glossary/src/components/GlossaryView.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { Container } from 'semantic-ui-react';
 import { useSelector, useDispatch } from 'react-redux';
+import { Container } from 'semantic-ui-react';
 import cx from 'classnames';
 import { getGlossaryTerms } from '../actions';
 import config from '@plone/volto/registry';

packages/volto-slate-glossary/src/components/TermView.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Container } from 'semantic-ui-react';
 import { Link } from 'react-router-dom';
+import { Container } from 'semantic-ui-react';
 import { Icon } from '@plone/volto/components';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import backSVG from '@plone/volto/icons/back.svg';

packages/volto-slate-glossary/src/components/Tooltips.jsx

@@ -71,19 +71,19 @@ export const applyLineBreakSupport = (children) => {
   const klass = undefined;
 
   return typeof children === 'string'
-    ? children.split('\n').map((t, i) => {
+    ? children.split('\n').map((toot, i) => {
         return (
           <React.Fragment key={`${i}`}>
             {children.indexOf('\n') > -1 &&
             children.split('\n').length - 1 > i ? (
               <>
-                {klass ? <span className={klass}>{t}</span> : t}
+                {klass ? <span className={klass}>{toot}</span> : toot}
                 <br />
               </>
             ) : klass ? (
-              <span className={klass}>{t}</span>
+              <span className={klass}>{toot}</span>
             ) : (
-              t
+              toot
             )}
           </React.Fragment>
         );
@@ -99,8 +99,8 @@ export const applyLineBreakSupport = (children) => {
  */
 export const enhanceTextWithTooltips = (text, remainingGlossaryterms) => {
   const caseSensitive = config.settings.glossary.caseSensitive;
-  const matchOnlyFirstOccurence =
-    config.settings.glossary.matchOnlyFirstOccurence;
+  const { matchOnlyFirstOccurence, mentionTermInTooltip } =
+    config.settings.glossary;
   let result = [{ type: 'text', val: text }];
   let matchedGlossaryTerms = [];
   if (remainingGlossaryterms.length > 0) {
@@ -190,6 +190,9 @@ export const enhanceTextWithTooltips = (text, remainingGlossaryterms) => {
             key={j}
             className="tooltip"
           >
+            {mentionTermInTooltip ? (
+              <Popup.Header>{el.val}</Popup.Header>
+            ) : null}
             <Popup.Content>
               <div
                 className="tooltip_content"

packages/volto-slate-glossary/src/index.js

@@ -9,6 +9,7 @@ const applyConfig = (config) => {
     caseSensitive: false,
     matchOnlyFirstOccurence: false,
     showAlphabetNavigation: true,
+    mentionTermInTooltip: false,
   };
 
   config.settings.slate.leafs = {