mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-06-16 18:39:54 +00:00
Code Issues Releases Wiki Activity

Add full screen section of tour and tour edition

Browse Source
This commit is contained in:
Jeremy Ruston 2023-07-20 08:45:44 +01:00
parent d419161686
commit 1aef8405bd
21 changed files with 245 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
editions/tour/tiddlers/DefaultTiddlers.tid Normal file
View File

@ -0,0 +1,3 @@
title: $:/DefaultTiddlers
[[Solar System]]

2
editions/tour/tiddlers/SiteSubtitle.tid Normal file
View File

@ -0,0 +1,2 @@
title: $:/SiteSubitle
text: An Interactive Guide

2
editions/tour/tiddlers/SiteTitle.tid Normal file
View File

@ -0,0 +1,2 @@
title: $:/SiteTitle
text: ~TiddlyWiki Tour

5
editions/tour/tiddlers/styles.tid Normal file
View File

@ -0,0 +1,5 @@
title: $:/demoshow/styles
tags: [[$:/tags/Stylesheet]]
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline

16
editions/tour/tiddlywiki.info Normal file
View File

@ -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"]
}
}

3
plugins/tiddlywiki/confetti/confetti-manager.js
View File

@ -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) {

3
plugins/tiddlywiki/tour/initialise-current-tour-step.tid Normal file
View File

@ -0,0 +1,3 @@
title: $:/plugins/tiddlywiki/tour/actions/initialise-current-tour-step
<$transclude $tiddler={{$:/state/tour/step}} $field="startup-actions"/>

22
plugins/tiddlywiki/tour/simplified-tiddler.tid Normal file
View File

@ -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>

4
plugins/tiddlywiki/tour/startup-actions.tid Normal file
View File

@ -0,0 +1,4 @@
title: $:/plugins/tiddlywiki/tour/startup-actions
tags: $:/tags/StartupAction
{{$:/plugins/tiddlywiki/tour/actions/initialise-current-tour-step}}

2
plugins/tiddlywiki/tour/state-tour-step.tid
View File

@ -1,2 +1,2 @@
title: $:/state/tour/step
text: $:/plugins/tiddlywiki/tour/steps/open-control-panel
text: $:/plugins/tiddlywiki/tour/steps/welcome

33
plugins/tiddlywiki/tour/steps/closing-tiddlers.tid Normal file
View File

@ -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>

13
plugins/tiddlywiki/tour/steps/end-of-fullscreen.tid Normal file
View File

@ -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>>

31
plugins/tiddlywiki/tour/steps/links.tid Normal file
View File

@ -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
plugins/tiddlywiki/tour/steps/open-control-panel.tid
View File

@ -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">

4
plugins/tiddlywiki/tour/steps/tiddlers-Jupiter.tid Normal file
View File

@ -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.

4
plugins/tiddlywiki/tour/steps/tiddlers-Saturn.tid Normal file
View File

@ -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.

19
plugins/tiddlywiki/tour/steps/tiddlers.tid Normal file
View File

@ -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>>

17
plugins/tiddlywiki/tour/steps/welcome.tid Normal file
View File

@ -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>>

49
plugins/tiddlywiki/tour/styles.tid
View File

@ -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;
}

2
plugins/tiddlywiki/tour/tagsTourStep.tid
View File

@ -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

18
plugins/tiddlywiki/tour/tour-panel.tid
View File

@ -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>