mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-12-12 11:10:27 +00:00
a9f9ffd409
* 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>
66 lines
3.7 KiB
Plaintext
66 lines
3.7 KiB
Plaintext
title: $:/plugins/tiddlywiki/confetti/readme
|
|
|
|
\define show-example(name)
|
|
<$let title={{{ [[$:/plugins/tiddlywiki/confetti/examples/]addsuffix<__name__>] }}}>
|
|
|
|
For example:
|
|
|
|
<$macrocall $name="copy-to-clipboard-above-right" src=<<__src__>>/>
|
|
|
|
<$codeblock code={{{ [<title>get[text]] }}}/>
|
|
|
|
Renders as:
|
|
|
|
<$transclude tiddler=<<title>> mode="block"/>
|
|
|
|
</$let>
|
|
\end
|
|
|
|
! Introduction
|
|
|
|
This plugin adds a programmable confetti cannon to your TiddlyWiki. It is based on https://www.kirilv.com/canvas-confetti/ by Kiril Vatev.
|
|
|
|
! Usage
|
|
|
|
The confetti cannon can be controlled using messages or via the `<$confetti>` widget. Use the message approach when triggering confetti in response to an action (such as clicking a button). Use the widget approach when confetti is to be triggered by a condition (such as a target number of words being reached).
|
|
|
|
!! Messages: tm-confetti-launch and tm-confetti-reset
|
|
|
|
The `tm-confetti-launch` message launches the confetti cannon. See below for the available parameters.
|
|
|
|
The `tm-confetti-reset` message cancels any confetti that is in progress.
|
|
|
|
<<show-example staggered>>
|
|
|
|
!! Widget: `<$confetti>`
|
|
|
|
The `<$confetti>` widget launches the confetti cannon when it is first rendered. See below for the available attributes.
|
|
|
|
Typically it is used in conjunction with a `<$list>` or `<$reveal>` widget that shows the widget when the conditions required to trigger the confetti are satisfied.
|
|
|
|
In this example, the confetti will be launched when the word "launch" in typed into the box.
|
|
|
|
<<show-example typing-trigger>>
|
|
|
|
!! Confetti Launch parameters
|
|
|
|
The following options are supported:
|
|
|
|
|!Name |!Description |!Default |
|
|
|''delay'' |Number of milliseconds to delay the launch |0 |
|
|
|''particleCount'' |The number of confetti to launch |50 |
|
|
|''angle'' |The angle in which to launch the confetti, in degrees (90 is straight up) |90 |
|
|
|''spread'' |How far off center the confetti can go, in degrees. 45 means the confetti will launch at the defined `angle` plus or minus 22.5 degrees |45 |
|
|
|''startVelocity'' |How fast the confetti will start going, in pixels |45 |
|
|
|''decay'' |How quickly the confetti will lose speed. Keep this number between 0 and 1, otherwise the confetti will gain speed |0.9 |
|
|
|''gravity'' |How quickly the particles are pulled down. 1 is full gravity, 0.5 is half gravity, etc. |1 |
|
|
|''drift'' |How much to the side the confetti will drift. The default is 0, meaning that they will fall straight down. Use a negative number for left and positive number for right |0 |
|
|
|''ticks'' |How many times the confetti will move (this is an abstract quantity; the designed recommends playing with it if the confetti disappears too quickly for you) |200 |
|
|
|''originX'' |The `x` position on the page, with `0` being the left edge and `1` being the right edge |0.5 |
|
|
|''originY'' |The `y` position on the page, with `0` being the top edge and `1` being the bottom edge |0.5 |
|
|
|''colors'' |A space separated list of color strings in hex format (eg `#bada55` or `#ce5`) | |
|
|
|''shapes'' |A space separated list of shapes for the confetti. The possible values are `square`, `circle`, and `star`. The default is to use both squares and circles in an even mix. To use a single shape, you can provide just one shape in the list, such as `star`. You can also change the mix by providing a value such as `circle circle square` to use two third circles and one third squares | |
|
|
|''scalar'' |Scale factor for each confetti particle. Use decimals to make the confetti smaller |1 |
|
|
|''zIndex'' |Z-index of confetti. Increase the value if the confetti is appearing behind other on-screen elements|100 |
|
|
|''disableForReducedMotion'' |Set to `yes` to entirely disable confetti for users that [[prefer reduced motion|https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion]] |`no` |
|