mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2026-06-01 10:12:18 +00:00
Add full screen section of tour and tour edition
This commit is contained in:
Jeremy Ruston
@@ -0,0 +1,3 @@
|
||||
title: $:/DefaultTiddlers
|
||||
|
||||
[[Solar System]]
|
||||
@@ -0,0 +1,2 @@
|
||||
title: $:/SiteSubitle
|
||||
text: An Interactive Guide
|
||||
@@ -0,0 +1,2 @@
|
||||
title: $:/SiteTitle
|
||||
text: ~TiddlyWiki Tour
|
||||
@@ -0,0 +1,5 @@
|
||||
title: $:/demoshow/styles
|
||||
tags: [[$:/tags/Stylesheet]]
|
||||
|
||||
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline
|
||||
|
||||
@@ -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"]
|
||||
}
|
||||
}
|
||||
@@ -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) {
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
title: $:/plugins/tiddlywiki/tour/actions/initialise-current-tour-step
|
||||
|
||||
<$transclude $tiddler={{$:/state/tour/step}} $field="startup-actions"/>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,4 @@
|
||||
title: $:/plugins/tiddlywiki/tour/startup-actions
|
||||
tags: $:/tags/StartupAction
|
||||
|
||||
{{$:/plugins/tiddlywiki/tour/actions/initialise-current-tour-step}}
|
||||
@@ -1,2 +1,2 @@
|
||||
title: $:/state/tour/step
|
||||
text: $:/plugins/tiddlywiki/tour/steps/open-control-panel
|
||||
text: $:/plugins/tiddlywiki/tour/steps/welcome
|
||||
@@ -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>
|
||||
@@ -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>>
|
||||
@@ -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>
|
||||
@@ -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">
|
||||
|
||||
|
||||
@@ -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.
|
||||
@@ -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.
|
||||
@@ -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>>
|
||||
@@ -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>>
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user