Hugh Rundle
3f67bc3b61
To make it harder to accidentally mess up the tour when making changes to pages, this commit adds ids with 'tour' prefixes to (nearly) all elements used by the guided tour as anchor points. The exception is where an element already had an id that is being used by something else in Bookwyrm. Some minor changes also made to clean up the wording of the tour.
122 lines
4 KiB
HTML
122 lines
4 KiB
HTML
{% load i18n %}
|
|
|
|
<script>
|
|
const tour = new Shepherd.Tour({
|
|
exitOnEsc: true,
|
|
});
|
|
|
|
tour.addSteps([
|
|
{
|
|
text: "{% trans 'Welcome to the page for your group! This is where you can add and remove users, create user-curated lists, and edit the group details.' %}",
|
|
title: "{% trans 'Your group' %}",
|
|
buttons: [
|
|
{
|
|
action() {
|
|
disableGuidedTour(csrf_token);
|
|
return this.complete();
|
|
},
|
|
secondary: true,
|
|
text: "{% trans 'End Tour' %}",
|
|
classes: "is-danger guided-tour-cancel-button",
|
|
},
|
|
{
|
|
action() {
|
|
return this.next();
|
|
},
|
|
text: "{% trans 'Next' %}",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
text: "{% trans 'Use this search box to find users to join your group. Currently users must be invited by the group owner.' %}",
|
|
title: "{% trans 'Find users' %}",
|
|
attachTo: {
|
|
element: "#tour-group-member-search",
|
|
on: "right",
|
|
},
|
|
buttons: [
|
|
{
|
|
action() {
|
|
return this.back();
|
|
},
|
|
secondary: true,
|
|
text: "{% trans 'Back' %}",
|
|
},
|
|
{
|
|
action() {
|
|
return this.next();
|
|
},
|
|
text: "{% trans 'Next' %}",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
text: "{% trans 'Your group members will appear here. The group owner is marked with a star symbol.' %}",
|
|
title: "{% trans 'Group members' %}",
|
|
attachTo: {
|
|
element: "#tour-group-owner",
|
|
on: "right",
|
|
},
|
|
buttons: [
|
|
{
|
|
action() {
|
|
return this.back();
|
|
},
|
|
secondary: true,
|
|
text: "{% trans 'Back' %}",
|
|
},
|
|
{
|
|
action() {
|
|
return this.next();
|
|
},
|
|
text: "{% trans 'Next' %}",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
text: "{% trans 'We saw on the Lists page how you can create a group-curated list. You can also create a list here on the group\'s homepage. Any member of the group can create a list curated by group members.' %}",
|
|
title: "{% trans 'Group lists' %}",
|
|
attachTo: {
|
|
element: "#tour-create-list",
|
|
on: "right",
|
|
},
|
|
buttons: [
|
|
{
|
|
action() {
|
|
return this.back();
|
|
},
|
|
secondary: true,
|
|
text: "{% trans 'Back' %}",
|
|
},
|
|
{
|
|
action() {
|
|
return this.next();
|
|
},
|
|
text: "{% trans 'Next' %}",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
text: "{% trans 'Thanks for taking the tour. There\'s lots more to explore, but now you are familiar with the basics needed to enjoy Bookwyrm. Happy reading!' %}",
|
|
title: "{% trans 'You\'re ready!' %}",
|
|
buttons: [
|
|
{
|
|
action() {
|
|
return this.back();
|
|
},
|
|
secondary: true,
|
|
text: "{% trans 'Back' %}",
|
|
},
|
|
{
|
|
action() {
|
|
disableGuidedTour(csrf_token);
|
|
return this.complete();
|
|
},
|
|
text: "{% trans 'Finish tour' %}",
|
|
},
|
|
],
|
|
},
|
|
])
|
|
|
|
tour.start()
|
|
</script>
|