-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Rewrite tag-picker macros as procedures (#7883)
This PR attempts to modernize the tag-picker macros as procedures, as @Jermolene suggested in [#7548 (comment)](#7548 (comment)). What I changed: * rewrote macros as procedures/replaced text substitutions with variables * replaced nested $set and $var widgets with $let widgets/functions * minor rewrites to reduce redundant code * some additional linebreaks for clarity *This is functionally identical to my initial PR, [#7880](#7880, minus the extra file I'd accidentally added. Thank you for bearing with me as I learn to navigate GitHub.
- Loading branch information
Showing
1 changed file
with
132 additions
and
142 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,177 +1,167 @@ | ||
| title: $:/core/macros/tag-picker | ||
| tags: $:/tags/Macro | ||
| tags: $:/tags/Global | ||
| first-search-filter: [tags[]!is[system]search:title<userInput>sort[]] | ||
| second-search-filter: [tags[]is[system]search:title<userInput>sort[]] | ||
|
|
||
| \define get-tagpicker-focus-selector() [data-tiddler-title="$(currentTiddlerCSSEscaped)$"] .tc-add-tag-name input | ||
| \procedure get-tagpicker-focus-selector() | ||
| \function currentTiddlerCSSEscaped() [<saveTiddler>escapecss[]] | ||
| [data-tiddler-title=`$(currentTiddlerCSSEscaped)$`] .tc-add-tag-name input | ||
| \end | ||
|
|
||
| \define delete-tag-state-tiddlers() <$action-deletetiddler $filter="[<newTagNameTiddler>] [<storeTitle>] [<tagSelectionState>]"/> | ||
| \procedure delete-tag-state-tiddlers() <$action-deletetiddler $filter="[<newTagNameTiddler>] [<storeTitle>] [<tagSelectionState>]"/> | ||
|
|
||
| \define add-tag-actions(actions,tagField:"tags") | ||
| \procedure add-tag-actions() | ||
| \whitespace trim | ||
| <$set name="tag" value={{{ [<__tiddler__>get[text]] }}}> | ||
| <$list | ||
| filter="[<saveTiddler>!contains:$tagField$<tag>!match[]]" | ||
| variable="ignore" | ||
| emptyMessage="<$action-listops $tiddler=<<saveTiddler>> $field=<<__tagField__>> $subfilter='-[<tag>]'/>" | ||
| > | ||
| <$action-listops $tiddler=<<saveTiddler>> $field=<<__tagField__>> $subfilter="[<tag>trim[]]"/> | ||
| <$transclude $variable="__actions__"/> | ||
| </$list> | ||
| </$set> | ||
| <$let tag=<<tag>>> | ||
| <$action-listops $tiddler=<<saveTiddler>> $field=<<tagField>> $subfilter='+[toggle<tag>trim[]]'/> | ||
| <$list | ||
| filter="[<tag>] :intersection[<saveTiddler>get<tagField>enlist-input[]]" | ||
| variable="ignore" | ||
| emptyMessage="<<actions>>" | ||
| /> | ||
| </$let> | ||
| <<delete-tag-state-tiddlers>> | ||
| <$action-setfield $tiddler=<<refreshTitle>> text="yes"/> | ||
| \end | ||
|
|
||
| \define clear-tags-actions-inner() | ||
| \procedure clear-tags-actions-inner() | ||
| \whitespace trim | ||
| <$list | ||
| filter="[<storeTitle>has[text]] [<newTagNameTiddler>has[text]]" | ||
| filter="[<storeTitle>has[text]] ~[<newTagNameTiddler>has[text]]" | ||
| variable="ignore" | ||
| emptyMessage="<<cancel-delete-tiddler-actions 'cancel'>>" | ||
| > | ||
| <<delete-tag-state-tiddlers>> | ||
| </$list> | ||
| \end | ||
|
|
||
| \define clear-tags-actions() | ||
| \procedure clear-tags-actions() | ||
| \whitespace trim | ||
| <$let userInput=<<userInput>>> | ||
| <$list | ||
| filter="[<newTagNameTiddler>get[text]!match<userInput>]" | ||
| emptyMessage="<<clear-tags-actions-inner>>" | ||
| > | ||
| <$action-setfield $tiddler=<<newTagNameTiddler>> text=<<userInput>>/> | ||
| <$action-setfield $tiddler=<<refreshTitle>> text="yes"/> | ||
| </$list> | ||
| </$let> | ||
| \end | ||
|
|
||
| \procedure add-button-actions() | ||
| <$action-listops $tiddler=<<saveTiddler>> $field=<<tagField>> $subfilter="[<tag>trim[]]"/> | ||
| <<actions>> | ||
| <<delete-tag-state-tiddlers>> | ||
| <$action-sendmessage $message="tm-focus-selector" $param=<<get-tagpicker-focus-selector>>/> | ||
| \end | ||
|
|
||
| \procedure list-tags(filter, suffix) | ||
| \whitespace trim | ||
| <$set name="userInput" value={{{ [<storeTitle>get[text]] }}}> | ||
| <$list filter="[<newTagNameTiddler>get[text]!match<userInput>]" emptyMessage="<<clear-tags-actions-inner>>"> | ||
| <$action-setfield $tiddler=<<newTagNameTiddler>> text=<<userInput>>/><$action-setfield $tiddler=<<refreshTitle>> text="yes"/> | ||
| <$list | ||
| filter="[<userInput>minlength{$:/config/Tags/MinLength}limit[1]]" | ||
| emptyMessage="<div class='tc-search-results'>{{$:/language/Search/Search/TooShort}}</div>" variable="listItem" | ||
| > | ||
| <$list filter=<<filter>> variable="tag"> | ||
| <$let | ||
| button-classes=`tc-btn-invisible ${ [<tag>addsuffix<suffix>] -[<tagSelectionState>get[text]] :then[[]] ~tc-tag-button-selected }$` | ||
| currentTiddler=<<tag>> | ||
| > | ||
| {{||$:/core/ui/TagPickerTagTemplate}} | ||
| </$let> | ||
| </$list> | ||
| </$set> | ||
| </$list> | ||
| \end | ||
|
|
||
| \define tag-picker-inner(actions,tagField:"tags") | ||
| \procedure tag-picker-inner() | ||
| \whitespace trim | ||
| <$vars | ||
| <$let | ||
| newTagNameInputTiddlerQualified=<<qualify "$:/temp/NewTagName/input">> | ||
| newTagNameSelectionTiddlerQualified=<<qualify "$:/temp/NewTagName/selected-item">> | ||
| fallbackTarget={{$(palette)$##tag-background}} | ||
| colourA={{$(palette)$##foreground}} | ||
| colourB={{$(palette)$##background}} | ||
| fallbackTarget={{{ [<palette>getindex[tag-background]] }}} | ||
| colourA={{{ [<palette>getindex[foreground]] }}} | ||
| colourB={{{ [<palette>getindex[background]] }}} | ||
|
|
||
| storeTitle={{{ [<newTagNameInputTiddler>!match[]] ~[<newTagNameInputTiddlerQualified>] }}} | ||
| tagSelectionState={{{ [<newTagNameSelectionTiddler>!match[]] ~[<newTagNameSelectionTiddlerQualified>] }}} | ||
| tagAutoComplete=<<qualify "$:/state/popup/tags-auto-complete">> | ||
|
|
||
| refreshTitle=<<qualify "$:/temp/NewTagName/refresh">> | ||
| nonSystemTagsFilter="[tags[]!is[system]search:title<userInput>sort[]]" | ||
| systemTagsFilter="[tags[]is[system]search:title<userInput>sort[]]" | ||
| > | ||
| <$vars | ||
| storeTitle={{{ [<newTagNameInputTiddler>!match[]] ~[<newTagNameInputTiddlerQualified>] }}} | ||
| tagSelectionState={{{ [<newTagNameSelectionTiddler>!match[]] ~[<newTagNameSelectionTiddlerQualified>] }}} | ||
| > | ||
| <$vars | ||
| refreshTitle=<<qualify "$:/temp/NewTagName/refresh">> | ||
| nonSystemTagsFilter="[tags[]!is[system]search:title<userInput>sort[]]" | ||
| systemTagsFilter="[tags[]is[system]search:title<userInput>sort[]]" | ||
| > | ||
| <div class="tc-edit-add-tag"> | ||
| <div> | ||
| <span class="tc-add-tag-name tc-small-gap-right"> | ||
| <$macrocall | ||
| $name="keyboard-driven-input" | ||
| tiddler=<<newTagNameTiddler>> | ||
| storeTitle=<<storeTitle>> | ||
| refreshTitle=<<refreshTitle>> | ||
| selectionStateTitle=<<tagSelectionState>> | ||
| inputAcceptActions="<$macrocall $name='add-tag-actions' actions=<<__actions__>> tagField=<<__tagField__>>/>" | ||
| inputCancelActions=<<clear-tags-actions>> | ||
| tag="input" | ||
| placeholder={{$:/language/EditTemplate/Tags/Add/Placeholder}} | ||
| focusPopup=<<qualify "$:/state/popup/tags-auto-complete">> | ||
| class="tc-edit-texteditor tc-popup-handle" | ||
| tabindex=<<tabIndex>> | ||
| focus={{{ [{$:/config/AutoFocus}match[tags]then[true]] ~[[false]] }}} | ||
| filterMinLength={{$:/config/Tags/MinLength}} | ||
| cancelPopups=<<cancelPopups>> | ||
| configTiddlerFilter="[[$:/core/macros/tag-picker]]" | ||
| /> | ||
| </span> | ||
| <$button popup=<<qualify "$:/state/popup/tags-auto-complete">> | ||
| class="tc-btn-invisible tc-btn-dropdown" | ||
| tooltip={{$:/language/EditTemplate/Tags/Dropdown/Hint}} | ||
| aria-label={{$:/language/EditTemplate/Tags/Dropdown/Caption}} | ||
| <div class="tc-edit-add-tag"> | ||
| <div> | ||
| <span class="tc-add-tag-name tc-small-gap-right"> | ||
| <$transclude | ||
| $variable="keyboard-driven-input" | ||
| tiddler=<<newTagNameTiddler>> | ||
| storeTitle=<<storeTitle>> | ||
| refreshTitle=<<refreshTitle>> | ||
| selectionStateTitle=<<tagSelectionState>> | ||
| inputAcceptActions=<<add-tag-actions>> | ||
| inputCancelActions=<<clear-tags-actions>> | ||
| tag="input" | ||
| placeholder={{$:/language/EditTemplate/Tags/Add/Placeholder}} | ||
| focusPopup=<<tagAutoComplete>> | ||
| class="tc-edit-texteditor tc-popup-handle" | ||
| tabindex=<<tabIndex>> | ||
| focus={{{ [{$:/config/AutoFocus}match[tags]then[true]] ~[[false]] }}} | ||
| filterMinLength={{$:/config/Tags/MinLength}} | ||
| cancelPopups=<<cancelPopups>> | ||
| configTiddlerFilter="[[$:/core/macros/tag-picker]]" | ||
| /> | ||
| </span> | ||
| <$button popup=<<tagAutoComplete>> | ||
| class="tc-btn-invisible tc-btn-dropdown" | ||
| tooltip={{$:/language/EditTemplate/Tags/Dropdown/Hint}} | ||
| aria-label={{$:/language/EditTemplate/Tags/Dropdown/Caption}} | ||
| > | ||
| {{$:/core/images/down-arrow}} | ||
| </$button> | ||
| <$reveal state=<<storeTitle>> type="nomatch" text=""> | ||
| <$button actions=<<delete-tag-state-tiddlers>> | ||
| class="tc-btn-invisible tc-small-gap tc-btn-dropdown" | ||
| tooltip={{$:/language/EditTemplate/Tags/ClearInput/Hint}} | ||
| aria-label={{$:/language/EditTemplate/Tags/ClearInput/Caption}} | ||
| > | ||
| {{$:/core/images/close-button}} | ||
| </$button> | ||
| </$reveal> | ||
| <span class="tc-add-tag-button tc-small-gap-left"> | ||
| <$let tag=<<tag>>> | ||
| <$button set=<<newTagNameTiddler>> setTo="" | ||
| actions=<<add-button-actions>> | ||
| > | ||
| {{$:/core/images/down-arrow}} | ||
| {{$:/language/EditTemplate/Tags/Add/Button}} | ||
| </$button> | ||
| <$reveal state=<<storeTitle>> type="nomatch" text=""> | ||
| <$button class="tc-btn-invisible tc-small-gap tc-btn-dropdown" | ||
| tooltip={{$:/language/EditTemplate/Tags/ClearInput/Hint}} | ||
| aria-label={{$:/language/EditTemplate/Tags/ClearInput/Caption}} | ||
| > | ||
| {{$:/core/images/close-button}}<<delete-tag-state-tiddlers>> | ||
| </$button> | ||
| </$reveal> | ||
| <span class="tc-add-tag-button tc-small-gap-left"> | ||
| <$set name="tag" value={{{ [<newTagNameTiddler>get[text]] }}}> | ||
| <$button set=<<newTagNameTiddler>> setTo="" class=""> | ||
| <$action-listops $tiddler=<<saveTiddler>> $field=<<__tagField__>> $subfilter="[<tag>trim[]]"/> | ||
| <$transclude $variable="__actions__"/> | ||
| <$set name="currentTiddlerCSSEscaped" value={{{ [<saveTiddler>escapecss[]] }}}> | ||
| <<delete-tag-state-tiddlers>><$action-sendmessage $message="tm-focus-selector" $param=<<get-tagpicker-focus-selector>>/> | ||
| </$set> | ||
| {{$:/language/EditTemplate/Tags/Add/Button}} | ||
| </$button> | ||
| </$set> | ||
| </span> | ||
| </$let> | ||
| </span> | ||
| </div> | ||
| <div class="tc-block-dropdown-wrapper"> | ||
| <$reveal state=<<tagAutoComplete>> type="nomatch" text=""> | ||
| <div class="tc-block-dropdown tc-block-tags-dropdown"> | ||
| <$let userInput=<<userInput>>> | ||
| <$transclude $variable="list-tags" filter=<<nonSystemTagsFilter>> suffix="-primaryList" /> | ||
| <hr> | ||
| <$transclude $variable="list-tags" filter=<<systemTagsFilter>> suffix="-secondaryList" /> | ||
| </$let> | ||
| </div> | ||
| <div class="tc-block-dropdown-wrapper"> | ||
| <$reveal state=<<qualify "$:/state/popup/tags-auto-complete">> type="nomatch" text="" default=""> | ||
| <div class="tc-block-dropdown tc-block-tags-dropdown"> | ||
| <$set name="userInput" value={{{ [<storeTitle>get[text]] }}}> | ||
| <$list | ||
| filter="[<userInput>minlength{$:/config/Tags/MinLength}limit[1]]" | ||
| emptyMessage="<div class='tc-search-results' | ||
| > | ||
| {{$:/language/Search/Search/TooShort}}</div>" variable="listItem"> | ||
| <$list filter=<<nonSystemTagsFilter>> variable="tag"> | ||
| <$list | ||
| filter="[<tag>addsuffix[-primaryList]] -[<tagSelectionState>get[text]]" | ||
| emptyMessage="<$vars button-classes='tc-btn-invisible tc-tag-button-selected' actions=<<__actions__>> tagField=<<__tagField__>> currentTiddler=<<tag>>>{{||$:/core/ui/TagPickerTagTemplate}}</$vars>" | ||
| > | ||
| <$vars button-classes="tc-btn-invisible" | ||
| actions=<<__actions__>> | ||
| tagField=<<__tagField__>> | ||
| currentTiddler=<<tag>> | ||
| > | ||
| {{||$:/core/ui/TagPickerTagTemplate}} | ||
| </$vars> | ||
| </$list> | ||
| </$list> | ||
| </$list> | ||
| <hr> | ||
| <$list filter="[<userInput>minlength{$:/config/Tags/MinLength}limit[1]]" emptyMessage="<div class='tc-search-results'> | ||
| {{$:/language/Search/Search/TooShort}}</div>" variable="listItem"> | ||
| <$list filter=<<systemTagsFilter>> variable="tag"> | ||
| <$list filter="[<tag>addsuffix[-secondaryList]] -[<tagSelectionState>get[text]]" | ||
| emptyMessage="<$vars button-classes='tc-btn-invisible tc-tag-button-selected' actions=<<__actions__>> tagField=<<__tagField__>> currentTiddler=<<tag>>>{{||$:/core/ui/TagPickerTagTemplate}}</$vars>" | ||
| > | ||
| <$vars button-classes="tc-btn-invisible" | ||
| actions=<<__actions__>> | ||
| tagField=<<__tagField__>> | ||
| currentTiddler=<<tag>> | ||
| > | ||
| {{||$:/core/ui/TagPickerTagTemplate}} | ||
| </$vars> | ||
| </$list> | ||
| </$list> | ||
| </$list> | ||
| </$set> | ||
| </div> | ||
| </$reveal> | ||
| </div> | ||
| </div> | ||
| </$vars> | ||
| </$vars> | ||
| </$vars> | ||
| </$reveal> | ||
| </div> | ||
| </div> | ||
| </$let> | ||
| \end | ||
|
|
||
| \define tag-picker(actions,tagField:"tags") | ||
| \procedure tag-picker(actions, tagField:"tags") | ||
| \function userInput() [<storeTitle>get[text]] | ||
| \function tag() [<newTagNameTiddler>get[text]] | ||
| \whitespace trim | ||
| <$vars saveTiddler=<<currentTiddler>> palette={{$:/palette}}> | ||
| <$list | ||
| filter="[<newTagNameTiddler>match[]]" | ||
| emptyMessage="<$macrocall $name='tag-picker-inner' actions=<<__actions__>> tagField=<<__tagField__>>/>" | ||
| > | ||
| <$set name="newTagNameTiddler" value=<<qualify "$:/temp/NewTagName">>> | ||
| <$macrocall $name="tag-picker-inner" actions=<<__actions__>> tagField=<<__tagField__>>/> | ||
| </$set> | ||
| </$list> | ||
| </$vars> | ||
| <$let | ||
| saveTiddler=<<currentTiddler>> | ||
| palette={{$:/palette}} | ||
| qualified=<<qualify "$:/temp/NewTagName">> | ||
| newTagNameTiddler={{{ [<newTagNameTiddler>!match[]] ~[<qualified>] }}} | ||
| > | ||
| <$transclude $variable="tag-picker-inner" /> | ||
| </$let> | ||
| \end |