2022-06-18 07:16:43 +00:00
{% load i18n %}
< script >
const tour = new Shepherd.Tour({
exitOnEsc: true,
});
tour.addSteps([
{
2022-07-02 08:46:16 +00:00
text: "{% trans 'This is the page where your books are listed, organised into shelves.' %}",
title: "{% trans 'Your books' %}",
2022-06-18 07:16:43 +00:00
buttons: [
{
action() {
disableGuidedTour(csrf_token);
return this.complete();
},
secondary: true,
text: "{% trans 'End Tour' %}",
classes: "is-danger",
},
{
action() {
return this.next();
},
text: "{% trans 'Next' %}",
},
],
},
{
2022-07-09 07:49:56 +00:00
text: "{% trans '< strong > To Read< / strong > , < strong > Currently Reading< / strong > , < strong > Read< / strong > , and < strong > Stopped Reading< / strong > are default shelves. When you change the reading status of a book it will automatically be moved to the matching shelf. A book can only be on one default shelf at a time.' %}",
2022-07-09 00:37:08 +00:00
title: "{% trans 'Reading status shelves' %}",
2022-06-18 07:16:43 +00:00
attachTo: {
2022-07-03 05:57:10 +00:00
element: "#tour-user-shelves",
2022-07-02 08:46:16 +00:00
on: "bottom-start",
2022-06-18 07:16:43 +00:00
},
2022-07-10 01:27:01 +00:00
highlightClass: 'tour-element-highlight',
2022-06-18 07:16:43 +00:00
buttons: [
{
action() {
return this.back();
},
secondary: true,
text: "{% trans 'Back' %}",
},
{
action() {
return this.next();
},
text: "{% trans 'Next' %}",
},
],
},
{
2022-07-02 08:46:16 +00:00
text: "{% trans 'You can create additional custom shelves to organise your books. A book on a custom shelf can be on any number of other shelves simultaneously, including one of the default reading status shelves' %}",
title: "{% trans 'Adding custom shelves.' %}",
2022-06-18 07:16:43 +00:00
attachTo: {
2022-07-03 05:57:10 +00:00
element: "#tour-create-shelf",
2022-07-02 08:46:16 +00:00
on: "left",
2022-06-18 07:16:43 +00:00
},
buttons: [
{
action() {
return this.back();
},
secondary: true,
text: "{% trans 'Back' %}",
},
{
action() {
return this.next();
},
text: "{% trans 'Next' %}",
},
],
},
{
2022-07-09 04:47:31 +00:00
text: "{% trans 'If you have an export file from another service like Goodreads or LibraryThing, you can import it here.' %}",
2022-07-02 08:46:16 +00:00
title: "{% trans 'Import from another service' %}",
2022-06-18 07:16:43 +00:00
attachTo: {
2022-07-03 05:57:10 +00:00
element: "#tour-import-books",
2022-06-18 07:16:43 +00:00
on: "left",
},
buttons: [
{
action() {
return this.back();
},
secondary: true,
text: "{% trans 'Back' %}",
},
{
action() {
return this.next();
},
text: "{% trans 'Next' %}",
},
],
},
{
2022-07-29 18:31:35 +00:00
text: `{% trans "Now that we've explored book shelves, let's take a look at a related concept: book lists!" %}< p class = "notification is-warning is-light mt-3" > {% trans "Click on the < strong > Lists< / strong > link here to continue the tour." %}`,
2022-07-02 08:46:16 +00:00
title: "{% trans 'Lists' %}",
attachTo: {
2022-07-17 06:13:12 +00:00
element: () => {
let menu = document.querySelector('#tour-navbar-start')
let display = window.getComputedStyle(menu).display;
return display == 'flex' ? '#tour-navbar-start' : '.navbar-burger';
},
2022-07-03 04:48:23 +00:00
on: "right",
2022-07-02 08:46:16 +00:00
},
2022-07-09 06:56:07 +00:00
highlightClass: 'tour-element-highlight',
2022-06-18 07:16:43 +00:00
buttons: [
{
action() {
2022-07-02 08:46:16 +00:00
return this.back();
2022-06-18 07:16:43 +00:00
},
2022-07-02 08:46:16 +00:00
secondary: true,
text: "{% trans 'Back' %}",
2022-06-18 07:16:43 +00:00
},
2022-07-02 08:46:16 +00:00
{
action() {
this.complete();
},
2022-07-03 04:48:23 +00:00
text: "{% trans 'Ok' %}"
2022-07-02 08:46:16 +00:00
},
]
}
2022-06-18 07:16:43 +00:00
])
tour.start()
< / script >