…and potentially more. (If I the configtiddler is tagged “Weimar” “Crisis” the filter should also find Tiddlers tagged “Weimar” “Crisis” and “1923”.
I want to build a no-code-filterbuilder for the timelineplugin.
I want to use the tagpicker to choose the tags to set a filter using one or more tags. I have difficulties to find an elegant way to build a filter.
Next question: how do I let the users pick a field and choose a word that has to be contained in this field for a filter.
For those interested, it is part of the timeline-project and will be used for a timelinebuilder for the sidebar:
\define lingo-base() $:/language/
\define timeline-builder()
<div class="tc-sidebar-tab-timeline">
<h2>Timeline Builder</h2>
<div class="tc-control-panel">
<div class="tc-tag-section">
<div class="tc-tag-label">Tags to filter timeline events</div>
<div class="tc-tagpicker">
{{$:/config/timelinedata||$:/core/ui/EditTemplate/tags}}
<div class="tc-tag-explanation">Tags added to the config tiddler will be used in timeline filter</div>
</div>
</div>
<div class="tc-form-field">
<div class="tc-form-field-name">Timeline Title</div>
<$edit-text tiddler="$:/config/timelinedata" field="timelineTitle" default="" tag="input" placeholder="Enter timeline title"/>
</div>
<div class="tc-form-field">
<div class="tc-form-field-name">Description</div>
<$edit-text tiddler="$:/config/timelinedata" field="timelineDescription" default="" tag="textarea" placeholder="Enter timeline description"/>
</div>
<div class="tc-year-row">
<div class="tc-year-picker">
<div class="tc-year-label">Start Year (optional)</div>
<$edit-text tiddler="$:/config/timelinedata" field="startYear" default="" tag="input" placeholder="e.g. 1350"/>
</div>
<div class="tc-year-picker">
<div class="tc-year-label">End Year (optional)</div>
<$edit-text tiddler="$:/config/timelinedata" field="endYear" default="" tag="input" placeholder="e.g. 1550"/>
</div>
</div>
<div class="tc-image-row">
<div class="tc-image-url">
<div class="tc-image-label">Title Image URL (optional)</div>
<$edit-text tiddler="$:/config/timelinedata" field="titleImage" default="" tag="input" placeholder="URL for title image"/>
</div>
<div class="tc-image-caption">
<div class="tc-image-caption-label">Image Caption (optional)</div>
<$edit-text tiddler="$:/config/timelinedata" field="titleImageCaption" default="" tag="input" placeholder="Caption for title image"/>
</div>
</div>
</div>
<div class="tc-timeline-preview">
<h3>Timeline Preview</h3>
<$vars tagsFilter={{{ [[$:/config/timelinedata]tags[]addprefix[tag[]]addsuffix[]]join[ ] }}}>
<$vars combinedFilter={{{ [<tagsFilter>!is[blank]]~[[all[tiddlers]]] }}}>
<$timeline
filter=<<combinedFilter>>
timelineTitle={{$:/config/timelinedata!!timelineTitle}}
timelineDescription={{$:/config/timelinedata!!timelineDescription}}
startYear={{$:/config/timelinedata!!startYear}}
endYear={{$:/config/timelinedata!!endYear}}
titleImage={{$:/config/timelinedata!!titleImage}}
titleImageCaption={{$:/config/timelinedata!!titleImageCaption}}
/>
</$vars>
</$vars>
</div>
<div class="tc-copy-section">
<h3>Generated Code</h3>
<$vars tagsFilter={{{ [[$:/config/timelinedata]tags[]addprefix[tag[]]addsuffix[]]join[ ] }}}>
<$vars combinedFilter={{{ [<tagsFilter>!is[blank]]~[[all[tiddlers]]] }}}>
<$vars
timelineTitle={{$:/config/timelinedata!!timelineTitle}}
timelineDescription={{$:/config/timelinedata!!timelineDescription}}
startYear={{$:/config/timelinedata!!startYear}}
endYear={{$:/config/timelinedata!!endYear}}
titleImage={{$:/config/timelinedata!!titleImage}}
titleImageCaption={{$:/config/timelinedata!!titleImageCaption}}
>
<$set name="generatedCode" value="""<$timeline
filter="$combinedFilter$"
timelineTitle="$timelineTitle$"
timelineDescription="$timelineDescription$"
startYear="$startYear$"
endYear="$endYear$"
titleImage: "$titleImage$"
titleImageCaption: "$titleImageCaption$"
/>""">
<$codeblock code=<<generatedCode>>/>
<$button class="tc-btn-standard">
<$action-sendmessage $message="tm-copy-to-clipboard" $param=<<generatedCode>>/>
Copy to Clipboard
</$button>
</$set>
</$vars>
</$vars>
</$vars>
</div>
</div>
\end
<style>
.tc-sidebar-tab-timeline {
display: flex;
flex-direction: column;
height: 100%;
overflow-y: auto;
padding: 0.5em;
}
.tc-control-panel {
margin-bottom: 1em;
}
.tc-form-field, .tc-tag-section {
margin-bottom: 0.8em;
}
.tc-form-field-name, .tc-tag-label {
font-weight: bold;
margin-bottom: 0.2em;
}
.tc-tagpicker {
margin-bottom: 0.5em;
}
.tc-tag-explanation {
font-size: 0.8em;
color: #666;
margin-top: 0.3em;
font-style: italic;
}
.tc-year-row, .tc-image-row {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 0.8em;
}
.tc-year-picker, .tc-image-url, .tc-image-caption {
width: 48%;
}
.tc-year-label, .tc-image-label, .tc-image-caption-label {
font-weight: bold;
margin-bottom: 0.2em;
}
select, input, textarea {
width: 100%;
padding: 0.3em;
border: 1px solid #ddd;
border-radius: 3px;
}
textarea {
min-height: 80px;
resize: vertical;
}
.tc-timeline-preview {
flex-grow: 1;
border: 1px solid #ddd;
padding: 0.5em;
margin-bottom: 1em;
overflow-y: auto;
background-color: #f9f9f9;
}
.tc-copy-section {
margin-top: 1em;
border-top: 1px solid #ddd;
padding-top: 1em;
}
.tc-btn-standard {
padding: 0.4em 0.8em;
margin-top: 0.5em;
background-color: #efefef;
border: 1px solid #ddd;
border-radius: 3px;
cursor: pointer;
}
.tc-btn-standard:hover {
background-color: #e0e0e0;
}
</style>
<<timeline-builder>>