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">
	<%if [function[tour-is-not-first-step]] %>
		<$button class="tc-btn-big-green" style="background-color: red;">
			<<tour-previous-step>>
			back
		</$button>
	<%endif%>
	<%if [function[tour-is-not-last-step]] %>
		<$button class="tc-btn-big-green" style="background-color: purple;">
			<<tour-next-step>>
			next
		</$button>
	<%endif%>
	<%if [function[tour-is-last-step]] %>
		<$confetti/>
		<$confetti delay=100/>
		<$confetti delay=200/>
		<$confetti delay=300/>
		<$confetti delay=400/>
		<$confetti delay=500/>
	<%endif%>
</div>
\end

\procedure tour-step-no-condition()
<$transclude tiddler=<<currentTourStep>> mode="block"/>
<<tour-buttons>>
\end tour-step-no-condition

\procedure tour-step-condition-not-satisfied()
<$transclude tiddler=<<currentTourStep>> mode="block"/>
<%if [{$:/state/tour/step}has[selector]] %>
	<div class="tc-tour-panel-navigation">
		<$button class="tc-btn-big-green" style="background-color: red;">
			<$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>
	</div>
<%endif%>
\end tour-step-condition-not-satisfied

\procedure tour-step-condition-satisfied()
<$let tour-task="">
	<$transclude tiddler=<<currentTourStep>> mode="block"/>
</$let>
<$confetti/>
<p>
	Congratulations, you may proceed
</p>
<<tour-buttons>>
\end tour-step-condition-satisfied

<%if [{$:/config/ShowTour}!is[blank]else[show]match[show]] %>
	<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>] }}}
			>
				<%if [<currentTourStep>has[caption]] %>
					<h1><$transclude $tiddler=<<currentTourStep>> $field="caption" mode="inline"/></h1>
				<%endif%>
				<!-- Handle steps without a condition -->
				<%if [<currentTourStep>!has[condition]] %>
					<<tour-step-no-condition>>
				<%endif%>
				<!-- Handle steps that have a condition -->
				<%if [<currentTourStep>has[condition]] %>
					<$let condition={{{ [<currentTourStep>get[condition]] }}}>
						<%if [subfilter<condition>] %>
							<<tour-step-condition-satisfied>>
						<%else%>
							<<tour-step-condition-not-satisfied>>
						<%endif%>
					</$let>
				<%endif%>
			</$let>
		</div>
	</div>
<%endif%>