Properties editor
This add-on enables users to edit the attributes of elements. This add-on requires configuration for which attributes are editable.
Configure this add-on
First, create a file called attributesEditorConfiguration.json
on in the config
folder and set its contents to:
JSON
{
}
Then include the attributesEditorConfiguration.json
in the configuration.js
file. Set its contents in the attributes-editor-configuration
field with the ConfigurationManager.
JavaScript
import configurationManager from 'fontoxml-configuration/src/configurationManager.js';
import attributesEditorConfigurationJson from './attributesEditorConfiguration.json';
configurationManager.set('attributes-editor-configuration', attributesEditorConfigurationJson);
At this point, the editor should load without any errors.
Configure editable attributes
Editable attributes should be listed in the attributesEditorConfiguration.json
. This is best illustrated with an example:
JSON
{
"self::div": {
"class": {
"localName": "class",
"label": "Class",
"display": "input",
"properties": {
"type": "text"
}
}
}
}
The first level in the json should be an XPathTest to select an element. The second level is the name of the attribute which is being configured.
The following properties need to be configured for each attribute:
-
localName
: The name of the attribute as defined in the schema. -
namespaceURI
: The namespace uri of this attribute. This may be omitted for attributes in the null namespace. -
label
: The label which will be displayed for the attribute. -
display
: The type of input which will be provided for input. -
properties
: The properties of the input.
The different display options are:
-
readonly
: When an attribute should not be edited, but should be shown in the attributes editor, it can be configured to display as readonly:
JSON
{
"self::div": {
"id": {
"localName": "id",
"label": "Identifier",
"display": "readonly"
}
}
}
-
input
withproperties.type
is:-
text
: A normal text input, the value should be a string. -
number
: A numeric stepper input, the value should be a number. Extra properties that can be used arenumberOfDecimals
(default is 2) andstep
(default is 1)
-
JSON
{
"self::age": {
"mean": {
"localName": "mean",
"label": "Mean",
"display": "input",
"properties": {
"type": "number",
"numberOfDecimals": 0
}
}
}
}
-
select
: A single select with drop down menu. Use when the attribute should have a value out of a clearly defined list. The possible values should be provided withproperties.options
. This should be an array of items, with a label and value. This should be a string.
JSON
{
"self::div": {
"class": {
"localName": "class",
"label": "Class",
"display": "select",
"properties": {
"options": [
{
"label": "Aligned left",
"value": "left"
},
{
"label": "Aligned center",
"value": "center"
},
{
"label": "Aligned right",
"value": "right"
}
]
}
}
}
}
-
autocomplete
: A single autocomple with drop down menu. Use when the attribute should have a value out of a clearly defined (and long) list. The possible values should be provided withproperties.options
. This should be an array of items, with a label and value. This should be a string.
JSON
{
"self::div": {
"color": {
"localName": "color",
"label": "Color",
"display": "autocomplete",
"properties": {
"options": [
{
"label": "Blue",
"value": "blue"
},
{
"label": "Red",
"value": "red"
},
⋮
{
"label": "Yellow",
"value": "yellow"
},
{
"label": "Violet",
"value": "violet"
}
]
}
}
}
}
-
button-with-value-from-modal
: A button that opens a modal which should provide a value (this should be a string) that is displayed after the button. ThemodalComponentName
andbuttonLabel
should at least be added to theproperties
. The propertiesbuttonLabel
,icon
andiconAfter
are optional.
JSON
{
"self::div": {
"date": {
"localName": "date",
"label": "Date",
"display": "button-with-value-from-modal",
"properties": {
"modalComponentName": "DateSelectModal",
"icon": "calendar"
}
}
}
}