diff --git a/plugins/tiddlywiki/tour/docs.tid b/plugins/tiddlywiki/tour/docs.tid index 277dddf55..0f9168f38 100644 --- a/plugins/tiddlywiki/tour/docs.tid +++ b/plugins/tiddlywiki/tour/docs.tid @@ -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` | \ No newline at end of file diff --git a/plugins/tiddlywiki/tour/settings.tid b/plugins/tiddlywiki/tour/settings.tid index a786dda84..bdb955bee 100644 --- a/plugins/tiddlywiki/tour/settings.tid +++ b/plugins/tiddlywiki/tour/settings.tid @@ -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]" variable="currentStep"> @@ -129,13 +130,16 @@ Select a tour: <> - <> - <> + <> + <> + <> <> <> - <> - <> - <> + <> + <> + <> + <> + <>
diff --git a/plugins/tiddlywiki/tour/start-tour-button.tid b/plugins/tiddlywiki/tour/start-tour-button.tid index 8fd314c67..d04d8b698 100644 --- a/plugins/tiddlywiki/tour/start-tour-button.tid +++ b/plugins/tiddlywiki/tour/start-tour-button.tid @@ -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=<>> <> <$list filter="[match[yes]]" variable="listItem"> diff --git a/plugins/tiddlywiki/tour/startup-actions.tid b/plugins/tiddlywiki/tour/startup-actions.tid index 1166cf046..033e0a614 100644 --- a/plugins/tiddlywiki/tour/startup-actions.tid +++ b/plugins/tiddlywiki/tour/startup-actions.tid @@ -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"> <> diff --git a/plugins/tiddlywiki/tour/styles.tid b/plugins/tiddlywiki/tour/styles.tid index d71384ad2..2cd28bc93 100644 --- a/plugins/tiddlywiki/tour/styles.tid +++ b/plugins/tiddlywiki/tour/styles.tid @@ -54,7 +54,7 @@ tags: $:/tags/Stylesheet border: none; background: <>; margin: 0; - border-radius: none; + border-radius: 0; } .tc-tour-panel-controls .tc-tour-panel-list-button { diff --git a/plugins/tiddlywiki/tour/tour-panel.tid b/plugins/tiddlywiki/tour/tour-panel.tid index 413139fb2..63a23f6e6 100644 --- a/plugins/tiddlywiki/tour/tour-panel.tid +++ b/plugins/tiddlywiki/tour/tour-panel.tid @@ -29,24 +29,24 @@ tags: $:/tags/PageTemplate
\end -\procedure tour-step-no-condition() +\procedure tour-step-no-success-filter() <$transclude tiddler=<> mode="block"/> <> -\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=<> mode="block"/> -<%if [{$:/state/tour/step}has[selector]] %> +<%if [{$:/state/tour/step}has[hint-selector]] %>
<$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
<%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=<> mode="block"/> @@ -55,16 +55,17 @@ tags: $:/tags/PageTemplate Congratulations, you may proceed

<> -\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]] %> -
+
<$image class="tc-tour-panel-banner-image" source={{{ [{$:/config/CurrentTour}get[logo]] }}}/>
<$button set="$:/config/ShowTour" setTo="no" class="tc-btn-invisible">{{$:/core/images/close-button}} <$button popup=<> class="tc-btn-invisible tc-tour-panel-list-button" selectedClass="tc-selected"> - ''Tour'': <> + ''Tour'': <> <$reveal state=<> type="popup" position="belowleft" animate="yes" tag="div">
@@ -80,22 +81,22 @@ tags: $:/tags/PageTemplate <$let currentTour={{$:/config/CurrentTour}} currentTourStep={{$:/state/tour/step}} - condition-var={{{ [get[condition-var]] :map[subfilter] }}} + step-success-filter-var={{{ [get[step-success-filter-var]] :map[subfilter] }}} > <%if [has[caption]] %>

<$transclude $tiddler=<> $field="caption" mode="inline"/>

<%endif%> - - <%if [!has[condition]] %> - <> + + <%if [!has[step-success-filter]] %> + <> <%endif%> - - <%if [has[condition]] %> - <$let condition={{{ [get[condition]] }}}> - <%if [subfilter] %> - <> + + <%if [has[step-success-filter]] %> + <$let step-success-filter={{{ [get[step-success-filter]] }}}> + <%if [subfilter] %> + <> <%else%> - <> + <> <%endif%> <%endif%> diff --git a/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/close-control-panel.tid b/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/close-control-panel.tid index 3ff17c1b1..3abd90764 100644 --- a/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/close-control-panel.tid +++ b/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/close-control-panel.tid @@ -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]] <> diff --git a/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/closing-tiddlers.tid b/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/closing-tiddlers.tid index 57e199542..38f5af0fd 100644 --- a/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/closing-tiddlers.tid +++ b/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/closing-tiddlers.tid @@ -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. diff --git a/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/create-tiddler.tid b/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/create-tiddler.tid index a10374c59..13d40a26d 100644 --- a/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/create-tiddler.tid +++ b/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/create-tiddler.tid @@ -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]] <> diff --git a/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/links.tid b/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/links.tid index c8204ce44..257088c14 100644 --- a/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/links.tid +++ b/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/links.tid @@ -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. diff --git a/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/open-control-panel.tid b/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/open-control-panel.tid index 6ab776673..69751f6ba 100644 --- a/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/open-control-panel.tid +++ b/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/open-control-panel.tid @@ -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]] <> diff --git a/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/recent.tid b/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/recent.tid index 77b119685..c0c3957a2 100644 --- a/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/recent.tid +++ b/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/recent.tid @@ -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: [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: [all[tiddlers]!is[system]!sort[modified]] <> diff --git a/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/search.tid b/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/search.tid index f64e7bcac..44b153785 100644 --- a/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/search.tid +++ b/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/search.tid @@ -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]] <> diff --git a/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/tags.tid b/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/tags.tid index 0e4f9dcd0..0629d3b02 100644 --- a/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/tags.tid +++ b/plugins/tiddlywiki/tour/tours/introduction-to-tiddlywiki/steps/tags.tid @@ -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. diff --git a/plugins/tiddlywiki/tour/globals.tid b/plugins/tiddlywiki/tour/variables.tid similarity index 70% rename from plugins/tiddlywiki/tour/globals.tid rename to plugins/tiddlywiki/tour/variables.tid index 1de164527..65cec532d 100644 --- a/plugins/tiddlywiki/tour/globals.tid +++ b/plugins/tiddlywiki/tour/variables.tid @@ -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() +[has[condition]subfilter{!!condition}limit[1]] :else[!has[condition]then[true]] +\end + +\function tour-all-steps-filtered-by-condition() +[all[shadows+tiddlers]tagfilter] +\end + \function tour-is-not-first-step() -[all[shadows+tiddlers]tagbefore{$:/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]tagafter{$:/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]tagafter{$:/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=<>/> \end choose-tour-actions
@@ -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={{{ [!is[blank]] :else[all[shadows+tiddlers]tagfirst[]] }}}/> +<$action-setfield $tiddler="$:/state/tour/step" $field="text" $value={{{ [!is[blank]] :else[function[tour-all-steps-filtered-by-condition]first[]] }}}/> <> \end \procedure tour-next-step() \procedure tv-action-refresh-policy() always -<$action-setfield $tiddler="$:/state/tour/step" $field="text" $value={{{ [all[shadows+tiddlers]tagafter{$:/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]] }}}/> <> \end \procedure tour-previous-step() \procedure tv-action-refresh-policy() always -<$action-setfield $tiddler="$:/state/tour/step" $field="text" $value={{{ [all[shadows+tiddlers]tagbefore{$:/state/tour/step}] :else[all[shadows+tiddlers]tagfirst[]] }}}/> +<$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]tagfirst[]] }}}/> <> \end