From b1eece2a9369dbf48f0a57488c0e7c084f821841 Mon Sep 17 00:00:00 2001
From: Jeremy Ruston <jeremy@jermolene.com>
Date: Tue, 3 Oct 2023 16:23:30 +0100
Subject: [PATCH] Add a settings pane giving a birds eye view of a tour

---
 plugins/tiddlywiki/tour/plugin.info           |   2 +-
 plugins/tiddlywiki/tour/settings.tid          | 134 ++++++++++++++++++
 plugins/tiddlywiki/tour/styles.tid            |  58 ++++++++
 .../steps/finished.tid                        |   1 +
 .../tagsTourIntroductionToTiddlyWiki.tid      |   2 +-
 5 files changed, 195 insertions(+), 2 deletions(-)
 create mode 100644 plugins/tiddlywiki/tour/settings.tid

diff --git a/plugins/tiddlywiki/tour/plugin.info b/plugins/tiddlywiki/tour/plugin.info
index 17b46c44b..dc0676cf5 100644
--- a/plugins/tiddlywiki/tour/plugin.info
+++ b/plugins/tiddlywiki/tour/plugin.info
@@ -2,6 +2,6 @@
 	"title": "$:/plugins/tiddlywiki/tour",
 	"name": "Tour",
 	"description": "A tour of TiddlyWiki",
-	"list": "readme",
+	"list": "readme settings",
 	"dependents": ["$:/plugins/tiddlywiki/confetti","$:/plugins/tiddlywiki/dynannotate"]
 }
diff --git a/plugins/tiddlywiki/tour/settings.tid b/plugins/tiddlywiki/tour/settings.tid
new file mode 100644
index 000000000..db3eb7945
--- /dev/null
+++ b/plugins/tiddlywiki/tour/settings.tid
@@ -0,0 +1,134 @@
+title: $:/plugins/tiddlywiki/tour/settings
+
+\procedure button-expand-collapse-all(caption,text)
+<$button>
+	<$list filter="[all[shadows+tiddlers]tag<currentTourTag>]" variable="currentStep">
+		<$let
+			collapseState={{{ [[$:/state/Tour/Settings/Tour/Visibility/]addsuffix<currentTour>addsuffix<currentStep>] }}}
+		>
+			<$action-setfield $tiddler=<<collapseState>> text=<<text>>/>
+		</$let>
+	</$list>
+	<$text text=<<caption>>/>
+</$button>
+\end
+
+\procedure display-tour-step-field-text(fieldName,fieldCaption)
+<$list filter="[<currentStep>has<fieldName>]" variable="ignore">
+	<tr>
+		<th>
+			<$text text=<<fieldCaption>>/>
+		</th>
+		<td>
+			<$text text={{{ [<currentStep>get<fieldName>] }}}/>
+		</td>
+	</tr>
+</$list>
+\end
+
+<$let
+	stateCurrentTour=<<qualify "$:/state/Tour/Settings/Current">>
+	defaultTour={{{ [{$:/config/CurrentTour}] :else[all[shadows+tiddlers]tag[$:/tags/Tour]] }}}
+>
+
+! Tour Overview
+
+Select a tour:
+<$select tiddler=<<stateCurrentTour>> default=<<defaultTour>>>
+	<$list filter="[all[shadows+tiddlers]tag[$:/tags/Tour]]">
+		<option value=<<currentTiddler>>>
+			<$transclude $field="description">
+				<$text text=<<currentTiddler>>/>
+			</$transclude>
+		</option>
+	</$list>
+</$select>
+
+<$let
+	currentTour={{{ [<stateCurrentTour>get[text]] :else[<defaultTour>] }}}
+	currentTourTag={{{ [<currentTour>get[tour-tag]] }}}
+>
+	<table class="tc-tour-settings-tour-details">
+		<tbody>
+			<tr>
+				<th>
+					Tour title
+				</th>
+				<td>
+					<$link to=<<currentTour>>><$text text=<<currentTour>>/></$link>
+				</td>
+			</tr>
+			<tr>
+				<th>
+					Tour description
+				</th>
+				<td>
+					<div class="tc-tour-settings-tour-details-description">
+						<$transclude $tiddler=<<currentTour>>>
+							(No description available)
+						</$transclude>
+					</div>
+				</td>
+			</tr>
+			<tr>
+				<th>
+					Tour logo
+				</th>
+				<td>
+					<div class="tc-tour-settings-tour-details-logo">
+						<$image source={{{ [<currentTour>get[logo]] }}}/>
+					</div>
+				</td>
+			</tr>
+			<tr>
+				<th>
+					Tour step tag
+				</th>
+				<td>
+					<$transclude $variable="tag" tag=<<currentTourTag>>/>
+				</td>
+			</tr>
+		</tbody>
+	</table>
+	<p>
+		<<button-expand-collapse-all "Expand All" "show">>
+		<<button-expand-collapse-all "Collapse All" "hide">>
+	</p>
+	<$list filter="[all[shadows+tiddlers]tag<currentTourTag>]" variable="currentStep" counter="stepNumber">
+		<$let
+			collapseState={{{ [[$:/state/Tour/Settings/Tour/Visibility/]addsuffix<currentTour>addsuffix<currentStep>] }}}
+		>
+			<div class="tc-tour-settings-tour-step">
+				<$button class="tc-btn-invisible tc-tour-settings-tour-step-heading">
+					<$action-setfield $tiddler=<<collapseState>> text={{{ [<collapseState>get[text]else[hide]match[show]then[hide]else[show]] }}}/>
+					<$list filter="[<collapseState>get[text]else[hide]match[show]]" variable="ignore" emptyMessage="{{$:/core/images/right-arrow}}">
+						{{$:/core/images/down-arrow}}
+					</$list>
+					<span class="tc-tour-settings-tour-step-heading-step-number">
+						<$text text=<<stepNumber>>/>
+					</span>
+					<$text text=<<currentStep>>/>
+				</$button>
+				<$reveal state=<<collapseState>> text="show" type="match" default="hide" animate="yes">
+					<table class="tc-tour-settings-tour-step-details">
+						<tbody>
+							<<display-tour-step-field-text "title" "Title">>
+							<<display-tour-step-field-text "condition" "Condition">>
+							<<display-tour-step-field-text "condition-var" "Condition Variable">>
+							<<display-tour-step-field-text "display-mode" "Display Mode">>
+							<<display-tour-step-field-text "enter-actions" "Enter Actions">>
+							<<display-tour-step-field-text "selector" "Hint Selector">>
+							<<display-tour-step-field-text "selector-fallback-1" "Hint Selector Fallback 1">>
+							<<display-tour-step-field-text "selector-fallback-2" "Hint Selector Fallback 2">>
+						</tbody>
+					</table>
+					<div class="tc-tour-settings-tour-step-body">
+						<$transclude $tiddler=<<currentStep>> $mode="block"/>
+					</div>
+				</$reveal>
+			</div>
+		</$let>
+	</$list>
+</$let>
+
+</$let>
diff --git a/plugins/tiddlywiki/tour/styles.tid b/plugins/tiddlywiki/tour/styles.tid
index 169bf1eef..53480590f 100644
--- a/plugins/tiddlywiki/tour/styles.tid
+++ b/plugins/tiddlywiki/tour/styles.tid
@@ -133,3 +133,61 @@ tags: $:/tags/Stylesheet
 	font-size: 1.5em;
 	line-height: 1.1;
 }
+
+.tc-tour-settings-tour-details,
+.tc-tour-settings-tour-step-details {
+	width: 100%;
+}
+
+.tc-tour-settings-tour-details th,
+.tc-tour-settings-tour-step-details th {
+	text-align: right;
+	vertical-align: top;
+	font-weight: normal;
+	width:10em;
+}
+
+.tc-tour-settings-tour-details td,
+.tc-tour-settings-tour-step-details td {
+	font-weight: bold;
+}
+
+.tc-tour-settings-tour-details-description {
+
+}
+
+.tc-tour-settings-tour-details-logo img {
+	max-width: 200px;
+	max-height: 100px;
+}
+
+.tc-tour-settings-tour-step {
+	border: 1px solid <<colour foreground>>;
+}
+
+button.tc-tour-settings-tour-step-heading {
+	background: <<colour muted-foreground>>;
+	display: block;
+	width: 100%;
+	text-align: left;
+	padding: 0.25em;
+	border: 0;
+}
+
+.tc-tour-settings-tour-step-heading-step-number {
+	font-weight: bold;
+	background: <<colour foreground>>;
+	color: <<colour background>>;
+	border-radius: 1em;
+	font-size: 0.9em;
+	display: inline-block;
+	padding: 0 4px;
+}
+
+.tc-tour-settings-tour-step-details {
+	margin: 0;
+}
+
+.tc-tour-settings-tour-step-body {
+	padding: 0.5em;
+}
diff --git a/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/finished.tid b/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/finished.tid
index d6fd8671e..846358236 100644
--- a/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/finished.tid
+++ b/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/finished.tid
@@ -1,4 +1,5 @@
 title: $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/finished
+tags: $:/tags/Tour/IntroductionToTiddlyWiki
 
 ! Congratulations
 
diff --git a/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/tagsTourIntroductionToTiddlyWiki.tid b/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/tagsTourIntroductionToTiddlyWiki.tid
index 8ea830769..1760b5192 100644
--- a/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/tagsTourIntroductionToTiddlyWiki.tid
+++ b/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/tagsTourIntroductionToTiddlyWiki.tid
@@ -1,2 +1,2 @@
 title: $:/tags/Tour/IntroductionToTiddlyWiki
-list: $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/welcome $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/tiddlers $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/links $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/closing-tiddlers $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/end-of-fullscreen $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/open-control-panel $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/close-control-panel $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/search $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/recent $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/create-tiddler
+list: $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/welcome $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/tiddlers $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/links $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/closing-tiddlers $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/end-of-fullscreen $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/open-control-panel $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/close-control-panel $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/search $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/recent $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/create-tiddler $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/finished