mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-06-29 00:33:15 +00:00
2340d48844
* Add searchModes: literal, some and words * Add additional search modes Description of selection tracker config tiddlers was also changed. * Update simple.tid * Improve View Template examples Transcludes a sample tiddler for demonstration instead of the dynannotate view template code. Adds an example for usage with $genesis to add state tiddler controlled per-tiddler highlights. * Make search highlights not case sensitive * Remove created and modified fields * Add another example text (Searching in Tiddlywiki) * Add dynannotate for vercel deployment This should probably not be merged... * Create LegacySelectionTracker.tid * Create SelectionTracker.tid * Revert putting the SelectionTracker config titles in code blocks * Replace inline styles with CSS class * Add class for view template examples Class name is tc-dynannotate-example-frame. * Remove some <br> line breaks. * Remove first example transclusion and fix some tab spacing * Add class to override control panel table layout * Add class to settings table * More tab shenanigans Great Scott! * Add explanatory comment to example macro * Change defaults to match widget behavior * Make previous macro comment more concise * Change example to transclude CP tiddler $:/core/ui/ControlPanel/TiddlerFields * Delete unnecessary example tiddler
70 lines
3.6 KiB
Plaintext
70 lines
3.6 KiB
Plaintext
caption: View Template
|
|
tags: $:/tags/dynannotateExamples
|
|
title: $:/plugins/tiddlywiki/dynannotate/examples/viewtemplate
|
|
|
|
\define show-example(example)
|
|
<$codeblock code=<<__example__>>/>
|
|
|
|
//''Displays as:''//
|
|
|
|
$example$
|
|
\end
|
|
|
|
<div class="tc-dynannotation-example-info">
|
|
|
|
!! Using Dynannotate in the view template
|
|
|
|
This example shows how to override the core view template with a custom template that includes dynannotate. It is disabled by default but can be enabled by clicking the corresponding button below. The example transcludes the [[Searching in TiddlyWiki|$:/plugins/tiddlywiki/dynannotate/searching-in-tiddlywiki]] tiddler for illustration purposes, but the chosen view template is applied to all open tiddlers.
|
|
|
|
Once enabled, this example demonstrates several features of Dynannotate:
|
|
|
|
* Highlight text within tiddler bodies -- any text entered in the sidebar search input will be highlighted (in all tiddlers)
|
|
* Create annotations (on any tiddler) by selecting text and then clicking //Create annotation// in the resulting dropdown
|
|
|
|
(Clicking the buttons below either puts the custom body view template [[$:/plugins/tiddlywiki/dynannotate/examples/viewtemplate/text]] in front of the default in the [[View Template Body Cascade|https://tiddlywiki.com/#View%20Template%20Body%20Cascade]] or removes it from the cascade).
|
|
|
|
</div>
|
|
|
|
<$button>
|
|
<$action-setfield $tiddler="$:/config/ViewTemplateBodyFilters/dynannotate" tags="$:/tags/ViewTemplateBodyFilter" text="[[$:/plugins/tiddlywiki/dynannotate/examples/viewtemplate/text]]" list-before="$:/config/ViewTemplateBodyFilters/default"/>
|
|
Click here to use the custom view template
|
|
</$button>
|
|
|
|
<$button>
|
|
<$action-deletetiddler $tiddler="$:/config/ViewTemplateBodyFilters/dynannotate"/>
|
|
Click here to revert to the core view template
|
|
</$button>
|
|
|
|
<p/>
|
|
|
|
<div class="tc-dynannotation-example-info">
|
|
|
|
!! Using Dynannotate to highlight text on a per-tiddler basis
|
|
|
|
Using state tiddlers containing the text which is to be highlighted, Dynannotate highlights can be applied on a per-tiddler basis when used in the body view template. This can also be combined with the [[GenesisWidget]] to insert the Dynannotate widget into the DOM only when such a highlight is configured.
|
|
|
|
This example uses a transcluded tiddler, but Dynannotate could be added to the view template (to show highlights in all parts of a tiddler) or to the body view template (to show highlights only in the tiddler body) in the same way. Note how in this example, Dynannotate only affects the transcluded content.
|
|
|
|
</div>
|
|
|
|
<<show-example """<$button set="$:/state/dynannotate/examples/viewtemplate" setTo="tiddler">Highlight "tiddler"</$button>
|
|
<$button set="$:/state/dynannotate/examples/viewtemplate" setTo="created">Highlight "created"</$button>
|
|
<$button set="$:/state/dynannotate/examples/viewtemplate" setTo="">Clear highlights</$button>
|
|
<p/>
|
|
<$let dynannotateText={{$:/state/dynannotate/examples/viewtemplate}}>
|
|
<$genesis $type={{{ [<dynannotateText>!is[blank]then[$dynannotate]] }}}
|
|
search=<<dynannotateText>>
|
|
searchDisplay="overlay"
|
|
searchClass="tc-dynannotation-search-overlay-animated"
|
|
searchCaseSensitive="no">
|
|
<div class="tc-dynannotate-example-frame">
|
|
|
|
!! `$:/core/ui/ControlPanel/TiddlerFields`:
|
|
<$transclude tiddler="$:/core/ui/ControlPanel/TiddlerFields" mode="block" />
|
|
</div>
|
|
</$genesis>
|
|
</$let>
|
|
""">>
|
|
|
|
When used in the view template, the state tiddler title could be derived from the current tiddler, e.g. `<$let dynannotateText={{{ [<currentTiddler>addprefix[$:/state/dynannotate/]get[text]] }}}>`, to configure highlights for each tiddler separately.
|