mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2026-09-28 12:11:42 +00:00
Code Issues Releases Wiki Activity

Keyboard driven input rework (#8678)

Browse Source 
* Update tag-picker.tid

* rework kb-driven-input macro to procedures + new syntax

* rework change-input-tab to procedure

* fix

* remove console log :)

* replace defines with procedures

* fix link-dropdown

* fix focus-selector in new-field dropdown

* revert changing the footpring of change-input-tab + make it work as procedure

* update change-input-tab procedure

* refactor change-input-tab procedure and keep tags/Macro tag

* simplify complicated filter

* add tags/Global tag

* remove tags/Global tag

* rename variable
This commit is contained in:
Simon Huber
2024-10-24 14:34:23 +01:00
committed by GitHub
parent 9635e2d8af
commit 8b60cab6a2
10 changed files with 272 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/wiki/macros/keyboard-driven-input.tid
+96 -64
View File
@@ -1,105 +1,137 @@
title: $:/core/macros/keyboard-driven-input
tags: $:/tags/Macro
\define change-input-tab(stateTitle,tag,beforeafter,defaultState,actions)
\procedure prefix.bracket() [
\procedure suffix.bracket() ]
\function tf.change-input-tab.next-tab() [[all]addprefix<prefix.bracket>addsuffix<prefix.bracket>addsuffix[shadows+tiddlers]addsuffix<suffix.bracket>addsuffix[tag<tag>!has]addsuffix<prefix.bracket>addsuffix[draft.of]addsuffix<suffix.bracket>addsuffix<beforeafter>addsuffix[<currentState>]addsuffix<suffix.bracket>addsuffix[ :else]addsuffix<prefix.bracket>addsuffix<prefix.bracket>addsuffix<beforeafter>addsuffix<suffix.bracket>addsuffix[match]addsuffix<prefix.bracket>addsuffix[after]addsuffix<suffix.bracket>addsuffix[then<firstTab>]addsuffix<suffix.bracket>addsuffix[ :else]addsuffix<prefix.bracket>addsuffix<prefix.bracket>addsuffix<beforeafter>addsuffix<suffix.bracket>addsuffix[match]addsuffix<prefix.bracket>addsuffix[before]addsuffix<suffix.bracket>addsuffix[then<lastTab>]addsuffix<suffix.bracket>]
\procedure change-input-tab(stateTitle,tag,beforeafter,defaultState,actions)
\whitespace trim
<$set name="tabsList" filter="[all[shadows+tiddlers]tag<__tag__>!has[draft.of]]">
<$set name="tabsList" filter="[<explicitTabList>!is[blank]enlist-input[]] :else[all[shadows+tiddlers]tag<tag>!has[draft.of]]">
<$let
currentState={{{ [<__stateTitle__>!is[missing]get[text]] ~[<__defaultState__>] }}}
currentState={{{ [<stateTitle>!is[missing]get[text]] :else[<defaultState>] }}}
firstTab={{{ [enlist<tabsList>nth[1]] }}}
lastTab={{{ [enlist<tabsList>last[]] }}}
nextTab={{{ [all[shadows+tiddlers]tag<__tag__>!has[draft.of]$beforeafter$<currentState>] ~[[$beforeafter$]removeprefix[after]suffix[]addprefix<firstTab>] ~[[$beforeafter$]removeprefix[before]suffix[]addprefix<lastTab>] }}}
nextTabSubFilter=<<tf.change-input-tab.next-tab>>
nextTab={{{ [subfilter<nextTabSubFilter>] }}}
>
<$action-setfield $tiddler=<<__stateTitle__>> text=<<nextTab>>/>
$actions$
<$action-setfield $tiddler=<<stateTitle>> text=<<nextTab>>/>
<<actions>>
</$let>
</$set>
\end
\define keyboard-input-actions()
\procedure keyboard-input-actions()
\whitespace trim
<$list filter="[<__index__>match[]]">
<$action-setfield $tiddler=<<__storeTitle__>> text={{{ [<__tiddler__>get<__field__>] }}}/>
</$list>
<$list filter="[<__index__>!match[]]">
<$action-setfield $tiddler=<<__storeTitle__>> text={{{ [<__tiddler__>getindex<__index__>] }}}/>
</$list>
<%if [<index>match[]] %>
<$action-setfield $tiddler=<<storeTitle>> text={{{ [<tiddler>get<field>] }}}/>
<% endif %>
<%if [<index>!match[]] %>
<$action-setfield $tiddler=<<storeTitle>> text={{{ [<tiddler>getindex<index>] }}}/>
<% endif %>
\end
\define input-next-actions-inner()
\procedure input-next-actions-inner()
\whitespace trim
<$list filter="[<nextItem>minlength[1]]" variable="ignore">
<$action-setfield $tiddler=<<__selectionStateTitle__>> text=<<nextItem>>/>
<$list filter="[<__index__>match[]]">
<$action-setfield $tiddler=<<__tiddler__>> $field=<<__field__>> $value={{{ [<nextItem>] +[splitregexp[(?:.(?!-))+$]] }}}/>
</$list>
<$list filter="[<__index__>!match[]]">
<$action-setfield $tiddler=<<__tiddler__>> $index=<<__index__>> $value={{{ [<nextItem>] +[splitregexp[(?:.(?!-))+$]] }}}/>
</$list>
<$action-setfield $tiddler=<<__refreshTitle__>> text="yes"/>
</$list>
<%if [<nextItem>minlength[1]] %>
<$action-setfield $tiddler=<<selectionStateTitle>> text=<<nextItem>>/>
<%if [<index>match[]] %>
<$action-setfield $tiddler=<<tiddler>> $field=<<field>> $value={{{ [<nextItem>] :and[splitregexp[(?:.(?!-))+$]] }}}/>
<% endif %>
<%if [<index>!match[]] %>
<$action-setfield $tiddler=<<tiddler>> $index=<<index>> $value={{{ [<nextItem>] :and[splitregexp[(?:.(?!-))+$]] }}}/>
<% endif %>
<$action-setfield $tiddler=<<refreshTitle>> text="yes"/>
<% endif %>
\end
\define input-next-actions(afterOrBefore:"after",reverse:"")
\procedure input-next-actions-after()
\whitespace trim
<$list
filter="[<__storeTitle__>get[text]minlength<__filterMinLength__>] [<__filterMinLength__>match[0]] +[limit[1]]"
variable="ignore"
>
<%if [<storeTitle>get[text]minlength<filterMinLength>] [<filterMinLength>match[0]] %>
<$let
userInput={{{ [<__storeTitle__>get[text]] }}}
selectedItem={{{ [<__selectionStateTitle__>get[text]] }}}
configTiddler={{{ [subfilter<__configTiddlerFilter__>] }}}
primaryListFilter={{{ [<configTiddler>get<__firstSearchFilterField__>] }}}
secondaryListFilter={{{ [<configTiddler>get<__secondSearchFilterField__>] }}}
userInput={{{ [<storeTitle>get[text]] }}}
selectedItem={{{ [<selectionStateTitle>get[text]] }}}
configTiddler={{{ [subfilter<configTiddlerFilter>] }}}
primaryListFilter={{{ [<configTiddler>get<firstSearchFilterField>] }}}
secondaryListFilter={{{ [<configTiddler>get<secondSearchFilterField>] }}}
>
<$set
name="filteredList"
filter="[subfilter<primaryListFilter>addsuffix[-primaryList]] =[subfilter<secondaryListFilter>addsuffix[-secondaryList]]"
filter="[subfilter<primaryListFilter>addsuffix[-primaryList]] :all[subfilter<secondaryListFilter>addsuffix[-secondaryList]]"
>
<$let
nextItem={{{ [enlist<filteredList>$afterOrBefore$<selectedItem>] ~[enlist<filteredList>$reverse$nth[1]] }}}
nextItem={{{ [enlist<filteredList>after<selectedItem>] :else[enlist<filteredList>nth[1]] }}}
firstItem={{{ [enlist<filteredList>nth[1]] }}}
lastItem={{{ [enlist<filteredList>last[]] }}}
>
<$list filter="[<selectedItem>match<firstItem>!match<lastItem>]" variable="ignore">
<$set name="nextItem" value={{{ [[$afterOrBefore$]match[before]then<userInput>addsuffix[-userInput]] ~[<nextItem>] }}}>
<<input-next-actions-inner>>
</$set>
</$list>
<$list filter="[<selectedItem>match<lastItem>!match<firstItem>]" variable="ignore">
<$set name="nextItem" value={{{ [[$afterOrBefore$]match[after]then<userInput>addsuffix[-userInput]] ~[<nextItem>] }}}>
<<input-next-actions-inner>>
</$set>
</$list>
<$list filter="[<selectedItem>match<firstItem>match<lastItem>]" variable="ignore">
<%if [<selectedItem>match<firstItem>!match<lastItem>] [<selectedItem>!match<firstItem>!match<lastItem>] %>
<<input-next-actions-inner>>
<%elseif [<selectedItem>match<lastItem>!match<firstItem>] %>
<$set name="nextItem" value={{{ [<userInput>addsuffix[-userInput]] }}}>
<<input-next-actions-inner>>
</$set>
</$list>
<$list filter="[<selectedItem>!match<firstItem>!match<lastItem>]" variable="ignore">
<<input-next-actions-inner>>
</$list>
<%elseif [<selectedItem>match<firstItem>match<lastItem>] %>
<$set name="nextItem" value={{{ [<userInput>addsuffix[-userInput]] }}}>
<<input-next-actions-inner>>
</$set>
<% endif %>
</$let>
</$set>
</$let>
</$list>
<% endif %>
\end
\define keyboard-driven-input(tiddler,storeTitle,field:"text",index:"",tag:"input",type,focus:"",inputAcceptActions,inputAcceptVariantActions,inputCancelActions,placeholder:"",default:"",class,focusPopup,rows,minHeight,tabindex,size,autoHeight,filterMinLength:"0",refreshTitle,selectionStateTitle,cancelPopups:"",configTiddlerFilter,firstSearchFilterField:"first-search-filter",secondSearchFilterField:"second-search-filter")
\procedure input-next-actions-before()
\whitespace trim
<$keyboard key="((input-accept))" actions=<<__inputAcceptActions__>>>
<$keyboard key="((input-accept-variant))" actions=<<__inputAcceptVariantActions__>>>
<$keyboard key="((input-up))" actions=<<input-next-actions "before" "reverse[]">>>
<$keyboard key="((input-down))" actions=<<input-next-actions>>>
<$keyboard key="((input-cancel))" actions=<<__inputCancelActions__>>>
<%if [<storeTitle>get[text]minlength<filterMinLength>] [<filterMinLength>match[0]] %>
<$let
userInput={{{ [<storeTitle>get[text]] }}}
selectedItem={{{ [<selectionStateTitle>get[text]] }}}
configTiddler={{{ [subfilter<configTiddlerFilter>] }}}
primaryListFilter={{{ [<configTiddler>get<firstSearchFilterField>] }}}
secondaryListFilter={{{ [<configTiddler>get<secondSearchFilterField>] }}}
>
<$set
name="filteredList"
filter="[subfilter<primaryListFilter>addsuffix[-primaryList]] :all[subfilter<secondaryListFilter>addsuffix[-secondaryList]]"
>
<$let
nextItem={{{ [enlist<filteredList>before<selectedItem>] :else[enlist<filteredList>reverse[]nth[1]] }}}
firstItem={{{ [enlist<filteredList>nth[1]] }}}
lastItem={{{ [enlist<filteredList>last[]] }}}
>
<%if [<selectedItem>match<firstItem>!match<lastItem>] %>
<$set name="nextItem" value={{{ [<userInput>addsuffix[-userInput]] }}}>
<<input-next-actions-inner>>
</$set>
<%elseif [<selectedItem>match<lastItem>!match<firstItem>] [<selectedItem>!match<firstItem>!match<lastItem>] %>
<<input-next-actions-inner>>
<%elseif [<selectedItem>match<firstItem>match<lastItem>] %>
<$set name="nextItem" value={{{ [<userInput>addsuffix[-userInput]] }}}>
<<input-next-actions-inner>>
</$set>
<% endif %>
</$let>
</$set>
</$let>
<% endif %>
\end
\procedure keyboard-driven-input(tiddler,storeTitle,field:"text",index:"",tag:"input",type,focus:"",inputAcceptActions,inputAcceptVariantActions,inputCancelActions,placeholder:"",default:"",class,focusPopup,rows,minHeight,tabindex,size,autoHeight,filterMinLength:"0",refreshTitle,selectionStateTitle,cancelPopups:"",configTiddlerFilter,firstSearchFilterField:"first-search-filter",secondSearchFilterField:"second-search-filter")
\whitespace trim
<$keyboard key="((input-accept))" actions=<<inputAcceptActions>>>
<$keyboard key="((input-accept-variant))" actions=<<inputAcceptVariantActions>>>
<$keyboard key="((input-up))" actions=<<input-next-actions-before>>>
<$keyboard key="((input-down))" actions=<<input-next-actions-after>>>
<$keyboard key="((input-cancel))" actions=<<inputCancelActions>>>
<$edit-text
tiddler=<<__tiddler__>> field=<<__field__>> index=<<__index__>>
inputActions=<<keyboard-input-actions>> tag=<<__tag__>> class=<<__class__>>
placeholder=<<__placeholder__>> default=<<__default__>> focusPopup=<<__focusPopup__>>
focus=<<__focus__>> type=<<__type__>> rows=<<__rows__>> minHeight=<<__minHeight__>>
tabindex=<<__tabindex__>> size=<<__size__>> autoHeight=<<__autoHeight__>>
refreshTitle=<<__refreshTitle__>> cancelPopups=<<__cancelPopups__>>
tiddler=<<tiddler>> field=<<field>> index=<<index>>
inputActions=<<keyboard-input-actions>> tag=<<tag>> class=<<class>>
placeholder=<<placeholder>> default=<<default>> focusPopup=<<focusPopup>>
focus=<<focus>> type=<<type>> rows=<<rows>> minHeight=<<minHeight>>
tabindex=<<tabindex>> size=<<size>> autoHeight=<<autoHeight>>
refreshTitle=<<refreshTitle>> cancelPopups=<<cancelPopups>>
/>
</$keyboard>
</$keyboard>
core/wiki/macros/tag-picker.tid
+14 -14
View File
@@ -13,11 +13,11 @@ second-search-filter: [subfilter<tagListFilter>is[system]search:title<userInput>
<!-- tf.tagpicker-dropdown-id is needed if several tap-pickers are shown in one tiddler -->
\function tf.tagpicker-dropdown-id()
[<qualify $:/state/popup/tags-auto-complete>]
[[$(saveTiddler)$-[$(tagField)$-$(tagListFilter)$]substitute[]sha256[]] +[join[/]]
[[$(saveTiddler)$-[$(tagField)$-$(tagListFilter)$]substitute[]sha256[]] :and[join[/]]
\end
\function tf.tagpicker-dropdown-class() [<tf.tagpicker-dropdown-id>sha256[]addprefix[tc-]]
\function tf.get-tagpicker-focus-selector() [<tf.tagpicker-dropdown-class>addprefix[.]] .tc-popup-handle +[join[ ]]
\function tf.get-tagpicker-focus-selector() [<tf.tagpicker-dropdown-class>addprefix[.]] .tc-popup-handle :and[join[ ]]
<!-- clean up temporary tiddlers, so the next "pick" starts with a clean input -->
<!-- This could probably be optimized / removed if we would use different temp-tiddlers
@@ -30,7 +30,7 @@ second-search-filter: [subfilter<tagListFilter>is[system]search:title<userInput>
<!-- trigger __toggle tag__ by keyboard -->
\procedure add-tag-actions()
<$let tag=<<_tf.getTag>> >
<$action-listops $tiddler=<<saveTiddler>> $field=<<tagField>> $subfilter='+[toggle<tag>trim[]]'/>
<$action-listops $tiddler=<<saveTiddler>> $field=<<tagField>> $subfilter=':and[toggle<tag>trim[]]'/>
<%if [<tag>] :intersection[<saveTiddler>get<tagField>enlist-input[]] %>
<!-- tag has been removed - do nothing -->
<%else%>
@@ -46,7 +46,7 @@ second-search-filter: [subfilter<tagListFilter>is[system]search:title<userInput>
The second ESC tries to close the "draft tiddler"
-->
\procedure clear-tags-actions-inner()
<%if [<storeTitle>has[text]] ~[<newTagNameTiddler>has[text]] %>
<%if [<storeTitle>has[text]] :else[<newTagNameTiddler>has[text]] %>
<<delete-tag-state-tiddlers>>
<%else%>
<<cancel-delete-tiddler-actions "cancel">>
@@ -90,7 +90,7 @@ The second ESC tries to close the "draft tiddler"
<!-- tf.get-tagpicker-focus-selector has to be resolved for $:/core/ui/TagPickerTagTemplate,
othwerwise qualify in tf.tagpicker-dropdown-id causes problems -->
<$let currentTiddler=<<tag>>
button-classes=`tc-btn-invisible ${[<tag>addsuffix<suffix>] -[<tagSelectionState>get[text]] :then[[]] ~tc-tag-button-selected }$`
button-classes=`tc-btn-invisible ${[<tag>addsuffix<suffix>] :except[<tagSelectionState>get[text]] :then[[]] ~tc-tag-button-selected }$`
get-tagpicker-focus-selector=`${[<tf.get-tagpicker-focus-selector>]}$`
>
{{||$:/core/ui/TagPickerTagTemplate}}
@@ -102,10 +102,10 @@ The second ESC tries to close the "draft tiddler"
<!-- tag-picker-inner is the main function -->
\procedure tag-picker-inner()
<div class={{{ [[tc-edit-add-tag]] [<tf.tagpicker-dropdown-class>] +[join[ ]] }}}>
<div class={{{ [[tc-edit-add-tag]] [<tf.tagpicker-dropdown-class>] :and[join[ ]] }}}>
<div class="tc-edit-add-tag-ui">
<span class="tc-add-tag-name tc-small-gap-right">
<$macrocall $name="keyboard-driven-input"
<$transclude $variable="keyboard-driven-input"
tiddler=<<newTagNameTiddler>>
storeTitle=<<storeTitle>>
refreshTitle=<<refreshTitle>>
@@ -117,7 +117,7 @@ The second ESC tries to close the "draft tiddler"
focusPopup=<<tf.tagpicker-dropdown-id>>
class="tc-edit-texteditor tc-popup-handle"
tabindex=<<tabIndex>>
focus={{{ [{$:/config/AutoFocus}match[tags]then[true]] ~[[false]] }}}
focus={{{ [{$:/config/AutoFocus}match[tags]then[true]] :else[[false]] }}}
filterMinLength={{$:/config/Tags/MinLength}}
cancelPopups=<<cancelPopups>>
configTiddlerFilter="[[$:/core/macros/tag-picker]]"
@@ -146,9 +146,9 @@ The second ESC tries to close the "draft tiddler"
<div class="tc-block-dropdown-wrapper">
<%if [<tf.tagpicker-dropdown-id>has[text]] %>
<div class="tc-block-dropdown tc-block-tags-dropdown">
<$macrocall $name="tag-picker-listTags" filter=<<nonSystemTagsFilter>> suffix="-primaryList" empty={{$:/language/EditTemplate/Tags/EmptyMessage}}/>
<$transclude $variable="tag-picker-listTags" filter=<<nonSystemTagsFilter>> suffix="-primaryList" empty={{$:/language/EditTemplate/Tags/EmptyMessage}}/>
<hr>
<$macrocall $name="tag-picker-listTags" filter=<<systemTagsFilter>> suffix="-secondaryList" empty={{$:/language/EditTemplate/Tags/EmptyMessage/System}}/>
<$transclude $variable="tag-picker-listTags" filter=<<systemTagsFilter>> suffix="-secondaryList" empty={{$:/language/EditTemplate/Tags/EmptyMessage/System}}/>
</div>
<%endif%>
</div>
@@ -161,7 +161,7 @@ The second ESC tries to close the "draft tiddler"
\function _tf.getUserInput() [<storeTitle>get[text]]
\function _tf.getTag() [<newTagNameTiddler>get[text]]
<!-- Use this function if tag-picker is a stand alone macro. Otherwise use "newTagNameTiddler" defined for fieldmangler in EditTemplate -->
\function _tf.makeTagNameTiddler() [[$:/temp/NewTagName]] [<tagField>!match[tags]] +[join[/]] [<qualify>] +[join[]]
\function _tf.makeTagNameTiddler() [[$:/temp/NewTagName]] [<tagField>!match[tags]] :and[join[/]] [<qualify>] :and[join[]]
<!-- keep those variables because they may "bleed" into macros using old syntax -->
<!-- "nonSystemTagsFilter", "systemTagsFilter" __need to be the same__ as fields: "first-search-filter", "second-search-filter" -->
@@ -174,10 +174,10 @@ The second ESC tries to close the "draft tiddler"
saveTiddler={{{ [<tiddler>is[blank]then<currentTiddler>else<tiddler>] }}}
newTagNameTiddler={{{ [[newTagNameTiddler]is[variable]then<newTagNameTiddler>] :else[<_tf.makeTagNameTiddler>] }}}
storeTitle={{{ [[$:/temp/NewTagName/input]] [<tagField>!match[tags]] +[join[/]] [<qualify>] +[join[]] }}}
storeTitle={{{ [[$:/temp/NewTagName/input]] [<tagField>!match[tags]] :and[join[/]] [<qualify>] :and[join[]] }}}
newTagNameSelectionTiddlerQualified=<<qualify "$:/temp/NewTagName/selected-item">>
tagSelectionState={{{ [<newTagNameSelectionTiddler>!match[]] ~[<newTagNameSelectionTiddlerQualified>] }}}
tagSelectionState={{{ [<newTagNameSelectionTiddler>!match[]] :else[<newTagNameSelectionTiddlerQualified>] }}}
refreshTitle=<<qualify "$:/temp/NewTagName/refresh">>
@@ -186,6 +186,6 @@ The second ESC tries to close the "draft tiddler"
cancelPopups="yes"
>
<$macrocall $name="tag-picker-inner"/>
<$transclude $variable="tag-picker-inner"/>
</$let>
\end