1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-25 09:30:28 +00:00
TiddlyWiki5/plugins/tiddlywiki/dynannotate/examples/viewtemplate.tid
yaisog 2340d48844
Add additional searchModes to Dynannotate (#7260)
* 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
2023-05-06 11:30:21 +01:00

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.