1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-06-21 04:49:54 +00:00
TiddlyWiki5/plugins/tiddlywiki/tour/settings.tid
Jeremy Ruston a9f9ffd409
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

155 lines
4.9 KiB
Plaintext

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">
<$let
collapseState={{{ [[$:/state/Tour/Settings/Tour/Visibility/]addsuffix<currentTour>addsuffix<currentStep>] }}}
>
<$action-setfield $tiddler=<<collapseState>> text=<<text>>/>
</$let>
</$list>
<$text text=<<caption>>/>
</$button>
\end
\procedure display-tour-step-field-text(fieldName,fieldCaption)
<$list filter="[<currentStep>has<fieldName>]" variable="ignore">
<tr>
<th>
<$text text=<<fieldCaption>>/>
</th>
<td>
<$text text={{{ [<currentStep>get<fieldName>] }}}/>
</td>
</tr>
</$list>
\end
<$let
stateCurrentTour=<<qualify "$:/state/Tour/Settings/Current">>
defaultTour={{{ [{$:/config/CurrentTour}] :else[all[shadows+tiddlers]tag[$:/tags/Tour]] }}}
>
! Tour Overview
Select a tour:
<$select tiddler=<<stateCurrentTour>> default=<<defaultTour>>>
<$list filter="[all[shadows+tiddlers]tag[$:/tags/Tour]]">
<option value=<<currentTiddler>>>
<$transclude $field="description">
<$text text=<<currentTiddler>>/>
</$transclude>
</option>
</$list>
</$select>
<$let
currentTour={{{ [<stateCurrentTour>get[text]] :else[<defaultTour>] }}}
currentTourTag={{{ [<currentTour>get[tour-tag]] }}}
>
<table class="tc-tour-settings-tour-details">
<tbody>
<tr>
<th>
Tour title
</th>
<td>
<$link to=<<currentTour>>><$text text=<<currentTour>>/></$link>
</td>
</tr>
<tr>
<th>
Tour description
</th>
<td>
<div class="tc-tour-settings-tour-details-description">
<$transclude $tiddler=<<currentTour>>>
(No description available)
</$transclude>
</div>
</td>
</tr>
<tr>
<th>
Tour logo
</th>
<td>
<div class="tc-tour-settings-tour-details-logo">
<$image source={{{ [<currentTour>get[logo]] }}}/>
</div>
</td>
</tr>
<tr>
<th>
Tour step tag
</th>
<td>
<$transclude $variable="tag" tag=<<currentTourTag>>/>
</td>
</tr>
</tbody>
</table>
<$list filter="[<currentTour>has[settings]]" variable="ignore">
<p>
Custom tour settings:
</p>
<div class="tc-tour-settings-tour-settings">
<$transclude $tiddler={{{ [<currentTour>get[settings]] }}}/>
</div>
</$list>
<p>
<<button-expand-collapse-all "Expand All" "show">>
<<button-expand-collapse-all "Collapse All" "hide">>
</p>
<$list filter="[all[shadows+tiddlers]tag<currentTourTag>]" variable="currentStep" counter="stepNumber">
<$let
collapseState={{{ [[$:/state/Tour/Settings/Tour/Visibility/]addsuffix<currentTour>addsuffix<currentStep>] }}}
>
<div class="tc-tour-settings-tour-step">
<div class="tc-tour-settings-tour-step-heading">
<$button class="tc-btn-invisible tc-tour-settings-tour-step-open-button">
<$action-setfield $tiddler=<<collapseState>> text={{{ [<collapseState>get[text]else[hide]match[show]then[hide]else[show]] }}}/>
<$list filter="[<collapseState>get[text]else[hide]match[show]]" variable="ignore" emptyMessage="{{$:/core/images/right-arrow}}">
{{$:/core/images/down-arrow}}
</$list>
<span class="tc-tour-settings-tour-step-heading-step-number">
<$text text=<<stepNumber>>/>
</span>
<$transclude $tiddler=<<currentStep>> $field="caption">
<$text text=<<currentStep>>/>
</$transclude>
</$button>
<$button class="tc-btn-invisible tc-tour-settings-tour-step-launch-button" tooltip="Launch this step of the tour">
<$transclude $variable="tour-start" title=<<currentTour>> step=<<currentStep>>/>
{{$:/core/images/open-window}}
</$button>
</div>
<$reveal state=<<collapseState>> text="show" type="match" default="hide" animate="yes">
<table class="tc-tour-settings-tour-step-details">
<tbody>
<<display-tour-step-field-text "title" "Title">>
<<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 "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">
<$transclude $tiddler=<<currentStep>> $mode="block"/>
</div>
</$reveal>
</div>
</$let>
</$list>
</$let>
</$let>