zedfrigg/bookwyrm
1
0
Fork 0
Code Activity

add shepherd tours

Browse source 
This file creates and triggers tours using shepherd.

Initially this is a tour on the home feed page, triggered by clicking on the help button in the top nav.
This commit is contained in:
Hugh Rundle 2022-06-12 19:43:21 +10:00
parent 806e2778df
commit c614aeb28e
1 changed files with 105 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

105
bookwyrm/static/js/tour.js Normal file
View file

@ -0,0 +1,105 @@
const homeTour = new Shepherd.Tour({
exitOnEsc: true,
});
homeTour.addSteps([
{
text: "Search for books, users, or lists using this search box.",
title: "Search box",
attachTo: {
element: "#search_input",
on: "bottom",
},
buttons: [
{
action() {
return this.cancel();
},
secondary: true,
text: "Cancel",
classes: "is-danger",
},
{
action() {
return this.next();
},
text: "Next",
},
],
},
{
text: "The latest books to be added to your reading shelves will be shown here.",
title: "Your Books",
attachTo: {
element: "#suggested_books_block",
on: "right",
},
buttons: [
{
action() {
return this.back();
},
secondary: true,
text: "Back",
},
{
action() {
return this.next();
},
text: "Next",
},
],
},
{
text: "The bell will light up when you have a new notification. Click on it to find out what exciting thing has happened!",
title: "Notifications",
attachTo: {
element: '[href="/notifications"]',
on: "left-end",
},
buttons: [
{
action() {
return this.back();
},
secondary: true,
text: "Back",
},
{
action() {
return this.next();
},
text: "Next",
},
],
},
{
text: "Your profile, books, direct messages, and settings can be accessed by clicking on your name here.<br><br>Try selecting <code>Profile</code> from the drop down menu to continue the tour.",
title: "Profile and settings menu",
attachTo: {
element: "#navbar-dropdown",
on: "left-end",
},
buttons: [
{
action() {
return this.back();
},
secondary: true,
text: "Back",
},
{
action() {
return this.next();
},
text: "Ok",
},
],
}
]);
function startTour(tourName) {
if (tourName === 'home') {
homeTour.start()
}
}