Render the steps before the tour starts.
By defining the steps as consts in the top level they were being initialized immediately as the page loads. By having them initialized in a function it will correctly have access to everything on the page and not render steps of tours we aren't going to start.
This commit is contained in:
parent
e4dbe14e59
commit
548984a6df
GPG Key ID:
C1C0F29952BCF558
|
|
@ -131,7 +131,7 @@ function startTour(data: TourData, runMainAgainAfterComplete: boolean): void {
|
|||
|
||||
// For every step we have, add it to the tour and subsequently add all the
|
||||
// event handlers to that step.
|
||||
for (const [stepNumber, stepOptions] of data.steps.entries()) {
|
||||
for (const [stepNumber, stepOptions] of data.steps().entries()) {
|
||||
// If the final step doesn't have buttons defined, set the "Continue" button
|
||||
// text to "Finish".
|
||||
if (
|
||||
|
|
|
|||
|
|
@ -1,18 +1,22 @@
|
|||
import {type TourData, TourId} from "../types.js";
|
||||
import {renderInContainer} from "../utilities.js";
|
||||
|
||||
function renderSteps(): ReturnType<TourData["steps"]> {
|
||||
const step01 = renderInContainer(
|
||||
<>
|
||||
<h1>Your Account Settings</h1>
|
||||
</>,
|
||||
);
|
||||
|
||||
const steps: TourData["steps"] = [
|
||||
return [
|
||||
{
|
||||
id: "account-settings-01",
|
||||
text: step01,
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
const steps: TourData["steps"] = renderSteps;
|
||||
|
||||
const eventHandlers: TourData["eventHandlers"] = [];
|
||||
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import {
|
|||
renderInContainer,
|
||||
} from "../utilities.js";
|
||||
|
||||
function renderSteps(): ReturnType<TourData["steps"]> {
|
||||
const step01 = renderInContainer(
|
||||
<>
|
||||
<LoggedOutWarning />
|
||||
|
|
@ -27,15 +28,15 @@ const step02 = renderInContainer(
|
|||
<h1>The Main Header</h1>
|
||||
|
||||
<p>
|
||||
On the left there is the Tildes logo and title, which you can click to get
|
||||
back to the homepage, or refresh it if you're already there. If you are in
|
||||
a group, the group name will also be shown next to it.
|
||||
On the left there is the Tildes logo and title, which you can click to
|
||||
get back to the homepage, or refresh it if you're already there. If you
|
||||
are in a group, the group name will also be shown next to it.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
On the right is the notifications section and your username. When you have
|
||||
unread messages and/or are mentioned, they will show up next to the left
|
||||
of it. If you don't have any notifications right now, you can{" "}
|
||||
On the right is the notifications section and your username. When you
|
||||
have unread messages and/or are mentioned, they will show up next to the
|
||||
left of it. If you don't have any notifications right now, you can{" "}
|
||||
<a href="#" onClick={toggleMockNotifications}>
|
||||
click here
|
||||
</a>{" "}
|
||||
|
|
@ -43,8 +44,8 @@ const step02 = renderInContainer(
|
|||
</p>
|
||||
|
||||
<p>
|
||||
At the moment mentions only work in comments, so if you get mentioned in a
|
||||
topic's text body and don't get a notification,{" "}
|
||||
At the moment mentions only work in comments, so if you get mentioned in
|
||||
a topic's text body and don't get a notification,{" "}
|
||||
<a target="_blank" href="https://gitlab.com/tildes/tildes/-/issues/195">
|
||||
that's why
|
||||
</a>
|
||||
|
|
@ -64,7 +65,11 @@ function toggleMockNotifications(event: Event): void {
|
|||
const root = document.querySelector("#site-header .logged-in-user-info");
|
||||
|
||||
/* Generic function to toggle a mock notification. */
|
||||
function toggle(existingSelector: string, href: string, text: string): void {
|
||||
function toggle(
|
||||
existingSelector: string,
|
||||
href: string,
|
||||
text: string,
|
||||
): void {
|
||||
const existing =
|
||||
root?.querySelector<HTMLElement>(existingSelector) ?? undefined;
|
||||
if (existing === undefined) {
|
||||
|
|
@ -97,9 +102,9 @@ const step03 = renderInContainer(
|
|||
<h1>The Listing Options</h1>
|
||||
|
||||
<p>
|
||||
Right below the main header are the topic listing options. These determine
|
||||
how the topics in the listing are sorted and from what period topics
|
||||
should be shown.
|
||||
Right below the main header are the topic listing options. These
|
||||
determine how the topics in the listing are sorted and from what period
|
||||
topics should be shown.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
|
|
@ -121,14 +126,15 @@ const step03 = renderInContainer(
|
|||
</ul>
|
||||
|
||||
<p>
|
||||
Then the first <b>Activity</b> sort will sort topics by bumping topics up
|
||||
as they receive comments, however this sort makes use of comment labels.
|
||||
Then the first <b>Activity</b> sort will sort topics by bumping topics
|
||||
up as they receive comments, however this sort makes use of comment
|
||||
labels.
|
||||
</p>
|
||||
|
||||
{/* TODO: When the comment labels tour is made, change the prose. */}
|
||||
<p>
|
||||
If you don't know what comment labels are yet, don't worry, there will be
|
||||
a tour that explains them. But in short they are a community tool to
|
||||
If you don't know what comment labels are yet, don't worry, there will
|
||||
be a tour that explains them. But in short they are a community tool to
|
||||
emphasize and de-emphasize comments, similar to votes but with more
|
||||
specific intention. If you'd like to read more, check out{" "}
|
||||
<a
|
||||
|
|
@ -146,10 +152,10 @@ const step03 = renderInContainer(
|
|||
</p>
|
||||
|
||||
<p>
|
||||
If you only want to see topics from a certain period, click on the "from"
|
||||
dropdown and select the period you want. Aside from a set of predefined
|
||||
options, you can also set a custom one by clicking the "other period"
|
||||
option, after which you'll be prompted to input it.
|
||||
If you only want to see topics from a certain period, click on the
|
||||
"from" dropdown and select the period you want. Aside from a set of
|
||||
predefined options, you can also set a custom one by clicking the "other
|
||||
period" option, after which you'll be prompted to input it.
|
||||
</p>
|
||||
</>,
|
||||
);
|
||||
|
|
@ -159,8 +165,8 @@ const step04 = renderInContainer(
|
|||
<h1>The Topic Listing</h1>
|
||||
|
||||
<p>
|
||||
Next up, just below the listing options is the topic listing itself. We've
|
||||
only highlighted the first topic here, but you can probably see it
|
||||
Next up, just below the listing options is the topic listing itself.
|
||||
We've only highlighted the first topic here, but you can probably see it
|
||||
continues all the way down the page.
|
||||
</p>
|
||||
|
||||
|
|
@ -169,29 +175,30 @@ const step04 = renderInContainer(
|
|||
<ol>
|
||||
<li>
|
||||
The topic title, when the topic is a "text topic" it links to the same
|
||||
place as the comments link does. Otherwise when it's a "link topic", it
|
||||
will link to an external site.
|
||||
place as the comments link does. Otherwise when it's a "link topic",
|
||||
it will link to an external site.
|
||||
</li>
|
||||
|
||||
<li>
|
||||
The topic metadata, which by default includes the group it's in. If a
|
||||
topic has specific notable tags and you have the "show tags" setting
|
||||
enabled in your user settings, they will be shown after the group name.
|
||||
A "topic type" may also be shown to indicate whether the topic is a text
|
||||
topic, a video, an "ask" topic for recommendations or a survey, etc.
|
||||
enabled in your user settings, they will be shown after the group
|
||||
name. A "topic type" may also be shown to indicate whether the topic
|
||||
is a text topic, a video, an "ask" topic for recommendations or a
|
||||
survey, etc.
|
||||
</li>
|
||||
|
||||
<li>
|
||||
The amount of comments the topic has received. If any new comments have
|
||||
been posted since you last viewed the topic, in orange a "(X new)" will
|
||||
be added.
|
||||
The amount of comments the topic has received. If any new comments
|
||||
have been posted since you last viewed the topic, in orange a "(X
|
||||
new)" will be added.
|
||||
</li>
|
||||
|
||||
<li>
|
||||
The topic source. For text topics this is always the poster of the
|
||||
topic, but for link topics in certain groups it will be the domain name
|
||||
together with that website's icon. For topics automatically posted by
|
||||
Tildes itself, it will say "Scheduled topic".
|
||||
topic, but for link topics in certain groups it will be the domain
|
||||
name together with that website's icon. For topics automatically
|
||||
posted by Tildes itself, it will say "Scheduled topic".
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
|
|
@ -205,9 +212,9 @@ const step05 = renderInContainer(
|
|||
|
||||
<ol start={5}>
|
||||
<li>
|
||||
The date when the topic was posted. For dates that are pretty recent it
|
||||
will show something like "X days ago" while for longer dates it will be
|
||||
the exact date, like "April 26th, 2021".
|
||||
The date when the topic was posted. For dates that are pretty recent
|
||||
it will show something like "X days ago" while for longer dates it
|
||||
will be the exact date, like "April 26th, 2021".
|
||||
</li>
|
||||
|
||||
<li>
|
||||
|
|
@ -238,8 +245,8 @@ const step06 = renderInContainer(
|
|||
<h1>The Sidebar</h1>
|
||||
|
||||
<p>
|
||||
Let's take a look at the sidebar, where the first thing we're greeted with
|
||||
is the search bar.
|
||||
Let's take a look at the sidebar, where the first thing we're greeted
|
||||
with is the search bar.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
|
|
@ -248,16 +255,17 @@ const step06 = renderInContainer(
|
|||
</p>
|
||||
|
||||
<p>
|
||||
When searching from the homepage, topics will be included from any group.
|
||||
However, searching when inside a group will only include topics from that
|
||||
group and any of its sub-groups.
|
||||
When searching from the homepage, topics will be included from any
|
||||
group. However, searching when inside a group will only include topics
|
||||
from that group and any of its sub-groups.
|
||||
</p>
|
||||
|
||||
{/* TODO: Update the prose once the groups tour is created. */}
|
||||
<p>
|
||||
Below the search bar you will also find the title of the page, or name of
|
||||
the group, and a small description. The sidebar has more elements when in
|
||||
you're in a group page, but those will be touched upon in the groups tour.
|
||||
Below the search bar you will also find the title of the page, or name
|
||||
of the group, and a small description. The sidebar has more elements
|
||||
when in you're in a group page, but those will be touched upon in the
|
||||
groups tour.
|
||||
</p>
|
||||
</>,
|
||||
);
|
||||
|
|
@ -273,9 +281,9 @@ const step07 = renderInContainer(
|
|||
</p>
|
||||
|
||||
<p>
|
||||
To post a topic, subscribe or unsubscribe from any group, go to the group
|
||||
page in question and in its sidebar there will be buttons to do all those
|
||||
things.
|
||||
To post a topic, subscribe or unsubscribe from any group, go to the
|
||||
group page in question and in its sidebar there will be buttons to do
|
||||
all those things.
|
||||
</p>
|
||||
</>,
|
||||
);
|
||||
|
|
@ -308,10 +316,10 @@ const step09 = renderInContainer(
|
|||
|
||||
<p>
|
||||
And finally, the very last part of the homepage is the footer. Here you
|
||||
will find a theme selector (more on that in a moment) and various links to
|
||||
places, such as the Tildes Documentation, Contact page, the source code,
|
||||
etc. We highly recommend reading through the documentation as it explains
|
||||
a lot of the how and why Tildes does certain things.
|
||||
will find a theme selector (more on that in a moment) and various links
|
||||
to places, such as the Tildes Documentation, Contact page, the source
|
||||
code, etc. We highly recommend reading through the documentation as it
|
||||
explains a lot of the how and why Tildes does certain things.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
|
|
@ -345,7 +353,7 @@ const step10 = renderInContainer(
|
|||
</>,
|
||||
);
|
||||
|
||||
const steps: TourData["steps"] = [
|
||||
return [
|
||||
{
|
||||
id: "homepage-01",
|
||||
text: step01,
|
||||
|
|
@ -432,6 +440,9 @@ const steps: TourData["steps"] = [
|
|||
text: step10,
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
const steps: TourData["steps"] = renderSteps;
|
||||
|
||||
const eventHandlers: TourData["eventHandlers"] = [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -2,18 +2,20 @@ import {fromStorage, StorageKey} from "../storage/common.js";
|
|||
import {TourId, type TourData} from "./types.js";
|
||||
import {openOptionsPageFromBackground, renderInContainer} from "./utilities.js";
|
||||
|
||||
function renderSteps(): ReturnType<TourData["steps"]> {
|
||||
const step01 = renderInContainer(
|
||||
<>
|
||||
<h1>Thank you for installing Tildes Shepherd!</h1>
|
||||
|
||||
<p>
|
||||
Tildes Shepherd is a set of interactive guided tours for Tildes to show
|
||||
you around and introduce you to the concepts that make this website great.
|
||||
you around and introduce you to the concepts that make this website
|
||||
great.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
To see and start the tours that are available, click on the extension icon
|
||||
to go to the options page or{" "}
|
||||
To see and start the tours that are available, click on the extension
|
||||
icon to go to the options page or{" "}
|
||||
<a href="#" onClick={openOptionsPageFromBackground}>
|
||||
click here now
|
||||
</a>
|
||||
|
|
@ -34,17 +36,17 @@ const step02 = renderInContainer(
|
|||
|
||||
<p>
|
||||
During the tours at various points we will want to highlight specific
|
||||
areas. When that happens you won't be able to click anything inside them,
|
||||
mainly to prevent you from accidentally going to a different page and
|
||||
interrupting the tour. But also to prevent you from taking actions you
|
||||
maybe don't want to take, like voting on something you don't necessarily
|
||||
want to vote on.
|
||||
areas. When that happens you won't be able to click anything inside
|
||||
them, mainly to prevent you from accidentally going to a different page
|
||||
and interrupting the tour. But also to prevent you from taking actions
|
||||
you maybe don't want to take, like voting on something you don't
|
||||
necessarily want to vote on.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Depending on your selected theme, the highlighted areas will have a yellow
|
||||
or orange border and some extra added whitespace. As you can see in this
|
||||
example where the main site header has been highlighted.
|
||||
Depending on your selected theme, the highlighted areas will have a
|
||||
yellow or orange border and some extra added whitespace. As you can see
|
||||
in this example where the main site header has been highlighted.
|
||||
</p>
|
||||
</>,
|
||||
);
|
||||
|
|
@ -82,7 +84,7 @@ const step03 = renderInContainer(
|
|||
</>,
|
||||
);
|
||||
|
||||
const steps: TourData["steps"] = [
|
||||
return [
|
||||
{
|
||||
canClickTarget: false,
|
||||
id: "introduction-01",
|
||||
|
|
@ -124,6 +126,9 @@ const steps: TourData["steps"] = [
|
|||
text: step03,
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
const steps: TourData["steps"] = renderSteps;
|
||||
|
||||
const eventHandlers: TourData["eventHandlers"] = [];
|
||||
|
||||
|
|
|
|||
|
|
@ -50,8 +50,8 @@ export type TourData = {
|
|||
/** The requirements this tour must match before starting it. */
|
||||
requirements: TourRequirement;
|
||||
|
||||
/** All the steps this tour will take. */
|
||||
steps: Shepherd.Step.StepOptions[];
|
||||
/** A function that returns all the steps this tour will take. */
|
||||
steps: () => Shepherd.Step.StepOptions[];
|
||||
|
||||
/** The title of the tour for use in the options page. */
|
||||
title: string;
|
||||
|
|
|
|||
Loading…
Reference in New Issue