mirrors
/
TiddlyWiki5
mirror of https://github.com/Jermolene/TiddlyWiki5
1
0
Fork 0
Code Issues Releases Wiki Activity

Extends the tour plugin with a condition field (#7861) 

* feat: support condition field to determine whether a step should be shown

* feat: add support for overriding the hint text using the field 'hint' from the step tiddler

* fix: roll back tour display procedure for now until an override mechanism has been discussed

* fix: renamed advance-criterion field and associated variables to step-success-filter

* fix: renamed hint field to hint-text and selector to hint-selector

* refactor: to create function to get all tour tiddlers filtered by their condition field

* refactor: rename globals tiddlers to variables and avoid making any of the tour procedures global

* fix: also rename globals.tid file to variables.tid

* docs: cover all tour steps tiddler fields

* fix: improve spacing in Tour HUD
This commit is contained in:
Saq Imtiaz 2023-12-06 12:13:48 +01:00 committed by GitHub
parent 547582c1e7
commit a7d469ae99
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 82 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
plugins/tiddlywiki/tour/docs.tid
View File

@ -8,5 +8,18 @@ Tour definition tiddlers have the following fields:
|logo |Title of tiddler containing logo of tour |
|description |Brief description of the tour |
|text |Longer description of the tour |
|class |(optional) additional class to apply to the tour wrapper |
Tour step tiddlers have the following fields:
|!Name |!Description |
|tags|Must include the tag used to define the tour step sequence |
|caption|Caption for the tour step |
|display-mode|(optional) can be set to `fullscreen` |
|enter-actions|(optional) action string invoked when the step is displayed |
|hint-selector|(optional) selector to be highlighted by the hint button in steps with a step-success-filter |
|hint-text|(optional) text to be displayed for the hint button |
|condition|(optional) filter expression that must return a result for the step to be displayed |
|step-success-filter|(optional) filter expression that must return a result for the step to be considered completed |
|step-success-filtervar|(optional) filter expression evaluated to set the first result as the variable `step-success-filter-var` which can be used in the `step-success-filter` |

14
plugins/tiddlywiki/tour/settings.tid
View File

@ -1,5 +1,6 @@
title: $:/plugins/tiddlywiki/tour/settings
\import [[$:/plugins/tiddlywiki/tour/variables]]
\procedure button-expand-collapse-all(caption,text)
<$button>
<$list filter="[all[shadows+tiddlers]tag<currentTourTag>]" variable="currentStep">
@ -129,13 +130,16 @@ Select a tour:
<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 "caption" "Caption">>
<<display-tour-step-field-text "step-success-filter" "step-success-filter">>
<<display-tour-step-field-text "step-success-filter-var" "step-success-filter 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">>
<<display-tour-step-field-text "hint-text" "Hint text">>
<<display-tour-step-field-text "hint-selector" "Hint selector">>
<<display-tour-step-field-text "hint-selector-fallback-1" "Hint selector Fallback 1">>
<<display-tour-step-field-text "hint-selector-fallback-2" "Hint selector Fallback 2">>
<<display-tour-step-field-text "condition" "Condition">>
</tbody>
</table>
<div class="tc-tour-settings-tour-step-body">

1
plugins/tiddlywiki/tour/start-tour-button.tid
View File

@ -4,6 +4,7 @@ caption: {{$:/plugins/tiddlywiki/tour/tour-button-icon}} Start Tour
description: Start interactive training tour
\whitespace trim
\import [[$:/plugins/tiddlywiki/tour/variables]]
<$button tooltip="Start interactive training tour" aria-label="Start Tour" class=<<tv-config-toolbar-class>>>
<<tour-restart>>
<$list filter="[<tv-config-toolbar-icons>match[yes]]" variable="listItem">

2
plugins/tiddlywiki/tour/startup-actions.tid
View File

@ -1,7 +1,7 @@
title: $:/plugins/tiddlywiki/tour/startup-actions
tags: $:/tags/StartupAction
\import [subfilter{$:/core/config/GlobalImportFilter}]
\import [[$:/plugins/tiddlywiki/tour/variables]]
<$list filter="[[$:/config/AutoStartTour]get[text]else[no]match[yes]]" variable="ignore">
<<tour-restart>>
</$list>

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

@ -54,7 +54,7 @@ tags: $:/tags/Stylesheet
border: none;
background: <<colour tour-fullscreen-background>>;
margin: 0;
border-radius: none;
border-radius: 0;
}
.tc-tour-panel-controls .tc-tour-panel-list-button {

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

@ -29,24 +29,24 @@ tags: $:/tags/PageTemplate
</div>
\end
\procedure tour-step-no-condition()
\procedure tour-step-no-success-filter()
<$transclude tiddler=<<currentTourStep>> mode="block"/>
<<tour-buttons>>
\end tour-step-no-condition
\end tour-step-no-success-filter
\procedure tour-step-condition-not-satisfied()
\procedure tour-step-success-filter-not-satisfied()
<$transclude tiddler=<<currentTourStep>> mode="block"/>
<%if [{$:/state/tour/step}has[selector]] %>
<%if [{$:/state/tour/step}has[hint-selector]] %>
<div class="tc-tour-panel-navigation">
<$button class="tc-btn-big-green tc-tour-panel-navigation-hint">
<$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
<$action-sendmessage $message="tm-spotlight-element" selector={{{ [{$:/state/tour/step}get[hint-selector]] }}} selector-fallback-1={{{ [{$:/state/tour/step}get[hint-selector-fallback-1]] }}} selector-fallback-2={{{ [{$:/state/tour/step}get[hint-selector-fallback-2]] }}}/>
<$transclude tiddler={{$:/state/tour/step}} field="hint-text" mode="inline"> show me a hint </$transclude>
</$button>
</div>
<%endif%>
\end tour-step-condition-not-satisfied
\end tour-step-success-filter-not-satisfied
\procedure tour-step-condition-satisfied()
\procedure tour-step-success-filter-satisfied()
<$let tour-task="">
<$transclude tiddler=<<currentTourStep>> mode="block"/>
</$let>
@ -55,16 +55,17 @@ tags: $:/tags/PageTemplate
Congratulations, you may proceed
</p>
<<tour-buttons>>
\end tour-step-condition-satisfied
\end tour-step-success-filter-satisfied
\import [[$:/plugins/tiddlywiki/tour/variables]]
<%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[ ]] }}}>
<div class=`tc-tour-panel tc-tour-panel-${ [{$:/state/tour/step}get[display-mode]else[normal]] }$ ${ [{$:/config/CurrentTour}get[class]] }$`>
<$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>>
<span class="tc-small-gap-right">''Tour'':</span> <<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">
@ -80,22 +81,22 @@ tags: $:/tags/PageTemplate
<$let
currentTour={{$:/config/CurrentTour}}
currentTourStep={{$:/state/tour/step}}
condition-var={{{ [<currentTourStep>get[condition-var]] :map[subfilter<currentTiddler>] }}}
step-success-filter-var={{{ [<currentTourStep>get[step-success-filter-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>>
<!-- Handle steps without a step-success-filter -->
<%if [<currentTourStep>!has[step-success-filter]] %>
<<tour-step-no-success-filter>>
<%endif%>
<!-- Handle steps that have a condition -->
<%if [<currentTourStep>has[condition]] %>
<$let condition={{{ [<currentTourStep>get[condition]] }}}>
<%if [subfilter<condition>] %>
<<tour-step-condition-satisfied>>
<!-- Handle steps that have a step-success-filter -->
<%if [<currentTourStep>has[step-success-filter]] %>
<$let step-success-filter={{{ [<currentTourStep>get[step-success-filter]] }}}>
<%if [subfilter<step-success-filter>] %>
<<tour-step-success-filter-satisfied>>
<%else%>
<<tour-step-condition-not-satisfied>>
<<tour-step-success-filter-not-satisfied>>
<%endif%>
</$let>
<%endif%>

4
plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/close-control-panel.tid
View File

@ -1,8 +1,8 @@
title: $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/close-control-panel
caption: Close the control panel
tags: $:/tags/Tour/IntroductionToTiddlyWiki
selector: .tc-story-river div[data-tiddler-title='$:/ControlPanel'] .tc-btn-\%24\%3A\%2Fcore\%2Fui\%2FButtons\%2Fclose
condition: [[$:/StoryList]!contains[$:/ControlPanel]]
hint-selector: .tc-story-river div[data-tiddler-title='$:/ControlPanel'] .tc-btn-\%24\%3A\%2Fcore\%2Fui\%2FButtons\%2Fclose
step-success-filter: [[$:/StoryList]!contains[$:/ControlPanel]]
<<tour-task "Now close the control panel">>

4
plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/closing-tiddlers.tid
View File

@ -3,9 +3,9 @@ caption: Closing tiddlers
tags: $:/tags/Tour/IntroductionToTiddlyWiki
display-mode: fullscreen
enter-actions: <$action-setfield $tiddler="$:/temp/Tour/DemoStoryList" list="$:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/Jupiter $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/Saturn"/>
condition: [list[$:/temp/Tour/DemoStoryList]count[]match[0]]
step-success-filter: [list[$:/temp/Tour/DemoStoryList]count[]match[0]]
\define tour-simplified-tiddler-close-button() yes
\procedure tour-simplified-tiddler-close-button() yes
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.

8
plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/create-tiddler.tid
View File

@ -1,10 +1,10 @@
title: $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/create-tiddler
caption: Creating Tiddlers
tags: $:/tags/Tour/IntroductionToTiddlyWiki
selector: .tc-story-river div[data-tiddler-title="Draft of 'New Tiddler'"] input[value]:not([value="Congratulations"])
selector-fallback-1: .tc-story-river div[data-tiddler-title='Draft of \'New Tiddler\''] .tc-btn-\%24\%3A\%2Fcore\%2Fui\%2FButtons\%2Fsave
selector-fallback-2: .tc-btn-\%24\%3A\%2Fcore\%2Fui\%2FButtons\%2Fnew-tiddler
condition: [list[$:/StoryList]match[Congratulations]]
hint-selector: .tc-story-river div[data-tiddler-title="Draft of 'New Tiddler'"] input[value]:not([value="Congratulations"])
hint-selector-fallback-1: .tc-story-river div[data-tiddler-title='Draft of \'New Tiddler\''] .tc-btn-\%24\%3A\%2Fcore\%2Fui\%2FButtons\%2Fsave
hint-selector-fallback-2: .tc-btn-\%24\%3A\%2Fcore\%2Fui\%2FButtons\%2Fnew-tiddler
step-success-filter: [list[$:/StoryList]match[Congratulations]]
<<tour-task "Create a tiddler titled 'Congratulations'">>

2
plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/links.tid
View File

@ -3,7 +3,7 @@ caption: Linking tiddlers
tags: $:/tags/Tour/IntroductionToTiddlyWiki
display-mode: fullscreen
enter-actions: <$action-setfield $tiddler="$:/temp/Tour/DemoStoryList" list="$:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/Jupiter"/>
condition: [[$:/temp/Tour/DemoStoryList]contains[$:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/Saturn]]
step-success-filter: [[$:/temp/Tour/DemoStoryList]contains[$:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/Saturn]]
Links allow you to decide if you want more information on a particular area or term as you go.

4
plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/open-control-panel.tid
View File

@ -1,8 +1,8 @@
title: $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/open-control-panel
caption: Open the control panel
tags: $:/tags/Tour/IntroductionToTiddlyWiki
selector: .tc-btn-\%24\%3A\%2Fcore\%2Fui\%2FButtons\%2Fcontrol-panel
condition: [[$:/StoryList]contains[$:/ControlPanel]]
hint-selector: .tc-btn-\%24\%3A\%2Fcore\%2Fui\%2FButtons\%2Fcontrol-panel
step-success-filter: [[$:/StoryList]contains[$:/ControlPanel]]
<<tour-task "Open the control panel">>

8
plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/recent.tid
View File

@ -1,9 +1,9 @@
title: $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/recent
caption: Finding recent tiddlers
tags: $:/tags/Tour/IntroductionToTiddlyWiki
selector: .tc-sidebar-tabs-main .tc-timeline > .tc-menu-list-item:nth-child(1) .tc-menu-list-subitem:nth-child(1) .tc-tiddlylink
selector-fallback-1: .tc-sidebar-tabs-main button:nth-child(3)
condition: [list[$:/StoryList]match<condition-var>]
condition-var: [all[tiddlers]!is[system]!sort[modified]]
hint-selector: .tc-sidebar-tabs-main .tc-timeline > .tc-menu-list-item:nth-child(1) .tc-menu-list-subitem:nth-child(1) .tc-tiddlylink
hint-selector-fallback-1: .tc-sidebar-tabs-main button:nth-child(3)
step-success-filter: [list[$:/StoryList]match<step-success-filter-var>]
step-success-filter-var: [all[tiddlers]!is[system]!sort[modified]]
<<tour-task "Use the ''Recent'' tab of the sidebar to open the most recently edited tiddler.">>

4
plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/search.tid
View File

@ -1,8 +1,8 @@
title: $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/search
caption: Searching
tags: $:/tags/Tour/IntroductionToTiddlyWiki
selector: .tc-sidebar-search .tc-popup-handle
condition: [{$:/temp/search}match[help]]
hint-selector: .tc-sidebar-search .tc-popup-handle
step-success-filter: [{$:/temp/search}match[help]]
<<tour-task "Search for the phrase 'help'">>

2
plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/tags.tid
View File

@ -3,7 +3,7 @@ caption: Tagging tiddlers
tags: $:/tags/Tour/IntroductionToTiddlyWiki
display-mode: fullscreen
enter-actions: <$action-setfield $tiddler="$:/temp/Tour/DemoStoryList" list="$:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/Mars"/>
condition: [[$:/temp/Tour/DemoStoryList]contains[$:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/Saturn]]
step-success-filter: [[$:/temp/Tour/DemoStoryList]contains[$:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/Saturn]]
Tiddlers may be categorised with one or more descriptive keywords or phrases called "tags". Tags can be used to search and navigate between tiddlers.

26
plugins/tiddlywiki/tour/globals.tid → plugins/tiddlywiki/tour/variables.tid
View File

@ -1,5 +1,4 @@
title: $:/plugins/tiddlywiki/tour/globals
tags: $:/tags/Global
title: $:/plugins/tiddlywiki/tour/variables
\whitespace trim
@ -21,25 +20,34 @@ These config tiddlers may be changed directly as required:
[{$:/config/CurrentTour}get[tour-tag]]
\end
\procedure tour-filter-steps-by-condition()
[<currentTiddler>has[condition]subfilter{!!condition}limit[1]] :else[<currentTiddler>!has[condition]then[true]]
\end
\function tour-all-steps-filtered-by-condition()
[all[shadows+tiddlers]tag<tour-current-tag>filter<tour-filter-steps-by-condition>]
\end
\function tour-is-not-first-step()
[all[shadows+tiddlers]tag<tour-current-tag>before{$:/state/tour/step}count[]compare:number:gt[0]]
[function[tour-all-steps-filtered-by-condition]allbefore{$:/state/tour/step}count[]compare:number:gt[0]]
\end
\function tour-is-last-step()
[all[shadows+tiddlers]tag<tour-current-tag>after{$:/state/tour/step}count[]compare:number:eq[0]]
[function[tour-all-steps-filtered-by-condition]allafter{$:/state/tour/step}count[]compare:number:eq[0]]
\end
\function tour-is-not-last-step()
[all[shadows+tiddlers]tag<tour-current-tag>after{$:/state/tour/step}count[]compare:number:gt[0]]
[function[tour-all-steps-filtered-by-condition]allafter{$:/state/tour/step}count[]compare:number:gt[0]]
\end
\procedure tour-initialise-current-tour-step()
\procedure tv-action-refresh-policy() always
<$transclude $tiddler={{$:/state/tour/step}} $field="enter-actions"/>
\end
\procedure tour-chooser(filter:"[all[shadows+tiddlers]tag[$:/tags/Tour]]")
\define choose-tour-actions()
\procedure choose-tour-actions()
<$transclude $variable="tour-start" title=<<currentTiddler>>/>
\end choose-tour-actions
<div class="tc-tour-panel-chooser-wrapper">
@ -67,19 +75,19 @@ These config tiddlers may be changed directly as required:
\procedure tour-restart(step)
\procedure tv-action-refresh-policy() always
<$action-setfield $tiddler="$:/config/ShowTour" text="show"/>
<$action-setfield $tiddler="$:/state/tour/step" $field="text" $value={{{ [<step>!is[blank]] :else[all[shadows+tiddlers]tag<tour-current-tag>first[]] }}}/>
<$action-setfield $tiddler="$:/state/tour/step" $field="text" $value={{{ [<step>!is[blank]] :else[function[tour-all-steps-filtered-by-condition]first[]] }}}/>
<<tour-initialise-current-tour-step>>
\end
\procedure tour-next-step()
\procedure tv-action-refresh-policy() always
<$action-setfield $tiddler="$:/state/tour/step" $field="text" $value={{{ [all[shadows+tiddlers]tag<tour-current-tag>after{$:/state/tour/step}else[$:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/finished]] }}}/>
<$action-setfield $tiddler="$:/state/tour/step" $field="text" $value={{{ [function[tour-all-steps-filtered-by-condition]allafter{$:/state/tour/step}else[$:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/steps/finished]] }}}/>
<<tour-initialise-current-tour-step>>
\end
\procedure tour-previous-step()
\procedure tv-action-refresh-policy() always
<$action-setfield $tiddler="$:/state/tour/step" $field="text" $value={{{ [all[shadows+tiddlers]tag<tour-current-tag>before{$:/state/tour/step}] :else[all[shadows+tiddlers]tag<tour-current-tag>first[]] }}}/>
<$action-setfield $tiddler="$:/state/tour/step" $field="text" $value={{{ [function[tour-all-steps-filtered-by-condition]allbefore{$:/state/tour/step}last[]] :else[all[shadows+tiddlers]tag<tour-current-tag>first[]] }}}/>
<<tour-initialise-current-tour-step>>
\end