diff --git a/core/language/en-GB/ControlPanel.multids b/core/language/en-GB/ControlPanel.multids index f81ca0bbd..dec7c12df 100644 --- a/core/language/en-GB/ControlPanel.multids +++ b/core/language/en-GB/ControlPanel.multids @@ -36,6 +36,8 @@ EditorTypes/Hint: These tiddlers determine which editor is used to edit specific EditorTypes/Type/Caption: Type EditTemplateBody/Caption: Edit Template Body EditTemplateBody/Hint: This rule cascade is used by the default edit template to dynamically choose the template for editing the body of a tiddler. +FieldEditor/Caption: Field Editor +FieldEditor/Hint: This rules cascade is used to dynamically choose the template for rendering a tiddler field based on its name. It is used within the Edit Template. Info/Caption: Info Info/Hint: Information about this TiddlyWiki KeyboardShortcuts/Add/Prompt: Type shortcut here @@ -226,4 +228,4 @@ Tools/Download/Full/Caption: Download full wiki ViewTemplateBody/Caption: View Template Body ViewTemplateBody/Hint: This rule cascade is used by the default view template to dynamically choose the template for displaying the body of a tiddler. ViewTemplateTitle/Caption: View Template Title -ViewTemplateTitle/Hint: This rule cascade is used by the default view template to dynamically choose the template for displaying the title of a tiddler. \ No newline at end of file +ViewTemplateTitle/Hint: This rule cascade is used by the default view template to dynamically choose the template for displaying the title of a tiddler. diff --git a/core/ui/ControlPanel/Cascades/FieldEditor.tid b/core/ui/ControlPanel/Cascades/FieldEditor.tid new file mode 100644 index 000000000..46d3ecdf5 --- /dev/null +++ b/core/ui/ControlPanel/Cascades/FieldEditor.tid @@ -0,0 +1,9 @@ +title: $:/core/ui/ControlPanel/FieldEditor +tags: $:/tags/ControlPanel/Cascades +caption: {{$:/language/ControlPanel/FieldEditor/Caption}} + +\define lingo-base() $:/language/ControlPanel/FieldEditor/ + +<> + +{{$:/tags/FieldEditorFilter||$:/snippets/ListTaggedCascade}} diff --git a/core/ui/EditTemplate/fieldEditor-default.tid b/core/ui/EditTemplate/fieldEditor-default.tid new file mode 100644 index 000000000..8e27cdecf --- /dev/null +++ b/core/ui/EditTemplate/fieldEditor-default.tid @@ -0,0 +1,3 @@ +title: $:/core/ui/EditTemplate/fieldEditor/default + +<$edit-text tiddler=<> field=<> default="" class="tc-edit-texteditor" placeholder={{$:/language/EditTemplate/Fields/Add/Value/Placeholder}} tabindex={{$:/config/EditTabIndex}} cancelPopups="yes"/> \ No newline at end of file diff --git a/core/ui/EditTemplate/fields.tid b/core/ui/EditTemplate/fields.tid index 91578a99a..5a1aca083 100644 --- a/core/ui/EditTemplate/fields.tid +++ b/core/ui/EditTemplate/fields.tid @@ -15,7 +15,7 @@ $:/config/EditTemplateFields/Visibility/$(currentField)$ \end \define new-field-actions() -<$action-sendmessage $message="tm-add-field" $name={{{ [get[text]] }}} $value={{{ [get[text]] }}}/> +<$action-sendmessage $message="tm-add-field" $name={{{ [get[text]] }}} $value={{{ [get[text]] :map[get] }}}/> <$action-deletetiddler $filter="[] [] [] []"/> <$action-sendmessage $message="tm-focus-selector" $param=<>/> \end @@ -42,7 +42,7 @@ $:/config/EditTemplateFields/Visibility/$(currentField)$ <$button tooltip=<>> <$action-sendmessage $message="tm-add-field" $name=<> -$value={{{ [get[text]] }}}/> +$value={{{ [get] }}}/> <$action-deletetiddler $filter="[] [] [] []"/> <> @@ -66,7 +66,7 @@ $value={{{ [get[text]] }}}/> <$text text=<>/>: <$keyboard key="((delete-field))" actions="""<$action-deletefield $field=<>/><$set name="currentTiddlerCSSescaped" value={{{ [escapecss[]] }}}><$action-sendmessage $message="tm-focus-selector" $param=<>/>"""> -<$edit-text tiddler=<> field=<> placeholder={{$:/language/EditTemplate/Fields/Add/Value/Placeholder}} tabindex={{$:/config/EditTabIndex}} cancelPopups="yes"/> +<$transclude tiddler={{{ [] :cascade[all[shadows+tiddlers]tag[$:/tags/FieldEditorFilter]!is[draft]get[text]] :and[!is[blank]else{$:/core/ui/EditTemplate/fieldEditor/default}] }}} /> @@ -126,16 +126,18 @@ $value={{{ [get[text]] }}}/> +<$let currentTiddler=<> currentField={{{ [get[text]] }}}> <$set name="currentTiddlerCSSescaped" value={{{ [escapecss[]] }}}> <$keyboard key="((add-field))" actions=<>> -<$edit-text tiddler=<> tag="input" default="" placeholder={{$:/language/EditTemplate/Fields/Add/Value/Placeholder}} class="tc-edit-texteditor" tabindex={{$:/config/EditTabIndex}} cancelPopups="yes"/> +<$transclude tiddler={{{ [] :cascade[all[shadows+tiddlers]tag[$:/tags/FieldEditorFilter]!is[draft]get[text]] :and[!is[blank]else{$:/core/ui/EditTemplate/fieldEditor/default}] }}} /> <$macrocall $name="new-field"/> + diff --git a/core/wiki/config/FieldEditorFilters.multids b/core/wiki/config/FieldEditorFilters.multids new file mode 100644 index 000000000..f454e0bcc --- /dev/null +++ b/core/wiki/config/FieldEditorFilters.multids @@ -0,0 +1,4 @@ +title: $:/config/FieldEditorFilters/ +tags: $:/tags/FieldEditorFilter + +default: [[$:/core/ui/EditTemplate/fieldEditor/default]] diff --git a/editions/tw5.com/tiddlers/concepts/Cascades.tid b/editions/tw5.com/tiddlers/concepts/Cascades.tid index a3b49dcd2..bfc1fa41d 100644 --- a/editions/tw5.com/tiddlers/concepts/Cascades.tid +++ b/editions/tw5.com/tiddlers/concepts/Cascades.tid @@ -39,6 +39,7 @@ The TiddlyWiki core uses cascades to choose the following elements: |[[View Template Title Cascade]] |The template used to display the title of a particular tiddler (used by the default view template to display the tiddler title) | |[[View Template Body Cascade]] |The template used to display the view mode body of a particular tiddler (used by the default view template to display the tiddler body) | |[[Edit Template Body Cascade]] |The template used to display the edit mode body of a particular tiddler (used by the default edit template to display the tiddler body editor) | +|[[Field Editor Cascade]] |The template used to display the edit mode of a tiddler field (used by the default edit template to display the field editor) | You can see the current settings for each cascade in $:/ControlPanel under the ''Info'' -> ''Advanced'' -> ''Cascades'' tab. diff --git a/editions/tw5.com/tiddlers/concepts/Customizing EditTemplate Field Rendering.tid b/editions/tw5.com/tiddlers/concepts/Customizing EditTemplate Field Rendering.tid new file mode 100644 index 000000000..bc6a31f1f --- /dev/null +++ b/editions/tw5.com/tiddlers/concepts/Customizing EditTemplate Field Rendering.tid @@ -0,0 +1,31 @@ +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=<> field=<> 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=<> field=<> class="tc-edit-texteditor" cancelPopups="yes"> + <$list filter='[all[tiddlers]sort[title]]'> + + + +``` + +The class `tc-edit-texteditor` should be used to style the `input` and `select` elements to match the theme of the TiddlyWiki installation. \ No newline at end of file diff --git a/editions/tw5.com/tiddlers/concepts/Field Editor Cascade.tid b/editions/tw5.com/tiddlers/concepts/Field Editor Cascade.tid new file mode 100644 index 000000000..2211786e8 --- /dev/null +++ b/editions/tw5.com/tiddlers/concepts/Field Editor Cascade.tid @@ -0,0 +1,17 @@ +created: 20220305173931551 +modified: 20220305173931551 +tags: Cascades +title: Field Editor Cascade +type: text/vnd.tiddlywiki + +The field editor cascade is a [[cascade|Cascades]] used to choose a template for rendering the field editor within the [[EditTemplate|$:/core/ui/EditTemplate/fields]]. + +The default field editor cascade only contains one element: + +# Use the tiddler $:/core/ui/EditTemplate/fieldEditor/default to render the field + +See [[Customizing EditTemplate field rendering]] for more details. + +You can see the current settings for the field editor cascade in $:/ControlPanel under the ''Info'' -> ''Advanced'' -> ''Cascades'' -> ''Field Editor'' tab. + +<> \ No newline at end of file diff --git a/themes/tiddlywiki/snowwhite/base.tid b/themes/tiddlywiki/snowwhite/base.tid index 025aef8f5..3ffd2c3f8 100644 --- a/themes/tiddlywiki/snowwhite/base.tid +++ b/themes/tiddlywiki/snowwhite/base.tid @@ -36,7 +36,8 @@ tags: [[$:/tags/Stylesheet]] <> } -.tc-tiddler-frame input.tc-edit-texteditor { +.tc-tiddler-frame input.tc-edit-texteditor, +.tc-tiddler-frame select.tc-edit-texteditor { <> } diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid index 83798d8df..3bf8c3d4b 100644 --- a/themes/tiddlywiki/vanilla/base.tid +++ b/themes/tiddlywiki/vanilla/base.tid @@ -1197,15 +1197,22 @@ button.tc-btn-invisible.tc-remove-tag-button { .tc-tiddler-frame input.tc-edit-texteditor, .tc-tiddler-frame textarea.tc-edit-texteditor, -.tc-tiddler-frame iframe.tc-edit-texteditor { +.tc-tiddler-frame iframe.tc-edit-texteditor, +.tc-tiddler-frame select.tc-edit-texteditor { padding: 3px 3px 3px 3px; border: 1px solid <>; line-height: 1.3em; - -webkit-appearance: none; font-family: {{$:/themes/tiddlywiki/vanilla/settings/editorfontfamily}}; } .tc-tiddler-frame input.tc-edit-texteditor, +.tc-tiddler-frame textarea.tc-edit-texteditor, +.tc-tiddler-frame iframe.tc-edit-texteditor { + -webkit-appearance: none; +} + +.tc-tiddler-frame input.tc-edit-texteditor, +.tc-tiddler-frame select.tc-edit-texteditor, .tc-tiddler-frame textarea.tc-edit-texteditor { background-color: <>; }