mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2025-11-17 15:57:14 +00:00
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
This commit is contained in:
yaisog
@@ -10,16 +10,33 @@ caption: Simple
|
||||
$example$
|
||||
\end
|
||||
|
||||
\define search-example-code()
|
||||
<!--
|
||||
The inline filters update the displayed codeblock to reflect the choices the user has made in the UI.
|
||||
The rules pragma is used here to evaluate only these filters, but leave everything else untouched.
|
||||
The tabs and linebreaks within the parameters to addprefix, though maybe confusing, help with the readability of the codeblock output.
|
||||
-->
|
||||
\rules only filteredtranscludeinline
|
||||
<$dynannotate
|
||||
search="{{{ [{$:/temp/dynannotate-example/search}!is[blank]else[The human mind]] }}}"{{{ [{$:/temp/dynannotate-example/searchMode}!search::some[literal normal]addprefix[
|
||||
searchMode="]addsuffix["]] }}}
|
||||
searchCaseSensitive="{{{ [{$:/temp/dynannotate-example/searchCaseSensitive}!is[blank]else[yes]] }}}"{{{ [{$:/temp/dynannotate-example/searchClass}!is[blank]addprefix[
|
||||
searchClass="]addsuffix["]] }}}
|
||||
>
|
||||
<$transclude tiddler="$:/plugins/tiddlywiki/dynannotate/example-text-1" mode="block"/>
|
||||
<$transclude tiddler="$:/plugins/tiddlywiki/dynannotate/example-text-2" mode="block"/>
|
||||
</$dynannotate>
|
||||
\end
|
||||
|
||||
<div class="tc-dynannotation-example-info">
|
||||
|
||||
!! Simple annotation
|
||||
!! Annotations with `target`
|
||||
|
||||
We use the `target*` attributes to specify a target string for the annotation and optionally a prefix and suffix for disambiguating multiple occurances.
|
||||
We use the `target*` attributes to specify a target string for the annotation and optionally a prefix and suffix for disambiguating multiple occurences.
|
||||
|
||||
</div>
|
||||
|
||||
<<show-example """
|
||||
<$dynannotate
|
||||
<<show-example """<$dynannotate
|
||||
target="the"
|
||||
targetPrefix="Yet "
|
||||
targetSuffix=" speed"
|
||||
@@ -30,55 +47,35 @@ We use the `target*` attributes to specify a target string for the annotation an
|
||||
|
||||
<div class="tc-dynannotation-example-info">
|
||||
|
||||
!! Plain text searching
|
||||
!! Highlights with `search`
|
||||
|
||||
We use the `search` attribute to specify a search string for highlighting:
|
||||
We use the `search` attribute to specify a search string for highlighting.
|
||||
|
||||
The search type can be set with the `searchMode` and `searchCaseSensitive` attributes.
|
||||
|
||||
We can style the highlights with the `searchClass` attribute, which has some predefined values.
|
||||
|
||||
</div>
|
||||
|
||||
<<show-example """
|
||||
|tc-table-no-border tc-dynannotate-search-parameters|k
|
||||
|search term |<$edit-text tiddler="$:/temp/dynannotate-example/search" field="text" tag="input" default="The human mind" />|
|
||||
|search mode |<$select tiddler="$:/temp/dynannotate-example/searchMode" field="text" default="literal"><option value="literal">literal</option><option value="normal">normal</option><option value="regexp">regexp</option><option value="whitespace">whitespace</option><option value="some">some</option><option value="words">words</option></$select> |
|
||||
|case sensitive |<$checkbox tiddler="$:/temp/dynannotate-example/searchCaseSensitive" field="text" checked="yes" unchecked="no" default="yes"> <$text text={{{ [{$:/temp/dynannotate-example/searchCaseSensitive}!is[blank]else[yes]] }}} /></$checkbox> |
|
||||
|search class |<$select tiddler="$:/temp/dynannotate-example/searchClass" field="text" default=""><option value="">(none)</option><option value="tc-dynannotation-search-overlay-animated">tc-dynannotation-search-overlay-animated</option><option value="tc-dynannotation-search-overlay-blurred">tc-dynannotation-search-overlay-blurred</option></$select> |
|
||||
|
||||
<$dynannotate
|
||||
search="the"
|
||||
search={{{ [{$:/temp/dynannotate-example/search}!is[blank]else[The human mind]] }}}
|
||||
searchMode={{{ [{$:/temp/dynannotate-example/searchMode}] }}}
|
||||
searchCaseSensitive={{{ [{$:/temp/dynannotate-example/searchCaseSensitive}!is[blank]else[yes]] }}}
|
||||
searchClass={{{ [{$:/temp/dynannotate-example/searchClass}] }}}
|
||||
>
|
||||
<$transclude tiddler="$:/plugins/tiddlywiki/dynannotate/example-text-1" mode="block"/>
|
||||
<$transclude tiddler="$:/plugins/tiddlywiki/dynannotate/example-text-2" mode="block"/>
|
||||
</$dynannotate>
|
||||
""">>
|
||||
|
||||
<div class="tc-dynannotation-example-info">
|
||||
|
||||
!! Regular expression searching
|
||||
|
||||
We use the `mode` attribute set to `regexp` to highlight matches of a regular expression:
|
||||
|
||||
</div>
|
||||
|
||||
<<show-example """
|
||||
<$dynannotate
|
||||
search="the|an"
|
||||
searchMode="regexp"
|
||||
searchClass="tc-dynannotation-search-overlay-blurred"
|
||||
>
|
||||
<$transclude tiddler="$:/plugins/tiddlywiki/dynannotate/example-text-1" mode="block"/>
|
||||
</$dynannotate>
|
||||
""">>
|
||||
|
||||
<div class="tc-dynannotation-example-info">
|
||||
|
||||
!! Normalised whitespace searching
|
||||
|
||||
We use the `mode` attribute set to `whitespace` to search for a string with whitespace normalised (ie runs of whitespace are collapsed to a single space for matching purposes):
|
||||
|
||||
</div>
|
||||
|
||||
<<show-example """
|
||||
<$dynannotate
|
||||
search="does not work that way. It operates"
|
||||
searchMode="whitespace"
|
||||
searchClass="tc-dynannotation-search-overlay-animated"
|
||||
>
|
||||
<$transclude tiddler="$:/plugins/tiddlywiki/dynannotate/example-text-1" mode="block"/>
|
||||
</$dynannotate>
|
||||
""">>
|
||||
<$wikify name="wikifiedCode" text=<<search-example-code>> mode="block" output="text">
|
||||
<$codeblock code=<<wikifiedCode>>/>
|
||||
</$wikify>
|
||||
|
||||
<div class="tc-dynannotation-example-info">
|
||||
|
||||
@@ -90,8 +87,7 @@ Annotation tiddlers can be used to describe annotations. This example references
|
||||
|
||||
<<list-links "[all[shadows+tiddlers]annotate-tiddler[$:/plugins/tiddlywiki/dynannotate/example-text-1]]">>
|
||||
|
||||
<<show-example """
|
||||
<$dynannotate
|
||||
<<show-example """<$dynannotate
|
||||
filter="[all[shadows+tiddlers]annotate-tiddler[$:/plugins/tiddlywiki/dynannotate/example-text-1]]"
|
||||
>
|
||||
<$transclude tiddler="$:/plugins/tiddlywiki/dynannotate/example-text-1" mode="block"/>
|
||||
|
||||
@@ -34,6 +34,7 @@ title: $:/plugins/tiddlywiki/dynannotate/examples/viewtemplate/text
|
||||
selectionPopup={{{ [<currentTiddler>addprefix[$:/state/dynannotate/popup-selection/]] }}}
|
||||
search={{$:/temp/search}}
|
||||
searchClass="tc-dynannotation-search-overlay-blurred"
|
||||
searchCaseSensitive="no"
|
||||
searchMinLength={{$:/config/Search/MinLength}}
|
||||
>
|
||||
<$transclude mode="block">
|
||||
|
||||
@@ -1,28 +1,69 @@
|
||||
title: $:/plugins/tiddlywiki/dynannotate/examples/viewtemplate
|
||||
tags: $:/tags/dynannotateExamples
|
||||
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 button below. (Clicking the button below copies the custom view template from $:/plugins/tiddlywiki/dynannotate/examples/viewtemplate/text to $:/core/ui/ViewTemplate/body).
|
||||
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:
|
||||
Once enabled, this example demonstrates several features of Dynannotate:
|
||||
|
||||
* Highlighting of search results within tiddler bodies
|
||||
* Creating annotations on any tiddler by selecting text and then clicking a colour in the resulting dropdown
|
||||
* 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/ViewTemplateTitleFilters/dynannotate" tags="$:/tags/ViewTemplateTitleFilter" text="[[$:/plugins/tiddlywiki/dynannotate/examples/viewtemplate/text]]" list-before="$:/config/ViewTemplateBodyFilters/default"/>
|
||||
<$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/ViewTemplateTitleFilters/dynannotate"/>
|
||||
<$action-deletetiddler $tiddler="$:/config/ViewTemplateBodyFilters/dynannotate"/>
|
||||
Click here to revert to the core view template
|
||||
</$button>
|
||||
|
||||
<$codeblock code={{$:/plugins/tiddlywiki/dynannotate/examples/viewtemplate/text}}/>
|
||||
<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.
|
||||
|
||||
Reference in New Issue
Block a user