@entryscape/rdforms 10.12.3 → 10.13.0

package/package.json

@@ -8,7 +8,7 @@
     "application profile",
     "linked data"
   ],
-  "version": "10.12.3",
+  "version": "10.13.0",
   "main": "dist/rdforms.node.js",
   "browser": "dist/rdforms.react.js",
   "module": "main.js",
@@ -16,10 +16,10 @@
   "license": "LGPL-3.0-only",
   "homepage": "https://rdforms.org",
   "peerDependencies": {
-    "@entryscape/rdfjson": "2.7.6"
+    "@entryscape/rdfjson": "2.7.7"
   },
   "dependencies": {
-    "@entryscape/rdfjson": "2.7.6",
+    "@entryscape/rdfjson": "2.7.7",
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
     "@fortawesome/fontawesome-free": "^5.8.1",

package/src/view/View.js

@@ -23,6 +23,7 @@ export default class View {
     this.topLevel = params.topLevel !== false;
     this.compact = params.compact !== false;
     this.showDescription = params.showDescription === true;
+    this.popupOnLabel = params.popupOnLabel !== false;
     this.styleCls = params.styleCls || '';
     this.truncateLimit = params.truncateLimit !== undefined ? params.truncateLimit : 10;
     this.truncate = params.truncate !== undefined ? params.truncate : false;

package/src/view/bootstrap/labels.js

@@ -67,7 +67,7 @@ renderingContext.renderEditorLabel = (rowNode, binding, item, context) => {
     let desc = utils.getLocalizedValue(descMap, context.view.getLocale()).value
 
     if (!compactField && desc) {
-      jquery('<div class="rdformsDescription" tabindex="0">').text(desc).appendTo(rowNode);
+      jquery('<div class="rdformsDescription">').text(desc).appendTo(rowNode);
     }
   }
   renderingContext.attachItemInfo(item, $label[0], context);
@@ -76,6 +76,11 @@ renderingContext.renderEditorLabel = (rowNode, binding, item, context) => {
 };
 
 renderingContext.attachItemInfo = function (item, aroundNode, context) {
+  if (context.view.popupOnLabel === false) {
+    renderingContext.domClassToggle(aroundNode, 'rdformsNoPopup', true);
+    return;
+  }
+  renderingContext.domSetAttr(aroundNode, 'role', 'button');
   if (item == null || (item.getProperty() == null && item.getDescriptionMap() == null
     && item.getEditDescriptionMap() == null)) {
     jquery(aroundNode).addClass('noPointer');
@@ -102,7 +107,7 @@ renderingContext.attachItemInfo = function (item, aroundNode, context) {
   }
   const popoverOptions = {
     html: true,
-    container: renderingContext.getPopoverContainer(),
+    container: aroundNode, // renderingContext.getPopoverContainer(),
     placement: 'auto',
     trigger: 'focus',
     title: label,

package/src/view/jquery/labels.js

@@ -36,7 +36,7 @@ renderingContext.renderPresenterLabel = (rowNode, binding, item, context, labelR
     const desc = utils.getLocalizedValue(item.getDescriptionMap(), context.view.getLocale()).value
 
     if (!compactField && desc) {
-      jquery('<div class="rdformsDescription" tabindex="0">').text(desc).appendTo(rowNode);
+      jquery('<div class="rdformsDescription">').text(desc).appendTo(rowNode);
     }
   }
 

package/src/view/react/labels.js

@@ -2,7 +2,7 @@
 import React, { Fragment, useState, useEffect, forwardRef } from 'react';
 import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
 import { styled } from '@mui/material/styles';
-import ClickAwayListener from '@mui/material/ClickAwayListener';
+import { ClickAwayListener } from '@mui/base/ClickAwayListener';
 import renderingContext from '../renderingContext';
 import utils from '../../utils';
 import { Editor } from './Wrappers';
@@ -26,6 +26,39 @@ const StyledTooltip = styled(
   },
 }));
 
+const ItemTooltipTitle = ({description, propinfo, setOpen, tooltipId}) => {
+  useEffect(() => {
+    console.log("Inited useEffect");
+    const focusListener = (event) => {
+      console.log("Focuslistener called");
+      let el = event.target;
+      let external = true;
+      while (el) {
+        if (el.id === tooltipId) {
+          external = false;
+          break;
+        }
+        el = el.parentElement;
+      }
+      if (external) {
+        setOpen(false);
+      }
+    };
+    window.addEventListener('focusin', focusListener);
+    return () => {
+      console.log("Focuslistener removed");
+      window.removeEventListener('focusin', focusListener);
+    };
+  }, []);
+
+  return (<>
+    <p className="rdformsLinebreaks rdformsDescription">
+      {description}
+    </p>
+    {propinfo}
+  </>);
+};
+
 const ItemTooltip = (props) => {
   const [open, setOpen] = useState(false);
   const handleTooltipClose = () => {
@@ -42,28 +75,31 @@ const ItemTooltip = (props) => {
   const descriptionMap = props.context.view instanceof Editor ?
     props.item.getEditDescriptionMap() || props.item.getDescriptionMap() : props.item.getDescriptionMap()
     || (property ? '' : props.context.view.messages.info_missing || '');
-  const description = utils.getLocalizedValue(descriptionMap, props.context.view.getLocale()).value
+  const description = utils.getLocalizedValue(descriptionMap, props.context.view.getLocale()).value;
+  const tooltipId = `tt_${props.binding.getHash()}`;
 
   return (
     <ClickAwayListener onClickAway={handleTooltipClose}>
-      <StyledTooltip
-        title={
-          <>
-            <p className="rdformsLinebreaks rdformsDescription">
-              {description}
-            </p>
-            {propinfo}
-          </>
-        }
-        placement="bottom-start"
-        disableHoverListener
-        disableTouchListener
-        onClose={handleTooltipClose}
-        onOpen={handleTooltipOpen}
-        open={open}
-      >
-        <span onClick={handleTooltipOpen}>{props.children}</span>
-      </StyledTooltip>
+      <div id={tooltipId}>
+        <StyledTooltip
+          title={<ItemTooltipTitle description={description} propinfo={propinfo} setOpen={setOpen} tooltipId={tooltipId}></ItemTooltipTitle>}
+          placement="bottom-start"
+          disableHoverListener
+          disableTouchListener
+          disableFocusListener
+          onFocus={handleTooltipOpen}
+          onOpen={handleTooltipOpen}
+          onClose={handleTooltipClose}
+          open={open}
+          slotProps={{
+            popper: {
+              disablePortal: true
+            },
+          }}
+        >
+          <span onClick={handleTooltipOpen}>{props.children}</span>
+        </StyledTooltip>
+      </div>
     </ClickAwayListener>
   );
 };
@@ -92,16 +128,22 @@ renderingContext.renderPresenterLabel = (rowNode, binding, item, context) => {
       item.getDescriptionMap();
     const desc = utils.getLocalizedValue(descMap, context.view.getLocale()).value;
     if (!compactField && desc) {
-      description = <div className="rdformsDescription" tabIndex="0">{desc}</div>;
+      description = <div className="rdformsDescription">{desc}</div>;
     }
   }
 
   const labelId = binding ? context.view.createLabelIndex(binding) : undefined;
+  const rdformsLabel = context.view.popupOnLabel ? 'rdformsLabel' : 'rdformsLabel rdformsNoPopup';
+  const role = context.view.popupOnLabel ? 'button' : null;
   label = item.hasStyle('heading') ?
-    <h2 tabIndex="0" id={labelId} className="rdformsLabelRow"><span className="rdformsLabel">{label}</span></h2> :
-    <span tabIndex="0" id={labelId} className="rdformsLabelRow"><span className="rdformsLabel">{label}</span></span>;
-  rowNode.appendChild(<Fragment key={`${binding ? binding.getHash() : item._internalId}_label` }><ItemTooltip
-                                   context={context} item={item}>{label}</ItemTooltip>{description}</Fragment>);
+    <h2 tabIndex="0" id={labelId} className="rdformsLabelRow"><span className={rdformsLabel} role={role}>{label}</span></h2> :
+    <span tabIndex="0" id={labelId} className="rdformsLabelRow"><span className={rdformsLabel} role={role}>{label}</span></span>;
+  if (context.view.popupOnLabel) {
+    rowNode.appendChild(<Fragment key={`${binding ? binding.getHash() : item._internalId}_label` }><ItemTooltip
+      context={context} item={item} binding={binding}>{label}</ItemTooltip>{description}</Fragment>);
+  } else {
+    rowNode.appendChild(<Fragment key={`${binding ? binding.getHash() : item._internalId}_label` }>{label}{description}</Fragment>);
+  }
 };
 
 renderingContext.renderEditorLabel = (rowNode, binding, item, context) => {
@@ -115,9 +157,13 @@ renderingContext.renderEditorLabel = (rowNode, binding, item, context) => {
     } else {
       label = '';
     }
-    label = item.hasStyle('heading') ? <h2 tabIndex="0" className="rdformsLabel">{label}</h2> :
-      <span tabIndex="0" className="rdformsLabel">{label}</span>;
-    label = <ItemTooltip item={item} context={context}>{label}</ItemTooltip>;
+    const rdformsLabel = context.view.popupOnLabel ? 'rdformsLabel' : 'rdformsLabel rdformsNoPopup';
+    const role = context.view.popupOnLabel ? 'button' : null;
+    label = item.hasStyle('heading') ? <h2 tabIndex="0" className={rdformsLabel} role={role}>{label}</h2> :
+      <span tabIndex="0" className={rdformsLabel} role={role}>{label}</span>;
+    if (context.view.popupOnLabel) {
+      label = <ItemTooltip item={item} context={context} binding={binding}>{label}</ItemTooltip>;
+    }
 
     const card = item.getCardinality();
     const b = context.view.messages;

package/src/view/renderingContext.js

@@ -336,6 +336,7 @@ const groupPresenter = (fieldDiv, binding, context) => {
     showDescription: context.view.showDescription,
     defaultLanguage: context.view.defaultLanguage,
     filterTranslations: context.view.filterTranslations,
+    popupOnLabel: context.view.popupOnLabel,
     truncate: context.view.truncate,
     truncateLimit: context.view.truncateLimit,
     includeLevel: context.view.includeLevel, // Copied from groupEditor, was this.includeLevel but that 'this' does not make sense here
@@ -354,6 +355,7 @@ const groupEditor = (fieldDiv, binding, context) => {
     binding,
     topLevel: false,
     compact: context.view.compact,
+    popupOnLabel: context.view.popupOnLabel,
     showDescription: context.view.showDescription,
     truncate: context.view.truncate,
     truncateLimit: context.view.truncateLimit,

package/src/view/resources/rdforms.css

@@ -204,6 +204,15 @@ a.rdformsUrl:hover {
 	cursor: pointer;
 }
 
+.rdformsLabel.rdformsNoPopup:hover {
+    text-decoration: initial;
+    cursor: initial;
+}
+
+.rdformsLabel .popover:hover {
+    cursor: initial;
+}
+
 .rdformsLabel.noPointer:hover {
     text-decoration: none;
     cursor: default;