JsonRenderer

Type: Object

The renderer provides ways to render other nodes in your document inside of an object or widget.

Methods

Name Description
createRelatedNodePlaceholder

The createRelatedNodePlaceholder callback can be used to create a placeholder in the JsonML for a widget or object at which the specified node will be rendered.

Use createTraversalPlaceholder if you want to render the children of the current node.

Please note that each node should occur at most once in the view corresponding to any given DocumentsHierarchyNode.

For most cases, the findRelatedNodes function should be used to retrieve nodes to be used for such placeholders. This way the view only needs to update when those nodes change, rather than whenever something changed on the path through the DOM that was taken to find those nodes.

import readOnlyBlueprint from 'fontoxml-blueprints/src/readOnlyBlueprint.js';
import configureAsObject from 'fontoxml-families/src/configureAsObject.js';
import evaluateXPathToNodes from 'fontoxml-selectors/src/evaluateXPathToNodes.js';

export default function configureSxModule (sxModule) {
	configureAsObject(sxModule, 'self::widget', {
		createInnerJsonMl: function (sourceNode, renderer) {
			const relatedNodes = sourceNode.findRelatedNodes(function(sourceNodeProxy) {
				return evaluateXPathToNodes('child::thing', sourceNodeProxy, readOnlyBlueprint);
			});

			if (relatedNodes.length === 0) {
				return ['div', '(no things)'];
			}

			return ['div'].concat(
				relatedNodes.map(function(relatedNode) {
					return renderer.createRelatedNodePlaceholder(relatedNode);
				})
			);
		}
	});
}

  Arguments
# Name Type Description
1. sourceNode NodeProxy

the node to render at the placeholder's position

  Returns

Type: JsonML

A placeholder JsonML text node that should be included in the JsonML returned by the widget or object

createTraversalPlaceholder

The createTraversalPlaceholder callback can be used to create a placeholder in the JsonML for a widget or object at which the children of the current node will be rendered.

Use createRelatedNodePlaceholder if you want to render a different node or set of nodes.

Please note that each node should occur at most once in the view corresponding to any given DocumentsHierarchyNode.

import configureAsObject from 'fontoxml-families/src/configureAsObject.js';

export default function configureSxModule (sxModule) {
	configureAsObject(sxModule, 'self::container', {
		createInnerJsonMl: function (sourceNode, renderer) {
			return [
				'div',
				renderer.createTraversalPlaceholder()
			];
		}
	});
}

  Returns

Type: JsonML

A placeholder JsonML text node that should be included in the JsonML returned by the widget or object

Was this page helpful?