Popovers
Popovers are usually small components that appear near a clicked element, button or icon. Popovers can contain additional information about an element or other object, and optionally provide buttons for any further actions, like edit or remove.
Fonto comes with some popovers out of the box, but custom ones can be added from your application configuration.
Custom popovers
A custom popover could be any React component associated with a name via the ui
JavaScript
import MyPopoverComponent from './MyPopoverComponent.jsx';
uiManager.registerReactComponent('MyPopoverComponent', MyPopoverComponent);
JavaScript
configureProperties(sxModule, 'self::para', {
popoverComponentName: 'MyPopoverComponent'
});
You may find this step-by-step guide to creating custom popovers useful.
Available popovers
The popovers that come with the platform are automatically registered by their CVK families, such as configure
-
The
Fx
is a generic popover for different reference types.Reference Popover -
The
Web
should be used for hyper links.Reference Popover -
The
Cross
should be used for cross links.Reference Popover -
For DITA editors, the
Dita
provides more information about that conref.Conref Reference Popover -
For DITA editors, the
Dita
is a version ofCrosslink Reference Popover Cross
, improved for DITA.Reference Popover
Element popovers in read-only context
Element popovers will be rendered everywhere, including read-only contexts such as document previews and past revisions in Document History. If your popover is designed as an interactive form you may want to completely disable it, or render it differently than normal.
To disable the popover when a different Fonto product than the Editor is used, or another user has the document lock, set the hide
static property of your popover component to true
:
JavaScript
import React from 'react';
import { Popover } from 'fds/components';
function RecipePopover ({ togglePopover }) {
return <Popover maxWidth="300px" minWidth="220px">
{/* And so on */}
</Popover>;
};
RecipePopover.hidePopoverInReadOnlyViews = true;
export default RecipePopover;
Render differently in a read-only context
An element can be read-only for various reasons, which are reflected in different public APIs.
The table below shows a matrix of what read-only is in Fonto. The columns are the 3 different read-only contexts in Fonto (i.e. why something is read-only). The rows describe what happens visually to the content, and lists the values of various APIs (or whether or not they apply) in each of the read-only contexts.
Using the CVK family configure |
When the lock on the document is unavailable or when the document needs to be reloaded |
View is read-only (e.g., on the review route or in previews in the sidebar of browse modals) | |
Visually the content is: |
greyed out |
greyed out |
unchanged |
|
Popover can not be opened |
Popover can not be opened |
Popover can not be opened |
|
Set to true for popovers opened for the node and its descendants |
Set to true for popovers opened for nodes in the document |
Set to true for popovers opened from the view |
fonto:is-node-read-only XPath function (use inside your custom popover with use |
Returns true for the node and its descendants |
Returns true for nodes in the document |
not affected |
Note that popovers could be opened from a read-only preview of an otherwise editable document (which is also loaded in the editor). In such cases, operation-based components such as Fx
Use any (combination of) the APIs listed in the table above to disable the components manually as necessary and relevant for your popover and your documents.