mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-06-18 03:19:55 +00:00
b529e69289
* Allow the rendering of fields to be extended This commit extends the `$:/core/ui/EditTemplate/fields` tiddler to use a new cascade (Field Editor Cascade) to allow customizing the rendering of the field editor. It provides a default element for the cascade that displays the standard EditTextWidget as a fallback. That way, the implementation is completely backwards compatible. The `currentTiddler` and `currentField` variables are available in the transcluded tiddler. This has the additional benefit, that not only the `EditTextWidget` can be used. The user can use a dropdown-list or even something completely crazy. As long as it can be put into a tiddler that updates the field, it will be fine. * Make `select` Tags in Fields look like the rest This patch updates the CSS to make `tc-edit-texteditor` usable on `select`-tags as well. I'm not sure what `-webkit-appearance: none;` is for, but it hides the DropDown-arrow in Chrome and makes the select-tag hard to discover. I've changed the css to only apply it to the input tag. Maybe it can be removed altogether. * Add documentation for the Field Editor Cascade
31 lines
2.4 KiB
Plaintext
31 lines
2.4 KiB
Plaintext
created: 20220305183700000
|
|
modified: 20220305183700000
|
|
tags: Concepts
|
|
title: Customizing EditTemplate field rendering
|
|
type: text/vnd.tiddlywiki
|
|
|
|
When editing a tiddler the [[EditTemplate|$:/core/ui/EditTemplate/fields]] normally renders fields as simple input boxes. To modify this behaviour, the [[cascade mechanism|Cascades]] can be used. Via the [[Field Editor Cascade|Field Editor Cascade]] the name of the tiddler used for rendering the field editor can be specified. The content of this tiddler is transcluded to represent the content of the field.
|
|
|
|
To modify the appearance of all fields whose name ends with `-date` create a new tiddler and add the `$:/tags/FieldEditorFilter` tag to it. Add a `list-before` field and assign the value `$:/config/FieldEditorFilters/default`. Now you have to put the filter for the cascade into the tiddler's text field: `[regexp[-date$]then[$:/config/EditTemplateFields/Templates/dates]]`. This will transclude the tiddler named `$:/config/EditTemplateFields/Templates/dates` to render the input elements for all fields with names matching the regular expression.
|
|
|
|
The variables `currentTiddler` and `currentField` are set to pass information about the tiddler and field that are edited to the transcluded tiddler.
|
|
|
|
For example, a tiddler containing the following WikiText would render the field as an HTML input element of the type `date`. This will show a date picker for the fields on all modern browsers:
|
|
|
|
```
|
|
<$edit-text tiddler=<<currentTiddler>> field=<<currentField>> type="date" class="tc-edit-texteditor" placeholder="Set your date" tabindex={{$:/config/EditTabIndex}} cancelPopups="yes"/>
|
|
```
|
|
|
|
The `tabindex` and `cancelPopups` attributes make sure the HTML input element behaves exactly the default elements provided by TiddlyWiki.
|
|
|
|
Not only the `EditTextWidget` can be used. A tiddler containing the following WikiText will render the field as a drop-down-list that allows the user to select the name of a tiddler. The name of the selected tiddler will be stored in the field.
|
|
|
|
```
|
|
<$select tiddler=<<currentTiddler>> field=<<currentField>> class="tc-edit-texteditor" cancelPopups="yes">
|
|
<$list filter='[all[tiddlers]sort[title]]'>
|
|
<option value=<<currentTiddler>>><$view field='title'/></option>
|
|
</$list>
|
|
</$select>
|
|
```
|
|
|
|
The class `tc-edit-texteditor` should be used to style the `input` and `select` elements to match the theme of the TiddlyWiki installation. |