1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-12 11:10:27 +00:00
TiddlyWiki5/plugins/tiddlywiki/confetti/readme.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

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` |