TiddlyWiki5/core/wiki/macros/tag-picker.tid

title: $:/core/macros/tag-picker
tags: $:/tags/Macro $:/tags/Global
first-search-filter: [tags[]!is[system]search:title<userInput>sort[]]
second-search-filter: [tags[]is[system]search:title<userInput>sort[]]

\procedure get-tagpicker-focus-selector()
\function currentTiddlerCSSEscaped() [<saveTiddler>escapecss[]]
[data-tiddler-title=`$(currentTiddlerCSSEscaped)$`] .tc-add-tag-name input
\end

\procedure delete-tag-state-tiddlers() <$action-deletetiddler $filter="[<newTagNameTiddler>] [<storeTitle>] [<tagSelectionState>]"/>

\procedure add-tag-actions()
\whitespace trim
<$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

\procedure clear-tags-actions-inner()
\whitespace trim
<$list
	filter="[<storeTitle>has[text]] ~[<newTagNameTiddler>has[text]]"
	variable="ignore"
	emptyMessage="<<cancel-delete-tiddler-actions 'cancel'>>"
>
	<<delete-tag-state-tiddlers>>
</$list>
\end

\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
<$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>
</$list>
\end

\procedure tag-picker-inner()
\whitespace trim
<$let
	newTagNameInputTiddlerQualified=<<qualify "$:/temp/NewTagName/input">>
	newTagNameSelectionTiddlerQualified=<<qualify "$:/temp/NewTagName/selected-item">>
	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[]]"
>
	<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>>
					>
						{{$:/language/EditTemplate/Tags/Add/Button}}
					</$button>
				</$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>
			</$reveal>
		</div>
	</div>
</$let>
\end

\procedure tag-picker(actions, tagField:"tags")
\function userInput() [<storeTitle>get[text]]
\function tag() [<newTagNameTiddler>get[text]]
\whitespace trim
<$let
	saveTiddler=<<currentTiddler>>
	palette={{$:/palette}}
	qualified=<<qualify "$:/temp/NewTagName">>
	newTagNameTiddler={{{ [<newTagNameTiddler>!match[]] ~[<qualified>] }}}
>
	<$transclude $variable="tag-picker-inner" />
</$let>
\end