1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-15 06:14:53 +00:00
TiddlyWiki5/editions/tw5.com/tiddlers/flexible-form-backup.tid

113 lines
3.9 KiB
Plaintext

created: 20240424104446409
modified: 20240424104446409
title: /core/template/flexible-form
type: text/vnd.tiddlywiki
\parameters (sort, type)
\whitespace trim
\define FI-VAR-FILTER-OPTIONS() fn var proc macro widget
\define FI-FOLDED() $:/temp/varFolded
\define FI-SEARCH() $:/temp/varSearch
\define FI-EXCLUDE() $:/temp/varExclude
\function tf.fi-tmpTypeOptions() [<DV-TMP-FILTER-OPTIONS>] [<qualify>] +[join[/]]
\function tf.fi-tmpSortOptions() [<DV-TMP-SORT-OPTIONS>] [<qualify>] +[join[/]]
\function tf.fi-foldedState() [<FI-FOLDED>] [<qualify>] +[join[/]]
\function tf.fi-searchText() [<FI-SEARCH>] [<qualify>] +[join[/]]
\function tf.fi-getSearchText() [<tf.fi-searchText>get[text]]
\function tf.fi-excludeText() [<FI-EXCLUDE>] [<qualify>] +[join[/]]
\function tf.fi-getExcludeText() [<tf.fi-excludeText>get[text]]
\procedure fi-clearSearchButton()
<$button class="tc-btn-invisible btn-x" tooltip=`${ [{$:/language/Search/Variables/Clear}] [{$:/language/Search/Variables/Filter}] +[join[ ]] }$`>
<$action-deletetiddler $tiddler=<<tf.dv-searchText>>/>
{{$:/core/images/close-button}}
</$button>
\end
\procedure fi-clearExcludeButton()
<$button class="tc-btn-invisible btn-y" tooltip=`${ [{$:/language/Search/Variables/Clear}] [{$:/language/Search/Variables/Exclude}] +[join[ ]] }$`>
<$action-deletetiddler $tiddler=<<tf.dv-excludeText>>/>
{{$:/core/images/close-button}}
</$button>
\end
\procedure fi-search-input-box()
<%if [<sort>!is[blank]] %>
<code class="tc-small-gap">sort:<<_tf.fi-sort>></code>
<%endif%>
<%if [<type>!is[blank]] %>
<code class="tc-small-gap">type:<<_tf.fi-type>></code>
<%endif%>
<span class="x-txt"><$text text={{$:/language/Search/Variables/Filter}}/></span>
<$edit-text tiddler=<<tf.fi-searchText>> tag=input class="x-inp" placeholder="filter variables by name"/> <<fi-clearSearchButton>>
<% if [<DV-SEARCH-STATE>get[text]match[yes]] %>
<<fi-clearStatesButton>>
<% else %>
<<fi-expandAllStatesButton>>
<% endif %>
\end
\procedure fi-exclude-input-box()
<span class="y-txt"><$text text={{$:/language/Search/Variables/Exclude}}/></span>
<$edit-text tiddler=<<tf.fi-excludeText>> tag=input class="y-inp"/> <<fi-clearExcludeButton>>
\end
\function tf.fi-opt-class() "c" [<option>] +[join[-]] "tc-dv-filterOptions" +[join[ ]]
\procedure fi-filterOptions()
<style>
.tc-dv-filterOptions [data-gap="right"] {
width: auto;
margin-right: .25em;
}
</style>
<span class="t-txt">{{$:/language/Search/Variables/Option/Type}}</span>
<$list filter="[enlist<FI-VAR-FILTER-OPTIONS>]" variable="option">
<$checkbox tiddler=<<tf.fi-tmpTypeOptions>> listField="text" checked=<<option>>
class=<<tf.fi-opt-class>> data-gap="right"
>
<<option>>
</$checkbox>
</$list>
\end
\procedure fi-sortOptions()
<span class="sel-txt">{{$:/language/Search/Variables/Option/Sort}}</span>
<$select tiddler=<<tf.fi-tmpSortOptions>> default="alphabetical" class="sel-drop">
<option value="alphabetical">alphabetical</option>
<option value="raw">raw</option>
</$select>
\end
<div class="tc-flexible-form">
<div class="tc-flexible-checkbox-container">
<<fi-filterOptions>> <<fi-sortOptions>>
</div>
<div class="tc-flexible-input-container">
<$reveal tag="div" type="nomatch" stateTitle=<<tf.fi-foldedState>> text="show" default="hide" class="btn-fld">
<$button tooltip={{$:/language/Search/Variables/Exclude/Show}} class="tc-fi-btn tc-btn-invisible">
<$action-setfield $tiddler=<<tf.fi-foldedState>> $field=text $value="show"/>
{{$:/core/images/right-arrow}}
</$button>
</$reveal>
<$reveal tag="div" type="nomatch" stateTitle=<<tf.fi-foldedState>> text="hide" default="hide" class="btn-fld">
<$button tooltip={{$:/language/Search/Variables/Exclude/Hide}} class="tc-fi-btn tc-btn-invisible">
<$action-setfield $tiddler=<<tf.fi-foldedState>> $field=text $value="hide"/>
{{$:/core/images/up-arrow}}
</$button>
</$reveal>
<<fi-search-input-box>>
<% if [<tf.fi-foldedState>get[text]match[show]] %>
<<fi-exclude-input-box>>
<% endif %>
</div>
</div>