mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-12-26 01:50:28 +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
144 lines
6.8 KiB
Plaintext
144 lines
6.8 KiB
Plaintext
title: $:/core/ui/EditTemplate/fields
|
|
tags: $:/tags/EditTemplate
|
|
|
|
\define lingo-base() $:/language/EditTemplate/
|
|
\define config-title()
|
|
$:/config/EditTemplateFields/Visibility/$(currentField)$
|
|
\end
|
|
|
|
\define config-filter()
|
|
[[hide]] -[title{$(config-title)$}]
|
|
\end
|
|
|
|
\define current-tiddler-new-field-selector()
|
|
[data-tiddler-title="$(currentTiddlerCSSescaped)$"] .tc-edit-field-add-name-wrapper input
|
|
\end
|
|
|
|
\define new-field-actions()
|
|
<$action-sendmessage $message="tm-add-field" $name={{{ [<newFieldNameTiddler>get[text]] }}} $value={{{ [<newFieldNameTiddler>get[text]] :map[<newFieldValueTiddler>get<currentTiddler>] }}}/>
|
|
<$action-deletetiddler $filter="[<newFieldNameTiddler>] [<newFieldValueTiddler>] [<storeTitle>] [<searchListState>]"/>
|
|
<$action-sendmessage $message="tm-focus-selector" $param=<<current-tiddler-new-field-selector>>/>
|
|
\end
|
|
|
|
\define delete-state-tiddlers() <$action-deletetiddler $filter="[<newFieldNameTiddler>] [<storeTitle>] [<searchListState>]"/>
|
|
|
|
\define cancel-search-actions-inner()
|
|
<$list filter="[<storeTitle>has[text]] [<newFieldNameTiddler>has[text]]" variable="ignore" emptyMessage="""<<cancel-delete-tiddler-actions "cancel">>""">
|
|
<<delete-state-tiddlers>>
|
|
</$list>
|
|
\end
|
|
|
|
\define cancel-search-actions()
|
|
<$set name="userInput" value={{{ [<storeTitle>get[text]] }}}>
|
|
<$list filter="[<newFieldNameTiddler>get[text]!match<userInput>]" emptyMessage="""<<cancel-search-actions-inner>>""">
|
|
<$action-setfield $tiddler=<<newFieldNameTiddler>> text=<<userInput>>/><$action-setfield $tiddler=<<refreshTitle>> text="yes"/>
|
|
</$list>
|
|
</$set>
|
|
\end
|
|
|
|
\define new-field()
|
|
<$vars name={{{ [<newFieldNameTiddler>get[text]] }}}>
|
|
<$reveal type="nomatch" text="" default=<<name>>>
|
|
<$button tooltip=<<lingo Fields/Add/Button/Hint>>>
|
|
<$action-sendmessage $message="tm-add-field"
|
|
$name=<<name>>
|
|
$value={{{ [<newFieldValueTiddler>get<name>] }}}/>
|
|
<$action-deletetiddler $filter="[<newFieldNameTiddler>] [<newFieldValueTiddler>] [<storeTitle>] [<searchListState>]"/>
|
|
<<lingo Fields/Add/Button>>
|
|
</$button>
|
|
</$reveal>
|
|
<$reveal type="match" text="" default=<<name>>>
|
|
<$button>
|
|
<<lingo Fields/Add/Button>>
|
|
</$button>
|
|
</$reveal>
|
|
</$vars>
|
|
\end
|
|
\whitespace trim
|
|
|
|
<div class="tc-edit-fields">
|
|
<table class={{{ [all[current]fields[]] :filter[lookup[$:/config/EditTemplateFields/Visibility/]!match[hide]] +[count[]!match[0]] +[then[tc-edit-fields]] ~[[tc-edit-fields tc-edit-fields-small]] }}}>
|
|
<tbody>
|
|
<$list filter="[all[current]fields[]] +[sort[title]]" variable="currentField" storyview="pop">
|
|
<$list filter=<<config-filter>> variable="temp">
|
|
<tr class="tc-edit-field">
|
|
<td class="tc-edit-field-name">
|
|
<$text text=<<currentField>>/>:</td>
|
|
<td class="tc-edit-field-value">
|
|
<$keyboard key="((delete-field))" actions="""<$action-deletefield $field=<<currentField>>/><$set name="currentTiddlerCSSescaped" value={{{ [<currentTiddler>escapecss[]] }}}><$action-sendmessage $message="tm-focus-selector" $param=<<current-tiddler-new-field-selector>>/></$set>""">
|
|
<$transclude tiddler={{{ [<currentField>] :cascade[all[shadows+tiddlers]tag[$:/tags/FieldEditorFilter]!is[draft]get[text]] :and[!is[blank]else{$:/core/ui/EditTemplate/fieldEditor/default}] }}} />
|
|
</$keyboard>
|
|
</td>
|
|
<td class="tc-edit-field-remove">
|
|
<$button class="tc-btn-invisible" tooltip={{$:/language/EditTemplate/Field/Remove/Hint}} aria-label={{$:/language/EditTemplate/Field/Remove/Caption}}>
|
|
<$action-deletefield $field=<<currentField>>/><$set name="currentTiddlerCSSescaped" value={{{ [<currentTiddler>escapecss[]] }}}><$action-sendmessage $message="tm-focus-selector" $param=<<current-tiddler-new-field-selector>>/></$set>
|
|
{{$:/core/images/delete-button}}
|
|
</$button>
|
|
</td>
|
|
</tr>
|
|
</$list>
|
|
</$list>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<$fieldmangler>
|
|
<div class="tc-edit-field-add">
|
|
<em class="tc-edit tc-small-gap-right">
|
|
<<lingo Fields/Add/Prompt>>
|
|
</em>
|
|
<$vars refreshTitle=<<qualify "$:/temp/fieldname/refresh">> storeTitle=<<newFieldNameInputTiddler>> searchListState=<<newFieldNameSelectionTiddler>>>
|
|
<div class="tc-edit-field-add-name-wrapper">
|
|
<$macrocall $name="keyboard-driven-input" tiddler=<<newFieldNameTiddler>> storeTitle=<<storeTitle>> refreshTitle=<<refreshTitle>>
|
|
selectionStateTitle=<<searchListState>> tag="input" default="" placeholder={{$:/language/EditTemplate/Fields/Add/Name/Placeholder}}
|
|
focusPopup=<<qualify "$:/state/popup/field-dropdown">> class="tc-edit-texteditor tc-popup-handle" tabindex={{$:/config/EditTabIndex}}
|
|
focus={{{ [{$:/config/AutoFocus}match[fields]then[true]] ~[[false]] }}} cancelPopups="yes"
|
|
configTiddlerFilter="[[$:/config/EditMode/fieldname-filter]]" inputCancelActions=<<cancel-search-actions>> />
|
|
<$button popup=<<qualify "$:/state/popup/field-dropdown">> class="tc-btn-invisible tc-btn-dropdown tc-small-gap" tooltip={{$:/language/EditTemplate/Field/Dropdown/Hint}} aria-label={{$:/language/EditTemplate/Field/Dropdown/Caption}}>{{$:/core/images/down-arrow}}</$button>
|
|
<$reveal state=<<qualify "$:/state/popup/field-dropdown">> type="nomatch" text="" default="">
|
|
<div class="tc-block-dropdown tc-edit-type-dropdown">
|
|
<$set name="tv-show-missing-links" value="yes">
|
|
<$linkcatcher to=<<newFieldNameTiddler>>>
|
|
<div class="tc-dropdown-item">
|
|
<<lingo Fields/Add/Dropdown/User>>
|
|
</div>
|
|
<$set name="newFieldName" value={{{ [<storeTitle>get[text]] }}}>
|
|
<$list filter="[!is[shadow]!is[system]fields[]search:title<newFieldName>sort[]] -created -creator -draft.of -draft.title -modified -modifier -tags -text -title -type" variable="currentField">
|
|
<$list filter="[<currentField>addsuffix[-primaryList]] -[<searchListState>get[text]]" emptyMessage="""<$link to=<<currentField>> class="tc-list-item-selected"><$text text=<<currentField>>/></$link>""">
|
|
<$link to=<<currentField>>>
|
|
<$text text=<<currentField>>/>
|
|
</$link>
|
|
</$list>
|
|
</$list>
|
|
<div class="tc-dropdown-item">
|
|
<<lingo Fields/Add/Dropdown/System>>
|
|
</div>
|
|
<$list filter="[fields[]search:title<newFieldName>sort[]] -[!is[shadow]!is[system]fields[]]" variable="currentField">
|
|
<$list filter="[<currentField>addsuffix[-secondaryList]] -[<searchListState>get[text]]" emptyMessage="""<$link to=<<currentField>> class="tc-list-item-selected"><$text text=<<currentField>>/></$link>""">
|
|
<$link to=<<currentField>>>
|
|
<$text text=<<currentField>>/>
|
|
</$link>
|
|
</$list>
|
|
</$list>
|
|
</$set>
|
|
</$linkcatcher>
|
|
</$set>
|
|
</div>
|
|
</$reveal>
|
|
</div>
|
|
<$let currentTiddler=<<newFieldValueTiddler>> currentField={{{ [<newFieldNameTiddler>get[text]] }}}>
|
|
<span class="tc-edit-field-add-value tc-small-gap-right">
|
|
<$set name="currentTiddlerCSSescaped" value={{{ [<currentTiddler>escapecss[]] }}}>
|
|
<$keyboard key="((add-field))" actions=<<new-field-actions>>>
|
|
<$transclude tiddler={{{ [<currentField>] :cascade[all[shadows+tiddlers]tag[$:/tags/FieldEditorFilter]!is[draft]get[text]] :and[!is[blank]else{$:/core/ui/EditTemplate/fieldEditor/default}] }}} />
|
|
</$keyboard>
|
|
</$set>
|
|
</span>
|
|
<span class="tc-edit-field-add-button">
|
|
<$macrocall $name="new-field"/>
|
|
</span>
|
|
</$let>
|
|
</$vars>
|
|
</div>
|
|
</$fieldmangler>
|