1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-11 18:50:28 +00:00
TiddlyWiki5/plugins/tiddlywiki/tour/tour-panel.tid

105 lines
3.8 KiB
Plaintext
Raw Normal View History

Introduce Tour Plugin and Confetti Plugin, improve Dynannotate Plugin (#7734) * First commit * Typo * Add support for delay parameter * Add confetti widget * Add tour plugin * Add element spotlight to dynannotate plugin Useful for highlighting on screen elements for the user * More and bigger confetti by default * Use new element spotlight to provide hints * Adjust hint selectors for create tiddler tour step * Include confetti plugin in prerelease * Clarify wording of confetti demo * Don't link TiddlyWiki in the tour panel * Tweaks to tour buttons * Mark dependents of the tour plugin * Add full screen section of tour and tour edition * Remove Anna Freud references from welcome tiddler * Build the tour edition in the preview * Fix typo in build script * Populate tour edition with solar system data From Simple English Wikipedia * Missing tag * Add page control button to start tour Also make the tour controls visible in full screen mode * Refactor to use global procedures to control the tour * Change "startup-actions" field to "enter-actions" to avoid confusion * Add a tour logo * Refactor to allow multiple tours to be loaded at once * Remove wikification from welcome tour step * Update docs * Simplify styles for top bar * Tours should have a $:/tags/Tour tag * Tour should autostart in the tour edition, but not in the main wiki * Better labelling for the main preview * Fix build process We build a separate tour.html wiki, but can include the tour in other wikis too * Remove obsolete text * Add "using tags" as a separate tour * Remove old debugging code * Add tour chooser * Ensure that the current tour isn't listed as an option in the final step * Use whitespace trim Note that the setting is inherited by procedure and widget definitions * Simplify tour step format * Remove obsolete state tiddler Not needed because now we initialise it in startup actions * Fix gap between navigation buttons * Clean up tiddler titles within the introduction tour * Finish allowing the name "TiddlyWiki" to be customised Some of the code was in the previous commit. Next we'll wire up the user interface * Clarify docs * Add a settings pane giving a birds eye view of a tour * Avoid having to embed confetti in the final step * Update docs * Tweak styling of tour chooser dropdown * Add a button to launch tour steps directly, and give them captions * Expose custom tour settings * Use the tour step caption as the heading * Fix initialisation when jumping to a tour step * Introduce step about tags * Improve wording * Improve styling of task call-to-action and nav buttons * Adopt new conditional shortcut syntax * Wording and ordering tweaks * Fix typos Thanks @pmario * Simplify styling of tour overlay * Use custom palette colours Makes it easier for people to use their own colour scheme for the tour * More custom colours * Tour wording tweaks * 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 * WIP --------- Co-authored-by: Jeremy Ruston <174761+Jermolene@users.noreply.github.com> Co-authored-by: Saq Imtiaz <saq.imtiaz@gmail.com>
2024-01-25 12:53:35 +00:00
title: $:/plugins/tiddlywiki/tour/panel
tags: $:/tags/PageTemplate
\whitespace trim
\procedure tour-buttons()
\procedure tv-action-refresh-policy() always
<div class="tc-tour-panel-navigation">
<%if [function[tour-is-not-first-step]] %>
<$button class="tc-btn-big-green tc-tour-panel-navigation-back">
<<tour-previous-step>>
back
</$button>
<%endif%>
<%if [function[tour-is-not-last-step]] %>
<$button class="tc-btn-big-green tc-tour-panel-navigation-next">
<<tour-next-step>>
next
</$button>
<%endif%>
<%if [function[tour-is-last-step]] %>
<$confetti/>
<$confetti delay=300 originY=0.6 spread=100 scalar=1.5/>
<$confetti delay=400 originY=0.55 spread=130/>
<$confetti delay=500 originY=0.55 spread=170 scalar=2/>
Introduce Tour Plugin and Confetti Plugin, improve Dynannotate Plugin (#7734) * First commit * Typo * Add support for delay parameter * Add confetti widget * Add tour plugin * Add element spotlight to dynannotate plugin Useful for highlighting on screen elements for the user * More and bigger confetti by default * Use new element spotlight to provide hints * Adjust hint selectors for create tiddler tour step * Include confetti plugin in prerelease * Clarify wording of confetti demo * Don't link TiddlyWiki in the tour panel * Tweaks to tour buttons * Mark dependents of the tour plugin * Add full screen section of tour and tour edition * Remove Anna Freud references from welcome tiddler * Build the tour edition in the preview * Fix typo in build script * Populate tour edition with solar system data From Simple English Wikipedia * Missing tag * Add page control button to start tour Also make the tour controls visible in full screen mode * Refactor to use global procedures to control the tour * Change "startup-actions" field to "enter-actions" to avoid confusion * Add a tour logo * Refactor to allow multiple tours to be loaded at once * Remove wikification from welcome tour step * Update docs * Simplify styles for top bar * Tours should have a $:/tags/Tour tag * Tour should autostart in the tour edition, but not in the main wiki * Better labelling for the main preview * Fix build process We build a separate tour.html wiki, but can include the tour in other wikis too * Remove obsolete text * Add "using tags" as a separate tour * Remove old debugging code * Add tour chooser * Ensure that the current tour isn't listed as an option in the final step * Use whitespace trim Note that the setting is inherited by procedure and widget definitions * Simplify tour step format * Remove obsolete state tiddler Not needed because now we initialise it in startup actions * Fix gap between navigation buttons * Clean up tiddler titles within the introduction tour * Finish allowing the name "TiddlyWiki" to be customised Some of the code was in the previous commit. Next we'll wire up the user interface * Clarify docs * Add a settings pane giving a birds eye view of a tour * Avoid having to embed confetti in the final step * Update docs * Tweak styling of tour chooser dropdown * Add a button to launch tour steps directly, and give them captions * Expose custom tour settings * Use the tour step caption as the heading * Fix initialisation when jumping to a tour step * Introduce step about tags * Improve wording * Improve styling of task call-to-action and nav buttons * Adopt new conditional shortcut syntax * Wording and ordering tweaks * Fix typos Thanks @pmario * Simplify styling of tour overlay * Use custom palette colours Makes it easier for people to use their own colour scheme for the tour * More custom colours * Tour wording tweaks * 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 * WIP --------- Co-authored-by: Jeremy Ruston <174761+Jermolene@users.noreply.github.com> Co-authored-by: Saq Imtiaz <saq.imtiaz@gmail.com>
2024-01-25 12:53:35 +00:00
<%endif%>
</div>
\end
\procedure tour-step-no-success-filter()
<$transclude tiddler=<<currentTourStep>> mode="block"/>
<<tour-buttons>>
\end tour-step-no-success-filter
\procedure tour-step-success-filter-not-satisfied()
<$transclude tiddler=<<currentTourStep>> mode="block"/>
<%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[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-success-filter-not-satisfied
\procedure tour-step-success-filter-satisfied()
<$let tour-task="">
<$transclude tiddler=<<currentTourStep>> mode="block"/>
</$let>
<$confetti/>
<p>
Congratulations, you may proceed
</p>
<<tour-buttons>>
\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 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">
<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">
<p>
Choose a tour:
</p>
<p>
<<tour-chooser>>
</p>
</div>
</$reveal>
</div>
<$let
currentTour={{$:/config/CurrentTour}}
currentTourStep={{$:/state/tour/step}}
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 step-success-filter -->
<%if [<currentTourStep>!has[step-success-filter]] %>
<<tour-step-no-success-filter>>
<%endif%>
<!-- 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-success-filter-not-satisfied>>
<%endif%>
</$let>
<%endif%>
</$let>
</div>
</div>
<%endif%>