Presenter class¶
The Presenter and Editor classes share a common base class and are therefore quite alike. The required parameters on initialization are the same, and it supports the same optional parameters except includeLevel
which has no effect, see the documentation for the Editor Class to read about all the other parameters.
const presenter = new rdforms.Presenter({
resource,
graph,
template,
showLanguage: true,
filterTranslations: true,
truncate: true
},
'rdformsPresentAnchor');
As indicated in the example above, the presenter class supports a few additional parameters:
parameter | type | comment |
---|---|---|
showLanguage | boolean | When a language is provided on a literals it is shown only if showLanguage is set to true. |
filterTranslations | boolean | If true, multiple matches of the same template-item with a explicit nodetype set to LANGUAGE_LITERAL will be filtered so that only a single value is shown. The value shown is the one deemed to be closest to the locale of the system, e.g. if the locale is "en_US" literals with "en" will be preferred over "se" or literals without language given. |
truncate | boolean | If true large amount of bindings for the same item will be truncated, e.g. only 10 keywords will be shown with a button "show all" at the end. |
truncateLimit | number | The amount of bindings to truncate after, default is 10. |
Generated HTML and CSS classes¶
The default style is quite simple, feel free to experiment with providing you own stylesheet. The most important classes are:
styleclass | usage |
---|---|
rdforms | Always at the top of each presenter/editor, provides a suitable scope for the css. |
rdformsPresenter | Indicates that we have a presenter rather than an editor |
rdformsRow | A container node for a rdformsLabel and a rdformsFields |
rdformsTopLevel | An rdformsRow at the top of a presenter or editor |
rdformsLabel | The node containing the label |
rdformsFields | A node containing potentially multiple values for the same label or a sub-presenter / -editor |
rdformsField | A single value |
rdformsLanguage | The language part of a value, positioned inside the rformsField but not always present |
The HTML structure for a single label and a single value in the form of a literal with a language looks like:
<div class="rdforms rdformsPresenter compact">
<div class="rdformsTopLevel rdformsRow">
<div class="rdformsLabel">Some label</div>
<div class="rdformsFields">
<div class="rdformsField">
<div class="rdformsLanguage">en</div>
<div lang="en">A string literal in english</div>
</div>
</div>
</div>
</div>