1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-16 14:54:51 +00:00
TiddlyWiki5/plugins/tiddlywiki/tour/tour-panel.tid
2023-10-05 13:50:02 +01:00

85 lines
3.2 KiB
Plaintext

title: $:/plugins/tiddlywiki/tour/panel
tags: $:/tags/PageTemplate
\whitespace trim
\procedure tour-buttons()
\procedure tv-action-refresh-policy() always
<div class="tc-tour-panel-navigation">
<$list filter="[function[tour-is-not-first-step]]" variable="ignore">
<$button class="tc-btn-big-green" style="background-color: red;">
<<tour-previous-step>>
back
</$button>
</$list>
<$list filter="[function[tour-is-not-last-step]]" variable="ignore">
<$button class="tc-btn-big-green" style="background-color: purple;">
<<tour-next-step>>
next
</$button>
</$list>
<$list filter="[function[tour-is-last-step]]" variable="ignore">
<$confetti/>
<$confetti delay=100/>
<$confetti delay=200/>
<$confetti delay=300/>
<$confetti delay=400/>
<$confetti delay=500/>
</$list>
</div>
\end
<$list filter="[{$:/config/ShowTour}!is[blank]else[show]match[show]]" variable="ignore">
<div class={{{ tc-tour-panel [{$:/state/tour/step}get[display-mode]else[normal]addprefix[tc-tour-panel-]] +[join[ ]] }}}>
<$image class="tc-tour-panel-banner-image" source={{{ [{$:/config/CurrentTour}get[logo]] }}}/>
<div class="tc-tour-panel-inner">
<div class="tc-tiddler-controls tc-tour-panel-controls">
<$button set="$:/config/ShowTour" setTo="no" class="tc-btn-invisible">{{$:/core/images/close-button}}</$button>
<$button popup=<<qualify "$:/state/popup/tour-dropdown">> class="tc-btn-invisible tc-tour-panel-list-button" selectedClass="tc-selected">
''Tour'': <<tour-display-current-tour>>
</$button>
<$reveal state=<<qualify "$:/state/popup/tour-dropdown">> type="popup" position="belowleft" animate="yes" tag="div">
<div class="tc-drop-down">
<p>
Choose a tour:
</p>
<p>
<<tour-chooser>>
</p>
</div>
</$reveal>
</div>
<$let
currentTour={{$:/config/CurrentTour}}
currentTourStep={{$:/state/tour/step}}
condition-var={{{ [<currentTourStep>get[condition-var]] :map[subfilter<currentTiddler>] }}}
>
<$list filter="[<currentTourStep>has[caption]]" variable="ignore">
<h1><$transclude $tiddler=<<currentTourStep>> $field="caption" mode="inline"/></h1>
</$list>
<!-- Handle steps without a condition -->
<$list filter="[<currentTourStep>!has[condition]]" variable="ignore">
<$transclude tiddler=<<currentTourStep>> mode="block"/>
<<tour-buttons>>
</$list>
<!-- Handle steps that have a condition -->
<$list filter="[<currentTourStep>has[condition]]" variable="ignore">
<$transclude tiddler=<<currentTourStep>> mode="block"/>
<$list filter={{{ [<currentTourStep>get[condition]] }}} limit="1" variable="ignore">
<$confetti/>
Congratulations, you may proceed
<<tour-buttons>>
</$list>
</$list>
</$let>
<$list filter="[{$:/state/tour/step}has[selector]]" variable="ignore">
<$button class="tc-btn-big-green" style="background-color: green;">
<$action-sendmessage $message="tm-spotlight-element" selector={{{ [{$:/state/tour/step}get[selector]] }}} selector-fallback-1={{{ [{$:/state/tour/step}get[selector-fallback-1]] }}} selector-fallback-2={{{ [{$:/state/tour/step}get[selector-fallback-2]] }}}/>
show me a hint
</$button>
</$list>
</div>
</div>
</$list>