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>
This commit is contained in:
Jeremy Ruston
GitHub
parent
c3de9df84f
commit
a9f9ffd409
|
|
@ -156,6 +156,28 @@ node $TW5_BUILD_TIDDLYWIKI \
|
|||
--build index favicon static \
|
||||
|| exit 1
|
||||
|
||||
# /tour.html tour edition
|
||||
node $TW5_BUILD_TIDDLYWIKI \
|
||||
./editions/tour \
|
||||
--verbose \
|
||||
--output $TW5_BUILD_OUTPUT \
|
||||
--rendertiddler $:/core/save/all tour.html text/plain \
|
||||
|| exit 1
|
||||
|
||||
# /dev/index.html Developer docs
|
||||
# /dev/favicon.ico Favicon for dev site
|
||||
# /dev/static.html Static rendering of default tiddlers
|
||||
# /dev/alltiddlers.html Static rendering of all tiddlers
|
||||
# /dev/static/* Static single tiddlers
|
||||
# /dev/static/static.css Static stylesheet
|
||||
node $TW5_BUILD_TIDDLYWIKI \
|
||||
./editions/dev \
|
||||
--verbose \
|
||||
--load $TW5_BUILD_OUTPUT/build.tid \
|
||||
--output $TW5_BUILD_OUTPUT/dev \
|
||||
--build index favicon static \
|
||||
|| exit 1
|
||||
|
||||
# /share.html Custom edition for sharing via the URL
|
||||
node $TW5_BUILD_TIDDLYWIKI \
|
||||
./editions/share \
|
||||
|
|
|
|||
|
|
@ -14,7 +14,10 @@
|
|||
"tiddlywiki/dynannotate",
|
||||
"tiddlywiki/codemirror",
|
||||
"tiddlywiki/menubar",
|
||||
"tiddlywiki/jszip"
|
||||
"tiddlywiki/jszip",
|
||||
"tiddlywiki/confetti",
|
||||
"tiddlywiki/dynannotate",
|
||||
"tiddlywiki/tour"
|
||||
],
|
||||
"themes": [
|
||||
"tiddlywiki/vanilla",
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
title: Asteroid (253) Mathilde Image
|
||||
type: image/png
|
||||
tags: Image
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
created: 20230720112554020
|
||||
modified: 20230720112827830
|
||||
title: Asteroid
|
||||
type: text/vnd.tiddlywiki
|
||||
tags: [[Solar System]]
|
||||
|
||||
[img class=hero-image [Asteroid (253) Mathilde Image]]
|
||||
|
||||
An asteroid is a space rock. It is a small object in the [[Solar System]] that travels around the [[Sun]]. It is like a [[planet|Planet]] but smaller. They range from very small (smaller than a car) to 600 miles (1000 km) across. A few asteroids have asteroid moons.
|
||||
|
||||
The name "asteroid" means "like a star" in the ancient Greek language. Asteroids may look like small stars in the sky, but they really do move around the [[Sun]], while stars only seem to move because the [[Earth]] spins. Like [[planets|Planet]], asteroids do not make their own light. Because of this, some people think "asteroids" is not a good name, and think that the name "planetoid" ("like a planet") would be a better name.
|
||||
|
||||
Giuseppe Piazzi found the first asteroid, in 1801. He called it Ceres, and it is the biggest object in the asteroid belt. Others, like Juno, Pallas, and Vesta were found later. In the 1850s so many had been found, that they were numbered by a Minor planet designation starting with 1 Ceres. Today, astronomers using computerized telescopes find thousands of asteroids every month. Asteroid impact prediction is one of the purposes.
|
||||
|
||||
Asteroids are the leftover rock and other material from the formation of the [[Solar System]]. These rocks were too small to come together to make a [[planet|Planet]]. Some are made of carbon or metal. Depending on what's on the surface, they are classified into various asteroid spectral types including Type M (metal), Type S (stone), and Type C (carbon).
|
||||
|
||||
Most asteroids in our [[Solar System]] are in the asteroid belt between [[Mars]] and [[Jupiter]]. Many are not in the main asteroid belt. The ones that come close to [[Earth]] are called Near-Earth asteroids. Many scientists think asteroids striking the [[Earth]] killed off all the dinosaurs and caused some of the other extinction events.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
title: Comet Image
|
||||
type: image/png
|
||||
tags: Image
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
created: 20230720113501352
|
||||
modified: 20230720113633994
|
||||
title: Comet
|
||||
type: text/vnd.tiddlywiki
|
||||
tags: [[Solar System]]
|
||||
|
||||
[img class=hero-image [Comet Image]]
|
||||
|
||||
A comet is a ball of mostly ice that moves around in outer space. Comets are often described as "dirty snowballs". They are very different from [[asteroids|Asteroid]]. The orbital inclinations of comets are usually high and not near the ecliptic where most [[solar system|Solar System]] objects are found. Most of them are long-period comets and come from the [[Kuiper belt]]. That is very far away from the [[Sun]], but some of them also come near enough to [[Earth]] for us to see at night.
|
||||
|
||||
They have long "tails", because the [[Sun]] melts the ice. A comet's tail does not trail behind it, but points directly away from the [[Sun]], because it is blown by the solar wind. The hard centre of the comet is the nucleus. It is one of the blackest things (lowest albedo) in the [[solar system|Solar System]]. When light shone on the nucleus of Halley's Comet, the comet reflected only 4% of the light back to us.
|
||||
|
||||
Periodic comets visit again and again. Non-periodic or single-apparition comets visit only once.
|
||||
|
||||
Comets sometimes break up, as Comet Biela did in the 19th century. Comet Shoemaker-Levy 9 broke up, and the pieces hit [[Jupiter]] in 1994. Some comets orbit (go around) together in groups. Astronomers think these comets are broken pieces that used to be one object.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 330 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
title: Earth Image
|
||||
type: image/png
|
||||
tags: Image
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 135 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
title: Earth's Moon Image
|
||||
type: image/png
|
||||
tags: Image
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
created: 20230720105302348
|
||||
modified: 20230720105451528
|
||||
title: Earth's Moon
|
||||
type: text/vnd.tiddlywiki
|
||||
|
||||
[img class=hero-image [Earth's Moon Image]]
|
||||
|
||||
The Moon is [[Earth]]'s only natural satellite. We usually see it in the night sky and also during the day. Some other planets also have moons or natural satellites.
|
||||
|
||||
Our moon is about one-fourth of the width of the [[Earth]]. Because it is far away it looks small, about half a degree wide. The gravity on the moon is one-sixth of the [[Earth]]'s gravity. It means that something will be one-sixth as heavy on the Moon than on [[Earth]]. The Moon is a rocky and dusty place. It moves slowly away from the [[Earth]] at a rate of 3.8 cm per year, due to the effect of tidal dissipation.
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
created: 20230720102439731
|
||||
modified: 20230720105223869
|
||||
title: Earth
|
||||
type: text/vnd.tiddlywiki
|
||||
tags: Planet [[Rocky]]
|
||||
|
||||
[img class=hero-image [Earth Image]]
|
||||
|
||||
Earth is the third planet from the [[Sun]] in the [[Solar System]]. It is the only planet known to have life on it. The Earth formed about 4.5 billion years ago. It is one of four rocky planets on the inner side of the [[Solar System]]. The other three are [[Mercury]], [[Venus]], and [[Mars]].
|
||||
|
||||
The large mass of the [[Sun]] keeps the Earth in orbit through the force of gravity. Earth also turns around in space, so that different parts face the Sun at different times. Earth goes around the [[Sun]] once (one year) for every 3651⁄4 times it turns around (one day).
|
||||
|
||||
Earth is the only planet in the [[Solar System]] that has a large amount of liquid water on its surface. About 74% of the surface of Earth is covered by liquid or frozen water. Because of this, people sometimes call it the blue planet.
|
||||
|
||||
Because of its water, Earth is home to millions of species of plants and animals which need water to survive. The things that live on Earth have changed its surface greatly. For example, early cyanobacteria changed the air and gave it oxygen. The living part of Earth's surface is called the "biosphere".
|
||||
|
||||
Earth is one of the eight planets in the [[Solar System]]. There are also thousands of small bodies which move around the [[Sun]]. The [[Solar System]] is moving through the Orion Arm of the [[Milky Way]] galaxy, and will be for about the next 10,000 years.
|
||||
|
||||
Earth is about 150,000,000 kilometres or 93,000,000 miles away from the [[Sun]] (this distance is called an "Astronomical Unit"). It moves on its orbit at an average speed of about 30 km/s (19 mi/s). Earth turns all the way around about 3651⁄4 times in the time it takes for Earth to go all the way around the [[Sun]]. To make up this extra bit of a day every year, an additional day is used every four years. This is named a "leap year".
|
||||
|
||||
The [[Moon|Earth's Moon]] goes around Earth at an average distance of 400,000 kilometres or 250,000 miles. It is locked to Earth, so that it always has the same half facing Earth; the other half is called the "dark side of the moon". It takes about 271⁄3 days for the [[Moon|Earth's Moon]] to go all the way around Earth, but because Earth is moving around the [[Sun]] at the same time, it takes about 291⁄2 days for the [[Moon|Earth's Moon]] to go from dark to bright to dark again. This is where the word "month" came from, even though most months now have 30 or 31 days.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 218 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
title: Jupiter Image
|
||||
type: image/png
|
||||
tags: Image
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
created: 20230720103949854
|
||||
modified: 20230720104126047
|
||||
title: Jupiter
|
||||
type: text/vnd.tiddlywiki
|
||||
tags: Planet [[Gas Giant]]
|
||||
|
||||
[img class=hero-image [Jupiter Image]]
|
||||
|
||||
Jupiter is the largest planet in the [[Solar System]]. It is the fifth planet from the [[Sun]]. Jupiter is a gas giant because it is so large, and made mostly of gas. The other gas giants in the Solar System are [[Saturn]], [[Uranus]], and [[Neptune]].
|
||||
|
||||
Jupiter's mass is about 318 times the mass of [[Earth]]. This is more than twice the mass of all the other planets in the [[Solar System]] put together.
|
||||
|
||||
Jupiter can be seen even without using a telescope. It is the third brightest object in the night sky. Only the [[Earth's Moon]] and [[Venus]] are brighter. The ancient Romans named the planet after their King of the Gods, Jupiter (Latin: Iuppiter).
|
||||
|
||||
Jupiter has 95 known moons. About 75 of them are very small—less than five kilometres wide. The four largest moons of Jupiter are Io, Europa, Ganymede, and Callisto. They are called the Galilean moons because Galileo Galilei discovered them. Ganymede is the largest moon in the Solar System. Its diameter is larger than that of the planet [[Mercury]].
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
created: 20230720113703253
|
||||
modified: 20230720113733279
|
||||
title: Kuiper belt
|
||||
type: text/vnd.tiddlywiki
|
||||
|
||||
The Kuiper belt is an area of the [[Solar System]] beyond the orbit of [[Neptune]] (at 30 astronomical units) to 50 AU from the [[Sun]].
|
||||
|
||||
The objects within the Kuiper Belt together with the members of the scattered disk beyond, are together called trans-Neptunian.
|
||||
|
||||
Many objects such as dwarf planets in the Kuiper belt are much bigger than the ones in the asteroid belt and are round. At least some Kuiper belt objects are icebound.
|
||||
|
||||
The first objects in the Kuiper belt to be found were [[Pluto]] and Charon (moon) but the belt was only identified and named in 1992 when more Kuiper belt objects (KBOs) were found. A few thousand have since been discovered and more than 70,000 KBOs over 100 km (62 mi) in diameter are thought to exist.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 209 KiB |
|
|
@ -0,0 +1,5 @@
|
|||
created: 20230720103818354
|
||||
modified: 20230720103822277
|
||||
title: Mars Image
|
||||
type: image/png
|
||||
tags: Image
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
created: 20230720103800905
|
||||
modified: 20230720103915592
|
||||
title: Mars
|
||||
type: text/vnd.tiddlywiki
|
||||
tags: Planet [[Rocky]]
|
||||
|
||||
[img class=hero-image [Mars Image]]
|
||||
|
||||
Mars is the fourth planet from the [[Sun]] in the [[Solar System]] and the second-smallest planet. Mars is a terrestrial planet with polar ice caps of frozen water and carbon dioxide. It has the largest volcano in the [[Solar System]], and some very large impact craters. Mars is named after the mythological Roman god of war because it appears of red color.
|
||||
|
||||
Space probes such as the Viking program landers are the main tools for the exploration of Mars.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
title: Mercury Image
|
||||
type: image/png
|
||||
tags: Image
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
created: 20230720101415532
|
||||
modified: 20230720101809366
|
||||
title: Mercury
|
||||
type: text/vnd.tiddlywiki
|
||||
tags: Planet [[Rocky]]
|
||||
|
||||
[img class=hero-image [Mercury Image]]
|
||||
|
||||
Mercury is the smallest planet in the [[Solar System]]. It is the closest planet to the [[Sun]]. It makes one trip around the Sun once every 87.969 days.
|
||||
|
||||
Mercury is bright when we can see it from [[Earth]]. It has an apparent magnitude ranging from −2.0 to 5.5. It cannot be seen easily because it is usually too close to the [[Sun]]. Because of this, Mercury can only be seen in the morning or evening twilight or when there is a solar eclipse.
|
||||
|
||||
Less is known about Mercury than about other planets of our [[Solar System]]. Even with telescopes only a small, bright crescent can be seen. It is also hard to put a satellite in orbit around it. Two spacecraft have visited Mercury. The first one was Mariner 10. It only made a map of about 45% of the Mercury's surface from 1974 to 1975. The second is the MESSENGER spacecraft, which finished mapping Mercury in March 2013.
|
||||
|
||||
Mercury looks like [[Earth's Moon]]. It has many craters and smooth plains. It has no moons and little atmosphere as we know it. However, Mercury does have an extremely thin atmosphere, known as an exosphere. Mercury has a large iron core. Because of this Mercury has a magnetic field about 1% as strong as that of the Earth. It is a very dense planet because its core is large.
|
||||
|
||||
Temperature at the surface can be anywhere from about 90 to 700 K (−183 °C to 427 °C, −297 °F to 801 °F), with the subsolar point being the hottest and the bottoms of craters near the poles being the coldest.
|
||||
|
||||
Known sightings of Mercury date back to at least the first millennium BC. Before the 4th century BC, Greek astronomers thought that Mercury was two different objects: The one that they were only able at sunrise, they called Apollo; the other one that they were only able to see at sunset, they called Hermes. The English name for the planet is from the Romans, who named it after the Roman god Mercury. The symbol for Mercury is based on Hermes' staff.
|
||||
|
||||
Even though Mercury is the closest planet to the [[Sun]], it is not the hottest. This is because it has no greenhouse effect. The heat that the [[Sun]] gives it, quickly escapes into space. The hottest planet is [[Venus]].
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 416 KiB |
|
|
@ -0,0 +1,5 @@
|
|||
created: 20230720095228607
|
||||
modified: 20230720095237609
|
||||
title: Milky Way Image
|
||||
type: image/png
|
||||
tags: Image
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
created: 20230720095039202
|
||||
modified: 20230720095530636
|
||||
title: Milky Way
|
||||
type: text/vnd.tiddlywiki
|
||||
|
||||
[img class=hero-image [Milky Way Image]]
|
||||
|
||||
The Milky Way is our home galaxy. It contains around 400 billion stars, including our [[Sun]].
|
||||
|
||||
The Milky Way has a diameter of about 170,000 or 200,000 light years, and is a barred spiral galaxy. The idea that the Milky Way is made of stars goes back to the Ancient Greek philosopher Democritus.
|
||||
|
||||
The Milky Way has three main parts: a disk, where the [[Solar System]] is, a bulge at the core, and an outer halo all around it. Although the word "disk" suggests it is flat, the Milky Way is actually not quite flat. It is slightly warped and twisted.
|
||||
|
||||
This galaxy belongs to the Local Group of three large galaxies and over 50 smaller galaxies. The Milky Way is one of the largest galaxies in the group, second to the Andromeda Galaxy. Its closest neighbour is the Canis Major Dwarf Galaxy, which is about 25,000 light years away from the Earth. The Andromeda Galaxy is moving towards the Milky Way Galaxy, and will collide with it in about 3.75 billion years. The Andromeda Galaxy moves with a speed of about 1,800 kilometres per minute.
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
created: 20230720113324534
|
||||
modified: 20230720113416564
|
||||
title: Moon
|
||||
type: text/vnd.tiddlywiki
|
||||
tags: [[Solar System]]
|
||||
|
||||
Bodies which orbit [[planets|Planet]] are called moons. They vary in size. The [[Earth]] has only one moon. Some other planets have many moons, and some have none. When people write just "the moon", they are usually talking about the moon of the Earth. [[Earth's Moon]] is written with a capital letter, Moon. The Latin word for the moon is luna, which is why the adjective used to talk about the moon is "lunar". For example, lunar eclipse.
|
||||
|
||||
Anything that goes around a planet is called a satellite. Moons are natural satellites. People also use rockets to send machines into orbit around the Earth. These machines are called artificial (man-made) satellites.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 158 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
title: Neptune Image
|
||||
type: image/png
|
||||
tags: Image
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
created: 20230720104752241
|
||||
modified: 20230720104941305
|
||||
title: Neptune
|
||||
type: text/vnd.tiddlywiki
|
||||
tags: Planet [[Gas Giant]]
|
||||
|
||||
[img class=hero-image [Neptune Image]]
|
||||
|
||||
Neptune is the eighth and farthest planet from the [[Sun]] in the [[Solar System]]. It is an ice giant. It is the fourth-largest planet in the system. Neptune has five rings. These rings are hard to see from the [[Earth]].
|
||||
|
||||
Neptune's mass is 17 times [[Earth]]'s mass and a little bit more than [[Uranus]]' mass. Neptune is denser and smaller than [[Uranus]]. Its greater mass makes its gravity make its atmosphere smaller and denser.
|
||||
|
||||
It was named after the Roman god of the sea, Neptune. Neptune's astronomical symbol is ♆, the trident of the god Neptune.
|
||||
|
||||
Neptune's atmosphere is mostly hydrogen and helium. It also contains small amounts of methane which makes the planet appear blue. Neptune's blue color is much darker than the color of [[Uranus]]. Neptune also has the strongest winds of any planet in the [[Solar System]], as high as 2,100 km/h or 1,300 mph.
|
||||
|
||||
Urbain Le Verrier and John Couch Adams were the astronomers who discovered Neptune. Neptune was not discovered using a telescope. It was the first planet to be discovered using mathematics. In 1821, astronomers saw that [[Uranus]]' orbit was different from what they expected. Another nearby planet's mass was changing [[Uranus]]' orbit. They found Neptune was the cause.
|
||||
|
||||
Voyager 2 visited Neptune on 25 August 1989. It was the only spacecraft to visit the planet. Neptune used to have a huge storm known as the "Great Dark Spot". Voyager 2 discovered the spot in 1989. The dark spot was not seen in 1994, but new spots were found since then. It is not known why the dark spot disappeared. Visits by other space probes have been planned.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 225 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
title: Planet Image
|
||||
type: image/png
|
||||
tags: Image
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
created: 20230720112945287
|
||||
modified: 20230720113139369
|
||||
title: Planet
|
||||
type: text/vnd.tiddlywiki
|
||||
tags: [[Solar System]]
|
||||
|
||||
[img class=hero-image [Planet Image]]
|
||||
|
||||
A planet is a large object such as [[Venus]] or [[Earth]] that orbits a star. Planets are smaller than stars, and they do not make light. [[Jupiter]] is the biggest planet in the [[Solar System]], while the smallest planet in the [[Solar System]] is [[Mercury]].
|
||||
|
||||
Planets are shaped like a slightly squashed ball (called a spheroid). Objects that orbit planets are called satellites. A star and everything which orbits it are called a star system.
|
||||
|
||||
There are eight planets in the [[Solar System]]. [[Pluto]] used to be called a planet, but in August 2006, the International Astronomical Union decided it was a dwarf planet instead. There are four more known dwarf planets in the [[Solar System]], Ceres, Makemake, Eris and Haumea.
|
||||
|
||||
The name "planet" is from the Greek word πλανήτης (planetes), meaning "wanderers", or "things that move". Until the 1990s, people only knew the planets in the [[Solar System]].
|
||||
|
||||
4,905 extrasolar planets (exoplanets) have been discovered in 3,629 planetary systems (January 2022 data). The count includes 808 multi-planetary systems. Known exoplanets range in size from gas giants about twice as large as Jupiter down to just over the size of the [[Moon|Earth's Moon]]. About 100 of these planets are roughly the size as [[Earth]]. Nine of these orbit in the habitable zone of their star.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 275 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
title: Pluto Image
|
||||
type: image/png
|
||||
tags: Image
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
created: 20230720113803689
|
||||
modified: 20230720114100139
|
||||
title: Pluto
|
||||
type: text/vnd.tiddlywiki
|
||||
|
||||
[img class=hero-image [Pluto Image]]
|
||||
|
||||
Pluto is a dwarf [[planet|Planet]] in the [[Solar System]]. Its formal name is 134340 Pluto, and its planetary symbol ⯓ or ♇. Pluto is the ninth largest body that moves around the [[Sun]]. Upon first being discovered, Pluto was considered a planet but was reclassified to a dwarf planet in 2006. It is the largest body in the [[Kuiper belt]].
|
||||
|
||||
Like other members of the [[Kuiper belt]], Pluto is mainly made of rock and ice. It is quite small. It is about a fifth (⅕) of the weight of the [[Earth's Moon]]. It is only a third (⅓) of its volume. Pluto is very far from the [[Sun]], so its temperature is very low. The average temperature on Pluto is -226 to -240 degrees Celsius. It has an odd orbit and this orbit is very sloped. It takes Pluto to 30 to 49 AU (4.4–7.4 billion km) from the [[Sun]]. This causes Pluto to sometimes go closer to the Sun than [[Neptune]].
|
||||
|
||||
Since it was discovered in 1930, Pluto was thought to be the [[Solar System]]'s ninth planet. In the late 1970s, the minor planet 2060 Chiron was found and people learned that Pluto had a small size. Later, in the early 21st century, the scattered disc object Eris and other objects like Pluto were discovered. Eris was initially believed to be 27% larger than Pluto, but was later found to be slightly smaller. On August 24, 2006, the International Astronomical Union (IAU) gave a definition to the word "planet" for the first time. By this definition, Pluto was not a planet anymore. It became a "dwarf planet" along with Eris and Ceres. After this, Pluto was put on the list of minor planets and was downgraded in 2006 by astronomer Michael E Brown. It was given the number 134340. Some scientists still think that Pluto should be classified as a planet.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
title: Saturn Image
|
||||
type: image/png
|
||||
tags: Image
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
created: 20230720104344173
|
||||
modified: 20230720104515376
|
||||
title: Saturn
|
||||
type: text/vnd.tiddlywiki
|
||||
tags: Planet [[Gas Giant]]
|
||||
|
||||
[img class=hero-image [Saturn Image]]
|
||||
|
||||
Saturn is the sixth planet from the [[Sun]] in the [[Solar System]].
|
||||
|
||||
Saturn is one of the four gas giant planets in the [[Solar System]], together with [[Jupiter]], [[Uranus]], and [[Neptune]]. It is the second largest planet in the [[Solar System]] ([[Jupiter]] is larger).
|
||||
|
||||
Saturn was named after the Roman god Saturnus. He was considered to be the same as the Greek god Kronos. Saturn's symbol is ♄ which is the symbol of Saturnus' sickle.
|
||||
|
||||
Inside Saturn is probably a core of iron, nickel, silicon and oxygen compounds, surrounded by a deep layer of metallic hydrogen, then a layer of liquid hydrogen and liquid helium and finally, an outer gaseous layer.
|
||||
|
||||
Saturn has 145 known moons orbiting the planet. The largest moon is Titan. Titan is larger in volume than the planet [[Mercury]]. Titan is the second-largest moon in the [[Solar System]]. The largest moon is a moon of [[Jupiter]], Ganymede. There are also many rings around Saturn. These rings are made of ice with some rocks and dust. Some people think that that the rings were made by a moon impact or other event. Saturn is about 1,433,000,000 km (870,000,000 mi) on average from the [[Sun]]. Saturn takes 29.6 Earth years to move around the [[Sun]].
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
title: Solar System Image
|
||||
type: image/png
|
||||
tags: Image
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
created: 20230720093645837
|
||||
modified: 20230720112852404
|
||||
title: Solar System
|
||||
type: text/vnd.tiddlywiki
|
||||
|
||||
[img class=hero-image [Solar System Image]]
|
||||
|
||||
The Solar System is the [[Sun]] and all the objects that orbit around it. The Sun is orbited by [[planets|Planet]], [[asteroids|Asteroid]], [[comets|Comet]] and other things.
|
||||
|
||||
The Solar System is about 4.568 billion years old. The Sun formed by gravity in a large molecular cloud. It is mainly hydrogen, which it converts into helium through nuclear fusion. The planets are in a flattened orbiting disk. This disk was left over from the cloud that formed the Sun. Eventually, the gas and dust of the disk came together into planets. It is thought that almost all stars and their planets form this way.
|
||||
|
||||
The Sun is a star. It makes up 99.9% of the Solar System's mass. This means that it has strong gravity. The other objects are pulled into orbit around the Sun. The Sun is mostly made out of hydrogen, and some helium and higher elements. All heavier elements, called metals in astronomy, account for less than 2% of the Sun's mass. Oxygen is about 1% of the Sun's mass. Iron (0.2%) is the most plentiful of the other elements.
|
||||
|
||||
There are eight planets in the Solar System. From closest to farthest from the Sun, they are: [[Mercury]], [[Venus]], [[Earth]], [[Mars]], [[Jupiter]], [[Saturn]], [[Uranus]] and [[Neptune]]. The first four planets are called terrestrial planets. They are mostly made of rock and metal, and they are mostly solid. The last four planets are called gas giants. This is because they are much larger than other planets and are mostly made of gas.
|
||||
|
||||
Six of the planets, and the six largest dwarf planets, are orbited by [[moons|Moon]]. There are more than 200 moons in the Solar System. [[Mercury]] and [[Venus]] have no moons, and [[Jupiter]] and [[Saturn]] have the largest number of moons. The largest moon is [[Ganymede]] which is a moon of [[Jupiter]]. [[Titan]] is one of [[Saturn]]’s moons. It is the only moon in the Solar System to have an atmosphere, which is mainly composed of nitrogen.
|
||||
|
||||
The Solar System also contains other things. There are [[asteroid belts|Asteroid]], mostly between [[Mars]] and [[Jupiter]]. Further out than [[Neptune]], there is the [[Kuiper belt]] and the scattered disc. These areas have dwarf planets, including [[Pluto]], Makemake, Haumea, Ceres and Eris. There are thousands of very small objects in these areas. There are also [[comets|Comet]], centaurs, and interplanetary dust.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 392 KiB |
|
|
@ -0,0 +1,5 @@
|
|||
created: 20230720095341229
|
||||
modified: 20230720095343728
|
||||
type: image/png
|
||||
title: Sun Image
|
||||
tags: Image
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
created: 20230720094834001
|
||||
modified: 20230720095518349
|
||||
title: Sun
|
||||
type: text/vnd.tiddlywiki
|
||||
tags: [[Solar System]]
|
||||
|
||||
[img class=hero-image [Sun Image]]
|
||||
|
||||
The Sun, also known as Sol, is a star at the center of our [[solar system|Solar System]]. It is a yellow star that gives off different types of energy such as infrared energy (heat), ultraviolet light, radio waves and light. It also gives off a stream of particles, which reaches [[Earth]] as "solar wind". The source of all this energy is nuclear fusion. Nuclear fusion is the reaction in the star which turns hydrogen into helium and makes huge amounts of energy. It is a nearly perfect ball of hot plasma.
|
||||
|
||||
The Sun is a star like many others in our [[Milky Way]] galaxy. The Sun is a type of star called a G-type main-sequence star based on its spectral class.
|
||||
|
||||
The Sun has existed for a little over 4.5 billion years. It is going to continue for at least as long again.
|
||||
|
||||
The Sun is about a hundred times as wide as the Earth. It has a mass of 1.9891×1030 kg. This is 333,000 times the mass of the [[Earth]]. 1.3 million [[Earths|Earth]] can fit inside the Sun. The Sun fuses about 600 million tons of hydrogen into helium every second.
|
||||
|
||||
The Sun is the main source of energy for the [[Earth]]. This energy is made deep inside the Sun in a process called nuclear fusion. Four hydrogen atoms are fused together to make one helium atom. Some of the leftover matter turns into energy. This is the same way energy is released in a hydrogen bomb.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
title: Uranus Image
|
||||
type: image/png
|
||||
tags: Image
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
created: 20230720104606510
|
||||
modified: 20230720104721998
|
||||
title: Uranus
|
||||
type: text/vnd.tiddlywiki
|
||||
tags: Planet [[Gas Giant]]
|
||||
|
||||
[img class=hero-image [Uranus Image]]
|
||||
|
||||
Uranus is the seventh planet from the [[Sun]] in our [[Solar System]]. Like [[Neptune]], it is an ice giant. It is the third largest planet in the solar system.
|
||||
|
||||
The planet is made of ice, gases and liquid metal. Its atmosphere contains hydrogen (1H), helium (2He) and methane. The temperature on Uranus is −197 °C (−322.6 °F; 76.1 K) near the top of its atmosphere, but its small solid core (about 55% the mass of [[Earth]]) is probably about 4,730 °C (8,540 °F; 5,000 K).
|
||||
|
||||
The planet is tilted on its axis so much that it is sideways. It has five big moons, many small ones, and a small system of 13 planetary rings.
|
||||
|
||||
The distance between Uranus and the [[Sun]] is about 2.8 billion km. Uranus completes its orbit around the [[Sun]] in 84 earth years. It completes a spin around its axis in 17 hours and 14 minutes. This means there are about 43,000 Uranian days in one Uranian year.
|
||||
|
||||
Uranus was discovered in 1781. This planet can be seen with the naked eye under perfect conditions. John Flamsteed saw it decades earlier but mistook it for a star (34 Tauri).
|
||||
|
||||
Uranus is named after Uranus, the Greek name of the Sumerian god Anu, who was a god of the sky.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
title: Venus Image
|
||||
type: image/png
|
||||
tags: Image
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
created: 20230720101839792
|
||||
modified: 20230720104223481
|
||||
title: Venus
|
||||
type: text/vnd.tiddlywiki
|
||||
tags: Planet [[Rocky]]
|
||||
|
||||
[img class=hero-image [Venus Image]]
|
||||
|
||||
Venus is the second planet from the [[Sun]]. Venus is the only planet in the [[Solar System]] that has a day longer than a year. The year length of Venus is 225 [[Earth]] days. The day length of Venus is 243 [[Earth]] days.
|
||||
|
||||
Venus is a terrestrial planet because it has a solid, rocky surface like other planets in the inner [[Solar System]]. Astronomers have known Venus for thousands of years. The ancient Romans named it after their goddess Venus, goddess of love and beauty.
|
||||
|
||||
Venus is the brightest thing in the night sky except for the Moon. It is sometimes called the morning star or the evening star as at some elongations it is easily seen just before the sun comes up in the morning. At other times, it can be seen just after the sun goes down in the evening. Venus comes closer to the [[Earth]] than any other planet does.
|
||||
|
||||
Venus is sometimes called the sister planet of L as they are quite similar in size and gravity. In other ways the planets are very different. Venus' atmosphere (air) is mostly carbon dioxide with clouds of sulphuric acid. Sulphuric acid is a chemical that is poisonous to life. For this it is sometimes known as the Earth's "evil twin".
|
||||
|
||||
The thick atmosphere makes it hard to see the surface. Until the late twentieth century many thought there might be life there. The pressure on Venus' surface is 92 times that of [[Earth]]. Venus is one of only 2 planets in the [[Solar System]] (the other being [[Mercury]]) that has no moons. Venus spins very slowly on its axis and it spins in the opposite direction to the other planets.
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
title: $:/themes/tiddlywiki/vanilla/options/sidebarlayout
|
||||
type: text/vnd.tiddlywiki
|
||||
|
||||
fluid-fixed
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
title: $:/DefaultTiddlers
|
||||
|
||||
[[HelloThere]]
|
||||
[[Solar System]]
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
title: HelloThere
|
||||
|
||||
Welcome to this TiddlyWiki about the [[Solar System]].
|
||||
|
||||
With many thanks to the [[Simple English Wikipedia|https://simple.wikipedia.org/]], the original source of this material.
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
title: $:/SiteSubitle
|
||||
text: An Interactive Guide
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
title: $:/SiteTitle
|
||||
text: ~TiddlyWiki Tour
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
title: $:/config/AutoStartTour
|
||||
text: yes
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
title: $:/demoshow/styles
|
||||
tags: [[$:/tags/Stylesheet]]
|
||||
|
||||
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline
|
||||
|
||||
.hero-image {
|
||||
max-width: 300px;
|
||||
max-height: 300px;
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
{
|
||||
"description": "A step by step introduction to TiddlyWiki",
|
||||
"plugins": [
|
||||
"tiddlywiki/tour",
|
||||
"tiddlywiki/confetti",
|
||||
"tiddlywiki/dynannotate"
|
||||
],
|
||||
"themes": [
|
||||
"tiddlywiki/vanilla",
|
||||
"tiddlywiki/snowwhite"
|
||||
],
|
||||
"build": {
|
||||
"index": [
|
||||
"--rendertiddler","$:/core/save/all","index.html","text/plain"]
|
||||
}
|
||||
}
|
||||
|
|
@ -5,7 +5,22 @@ tags: TableOfContents
|
|||
title: HelloThere
|
||||
type: text/vnd.tiddlywiki
|
||||
|
||||
!!.tc-hero-heading ''Welcome to TiddlyWiki, a unique [[non-linear|Philosophy of Tiddlers]] notebook for [[capturing|Creating and editing tiddlers]], [[organising|Structuring TiddlyWiki]] and [[sharing|Sharing your tiddlers with others]] complex information''
|
||||
<div style="border: 2px solid red; background: #ffd; padding: 0 0.5em; border-radius: 8px;">
|
||||
|
||||
This is a build of ~TiddlyWiki 5 from the branch [[confetti-plugin|https://github.com/Jermolene/TiddlyWiki5/tree/confetti-plugin]]. Despite the name of the branch, it actually introduces two new plugins and brings updates to an existing one:
|
||||
|
||||
* The ''Tour Plugin'' allows interactive learning tours to be created and presented in TiddlyWiki
|
||||
** Launch the tour in this wiki with the {{$:/plugins/tiddlywiki/tour/start-tour-button}} button in the sidebar
|
||||
* The ''Confetti Plugin'' displays animated bursts of confetti
|
||||
** See the [[Confetti Plugin readme|$:/plugins/tiddlywiki/confetti/readme]] for examples
|
||||
* The ''updated Dynannotate Plugin'' gains the ability to highlight screen elements using an animated spotlight effect
|
||||
** See the [[Dynannotate Spotlight Demo|$:/plugins/tiddlywiki/dynannotate/examples/spotlight]]
|
||||
|
||||
A standalone demo of the tour functionality is [ext[available here|./tour.html]].
|
||||
|
||||
</div>
|
||||
|
||||
!!.tc-hero-heading ''Welcome to TiddlyWiki, a unique [[non-linear|Philosophy of Tiddlers]] notebook for [[capturing|Creating and editing tiddlers]], [[organising|Structuring TiddlyWiki]] and [[sharing|Sharing your tiddlers with others]] complex information''
|
||||
|
||||
Use it to keep your [[to-do list|TaskManagementExample]], to plan an [[essay or novel|"TiddlyWiki for Scholars" by Alberto Molina]], or to organise your wedding. Record every thought that crosses your brain, or build a flexible and responsive website.
|
||||
|
||||
|
|
|
|||
|
|
@ -7,6 +7,9 @@
|
|||
"tiddlywiki/evernote",
|
||||
"tiddlywiki/internals",
|
||||
"tiddlywiki/menubar",
|
||||
"tiddlywiki/confetti",
|
||||
"tiddlywiki/dynannotate",
|
||||
"tiddlywiki/tour",
|
||||
"tiddlywiki/qrcode"
|
||||
],
|
||||
"themes": [
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -36,5 +36,8 @@
|
|||
"test": "node ./tiddlywiki.js ./editions/test --verbose --version --build index",
|
||||
"lint:fix": "eslint . --fix",
|
||||
"lint": "eslint ."
|
||||
},
|
||||
"dependencies": {
|
||||
"aws-sdk": "^2.1543.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,56 @@
|
|||
/*\
|
||||
title: $:/plugins/tiddlywiki/confetti/confetti-manager.js
|
||||
type: application/javascript
|
||||
module-type: global
|
||||
|
||||
Confetti manager
|
||||
|
||||
\*/
|
||||
(function(){
|
||||
|
||||
/*jslint node: true, browser: true */
|
||||
/*global $tw: false */
|
||||
"use strict";
|
||||
|
||||
var confetti = require("$:/plugins/tiddlywiki/confetti/confetti.js");
|
||||
|
||||
function ConfettiManager() {
|
||||
this.outstandingTimers = [];
|
||||
}
|
||||
|
||||
ConfettiManager.prototype.launch = function (delay,options) {
|
||||
var self = this,
|
||||
defaultOptions = {
|
||||
scalar: 1.2,
|
||||
particleCount: 400,
|
||||
zIndex: 2000
|
||||
};
|
||||
options = $tw.utils.extend(defaultOptions,options);
|
||||
if(delay > 0) {
|
||||
var id = setTimeout(function() {
|
||||
var p = self.outstandingTimers.indexOf(id);
|
||||
if(p !== -1) {
|
||||
self.outstandingTimers.splice(p,1);
|
||||
} else {
|
||||
console.log("Confetti Manager Error: Cannot find previously stored timer ID");
|
||||
debugger;
|
||||
}
|
||||
confetti(options);
|
||||
},delay);
|
||||
this.outstandingTimers.push(id);
|
||||
} else {
|
||||
confetti(options);
|
||||
}
|
||||
};
|
||||
|
||||
ConfettiManager.prototype.reset = function () {
|
||||
$tw.utils.each(this.outstandingTimers,function(id) {
|
||||
clearTimeout(id);
|
||||
});
|
||||
this.outstandingTimers = [];
|
||||
confetti.reset();
|
||||
};
|
||||
|
||||
exports.ConfettiManager = ConfettiManager;
|
||||
|
||||
})();
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
/*\
|
||||
title: $:/plugins/tiddlywiki/confetti/confetti-widget.js
|
||||
type: application/javascript
|
||||
module-type: widget
|
||||
|
||||
Confetti widget
|
||||
|
||||
\*/
|
||||
(function(){
|
||||
|
||||
/*jslint node: true, browser: true */
|
||||
/*global $tw: false */
|
||||
"use strict";
|
||||
|
||||
var Widget = require("$:/core/modules/widgets/widget.js").widget;
|
||||
|
||||
var confetti = require("$:/plugins/tiddlywiki/confetti/confetti.js");
|
||||
|
||||
var ConfettiWidget = function(parseTreeNode,options) {
|
||||
this.initialise(parseTreeNode,options);
|
||||
};
|
||||
|
||||
/*
|
||||
Inherit from the base widget class
|
||||
*/
|
||||
ConfettiWidget.prototype = new Widget();
|
||||
|
||||
/*
|
||||
Render this widget into the DOM
|
||||
*/
|
||||
ConfettiWidget.prototype.render = function(parent,nextSibling) {
|
||||
var self = this;
|
||||
// Remember parent
|
||||
this.parentDomNode = parent;
|
||||
// Compute attributes and execute state
|
||||
this.computeAttributes();
|
||||
this.execute();
|
||||
// Launch confetti
|
||||
if($tw.browser) {
|
||||
var options = {};
|
||||
$tw.utils.each(this.attributes,function(attribute,name) {
|
||||
options[name] = self.getAttribute(name);
|
||||
});
|
||||
$tw.confettiManager.launch(options.delay,options);
|
||||
}
|
||||
// Render children
|
||||
this.renderChildren(parent,nextSibling);
|
||||
};
|
||||
|
||||
/*
|
||||
Compute the internal state of the widget
|
||||
*/
|
||||
ConfettiWidget.prototype.execute = function() {
|
||||
// Make child widgets
|
||||
this.makeChildWidgets();
|
||||
};
|
||||
|
||||
/*
|
||||
Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering
|
||||
*/
|
||||
ConfettiWidget.prototype.refresh = function(changedTiddlers) {
|
||||
return this.refreshChildren(changedTiddlers);
|
||||
};
|
||||
|
||||
exports.confetti = ConfettiWidget;
|
||||
|
||||
})();
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
title: $:/plugins/tiddlywiki/confetti/examples/staggered
|
||||
tags: $:/tags/ConfettiExample
|
||||
|
||||
<$button>
|
||||
<$action-sendmessage $message="tm-confetti-launch"/>
|
||||
<$action-sendmessage $message="tm-confetti-launch" originY=0.6 spread=70 delay=300/>
|
||||
<$action-sendmessage $message="tm-confetti-launch" originY=0.55 spread=30 delay=600/>
|
||||
Launch three staggered rounds of confetti
|
||||
</$button>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
title: $:/plugins/tiddlywiki/confetti/examples/typing-trigger
|
||||
tags: $:/tags/ConfettiExample
|
||||
|
||||
Type the word "launch": <$edit-text tiddler="$:/temp/confetti/launchstatus" tag="input" placeholder="Type here"/>
|
||||
|
||||
<$list filter="[{$:/temp/confetti/launchstatus}match:caseinsensitive[launch]]" variable="ignore">
|
||||
Launched!
|
||||
<$confetti particleCount=100/>
|
||||
<$confetti particleCount=100 delay=300/>
|
||||
</$list>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
ISC License
|
||||
|
||||
Copyright (c) 2020, Kiril Vatev
|
||||
|
||||
Permission to use, copy, modify, and/or distribute this software for any
|
||||
purpose with or without fee is hereby granted, provided that the above
|
||||
copyright notice and this permission notice appear in all copies.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
|
||||
WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
|
||||
MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
|
||||
ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
|
||||
WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
|
||||
ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
|
||||
OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
|
||||
|
|
@ -0,0 +1,626 @@
|
|||
(function main(global, module, isWorker, workerSize) {
|
||||
var canUseWorker = !!(
|
||||
global.Worker &&
|
||||
global.Blob &&
|
||||
global.Promise &&
|
||||
global.OffscreenCanvas &&
|
||||
global.OffscreenCanvasRenderingContext2D &&
|
||||
global.HTMLCanvasElement &&
|
||||
global.HTMLCanvasElement.prototype.transferControlToOffscreen &&
|
||||
global.URL &&
|
||||
global.URL.createObjectURL);
|
||||
|
||||
function noop() {}
|
||||
|
||||
// create a promise if it exists, otherwise, just
|
||||
// call the function directly
|
||||
function promise(func) {
|
||||
var ModulePromise = module.exports.Promise;
|
||||
var Prom = ModulePromise !== void 0 ? ModulePromise : global.Promise;
|
||||
|
||||
if (typeof Prom === 'function') {
|
||||
return new Prom(func);
|
||||
}
|
||||
|
||||
func(noop, noop);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
var raf = (function () {
|
||||
var TIME = Math.floor(1000 / 60);
|
||||
var frame, cancel;
|
||||
var frames = {};
|
||||
var lastFrameTime = 0;
|
||||
|
||||
if (typeof requestAnimationFrame === 'function' && typeof cancelAnimationFrame === 'function') {
|
||||
frame = function (cb) {
|
||||
var id = Math.random();
|
||||
|
||||
frames[id] = requestAnimationFrame(function onFrame(time) {
|
||||
if (lastFrameTime === time || lastFrameTime + TIME - 1 < time) {
|
||||
lastFrameTime = time;
|
||||
delete frames[id];
|
||||
|
||||
cb();
|
||||
} else {
|
||||
frames[id] = requestAnimationFrame(onFrame);
|
||||
}
|
||||
});
|
||||
|
||||
return id;
|
||||
};
|
||||
cancel = function (id) {
|
||||
if (frames[id]) {
|
||||
cancelAnimationFrame(frames[id]);
|
||||
}
|
||||
};
|
||||
} else {
|
||||
frame = function (cb) {
|
||||
return setTimeout(cb, TIME);
|
||||
};
|
||||
cancel = function (timer) {
|
||||
return clearTimeout(timer);
|
||||
};
|
||||
}
|
||||
|
||||
return { frame: frame, cancel: cancel };
|
||||
}());
|
||||
|
||||
var getWorker = (function () {
|
||||
var worker;
|
||||
var prom;
|
||||
var resolves = {};
|
||||
|
||||
function decorate(worker) {
|
||||
function execute(options, callback) {
|
||||
worker.postMessage({ options: options || {}, callback: callback });
|
||||
}
|
||||
worker.init = function initWorker(canvas) {
|
||||
var offscreen = canvas.transferControlToOffscreen();
|
||||
worker.postMessage({ canvas: offscreen }, [offscreen]);
|
||||
};
|
||||
|
||||
worker.fire = function fireWorker(options, size, done) {
|
||||
if (prom) {
|
||||
execute(options, null);
|
||||
return prom;
|
||||
}
|
||||
|
||||
var id = Math.random().toString(36).slice(2);
|
||||
|
||||
prom = promise(function (resolve) {
|
||||
function workerDone(msg) {
|
||||
if (msg.data.callback !== id) {
|
||||
return;
|
||||
}
|
||||
|
||||
delete resolves[id];
|
||||
worker.removeEventListener('message', workerDone);
|
||||
|
||||
prom = null;
|
||||
done();
|
||||
resolve();
|
||||
}
|
||||
|
||||
worker.addEventListener('message', workerDone);
|
||||
execute(options, id);
|
||||
|
||||
resolves[id] = workerDone.bind(null, { data: { callback: id }});
|
||||
});
|
||||
|
||||
return prom;
|
||||
};
|
||||
|
||||
worker.reset = function resetWorker() {
|
||||
worker.postMessage({ reset: true });
|
||||
|
||||
for (var id in resolves) {
|
||||
resolves[id]();
|
||||
delete resolves[id];
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return function () {
|
||||
if (worker) {
|
||||
return worker;
|
||||
}
|
||||
|
||||
if (!isWorker && canUseWorker) {
|
||||
var code = [
|
||||
'var CONFETTI, SIZE = {}, module = {};',
|
||||
'(' + main.toString() + ')(this, module, true, SIZE);',
|
||||
'onmessage = function(msg) {',
|
||||
' if (msg.data.options) {',
|
||||
' CONFETTI(msg.data.options).then(function () {',
|
||||
' if (msg.data.callback) {',
|
||||
' postMessage({ callback: msg.data.callback });',
|
||||
' }',
|
||||
' });',
|
||||
' } else if (msg.data.reset) {',
|
||||
' CONFETTI && CONFETTI.reset();',
|
||||
' } else if (msg.data.resize) {',
|
||||
' SIZE.width = msg.data.resize.width;',
|
||||
' SIZE.height = msg.data.resize.height;',
|
||||
' } else if (msg.data.canvas) {',
|
||||
' SIZE.width = msg.data.canvas.width;',
|
||||
' SIZE.height = msg.data.canvas.height;',
|
||||
' CONFETTI = module.exports.create(msg.data.canvas);',
|
||||
' }',
|
||||
'}',
|
||||
].join('\n');
|
||||
try {
|
||||
worker = new Worker(URL.createObjectURL(new Blob([code])));
|
||||
} catch (e) {
|
||||
// eslint-disable-next-line no-console
|
||||
typeof console !== undefined && typeof console.warn === 'function' ? console.warn('🎊 Could not load worker', e) : null;
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
decorate(worker);
|
||||
}
|
||||
|
||||
return worker;
|
||||
};
|
||||
})();
|
||||
|
||||
var defaults = {
|
||||
particleCount: 50,
|
||||
angle: 90,
|
||||
spread: 45,
|
||||
startVelocity: 45,
|
||||
decay: 0.9,
|
||||
gravity: 1,
|
||||
drift: 0,
|
||||
ticks: 200,
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
shapes: ['square', 'circle'],
|
||||
zIndex: 100,
|
||||
colors: [
|
||||
'#26ccff',
|
||||
'#a25afd',
|
||||
'#ff5e7e',
|
||||
'#88ff5a',
|
||||
'#fcff42',
|
||||
'#ffa62d',
|
||||
'#ff36ff'
|
||||
],
|
||||
// probably should be true, but back-compat
|
||||
disableForReducedMotion: false,
|
||||
scalar: 1
|
||||
};
|
||||
|
||||
function convert(val, transform) {
|
||||
return transform ? transform(val) : val;
|
||||
}
|
||||
|
||||
function isOk(val) {
|
||||
return !(val === null || val === undefined);
|
||||
}
|
||||
|
||||
function prop(options, name, transform) {
|
||||
return convert(
|
||||
options && isOk(options[name]) ? options[name] : defaults[name],
|
||||
transform
|
||||
);
|
||||
}
|
||||
|
||||
function onlyPositiveInt(number){
|
||||
return number < 0 ? 0 : Math.floor(number);
|
||||
}
|
||||
|
||||
function randomInt(min, max) {
|
||||
// [min, max)
|
||||
return Math.floor(Math.random() * (max - min)) + min;
|
||||
}
|
||||
|
||||
function toDecimal(str) {
|
||||
return parseInt(str, 16);
|
||||
}
|
||||
|
||||
function colorsToRgb(colors) {
|
||||
return colors.map(hexToRgb);
|
||||
}
|
||||
|
||||
function hexToRgb(str) {
|
||||
var val = String(str).replace(/[^0-9a-f]/gi, '');
|
||||
|
||||
if (val.length < 6) {
|
||||
val = val[0]+val[0]+val[1]+val[1]+val[2]+val[2];
|
||||
}
|
||||
|
||||
return {
|
||||
r: toDecimal(val.substring(0,2)),
|
||||
g: toDecimal(val.substring(2,4)),
|
||||
b: toDecimal(val.substring(4,6))
|
||||
};
|
||||
}
|
||||
|
||||
function getOrigin(options) {
|
||||
var origin = prop(options, 'origin', Object);
|
||||
origin.x = prop(origin, 'x', Number);
|
||||
origin.y = prop(origin, 'y', Number);
|
||||
|
||||
return origin;
|
||||
}
|
||||
|
||||
function setCanvasWindowSize(canvas) {
|
||||
canvas.width = document.documentElement.clientWidth;
|
||||
canvas.height = document.documentElement.clientHeight;
|
||||
}
|
||||
|
||||
function setCanvasRectSize(canvas) {
|
||||
var rect = canvas.getBoundingClientRect();
|
||||
canvas.width = rect.width;
|
||||
canvas.height = rect.height;
|
||||
}
|
||||
|
||||
function getCanvas(zIndex) {
|
||||
var canvas = document.createElement('canvas');
|
||||
|
||||
canvas.style.position = 'fixed';
|
||||
canvas.style.top = '0px';
|
||||
canvas.style.left = '0px';
|
||||
canvas.style.pointerEvents = 'none';
|
||||
canvas.style.zIndex = zIndex;
|
||||
|
||||
return canvas;
|
||||
}
|
||||
|
||||
function ellipse(context, x, y, radiusX, radiusY, rotation, startAngle, endAngle, antiClockwise) {
|
||||
context.save();
|
||||
context.translate(x, y);
|
||||
context.rotate(rotation);
|
||||
context.scale(radiusX, radiusY);
|
||||
context.arc(0, 0, 1, startAngle, endAngle, antiClockwise);
|
||||
context.restore();
|
||||
}
|
||||
|
||||
function randomPhysics(opts) {
|
||||
var radAngle = opts.angle * (Math.PI / 180);
|
||||
var radSpread = opts.spread * (Math.PI / 180);
|
||||
|
||||
return {
|
||||
x: opts.x,
|
||||
y: opts.y,
|
||||
wobble: Math.random() * 10,
|
||||
wobbleSpeed: Math.min(0.11, Math.random() * 0.1 + 0.05),
|
||||
velocity: (opts.startVelocity * 0.5) + (Math.random() * opts.startVelocity),
|
||||
angle2D: -radAngle + ((0.5 * radSpread) - (Math.random() * radSpread)),
|
||||
tiltAngle: (Math.random() * (0.75 - 0.25) + 0.25) * Math.PI,
|
||||
color: opts.color,
|
||||
shape: opts.shape,
|
||||
tick: 0,
|
||||
totalTicks: opts.ticks,
|
||||
decay: opts.decay,
|
||||
drift: opts.drift,
|
||||
random: Math.random() + 2,
|
||||
tiltSin: 0,
|
||||
tiltCos: 0,
|
||||
wobbleX: 0,
|
||||
wobbleY: 0,
|
||||
gravity: opts.gravity * 3,
|
||||
ovalScalar: 0.6,
|
||||
scalar: opts.scalar
|
||||
};
|
||||
}
|
||||
|
||||
function updateFetti(context, fetti) {
|
||||
fetti.x += Math.cos(fetti.angle2D) * fetti.velocity + fetti.drift;
|
||||
fetti.y += Math.sin(fetti.angle2D) * fetti.velocity + fetti.gravity;
|
||||
fetti.wobble += fetti.wobbleSpeed;
|
||||
fetti.velocity *= fetti.decay;
|
||||
fetti.tiltAngle += 0.1;
|
||||
fetti.tiltSin = Math.sin(fetti.tiltAngle);
|
||||
fetti.tiltCos = Math.cos(fetti.tiltAngle);
|
||||
fetti.random = Math.random() + 2;
|
||||
fetti.wobbleX = fetti.x + ((10 * fetti.scalar) * Math.cos(fetti.wobble));
|
||||
fetti.wobbleY = fetti.y + ((10 * fetti.scalar) * Math.sin(fetti.wobble));
|
||||
|
||||
var progress = (fetti.tick++) / fetti.totalTicks;
|
||||
|
||||
var x1 = fetti.x + (fetti.random * fetti.tiltCos);
|
||||
var y1 = fetti.y + (fetti.random * fetti.tiltSin);
|
||||
var x2 = fetti.wobbleX + (fetti.random * fetti.tiltCos);
|
||||
var y2 = fetti.wobbleY + (fetti.random * fetti.tiltSin);
|
||||
|
||||
context.fillStyle = 'rgba(' + fetti.color.r + ', ' + fetti.color.g + ', ' + fetti.color.b + ', ' + (1 - progress) + ')';
|
||||
context.beginPath();
|
||||
|
||||
if (fetti.shape === 'circle') {
|
||||
context.ellipse ?
|
||||
context.ellipse(fetti.x, fetti.y, Math.abs(x2 - x1) * fetti.ovalScalar, Math.abs(y2 - y1) * fetti.ovalScalar, Math.PI / 10 * fetti.wobble, 0, 2 * Math.PI) :
|
||||
ellipse(context, fetti.x, fetti.y, Math.abs(x2 - x1) * fetti.ovalScalar, Math.abs(y2 - y1) * fetti.ovalScalar, Math.PI / 10 * fetti.wobble, 0, 2 * Math.PI);
|
||||
} else if (fetti.shape === 'star') {
|
||||
var rot = Math.PI / 2 * 3;
|
||||
var innerRadius = 4 * fetti.scalar;
|
||||
var outerRadius = 8 * fetti.scalar;
|
||||
var x = fetti.x;
|
||||
var y = fetti.y;
|
||||
var spikes = 5;
|
||||
var step = Math.PI / spikes;
|
||||
|
||||
while (spikes--) {
|
||||
x = fetti.x + Math.cos(rot) * outerRadius;
|
||||
y = fetti.y + Math.sin(rot) * outerRadius;
|
||||
context.lineTo(x, y);
|
||||
rot += step;
|
||||
|
||||
x = fetti.x + Math.cos(rot) * innerRadius;
|
||||
y = fetti.y + Math.sin(rot) * innerRadius;
|
||||
context.lineTo(x, y);
|
||||
rot += step;
|
||||
}
|
||||
} else {
|
||||
context.moveTo(Math.floor(fetti.x), Math.floor(fetti.y));
|
||||
context.lineTo(Math.floor(fetti.wobbleX), Math.floor(y1));
|
||||
context.lineTo(Math.floor(x2), Math.floor(y2));
|
||||
context.lineTo(Math.floor(x1), Math.floor(fetti.wobbleY));
|
||||
}
|
||||
|
||||
context.closePath();
|
||||
context.fill();
|
||||
|
||||
return fetti.tick < fetti.totalTicks;
|
||||
}
|
||||
|
||||
function animate(canvas, fettis, resizer, size, done) {
|
||||
var animatingFettis = fettis.slice();
|
||||
var context = canvas.getContext('2d');
|
||||
var animationFrame;
|
||||
var destroy;
|
||||
|
||||
var prom = promise(function (resolve) {
|
||||
function onDone() {
|
||||
animationFrame = destroy = null;
|
||||
|
||||
context.clearRect(0, 0, size.width, size.height);
|
||||
|
||||
done();
|
||||
resolve();
|
||||
}
|
||||
|
||||
function update() {
|
||||
if (isWorker && !(size.width === workerSize.width && size.height === workerSize.height)) {
|
||||
size.width = canvas.width = workerSize.width;
|
||||
size.height = canvas.height = workerSize.height;
|
||||
}
|
||||
|
||||
if (!size.width && !size.height) {
|
||||
resizer(canvas);
|
||||
size.width = canvas.width;
|
||||
size.height = canvas.height;
|
||||
}
|
||||
|
||||
context.clearRect(0, 0, size.width, size.height);
|
||||
|
||||
animatingFettis = animatingFettis.filter(function (fetti) {
|
||||
return updateFetti(context, fetti);
|
||||
});
|
||||
|
||||
if (animatingFettis.length) {
|
||||
animationFrame = raf.frame(update);
|
||||
} else {
|
||||
onDone();
|
||||
}
|
||||
}
|
||||
|
||||
animationFrame = raf.frame(update);
|
||||
destroy = onDone;
|
||||
});
|
||||
|
||||
return {
|
||||
addFettis: function (fettis) {
|
||||
animatingFettis = animatingFettis.concat(fettis);
|
||||
|
||||
return prom;
|
||||
},
|
||||
canvas: canvas,
|
||||
promise: prom,
|
||||
reset: function () {
|
||||
if (animationFrame) {
|
||||
raf.cancel(animationFrame);
|
||||
}
|
||||
|
||||
if (destroy) {
|
||||
destroy();
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function confettiCannon(canvas, globalOpts) {
|
||||
var isLibCanvas = !canvas;
|
||||
var allowResize = !!prop(globalOpts || {}, 'resize');
|
||||
var globalDisableForReducedMotion = prop(globalOpts, 'disableForReducedMotion', Boolean);
|
||||
var shouldUseWorker = canUseWorker && !!prop(globalOpts || {}, 'useWorker');
|
||||
var worker = shouldUseWorker ? getWorker() : null;
|
||||
var resizer = isLibCanvas ? setCanvasWindowSize : setCanvasRectSize;
|
||||
var initialized = (canvas && worker) ? !!canvas.__confetti_initialized : false;
|
||||
var preferLessMotion = typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion)').matches;
|
||||
var animationObj;
|
||||
|
||||
function fireLocal(options, size, done) {
|
||||
var particleCount = prop(options, 'particleCount', onlyPositiveInt);
|
||||
var angle = prop(options, 'angle', Number);
|
||||
var spread = prop(options, 'spread', Number);
|
||||
var startVelocity = prop(options, 'startVelocity', Number);
|
||||
var decay = prop(options, 'decay', Number);
|
||||
var gravity = prop(options, 'gravity', Number);
|
||||
var drift = prop(options, 'drift', Number);
|
||||
var colors = prop(options, 'colors', colorsToRgb);
|
||||
var ticks = prop(options, 'ticks', Number);
|
||||
var shapes = prop(options, 'shapes');
|
||||
var scalar = prop(options, 'scalar');
|
||||
var origin = getOrigin(options);
|
||||
|
||||
var temp = particleCount;
|
||||
var fettis = [];
|
||||
|
||||
var startX = canvas.width * origin.x;
|
||||
var startY = canvas.height * origin.y;
|
||||
|
||||
while (temp--) {
|
||||
fettis.push(
|
||||
randomPhysics({
|
||||
x: startX,
|
||||
y: startY,
|
||||
angle: angle,
|
||||
spread: spread,
|
||||
startVelocity: startVelocity,
|
||||
color: colors[temp % colors.length],
|
||||
shape: shapes[randomInt(0, shapes.length)],
|
||||
ticks: ticks,
|
||||
decay: decay,
|
||||
gravity: gravity,
|
||||
drift: drift,
|
||||
scalar: scalar
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
// if we have a previous canvas already animating,
|
||||
// add to it
|
||||
if (animationObj) {
|
||||
return animationObj.addFettis(fettis);
|
||||
}
|
||||
|
||||
animationObj = animate(canvas, fettis, resizer, size , done);
|
||||
|
||||
return animationObj.promise;
|
||||
}
|
||||
|
||||
function fire(options) {
|
||||
var disableForReducedMotion = globalDisableForReducedMotion || prop(options, 'disableForReducedMotion', Boolean);
|
||||
var zIndex = prop(options, 'zIndex', Number);
|
||||
|
||||
if (disableForReducedMotion && preferLessMotion) {
|
||||
return promise(function (resolve) {
|
||||
resolve();
|
||||
});
|
||||
}
|
||||
|
||||
if (isLibCanvas && animationObj) {
|
||||
// use existing canvas from in-progress animation
|
||||
canvas = animationObj.canvas;
|
||||
} else if (isLibCanvas && !canvas) {
|
||||
// create and initialize a new canvas
|
||||
canvas = getCanvas(zIndex);
|
||||
document.body.appendChild(canvas);
|
||||
}
|
||||
|
||||
if (allowResize && !initialized) {
|
||||
// initialize the size of a user-supplied canvas
|
||||
resizer(canvas);
|
||||
}
|
||||
|
||||
var size = {
|
||||
width: canvas.width,
|
||||
height: canvas.height
|
||||
};
|
||||
|
||||
if (worker && !initialized) {
|
||||
worker.init(canvas);
|
||||
}
|
||||
|
||||
initialized = true;
|
||||
|
||||
if (worker) {
|
||||
canvas.__confetti_initialized = true;
|
||||
}
|
||||
|
||||
function onResize() {
|
||||
if (worker) {
|
||||
// TODO this really shouldn't be immediate, because it is expensive
|
||||
var obj = {
|
||||
getBoundingClientRect: function () {
|
||||
if (!isLibCanvas) {
|
||||
return canvas.getBoundingClientRect();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
resizer(obj);
|
||||
|
||||
worker.postMessage({
|
||||
resize: {
|
||||
width: obj.width,
|
||||
height: obj.height
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// don't actually query the size here, since this
|
||||
// can execute frequently and rapidly
|
||||
size.width = size.height = null;
|
||||
}
|
||||
|
||||
function done() {
|
||||
animationObj = null;
|
||||
|
||||
if (allowResize) {
|
||||
global.removeEventListener('resize', onResize);
|
||||
}
|
||||
|
||||
if (isLibCanvas && canvas) {
|
||||
document.body.removeChild(canvas);
|
||||
canvas = null;
|
||||
initialized = false;
|
||||
}
|
||||
}
|
||||
|
||||
if (allowResize) {
|
||||
global.addEventListener('resize', onResize, false);
|
||||
}
|
||||
|
||||
if (worker) {
|
||||
return worker.fire(options, size, done);
|
||||
}
|
||||
|
||||
return fireLocal(options, size, done);
|
||||
}
|
||||
|
||||
fire.reset = function () {
|
||||
if (worker) {
|
||||
worker.reset();
|
||||
}
|
||||
|
||||
if (animationObj) {
|
||||
animationObj.reset();
|
||||
}
|
||||
};
|
||||
|
||||
return fire;
|
||||
}
|
||||
|
||||
// Make default export lazy to defer worker creation until called.
|
||||
var defaultFire;
|
||||
function getDefaultFire() {
|
||||
if (!defaultFire) {
|
||||
defaultFire = confettiCannon(null, { useWorker: true, resize: true });
|
||||
}
|
||||
return defaultFire;
|
||||
}
|
||||
|
||||
module.exports = function() {
|
||||
return getDefaultFire().apply(this, arguments);
|
||||
};
|
||||
module.exports.reset = function() {
|
||||
getDefaultFire().reset();
|
||||
};
|
||||
module.exports.create = confettiCannon;
|
||||
}((function () {
|
||||
if (typeof window !== 'undefined') {
|
||||
return window;
|
||||
}
|
||||
|
||||
if (typeof self !== 'undefined') {
|
||||
return self;
|
||||
}
|
||||
|
||||
return this || {};
|
||||
})(), module, false));
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"tiddlers": [
|
||||
{
|
||||
"file": "confetti.js",
|
||||
"fields": {
|
||||
"type": "application/javascript",
|
||||
"title": "$:/plugins/tiddlywiki/confetti/confetti.js",
|
||||
"module-type": "library"
|
||||
},
|
||||
"prefix": "",
|
||||
"suffix": ""
|
||||
},{
|
||||
"file": "LICENSE",
|
||||
"fields": {
|
||||
"type": "text/plain",
|
||||
"title": "$:/plugins/tiddlywiki/confetti/license"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"title": "$:/plugins/tiddlywiki/confetti",
|
||||
"name": "Confetti",
|
||||
"description": "Animated confetti effect",
|
||||
"list": "readme"
|
||||
}
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
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` |
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
/*\
|
||||
title: $:/plugins/tiddlywiki/confetti/startup.js
|
||||
type: application/javascript
|
||||
module-type: startup
|
||||
|
||||
Setup the root widget event handlers
|
||||
|
||||
\*/
|
||||
(function(){
|
||||
|
||||
/*jslint node: true, browser: true */
|
||||
/*global $tw: false */
|
||||
"use strict";
|
||||
|
||||
// Export name and synchronous status
|
||||
exports.name = "confetti";
|
||||
exports.platforms = ["browser"];
|
||||
exports.after = ["startup"];
|
||||
exports.synchronous = true;
|
||||
|
||||
// Install the root widget event handlers
|
||||
exports.startup = function() {
|
||||
$tw.confettiManager = new $tw.ConfettiManager();
|
||||
$tw.rootWidget.addEventListener("tm-confetti-launch",function(event) {
|
||||
var paramObject = event.paramObject || {},
|
||||
options = {},
|
||||
extractNumericParameter = function(name) {
|
||||
options[name] = paramObject[name] && $tw.utils.parseNumber(paramObject[name]);
|
||||
},
|
||||
extractListParameter = function(name) {
|
||||
options[name] = paramObject[name] && $tw.utils.parseStringArray(paramObject[name]);
|
||||
},
|
||||
extractBooleanParameter = function(name) {
|
||||
options[name] = paramObject[name] && paramObject[name] === "yes";
|
||||
};
|
||||
$tw.utils.each("particleCount angle spread startVelocity decay gravity drift ticks scalar zIndex".split(" "),function(name) {
|
||||
extractNumericParameter(name);
|
||||
});
|
||||
$tw.utils.each("colors shapes".split(" "),function(name) {
|
||||
extractListParameter(name);
|
||||
});
|
||||
options.origin = {
|
||||
x: paramObject.originX && $tw.utils.parseNumber(paramObject.originX),
|
||||
y: paramObject.originY && $tw.utils.parseNumber(paramObject.originY)
|
||||
};
|
||||
extractBooleanParameter("disableForReducedMotion");
|
||||
var delay = paramObject.delay ? $tw.utils.parseNumber(paramObject.delay) : 0;
|
||||
$tw.confettiManager.launch(delay,options);
|
||||
});
|
||||
$tw.rootWidget.addEventListener("tm-confetti-reset",function(event) {
|
||||
$tw.confettiManager.reset();
|
||||
});
|
||||
};
|
||||
|
||||
})();
|
||||
|
|
@ -5,6 +5,7 @@ The ''Dynannotate'' plugin allows annotations on textual content to be created a
|
|||
* The dynannotate widget draws clickable textual annotations, search highlights and search snippets as overlays over the top of the content that it contains
|
||||
* The selection tracker keeps track of changes to the selected text in the main browser window. It triggers an action string when the selection changes, passing it the details of the selection. It can be used to display a popup menu
|
||||
** The original legacy selection tracker is also provided for backwards compatibility. It is much more limited, and not recommended for new projects
|
||||
* The element spotlight highlights on screen elements using a spotlight animation
|
||||
|
||||
!! Dynannotate Widget
|
||||
|
||||
|
|
@ -172,3 +173,12 @@ Notes:
|
|||
|
||||
* The selection popup will disappear if the selection is cancelled; this will happen if the user clicks on any other element apart than a button. Thus it is not possible to have any interactive controls within the popup apart from buttons
|
||||
|
||||
!! Element Spotlight
|
||||
|
||||
The `tm-spotlight-element` message causes a spotlight effect to briefly appear to highlight a specified element. The message accepts the following parameters:
|
||||
|
||||
|!Parameter |!Description |
|
||||
|`selector` |CSS selector of the element to highlight |
|
||||
|{//Any parameter names starting with `selector-`}// |Fallback CSS selectors to be used if the primary selector does not resolve to an element |
|
||||
|
||||
The fallback CSS selectors are case-insensitively sorted by title before use, with uppercase letters sorting before lower case letters. The usual convention is to use numeric suffixes: `selector-00`, `selector-01` etc.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,71 @@
|
|||
title: $:/plugins/tiddlywiki/dynannotate/examples/spotlight
|
||||
tags: $:/tags/dynannotateExamples
|
||||
caption: Spotlight
|
||||
|
||||
\define show-example(example)
|
||||
<$codeblock code=<<__example__>>/>
|
||||
|
||||
//''Displays as:''//
|
||||
|
||||
$example$
|
||||
\end
|
||||
|
||||
<div class="tc-dynannotation-example-info">
|
||||
|
||||
!! Spotlighting an Image
|
||||
|
||||
</div>
|
||||
|
||||
<<show-example """
|
||||
<$button>
|
||||
<$action-sendmessage $message="tm-spotlight-element" selector=".tc-dynannotate-spotlight-image-example"/>
|
||||
Spotlight this image
|
||||
</$button>
|
||||
<div class="tc-dynannotate-spotlight-image-example" style="display:inline-block;">
|
||||
{{$:/core/images/globe}}
|
||||
</div>
|
||||
""">>
|
||||
|
||||
<div class="tc-dynannotation-example-info">
|
||||
|
||||
!! Spotlighting a Button
|
||||
|
||||
</div>
|
||||
|
||||
<<show-example """
|
||||
<$button class="tc-dynannotate-spotlight-button-example">
|
||||
<$action-sendmessage $message="tm-spotlight-element" selector=".tc-dynannotate-spotlight-button-example"/>
|
||||
Spotlight this button
|
||||
</$button>
|
||||
""">>
|
||||
|
||||
<div class="tc-dynannotation-example-info">
|
||||
|
||||
!! Spotlighting a Text Area
|
||||
|
||||
</div>
|
||||
|
||||
<<show-example """
|
||||
<$button>
|
||||
<$action-sendmessage $message="tm-spotlight-element" selector=".tc-dynannotate-spotlight-textarea-example"/>
|
||||
Spotlight this text area
|
||||
</$button>
|
||||
|
||||
<$edit-text class="tc-dynannotate-spotlight-textarea-example" tag="textarea" tiddler="$:/temp/dynannotate/spotlight/demo/text"/>
|
||||
|
||||
""">>
|
||||
|
||||
<div class="tc-dynannotation-example-info">
|
||||
|
||||
!! Spotlighting the Sidebar Search Input
|
||||
|
||||
This button will spotlight the sidebar search, but if the sidebar is hidden then it will spotlight the button for showing the sidebar.
|
||||
|
||||
</div>
|
||||
|
||||
<<show-example """
|
||||
<$button>
|
||||
<$action-sendmessage $message="tm-spotlight-element" selector=".tc-sidebar-search .tc-popup-handle" selector-fallback=".tc-menubar .tc-show-sidebar-btn"/>
|
||||
Spotlight the sidebar search input
|
||||
</$button>
|
||||
""">>
|
||||
|
|
@ -0,0 +1,136 @@
|
|||
/*\
|
||||
title: $:/plugins/tiddlywiki/dynannotate/element-spotlight.js
|
||||
type: application/javascript
|
||||
module-type: library
|
||||
|
||||
Manages the element spotlight effect
|
||||
|
||||
\*/
|
||||
(function(){
|
||||
|
||||
/*jslint node: true, browser: true */
|
||||
/*global $tw: false */
|
||||
"use strict";
|
||||
|
||||
function ElementSpotlight() {
|
||||
this.animationStartTime; // Undefined if no animation is in progress
|
||||
// Create DOM nodes
|
||||
this.spotlightElement = $tw.utils.domMaker("div",{
|
||||
"class": "tc-dynannotate-spotlight"
|
||||
});
|
||||
this.spotlightWrapper = $tw.utils.domMaker("div",{
|
||||
"class": "tc-dynannotate-spotlight-wrapper",
|
||||
children: [
|
||||
this.spotlightElement
|
||||
]
|
||||
});
|
||||
document.body.appendChild(this.spotlightWrapper);
|
||||
}
|
||||
|
||||
/*
|
||||
Return the first visible element that matches a selector
|
||||
*/
|
||||
ElementSpotlight.prototype.querySelectorSafe = function(selector) {
|
||||
var targetNodes;
|
||||
// Get the matching elements
|
||||
try {
|
||||
targetNodes = document.querySelectorAll(selector);
|
||||
} catch(e) {
|
||||
console.log("Error with selector: " + selector);
|
||||
}
|
||||
if(!targetNodes) {
|
||||
return undefined;
|
||||
}
|
||||
// Remove any elements from the start of the list that are hidden, or have hidden ancestors
|
||||
var didRemoveFirstEntry;
|
||||
do {
|
||||
didRemoveFirstEntry = false;
|
||||
var hasHiddenAncestor = false,
|
||||
n = targetNodes[0];
|
||||
while(n) {
|
||||
if(n.hidden || (n instanceof Element && window.getComputedStyle(n).display === "none")) {
|
||||
hasHiddenAncestor = true;
|
||||
break;
|
||||
}
|
||||
n = n.parentNode;
|
||||
}
|
||||
if(hasHiddenAncestor) {
|
||||
// Remove first entry from targetNodes array
|
||||
targetNodes = [].slice.call(targetNodes, 1);
|
||||
didRemoveFirstEntry = true;
|
||||
}
|
||||
} while(didRemoveFirstEntry)
|
||||
// Return the first result
|
||||
return targetNodes[0];
|
||||
};
|
||||
|
||||
ElementSpotlight.prototype.positionSpotlight = function(x,y,innerRadius,outerRadius,opacity) {
|
||||
this.spotlightElement.style.display = "block";
|
||||
this.spotlightElement.style.backgroundImage = "radial-gradient(circle at " + (x / window.innerWidth * 100) + "% " + (y / window.innerHeight * 100) + "%, transparent " + innerRadius + "px, rgba(0, 0, 0, " + opacity + ") " + outerRadius + "px)";
|
||||
};
|
||||
|
||||
ElementSpotlight.prototype.easeInOut = function(v) {
|
||||
return (Math.sin((v - 0.5) * Math.PI) + 1) / 2;
|
||||
};
|
||||
|
||||
/*
|
||||
Shine a spotlight on the first element that matches an array of selectors
|
||||
*/
|
||||
ElementSpotlight.prototype.shineSpotlight = function(selectors) {
|
||||
var self = this;
|
||||
function animationLoop(selectors) {
|
||||
// Calculate how far through the animation we are
|
||||
// 0...1 = zoom in
|
||||
// 1...2 = hold
|
||||
// 2...3 = fade out
|
||||
var now = new Date(),
|
||||
t = (now - self.animationStartTime) / ($tw.utils.getAnimationDuration() * 2);
|
||||
t = t >= 3 ? 3 : t;
|
||||
// Query the selector for the target element
|
||||
var targetNode, selectorIndex = 0;
|
||||
while(!targetNode && selectorIndex < selectors.length) {
|
||||
targetNode = self.querySelectorSafe(selectors[selectorIndex]);
|
||||
selectorIndex += 1;
|
||||
}
|
||||
// Position the spotlight if we've got the target
|
||||
if(targetNode) {
|
||||
var rect = targetNode.getBoundingClientRect();
|
||||
var innerRadius, outerRadius, opacity;
|
||||
if(t <= 1) {
|
||||
t = self.easeInOut(t);
|
||||
innerRadius = rect.width / 2 + (window.innerWidth * 2 * (1 - t));
|
||||
outerRadius = rect.width + (window.innerWidth * 3 * (1 - t));
|
||||
opacity = 0.2 + t / 4;
|
||||
} else if(t <= 2) {
|
||||
innerRadius = rect.width / 2;
|
||||
outerRadius = rect.width;
|
||||
opacity = 0.45;
|
||||
} else {
|
||||
t = self.easeInOut(3 - t);
|
||||
innerRadius = rect.width / 2 + (window.innerWidth * 2 * (1 - t));
|
||||
outerRadius = rect.width + (window.innerWidth * 3 * (1 - t));
|
||||
opacity = t / 3;
|
||||
}
|
||||
self.positionSpotlight((rect.left + rect.right) / 2,(rect.top + rect.bottom) / 2,innerRadius,outerRadius,opacity);
|
||||
} else {
|
||||
self.spotlightElement.style.display = "none";
|
||||
}
|
||||
// Call the next frame unless we're at the end
|
||||
if(t <= 3) {
|
||||
window.requestAnimationFrame(function () {
|
||||
animationLoop(selectors);
|
||||
});
|
||||
} else {
|
||||
// End the animation if we've exceeded the time limit
|
||||
self.animationStartTime = undefined;
|
||||
}
|
||||
}
|
||||
this.animationStartTime = new Date();
|
||||
window.requestAnimationFrame(function () {
|
||||
animationLoop(selectors);
|
||||
});
|
||||
};
|
||||
|
||||
exports.ElementSpotlight = ElementSpotlight;
|
||||
|
||||
})();
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
const { ElementSpotlight } = require("./element-spotlight");
|
||||
|
||||
/*\
|
||||
title: $:/plugins/tiddlywiki/dynannotate/startup.js
|
||||
type: application/javascript
|
||||
|
|
@ -22,18 +24,39 @@ var CONFIG_SELECTION_TRACKER_TITLE = "$:/config/Dynannotate/SelectionTracker/Ena
|
|||
CONFIG_LEGACY_SELECTION_TRACKER_TITLE = "$:/config/Dynannotate/LegacySelectionTracker/Enable";
|
||||
|
||||
var SelectionTracker = require("$:/plugins/tiddlywiki/dynannotate/selection-tracker.js").SelectionTracker,
|
||||
LegacySelectionTracker = require("$:/plugins/tiddlywiki/dynannotate/legacy-selection-tracker.js").LegacySelectionTracker;
|
||||
LegacySelectionTracker = require("$:/plugins/tiddlywiki/dynannotate/legacy-selection-tracker.js").LegacySelectionTracker,
|
||||
ElementSpotlight = require("$:/plugins/tiddlywiki/dynannotate/element-spotlight.js").ElementSpotlight;
|
||||
|
||||
exports.startup = function() {
|
||||
$tw.dynannotate = {};
|
||||
// Setup selection tracker
|
||||
if($tw.wiki.getTiddlerText(CONFIG_SELECTION_TRACKER_TITLE,"yes") === "yes") {
|
||||
$tw.dynannotate.selectionTracker = new SelectionTracker($tw.wiki);
|
||||
}
|
||||
// Setup legacy selection tracker
|
||||
if($tw.wiki.getTiddlerText(CONFIG_LEGACY_SELECTION_TRACKER_TITLE,"yes") === "yes") {
|
||||
$tw.dynannotate.legacySelectionTracker = new LegacySelectionTracker($tw.wiki,{
|
||||
allowBlankSelectionPopup: true
|
||||
});
|
||||
}
|
||||
// Set up the element spotlight
|
||||
$tw.dynannotate.elementSpotlight = new ElementSpotlight();
|
||||
$tw.rootWidget.addEventListener("tm-spotlight-element",function(event) {
|
||||
var selectors = [];
|
||||
if(event.paramObject.selector) {
|
||||
selectors.push(event.paramObject.selector);
|
||||
}
|
||||
$tw.utils.each(Object.keys(event.paramObject).sort(),function(name) {
|
||||
var SELECTOR_PROPERTY_PREFIX = "selector-";
|
||||
if($tw.utils.startsWith(name,SELECTOR_PROPERTY_PREFIX)) {
|
||||
selectors.push(event.paramObject[name]);
|
||||
}
|
||||
});
|
||||
if(event.paramObject["selector-fallback"]) {
|
||||
selectors.push(event.paramObject["selector-fallback"]);
|
||||
}
|
||||
$tw.dynannotate.elementSpotlight.shineSpotlight(selectors);
|
||||
});
|
||||
};
|
||||
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -52,3 +52,20 @@ tags: [[$:/tags/Stylesheet]]
|
|||
background: #ffa;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.tc-dynannotate-spotlight-wrapper {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tc-dynannotate-spotlight {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
title: $:/config/AutoStartTour
|
||||
text: no
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
title: $:/config/CurrentTour
|
||||
text: $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
title: $:/config/DefaultColourMappings/
|
||||
|
||||
tour-chooser-button-foreground: <<colour very-muted-foreground>>
|
||||
tour-chooser-button-hover-background: <<colour muted-foreground>>
|
||||
tour-chooser-button-hover-foreground:: <<colour background>>
|
||||
tour-chooser-button-selected-background: <<colour primary>>
|
||||
tour-chooser-button-selected-foreground: <<colour background>>
|
||||
tour-chooser-dropdown-foreground: <<colour very-muted-foreground>>
|
||||
tour-chooser-item-background: <<colour background>>
|
||||
tour-chooser-item-border: <<colour muted-foreground>>
|
||||
tour-chooser-item-foreground: <<colour foreground>>
|
||||
tour-chooser-item-shadow: <<colour muted-foreground>>
|
||||
tour-chooser-item-start-background: <<colour download-background>>
|
||||
tour-chooser-item-start-foreground: <<colour background>>
|
||||
tour-chooser-item-start-hover-background: <<colour primary>>
|
||||
tour-chooser-item-start-hover-foreground: <<colour background>>
|
||||
tour-fullscreen-background: <<colour page-background>>
|
||||
tour-fullscreen-controls-foreground: <<colour muted-foreground>>
|
||||
tour-navigation-buttons-back-background: red
|
||||
tour-navigation-buttons-back-foreground: white
|
||||
tour-navigation-buttons-hint-background: purple
|
||||
tour-navigation-buttons-hint-foreground: white
|
||||
tour-navigation-buttons-hover-background: <<colour foreground>>
|
||||
tour-navigation-buttons-hover-foreground: <<colour background>>
|
||||
tour-navigation-buttons-next-background: purple
|
||||
tour-navigation-buttons-next-foreground: white
|
||||
tour-overlay-background: #cbfff8
|
||||
tour-overlay-border: #228877
|
||||
tour-step-heading-background: none
|
||||
tour-step-task-background: <<colour download-background>>
|
||||
tour-step-task-foreground: <<colour download-foreground>>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
title: $:/config/ShowTour
|
||||
text: hide
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
title: $:/plugins/tiddlywiki/tour/docs
|
||||
|
||||
Tour definition tiddlers have the following fields:
|
||||
|
||||
|!Name |!Description |
|
||||
|tags |Must include $:/tags/Tour |
|
||||
|tour-tag |Name of tag used to define tour step sequence |
|
||||
|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` |
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
title: $:/plugins/tiddlywiki/tour/tour-button-icon
|
||||
tags: $:/tags/Image
|
||||
|
||||
\parameters (size:"22pt")
|
||||
<svg width=<<size>> height=<<size>> class="tc-image-tour-button tc-image-button" viewBox="0 0 24 24">
|
||||
<path d="M0 0h24v24H0z" style="fill:none"/>
|
||||
<path d="M1.832 10.356a1.024 1.024 0 0 1 0-1.832l9.71-4.856c.288-.144.628-.144.916 0l9.71 4.856a1.024 1.024 0 0 1 0 1.832l-9.71 4.855a1.025 1.025 0 0 1-.916 0l-9.71-4.855Z"/>
|
||||
<path d="M18.5 13.19v3.25h-.066c.044.163.066.33.066.5 0 1.932-2.913 3.5-6.5 3.5s-6.5-1.568-6.5-3.5c0-.17.022-.337.066-.5H5.5v-3.25l6.042 3.02c.288.145.628.145.916 0l6.042-3.02ZM2.73 8.44l.208 5-.681 3s-.002.709.974.717c.92.007 1-.717 1-.717l-.793-3 .293-5h-1Z"/>
|
||||
</svg>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"title": "$:/plugins/tiddlywiki/tour",
|
||||
"name": "Tour",
|
||||
"description": "A tour of TiddlyWiki",
|
||||
"list": "readme docs settings",
|
||||
"dependents": ["$:/plugins/tiddlywiki/confetti","$:/plugins/tiddlywiki/dynannotate"]
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
title: $:/plugins/tiddlywiki/tour/readme
|
||||
|
||||
The Tour Plugin for TiddlyWiki provides a framework for making interactive guided tours. An "Introduction to ~TiddlyWiki" tour is included in the plugin but it is also possible to load additional tours and switch between them.
|
||||
|
|
@ -0,0 +1,154 @@
|
|||
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>
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
title: $:/plugins/tiddlywiki/tour/simplified-tiddler-with-tags
|
||||
|
||||
\whitespace trim
|
||||
\define tag-pill-styles()
|
||||
background-color:$(backgroundColor)$;
|
||||
fill:$(foregroundColor)$;
|
||||
color:$(foregroundColor)$;
|
||||
\end
|
||||
|
||||
\procedure tag-pill-label(prefix)
|
||||
<$text text={{{ [<currentTiddler>removeprefix<prefix>] }}}/>
|
||||
\end
|
||||
|
||||
\procedure tag-pill-label-link(prefix)
|
||||
<div>
|
||||
<$link>
|
||||
<$transclude $variable="tag-pill-label" prefix=<<prefix>>/>
|
||||
</$link>
|
||||
</div>
|
||||
\end
|
||||
|
||||
<!-- This has no whitespace trim to avoid modifying $actions$. Closing tags omitted for brevity. -->
|
||||
\define tag-pill-inner(tag,icon,colour,fallbackTarget,colourA,colourB,element-tag,element-attributes,actions,prefix)
|
||||
\whitespace trim
|
||||
<$let
|
||||
foregroundColor=<<contrastcolour target:"""$colour$""" fallbackTarget:"""$fallbackTarget$""" colourA:"""$colourA$""" colourB:"""$colourB$""">>
|
||||
backgroundColor=<<__colour__>>
|
||||
>
|
||||
<$element-tag$
|
||||
$element-attributes$
|
||||
class="tc-tag-label tc-btn-invisible"
|
||||
style=<<tag-pill-styles>>
|
||||
>
|
||||
<<__actions__>>
|
||||
<$transclude tiddler=<<__icon__>>/>
|
||||
<$let currentTiddler=<<__tag__>>>
|
||||
<$transclude $variable="tag-pill-label" prefix=<<__prefix__>>/>
|
||||
</$let>
|
||||
</$element-tag$>
|
||||
</$let>
|
||||
\end
|
||||
|
||||
\define tag-pill-body(tag,icon,colour,palette,element-tag,element-attributes,actions,prefix)
|
||||
<$transclude $variable="tag-pill-inner"
|
||||
tag=<<__tag__>>
|
||||
icon=<<__icon__>>
|
||||
colour=<<__colour__>>
|
||||
fallbackTarget={{$palette$##tag-background}}
|
||||
colourA={{$palette$##foreground}}
|
||||
colourB={{$palette$##background}}
|
||||
element-tag=<<__element-tag__>>
|
||||
element-attributes=<<__element-attributes__>>
|
||||
actions=<<__actions__>>
|
||||
prefix=<<__prefix__>>
|
||||
/>
|
||||
\end
|
||||
|
||||
\procedure simplified-tag(prefix)
|
||||
<span class="tc-tag-list-item" data-tag-title=<<currentTiddler>>>
|
||||
<$set name="transclusion" value=<<currentTiddler>>>
|
||||
<$transclude $variable="tag-pill-body"
|
||||
tag=<<currentTiddler>>
|
||||
icon={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerIconFilter]!is[draft]get[text]] }}}
|
||||
colour={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerColourFilter]!is[draft]get[text]] }}}
|
||||
palette={{$:/palette}}
|
||||
element-tag="$button"
|
||||
element-attributes="""popup=<<qualify "$:/state/popup/tag">> dragFilter="[all[current]tagging[]]" tag='span'"""
|
||||
prefix=<<prefix>>
|
||||
/>
|
||||
<$reveal state=<<qualify "$:/state/popup/tag">> type="popup" position="below" animate="yes" class="tc-drop-down">
|
||||
<$set name="tv-show-missing-links" value="yes">
|
||||
<$transclude $variable="tag-pill-label-link" prefix=<<prefix>>/>
|
||||
</$set>
|
||||
<hr>
|
||||
<$list filter="[all[shadows+tiddlers]tag<currentTiddler>]">
|
||||
<$transclude $variable="tag-pill-label-link" prefix=<<prefix>>/>
|
||||
</$list>
|
||||
</$reveal>
|
||||
</$set>
|
||||
</span>
|
||||
\end
|
||||
|
||||
<$let storyTiddler=<<currentTiddler>>>
|
||||
<div class="tc-tiddler-frame tc-tiddler-view-frame tc-tiddler-exists tc-tiddler-shadow " role="article">
|
||||
<div class="tc-tiddler-title">
|
||||
<div class="tc-titlebar">
|
||||
<span class="tc-tiddler-controls">
|
||||
<$list filter="[<tour-simplified-tiddler-close-button>match[yes]]" variable="ignore">
|
||||
{{||$:/core/ui/Buttons/close}}
|
||||
</$list>
|
||||
</span>
|
||||
<span>
|
||||
<h2 class="tc-title"><$view field="caption"/></h2>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tc-tags-wrapper">
|
||||
<$list filter="[all[current]tags[]sort[title]]" storyview="pop">
|
||||
<<simplified-tag "$:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/">>
|
||||
</$list>
|
||||
</div>
|
||||
<div class="tc-tiddler-body">
|
||||
<$transclude field="text" mode="block"/>
|
||||
</div>
|
||||
</div>
|
||||
</$let>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
title: $:/plugins/tiddlywiki/tour/simplified-tiddler
|
||||
|
||||
\whitespace trim
|
||||
<$let storyTiddler=<<currentTiddler>>>
|
||||
<div class="tc-tiddler-frame tc-tiddler-view-frame tc-tiddler-exists tc-tiddler-shadow " role="article">
|
||||
<div class="tc-tiddler-title">
|
||||
<div class="tc-titlebar">
|
||||
<span class="tc-tiddler-controls">
|
||||
<$list filter="[<tour-simplified-tiddler-close-button>match[yes]]" variable="ignore">
|
||||
{{||$:/core/ui/Buttons/close}}
|
||||
</$list>
|
||||
</span>
|
||||
<span>
|
||||
<h2 class="tc-title"><$view field="caption"/></h2>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tc-tiddler-body">
|
||||
<$transclude field="text" mode="block"/>
|
||||
</div>
|
||||
</div>
|
||||
</$let>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
title: $:/plugins/tiddlywiki/tour/start-tour-button
|
||||
tags: $:/tags/PageControls
|
||||
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=<<tv-config-toolbar-class>>>
|
||||
<<tour-restart>>
|
||||
<$list filter="[<tv-config-toolbar-icons>match[yes]]" variable="listItem">
|
||||
{{$:/plugins/tiddlywiki/tour/tour-button-icon}}
|
||||
</$list>
|
||||
<$list filter="[<tv-config-toolbar-text>match[yes]]">
|
||||
<span class="tc-btn-text">
|
||||
<$text text="Start Tour"/>
|
||||
</span>
|
||||
</$list>
|
||||
</$button>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
title: $:/plugins/tiddlywiki/tour/startup-actions
|
||||
tags: $:/tags/StartupAction
|
||||
|
||||
\import [[$:/plugins/tiddlywiki/tour/variables]]
|
||||
<$list filter="[[$:/config/AutoStartTour]get[text]else[no]match[yes]]" variable="ignore">
|
||||
<<tour-restart>>
|
||||
</$list>
|
||||
|
|
@ -0,0 +1,261 @@
|
|||
title: $:/plugins/tiddlywiki/tour/styles
|
||||
tags: $:/tags/Stylesheet
|
||||
|
||||
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock
|
||||
|
||||
.tc-tour-panel {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 310px;
|
||||
height: 400px;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
<<box-shadow "0px 0px 5px rgba(0, 0, 0, 0.3)">>
|
||||
border: 1px solid <<colour tour-overlay-border>>;
|
||||
background: <<colour tour-overlay-background>>;
|
||||
border-radius: 8px;
|
||||
padding: 1em;
|
||||
margin: 0.5em;
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
.tc-tour-panel-navigation .tc-btn-big-green {
|
||||
border-radius: 0.25em;
|
||||
margin: 0 1em 0 0;
|
||||
}
|
||||
|
||||
.tc-tour-panel-navigation .tc-btn-big-green.tc-tour-panel-navigation-back {
|
||||
background: <<colour tour-navigation-buttons-back-background>>;
|
||||
color: <<colour tour-navigation-buttons-back-foreground>>;
|
||||
}
|
||||
|
||||
.tc-tour-panel-navigation .tc-btn-big-green.tc-tour-panel-navigation-next {
|
||||
background: <<colour tour-navigation-buttons-next-background>>;
|
||||
color: <<colour tour-navigation-buttons-next-foreground>>;
|
||||
}
|
||||
|
||||
.tc-tour-panel-navigation .tc-btn-big-green.tc-tour-panel-navigation-hint {
|
||||
background: <<colour tour-navigation-buttons-hint-background>>;
|
||||
color: <<colour tour-navigation-buttons-hint-foreground>>;
|
||||
}
|
||||
|
||||
.tc-tour-panel-navigation .tc-btn-big-green:hover {
|
||||
color: <<colour tour-navigation-buttons-hover-foreground>>;
|
||||
background: <<colour tour-navigation-buttons-hover-background>>;
|
||||
}
|
||||
|
||||
.tc-tour-panel-fullscreen {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
background: <<colour tour-fullscreen-background>>;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.tc-tour-panel-controls .tc-tour-panel-list-button {
|
||||
padding: 2px 8px;
|
||||
border-radius: 1em;
|
||||
color: <<color tour-chooser-button-foreground>>;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.tc-tour-panel-controls .tc-tour-panel-list-button.tc-selected {
|
||||
color: <<colour tour-chooser-button-selected-foreground>>;
|
||||
fill: <<colour tour-chooser-button-selected-foreground>>;
|
||||
background: <<color tour-chooser-button-selected-background>>;
|
||||
}
|
||||
|
||||
.tc-tour-panel-controls .tc-tour-panel-list-button:hover {
|
||||
background: <<colour tour-chooser-button-hover-background>>;
|
||||
color: <<colour tour-chooser-button-hover-foreground>>;
|
||||
}
|
||||
|
||||
.tc-tour-panel-controls .tc-popup .tc-drop-down {
|
||||
font-size: 1em;
|
||||
color: <<colour tour-chooser-dropdown-foreground>>;
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.tc-tour-panel-chooser-item {
|
||||
border: 1px solid <<colour tour-chooser-item-border>>;
|
||||
background: <<colour tour-chooser-item-background>>;
|
||||
color: <<colour tour-chooser-item-foreground>>;
|
||||
padding: 4px 4px 4px 8px;
|
||||
margin: 12px 0;
|
||||
border-radius: 12px;
|
||||
box-shadow: 3px 3px 5px <<colour tour-chooser-item-shadow>>;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.tc-tour-panel-chooser-item .tc-tour-panel-chooser-start-button {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
padding: 4px;
|
||||
font-size: 0.7em;
|
||||
vertical-align: baseline;
|
||||
border-radius: 1em;
|
||||
background: <<colour tour-chooser-item-start-background>>;
|
||||
color: <<colour tour-chooser-item-start-foreground>>;
|
||||
fill: <<colour tour-chooser-item-start-foreground>>;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.tc-tour-panel-chooser-wrapper button:hover {
|
||||
background: <<colour tour-chooser-item-start-hover-background>>;
|
||||
color: <<colour tour-chooser-item-start-hover-foreground>>;
|
||||
}
|
||||
|
||||
.tc-tour-panel-fullscreen h1 {
|
||||
background: <<colour tour-step-heading-background>>;
|
||||
padding: 0.25em;
|
||||
margin: -0.25em;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.tc-tour-panel-fullscreen .tc-tour-panel-controls {
|
||||
/* display: none; */
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 4px;
|
||||
color: <<colour tour-fullscreen-controls-foreground>>;
|
||||
}
|
||||
|
||||
.tc-tour-panel .tc-tour-panel-banner-image {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tc-tour-panel-fullscreen .tc-tour-panel-banner-image {
|
||||
display: block;
|
||||
width: 200px;
|
||||
float: right;
|
||||
margin: 4em 2em 2em 2em;
|
||||
}
|
||||
|
||||
.tc-tour-panel-fullscreen .tc-tour-panel-inner {
|
||||
width: 30%;
|
||||
min-width: 400px;
|
||||
height: 30%;
|
||||
margin: 20% auto;
|
||||
}
|
||||
|
||||
.tc-tour-panel .tc-tour-panel-inner .tc-tiddler-frame {
|
||||
width: auto;
|
||||
padding: 1.5em 2.5em;
|
||||
}
|
||||
|
||||
.tc-tour-panel .tc-tour-panel-inner .tc-tiddler-frame .tc-titlebar {
|
||||
font-size: 1.5em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.tc-tour-task {
|
||||
background: <<colour tour-step-task-background>>;
|
||||
color: <<colour tour-step-task-foreground>>;
|
||||
padding: 0.5em;
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
.tc-tour-task svg {
|
||||
fill: <<colour tour-step-task-foreground>>;
|
||||
vertical-align: middle;
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.tc-tour-settings-tour-details,
|
||||
.tc-tour-settings-tour-step-details {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tc-tour-settings-tour-details th,
|
||||
.tc-tour-settings-tour-step-details th {
|
||||
text-align: right;
|
||||
vertical-align: top;
|
||||
font-weight: normal;
|
||||
width:10em;
|
||||
}
|
||||
|
||||
.tc-tour-settings-tour-details td,
|
||||
.tc-tour-settings-tour-step-details td {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tc-tour-settings-tour-details-description {
|
||||
|
||||
}
|
||||
|
||||
.tc-tour-settings-tour-details-logo img {
|
||||
max-width: 200px;
|
||||
max-height: 100px;
|
||||
}
|
||||
|
||||
.tc-tour-settings-tour-settings {
|
||||
border: 1px solid <<colour muted-foreground>>;
|
||||
margin: 0.5em 0;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.tc-tour-settings-tour-step {
|
||||
border: 1px solid <<colour foreground>>;
|
||||
}
|
||||
|
||||
.tc-tour-settings-tour-step-heading {
|
||||
background: <<colour muted-foreground>>;
|
||||
border: 0;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.tc-tour-settings-tour-step-open-button,
|
||||
.tc-tour-settings-tour-step-launch-button {
|
||||
display: inline-block;
|
||||
padding: 0.25em;
|
||||
}
|
||||
|
||||
.tc-tour-settings-tour-step-open-button {
|
||||
flex-grow: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.tc-tour-settings-tour-step-launch-button {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.tc-tour-settings-tour-step-open-button:hover,
|
||||
.tc-tour-settings-tour-step-launch-button:hover {
|
||||
background: <<colour foreground>>;
|
||||
color: <<colour background>>;
|
||||
fill: <<colour background>>;
|
||||
}
|
||||
|
||||
.tc-tour-settings-tour-step-heading-step-number {
|
||||
font-weight: bold;
|
||||
background: <<colour foreground>>;
|
||||
color: <<colour background>>;
|
||||
border-radius: 1em;
|
||||
font-size: 0.9em;
|
||||
display: inline-block;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.tc-tour-settings-tour-step-details {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tc-tour-settings-tour-step-body {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
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=100/>
|
||||
<$confetti delay=200/>
|
||||
<$confetti delay=300/>
|
||||
<$confetti delay=400/>
|
||||
<$confetti delay=500/>
|
||||
<%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%>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
title: $:/config/Tours/IntroductionToTiddlyWiki/ProductName
|
||||
text: ~TiddlyWiki
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
title: $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/Gas Giant
|
||||
caption: Gas Giant
|
||||
|
||||
A gas giant is a large planet that has a solid core, but a very thick atmosphere. This means that most of the planet is made up of gas. These planets are very large.
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
title: $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/Jupiter
|
||||
caption: Jupiter
|
||||
tags: $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/Planet [[$:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/Gas Giant]]
|
||||
|
||||
Jupiter is the largest planet in the Solar System. It is the fifth planet from the Sun. Jupiter is a gas giant because it is so large and made of gas. The other gas giants in the Solar System are [[Saturn|$:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/Saturn]], Uranus, and Neptune.
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
title: $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/Mars
|
||||
caption: Mars
|
||||
tags: $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/Planet [[$:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/Rocky]]
|
||||
|
||||
Mars is the fourth planet from the Sun in the Solar System and the second-smallest planet. Mars is a terrestrial planet with polar ice caps of frozen water and carbon dioxide. It has the largest volcano in the Solar System, and some very large impact craters. Mars is named after the mythological Roman god of war because it appears of red color.
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
title: $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/Planet
|
||||
caption: Planet
|
||||
|
||||
A planet is a large object such as Venus or Earth that orbits a star. Planets are smaller than stars, and they do not make light. Jupiter is the biggest planet in the Solar System, while the smallest planet in the Solar System is Mercury.
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
title: $:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/Rocky
|
||||
caption: Rocky
|
||||
|
||||
Rocky planets have a core, a mantle, and a crust. They are a bit like a boiled egg: the central yolk is the core; the white albumin is the mantle; and the shell is the crust. The crust of a terrestrial planet is thin, with the core and the mantle taking up the vast bulk, sometimes with a very large core, sometimes much smaller. Terrestrial planets have metallic cores of mostly iron, with rocky mantles and crusts.
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue