From 1aef8405bd74f77e194a0a7503207cb5b091aec2 Mon Sep 17 00:00:00 2001
From: Jeremy Ruston <174761+Jermolene@users.noreply.github.com>
Date: Thu, 20 Jul 2023 08:45:44 +0100
Subject: [PATCH] Add full screen section of tour and tour edition

---
 editions/tour/tiddlers/DefaultTiddlers.tid    |  3 ++
 editions/tour/tiddlers/SiteSubtitle.tid       |  2 +
 editions/tour/tiddlers/SiteTitle.tid          |  2 +
 editions/tour/tiddlers/styles.tid             |  5 ++
 editions/tour/tiddlywiki.info                 | 16 ++++++
 .../tiddlywiki/confetti/confetti-manager.js   |  3 +-
 .../tour/initialise-current-tour-step.tid     |  3 ++
 .../tiddlywiki/tour/simplified-tiddler.tid    | 22 +++++++++
 plugins/tiddlywiki/tour/startup-actions.tid   |  4 ++
 plugins/tiddlywiki/tour/state-tour-step.tid   |  2 +-
 .../tour/steps/closing-tiddlers.tid           | 33 +++++++++++++
 .../tour/steps/end-of-fullscreen.tid          | 13 +++++
 plugins/tiddlywiki/tour/steps/links.tid       | 31 ++++++++++++
 .../tour/steps/open-control-panel.tid         |  4 +-
 .../tour/steps/tiddlers-Jupiter.tid           |  4 ++
 .../tiddlywiki/tour/steps/tiddlers-Saturn.tid |  4 ++
 plugins/tiddlywiki/tour/steps/tiddlers.tid    | 19 +++++++
 plugins/tiddlywiki/tour/steps/welcome.tid     | 17 +++++++
 plugins/tiddlywiki/tour/styles.tid            | 49 ++++++++++++++++++-
 plugins/tiddlywiki/tour/tagsTourStep.tid      |  2 +-
 plugins/tiddlywiki/tour/tour-panel.tid        | 18 +++++--
 21 files changed, 245 insertions(+), 11 deletions(-)
 create mode 100644 editions/tour/tiddlers/DefaultTiddlers.tid
 create mode 100644 editions/tour/tiddlers/SiteSubtitle.tid
 create mode 100644 editions/tour/tiddlers/SiteTitle.tid
 create mode 100644 editions/tour/tiddlers/styles.tid
 create mode 100644 editions/tour/tiddlywiki.info
 create mode 100644 plugins/tiddlywiki/tour/initialise-current-tour-step.tid
 create mode 100644 plugins/tiddlywiki/tour/simplified-tiddler.tid
 create mode 100644 plugins/tiddlywiki/tour/startup-actions.tid
 create mode 100644 plugins/tiddlywiki/tour/steps/closing-tiddlers.tid
 create mode 100644 plugins/tiddlywiki/tour/steps/end-of-fullscreen.tid
 create mode 100644 plugins/tiddlywiki/tour/steps/links.tid
 create mode 100644 plugins/tiddlywiki/tour/steps/tiddlers-Jupiter.tid
 create mode 100644 plugins/tiddlywiki/tour/steps/tiddlers-Saturn.tid
 create mode 100644 plugins/tiddlywiki/tour/steps/tiddlers.tid
 create mode 100644 plugins/tiddlywiki/tour/steps/welcome.tid

diff --git a/editions/tour/tiddlers/DefaultTiddlers.tid b/editions/tour/tiddlers/DefaultTiddlers.tid
new file mode 100644
index 000000000..86f7b85bf
--- /dev/null
+++ b/editions/tour/tiddlers/DefaultTiddlers.tid
@@ -0,0 +1,3 @@
+title: $:/DefaultTiddlers
+
+[[Solar System]]
diff --git a/editions/tour/tiddlers/SiteSubtitle.tid b/editions/tour/tiddlers/SiteSubtitle.tid
new file mode 100644
index 000000000..77b568672
--- /dev/null
+++ b/editions/tour/tiddlers/SiteSubtitle.tid
@@ -0,0 +1,2 @@
+title: $:/SiteSubitle
+text: An Interactive Guide
\ No newline at end of file
diff --git a/editions/tour/tiddlers/SiteTitle.tid b/editions/tour/tiddlers/SiteTitle.tid
new file mode 100644
index 000000000..a719f77f6
--- /dev/null
+++ b/editions/tour/tiddlers/SiteTitle.tid
@@ -0,0 +1,2 @@
+title: $:/SiteTitle
+text: ~TiddlyWiki Tour
\ No newline at end of file
diff --git a/editions/tour/tiddlers/styles.tid b/editions/tour/tiddlers/styles.tid
new file mode 100644
index 000000000..48ccb5803
--- /dev/null
+++ b/editions/tour/tiddlers/styles.tid
@@ -0,0 +1,5 @@
+title: $:/demoshow/styles
+tags: [[$:/tags/Stylesheet]]
+
+\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline
+
diff --git a/editions/tour/tiddlywiki.info b/editions/tour/tiddlywiki.info
new file mode 100644
index 000000000..1c6ce20dc
--- /dev/null
+++ b/editions/tour/tiddlywiki.info
@@ -0,0 +1,16 @@
+{
+	"description": "A step by step introduction to TiddlyWiki",
+	"plugins": [
+		"tiddlywiki/tour",
+		"tiddlywiki/confetti",
+		"tiddlywiki/dynannotate"
+	],
+	"themes": [
+		"tiddlywiki/vanilla",
+		"tiddlywiki/snowwhite"
+	],
+	"build": {
+		"index": [
+			"--rendertiddler","$:/core/save/all","index.html","text/plain"]
+	}
+}
diff --git a/plugins/tiddlywiki/confetti/confetti-manager.js b/plugins/tiddlywiki/confetti/confetti-manager.js
index 2e841cd83..98384bf32 100644
--- a/plugins/tiddlywiki/confetti/confetti-manager.js
+++ b/plugins/tiddlywiki/confetti/confetti-manager.js
@@ -22,7 +22,8 @@ ConfettiManager.prototype.launch = function (delay,options) {
 	var self = this,
 		defaultOptions = {
 			scalar: 1.2,
-			particleCount: 400
+			particleCount: 400,
+			zIndex: 2000
 		};
 	options = $tw.utils.extend(defaultOptions,options);
 	if(delay > 0) {
diff --git a/plugins/tiddlywiki/tour/initialise-current-tour-step.tid b/plugins/tiddlywiki/tour/initialise-current-tour-step.tid
new file mode 100644
index 000000000..be411edfc
--- /dev/null
+++ b/plugins/tiddlywiki/tour/initialise-current-tour-step.tid
@@ -0,0 +1,3 @@
+title: $:/plugins/tiddlywiki/tour/actions/initialise-current-tour-step
+
+<$transclude $tiddler={{$:/state/tour/step}} $field="startup-actions"/>
diff --git a/plugins/tiddlywiki/tour/simplified-tiddler.tid b/plugins/tiddlywiki/tour/simplified-tiddler.tid
new file mode 100644
index 000000000..22a146b9a
--- /dev/null
+++ b/plugins/tiddlywiki/tour/simplified-tiddler.tid
@@ -0,0 +1,22 @@
+title: $:/plugins/tiddlywiki/tour/simplified-tiddler
+
+\whitespace trim
+<$let storyTiddler=<<currentTiddler>>>
+	<div class="tc-tiddler-frame tc-tiddler-view-frame tc-tiddler-exists tc-tiddler-shadow " role="article">
+		<div class="tc-tiddler-title">
+			<div class="tc-titlebar">
+				<span class="tc-tiddler-controls">
+					<$list filter="[<tour-simplified-tiddler-close-button>match[yes]]" variable="ignore">
+						{{||$:/core/ui/Buttons/close}}
+					</$list>
+				</span>
+				<span>
+					<h2 class="tc-title"><$view field="caption"/></h2>
+				</span>
+			</div>
+		</div>
+		<div class="tc-tiddler-body">
+			<$transclude field="text" mode="block"/>
+		</div>
+	</div>
+</$let>
\ No newline at end of file
diff --git a/plugins/tiddlywiki/tour/startup-actions.tid b/plugins/tiddlywiki/tour/startup-actions.tid
new file mode 100644
index 000000000..a85af7538
--- /dev/null
+++ b/plugins/tiddlywiki/tour/startup-actions.tid
@@ -0,0 +1,4 @@
+title: $:/plugins/tiddlywiki/tour/startup-actions
+tags: $:/tags/StartupAction
+
+{{$:/plugins/tiddlywiki/tour/actions/initialise-current-tour-step}}
\ No newline at end of file
diff --git a/plugins/tiddlywiki/tour/state-tour-step.tid b/plugins/tiddlywiki/tour/state-tour-step.tid
index 9d878ca44..0264e204a 100644
--- a/plugins/tiddlywiki/tour/state-tour-step.tid
+++ b/plugins/tiddlywiki/tour/state-tour-step.tid
@@ -1,2 +1,2 @@
 title: $:/state/tour/step
-text: $:/plugins/tiddlywiki/tour/steps/open-control-panel
\ No newline at end of file
+text: $:/plugins/tiddlywiki/tour/steps/welcome
\ No newline at end of file
diff --git a/plugins/tiddlywiki/tour/steps/closing-tiddlers.tid b/plugins/tiddlywiki/tour/steps/closing-tiddlers.tid
new file mode 100644
index 000000000..39d1f04a0
--- /dev/null
+++ b/plugins/tiddlywiki/tour/steps/closing-tiddlers.tid
@@ -0,0 +1,33 @@
+title: $:/plugins/tiddlywiki/tour/steps/closing-tiddlers
+tags: $:/tags/TourStep
+display-mode: fullscreen
+startup-actions: <$action-setfield $tiddler="$:/temp/Tour/DemoStoryList" list="$:/plugins/tiddlywiki/tour/steps/tiddlers/Jupiter $:/plugins/tiddlywiki/tour/steps/tiddlers/Saturn"/>
+
+\define tour-simplified-tiddler-close-button() yes
+
+! Closing tiddlers
+
+In the top right corner of each tiddler there is a button marked {{$:/core/images/close-button|0.65em}} that can be used to close them when you are finished with them.
+
+Try closing both these tiddlers.
+
+<$navigator story="$:/temp/Tour/DemoStoryList" history="$:/temp/Tour/DemoHistoryList" openLinkFromInsideRiver="below">
+
+<$list
+	filter="[list[$:/temp/Tour/DemoStoryList]]"
+	history="$:/temp/Tour/DemoHistoryList"
+	template="$:/plugins/tiddlywiki/tour/simplified-tiddler"
+	storyview="classic"
+/>
+
+</$navigator>
+
+<$list filter="[list[$:/temp/Tour/DemoStoryList]count[]match[0]]" variable="ignore">
+
+<$confetti/>
+
+Congratulations, you may proceed
+
+<<tour-buttons>>
+
+</$list>
\ No newline at end of file
diff --git a/plugins/tiddlywiki/tour/steps/end-of-fullscreen.tid b/plugins/tiddlywiki/tour/steps/end-of-fullscreen.tid
new file mode 100644
index 000000000..ab6a5bd0a
--- /dev/null
+++ b/plugins/tiddlywiki/tour/steps/end-of-fullscreen.tid
@@ -0,0 +1,13 @@
+title: $:/plugins/tiddlywiki/tour/steps/end-of-fullscreen
+tags: $:/tags/TourStep
+display-mode: fullscreen
+
+! Going deeper
+
+Congratulations!
+
+You have completed the first part of this tour.
+
+Now we are going guide you through using ~TiddlyWiki.
+
+<<tour-buttons>>
diff --git a/plugins/tiddlywiki/tour/steps/links.tid b/plugins/tiddlywiki/tour/steps/links.tid
new file mode 100644
index 000000000..f3d501d61
--- /dev/null
+++ b/plugins/tiddlywiki/tour/steps/links.tid
@@ -0,0 +1,31 @@
+title: $:/plugins/tiddlywiki/tour/steps/links
+tags: $:/tags/TourStep
+display-mode: fullscreen
+startup-actions: <$action-setfield $tiddler="$:/temp/Tour/DemoStoryList" list="$:/plugins/tiddlywiki/tour/steps/tiddlers/Jupiter"/>
+
+! How do links work in ~TiddlyWiki?
+
+Links allow you to decide if you want more information on a particular area or term as you go.
+
+Try clicking the link to "Saturn".
+
+<$navigator story="$:/temp/Tour/DemoStoryList" history="$:/temp/Tour/DemoHistoryList" openLinkFromInsideRiver="below">
+
+<$list
+	filter="[list[$:/temp/Tour/DemoStoryList]]"
+	history="$:/temp/Tour/DemoHistoryList"
+	template="$:/plugins/tiddlywiki/tour/simplified-tiddler"
+	storyview="classic"
+/>
+
+</$navigator>
+
+<$list filter="[[$:/temp/Tour/DemoStoryList]contains[$:/plugins/tiddlywiki/tour/steps/tiddlers/Saturn]limit[1]]" variable="ignore">
+
+<$confetti/>
+
+Congratulations, you may proceed
+
+<<tour-buttons>>
+
+</$list>
\ No newline at end of file
diff --git a/plugins/tiddlywiki/tour/steps/open-control-panel.tid b/plugins/tiddlywiki/tour/steps/open-control-panel.tid
index 80583f0d2..071b64f52 100644
--- a/plugins/tiddlywiki/tour/steps/open-control-panel.tid
+++ b/plugins/tiddlywiki/tour/steps/open-control-panel.tid
@@ -4,9 +4,7 @@ selector: .tc-btn-\%24\%3A\%2Fcore\%2Fui\%2FButtons\%2Fcontrol-panel
 
 ! Welcome to ~TiddlyWiki
 
-This tour will guide you through the process of learning to use ~TiddlyWiki.
-
-Your first task is to open the control panel.
+Your task is to open the control panel.
 
 <$list filter="[[$:/StoryList]contains[$:/ControlPanel]limit[1]]" variable="ignore">
 
diff --git a/plugins/tiddlywiki/tour/steps/tiddlers-Jupiter.tid b/plugins/tiddlywiki/tour/steps/tiddlers-Jupiter.tid
new file mode 100644
index 000000000..39893879a
--- /dev/null
+++ b/plugins/tiddlywiki/tour/steps/tiddlers-Jupiter.tid
@@ -0,0 +1,4 @@
+title: $:/plugins/tiddlywiki/tour/steps/tiddlers/Jupiter
+caption: Jupiter
+
+Jupiter is the largest planet in the Solar System. It is the fifth planet from the Sun. Jupiter is a gas giant because it is so large and made of gas. The other gas giants in the Solar System are [[Saturn|$:/plugins/tiddlywiki/tour/steps/tiddlers/Saturn]], Uranus, and Neptune.
diff --git a/plugins/tiddlywiki/tour/steps/tiddlers-Saturn.tid b/plugins/tiddlywiki/tour/steps/tiddlers-Saturn.tid
new file mode 100644
index 000000000..7488b7824
--- /dev/null
+++ b/plugins/tiddlywiki/tour/steps/tiddlers-Saturn.tid
@@ -0,0 +1,4 @@
+title: $:/plugins/tiddlywiki/tour/steps/tiddlers/Saturn
+caption: Saturn
+
+Saturn is the sixth planet from the Sun located in the Solar System. It is the second largest planet in the Solar System, after Jupiter. Saturn is one of the four gas giant planets in the Solar System, along with [[Jupiter|$:/plugins/tiddlywiki/tour/steps/tiddlers/Jupiter]], Uranus, and Neptune.
\ No newline at end of file
diff --git a/plugins/tiddlywiki/tour/steps/tiddlers.tid b/plugins/tiddlywiki/tour/steps/tiddlers.tid
new file mode 100644
index 000000000..cedef6c13
--- /dev/null
+++ b/plugins/tiddlywiki/tour/steps/tiddlers.tid
@@ -0,0 +1,19 @@
+title: $:/plugins/tiddlywiki/tour/steps/tiddlers
+tags: $:/tags/TourStep
+display-mode: fullscreen
+
+! How does ~TiddlyWiki work?
+
+~TiddlyWiki is a great tool that lets you collect and organize all kinds of information into interconnected bite-sized pieces called ''tiddlers''.
+
+A tiddler is like an index card.
+
+<$let tv-wikilinks="no">
+
+{{$:/plugins/tiddlywiki/tour/steps/tiddlers/Jupiter||$:/plugins/tiddlywiki/tour/simplified-tiddler}}
+
+</$let>
+
+Each tiddler must have a unique title that is used to distinguish it.
+
+<<tour-buttons>>
diff --git a/plugins/tiddlywiki/tour/steps/welcome.tid b/plugins/tiddlywiki/tour/steps/welcome.tid
new file mode 100644
index 000000000..7237a3c89
--- /dev/null
+++ b/plugins/tiddlywiki/tour/steps/welcome.tid
@@ -0,0 +1,17 @@
+title: $:/plugins/tiddlywiki/tour/steps/welcome
+tags: $:/tags/TourStep
+display-mode: fullscreen
+
+! Hello!
+
+!! An interactive tour of the Anna Freud manuals
+
+Welcome to our tour of the Anna Freud manuals. Our manuals are made to support your continued learning whether you're currently taking part in one of our courses, have completed one of our courses or just eager to expand your knowledge in one of our models.
+
+Our manuals are held on a platform called ~TiddlyWiki, this tour will help you familiarise yourself with this new and exciting platform.
+
+Don't worry if it feels overwhelming at first – ~TiddlyWiki is designed to be flexible and easy to use. You can open and close Tiddlers without losing your place, and if you get lost, you just click the "home" button to start again.
+
+We hope you'll find our manuals a helpful and supportive tool. Let's get started!
+
+<<tour-buttons>>
diff --git a/plugins/tiddlywiki/tour/styles.tid b/plugins/tiddlywiki/tour/styles.tid
index 12ac67b47..05b94ddd5 100644
--- a/plugins/tiddlywiki/tour/styles.tid
+++ b/plugins/tiddlywiki/tour/styles.tid
@@ -18,5 +18,52 @@ tags: $:/tags/Stylesheet
 	border-radius: 0em;
 	padding: 1em;
 	margin: 0.5em;
-	z-index: 1000;
+	z-index: 2000;
+}
+
+.tc-tour-panel-navigation .tc-btn-big-green {
+	margin: 0;
+}
+
+.tc-tour-panel-fullscreen {
+	top: 0;
+	right: 0;
+	width: auto;
+	height: auto;
+	box-shadow: none;
+	border: none;
+	background: <<colour page-background>>;
+	margin: 0;
+}
+
+.tc-tour-panel-fullscreen .tc-tour-panel-controls {
+	display: none;
+}
+
+.tc-tour-panel .tc-tour-panel-banner-image {
+	display: none;
+}
+
+.tc-tour-panel-fullscreen .tc-tour-panel-banner-image {
+	display: block;
+	width: 200px;
+	float: right;
+	margin: 2em;
+}
+
+.tc-tour-panel-fullscreen .tc-tour-panel-inner {
+	width: 30%;
+	min-width: 400px;
+	height: 30%;
+	margin: 20% auto;
+}
+
+.tc-tour-panel .tc-tour-panel-inner .tc-tiddler-frame {
+	width: auto;
+	padding: 1.5em 2.5em;
+}
+
+.tc-tour-panel .tc-tour-panel-inner .tc-tiddler-frame .tc-titlebar {
+	font-size: 1.5em;
+	line-height: 1.1;
 }
diff --git a/plugins/tiddlywiki/tour/tagsTourStep.tid b/plugins/tiddlywiki/tour/tagsTourStep.tid
index 345589d7a..c17dc4dbe 100644
--- a/plugins/tiddlywiki/tour/tagsTourStep.tid
+++ b/plugins/tiddlywiki/tour/tagsTourStep.tid
@@ -1,2 +1,2 @@
 title: $:/tags/TourStep
-list: $:/plugins/tiddlywiki/tour/steps/open-control-panel $:/plugins/tiddlywiki/tour/steps/close-control-panel $:/plugins/tiddlywiki/tour/steps/search $:/plugins/tiddlywiki/tour/steps/recent $:/plugins/tiddlywiki/tour/steps/create-tiddler
+list: $:/plugins/tiddlywiki/tour/steps/welcome $:/plugins/tiddlywiki/tour/steps/tiddlers $:/plugins/tiddlywiki/tour/steps/links $:/plugins/tiddlywiki/tour/steps/closing-tiddlers $:/plugins/tiddlywiki/tour/steps/end-of-fullscreen $:/plugins/tiddlywiki/tour/steps/open-control-panel $:/plugins/tiddlywiki/tour/steps/close-control-panel $:/plugins/tiddlywiki/tour/steps/search $:/plugins/tiddlywiki/tour/steps/recent $:/plugins/tiddlywiki/tour/steps/create-tiddler
diff --git a/plugins/tiddlywiki/tour/tour-panel.tid b/plugins/tiddlywiki/tour/tour-panel.tid
index b4dad55b9..7201173fd 100644
--- a/plugins/tiddlywiki/tour/tour-panel.tid
+++ b/plugins/tiddlywiki/tour/tour-panel.tid
@@ -2,27 +2,37 @@ title: $:/plugins/tiddlywiki/tour/panel
 tags: $:/tags/PageTemplate
 
 \define tour-buttons()
-<$list filter="" variable="ignore">
+\define tv-action-refresh-policy() always
+<div class="tc-tour-panel-navigation">
+<$list filter="[all[shadows+tiddlers]tag[$:/tags/TourStep]before{$:/state/tour/step}count[]compare:number:gt[0]]" variable="ignore">
 <$button class="tc-btn-big-green" style="background-color: red;">
 <$action-setfield $tiddler="$:/state/tour/step" $field="text" $value={{{ [all[shadows+tiddlers]tag[$:/tags/TourStep]before{$:/state/tour/step}] :else[all[shadows+tiddlers]tag[$:/tags/TourStep]first[]] }}}/>
+{{$:/plugins/tiddlywiki/tour/actions/initialise-current-tour-step}}
 back
 </$button>
 </$list>
 <$button class="tc-btn-big-green" style="background-color: purple;">
 <$action-setfield $tiddler="$:/state/tour/step" $field="text" $value={{{ [all[shadows+tiddlers]tag[$:/tags/TourStep]after{$:/state/tour/step}else[$:/plugins/tiddlywiki/tour/steps/finished]] }}}/>
+{{$:/plugins/tiddlywiki/tour/actions/initialise-current-tour-step}}
 next
 </$button>
+</div>
 \end
 
 <$list filter="[{$:/config/ShowTour}!is[blank]else[show]match[show]]" variable="ignore">
-<div class="tc-tour-panel">
-<div class="tc-tiddler-controls">
+<div class={{{ tc-tour-panel [{$:/state/tour/step}get[display-mode]else[normal]addprefix[tc-tour-panel-]] +[join[ ]] }}}>
+[img class="tc-tour-panel-banner-image" [$:/tour/BannerImage]]
+<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> ''Tour''
 </div>
 <$transclude tiddler={{$:/state/tour/step}} mode="block"/>
+<$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 hint
+show me a hint
 </$button>
+</$list>
+</div>
 </div>
 </$list>