TiddlyWiki5/plugins/tiddlywiki/dynannotate/examples/combined.tid

title: $:/plugins/tiddlywiki/dynannotate/examples/combined
tags: $:/tags/dynannotateExamples
caption: Combined

\define click-annotation-actions()
<$action-setfield $tiddler="$:/temp/dynannotate/demo/annotation-title" $value=<<annotationTiddler>>/>
\end

\define create-annotation-actions()
<$action-createtiddler
	$basetitle="$:/plugins/tiddlywiki/dynannotate/demo-annotation"
	$savetitle={{{ [<chunk>addprefix[$:/state/dynannotate/temp-save-title/]] }}}
	annotate-tiddler=<<chunk>>
	annotate-text=<<text>>
	annotate-prefix=<<prefix>>
	annotate-suffix=<<suffix>>
	annotate-colour=<<colour>>
/>
<$set name="popup-coords" value={{{ [<chunk>addprefix[$:/state/dynannotate/popup-selection/]get[text]] }}}>
<$action-deletetiddler $tiddler={{{ [<chunk>addprefix[$:/state/dynannotate/popup-selection/]] }}}/>
<$action-setfield $tiddler="$:/temp/dynannotate/demo/annotation-title" $value={{{ [<chunk>addprefix[$:/state/dynannotate/temp-save-title/]get[text]] }}}/>
<$action-popup $state={{{ [<chunk>addprefix[$:/state/dynannotate/popup-annotation/]] }}} $coords=<<popup-coords>>/>
</$set>
\end

<div class="tc-dynannotation-example-info">

This example combines many of the features of the dynannotate plugin:

* using annotation tiddlers to store the details of each annotation
* triggering actions when the annotations are clicked
* attaching a popup to the annotations
* tracking the selection with another popup

See the [[source|$:/plugins/tiddlywiki/dynannotate/examples/combined]] for details

</div>

Search: <$edit-text tiddler="$:/temp/search" tag="input"/>

<$list filter="[all[tiddlers+shadows]tag[DynannotateDemo]sort[title]]" variable="chunk">
<div style="position:relative;"><!-- Needed for the popups to work -->
<$dynannotate
	filter="[all[shadows+tiddlers]!has[draft.of]annotate-tiddler<chunk>]"
	actions=<<click-annotation-actions>>
	popup={{{ [<chunk>addprefix[$:/state/dynannotate/popup-annotation/]] }}}
	selection={{{ [<chunk>addprefix[$:/state/dynannotate/selection/]] }}}
	selectionPrefix={{{ [<chunk>addprefix[$:/state/dynannotate/selection-prefix/]] }}}
	selectionSuffix={{{ [<chunk>addprefix[$:/state/dynannotate/selection-suffix/]] }}}
	selectionPopup={{{ [<chunk>addprefix[$:/state/dynannotate/popup-selection/]] }}}
	search={{$:/temp/search}}
	searchClass="tc-dynannotation-search-overlay-blurred"
	searchMinLength={{$:/config/Search/MinLength}}
>
<$transclude tiddler=<<chunk>> mode="block"/>
</$dynannotate>
<$reveal type="popup" state={{{ [<chunk>addprefix[$:/state/dynannotate/popup-annotation/]] }}} position="belowright" animate="yes" retain="yes" style="overflow-y:hidden;">
<div class="tc-drop-down-wrapper">
<div class="tc-drop-down tc-popup-keep" style="max-width:550px;white-space: normal;overflow-y:hidden;">
<$tiddler tiddler={{$:/temp/dynannotate/demo/annotation-title}}>
<p>
<h2>
This is an annotation
</h2>
</p>
<p>
The annotation is stored in the tiddler:
</p>
<p>
<$link><$view field="title"/></$link>
</p>
<p>
The annotated text is ''<$view field="annotate-text"/>''.
</p>
<p>
Annotation Colour:
<$macrocall $name='colour-picker' actions="""
<$action-setfield $field="annotate-colour" $value=<<colour-picker-value>>/>
"""/>
</p>
</$tiddler>
</div>
</div>
</$reveal>
<$reveal type="popup" state={{{ [<chunk>addprefix[$:/state/dynannotate/popup-selection/]] }}} position="belowright" animate="yes" retain="yes" style="overflow-y:hidden;">
<div class="tc-drop-down-wrapper">
<div class="tc-drop-down tc-popup-keep" style="max-width:550px;white-space:normal;">
<$vars
	text={{{ [<chunk>addprefix[$:/state/dynannotate/selection/]get[text]] }}}
	prefix={{{ [<chunk>addprefix[$:/state/dynannotate/selection-prefix/]get[text]] }}}
	suffix={{{ [<chunk>addprefix[$:/state/dynannotate/selection-suffix/]get[text]] }}}
	colour={{{ [<chunk>addprefix[$:/state/dynannotate/annotation-colour/]get[text]] }}}
>
<$button actions=<<create-annotation-actions>>>
Create annotation
</$button>
<p>
Text: <$text text=<<text>>/>
</p>
<p>
Prefix: <$text text=<<prefix>>/>
</p>
<p>
Suffix: <$text text=<<suffix>>/>
</p>
</$vars>
</div>
</div>
</$reveal>
</div>
</$list>