131 lines
4.6 KiB
HTML
131 lines
4.6 KiB
HTML
{% load i18n %}
|
|
|
|
<script nonce="{{request.csp_nonce}}">
|
|
const tour = new Shepherd.Tour({
|
|
exitOnEsc: true,
|
|
});
|
|
|
|
tour.addSteps([
|
|
{
|
|
text: "{% trans 'This is the page where your books are listed, organised into shelves.' %}",
|
|
title: "{% trans 'Your books' %}",
|
|
buttons: [
|
|
{
|
|
action() {
|
|
disableGuidedTour(csrf_token);
|
|
return this.complete();
|
|
},
|
|
secondary: true,
|
|
text: "{% trans 'End Tour' %}",
|
|
classes: "is-danger",
|
|
},
|
|
{
|
|
action() {
|
|
return this.next();
|
|
},
|
|
text: "{% trans 'Next' %}",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
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.' %}",
|
|
title: "{% trans 'Reading status shelves' %}",
|
|
attachTo: {
|
|
element: "#tour-user-shelves",
|
|
on: "bottom-start",
|
|
},
|
|
highlightClass: 'tour-element-highlight',
|
|
buttons: [
|
|
{
|
|
action() {
|
|
return this.back();
|
|
},
|
|
secondary: true,
|
|
text: "{% trans 'Back' %}",
|
|
},
|
|
{
|
|
action() {
|
|
return this.next();
|
|
},
|
|
text: "{% trans 'Next' %}",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
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.' %}",
|
|
attachTo: {
|
|
element: "#tour-create-shelf",
|
|
on: "left",
|
|
},
|
|
buttons: [
|
|
{
|
|
action() {
|
|
return this.back();
|
|
},
|
|
secondary: true,
|
|
text: "{% trans 'Back' %}",
|
|
},
|
|
{
|
|
action() {
|
|
return this.next();
|
|
},
|
|
text: "{% trans 'Next' %}",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
text: "{% trans 'If you have an export file from another service like Goodreads or LibraryThing, you can import it here.' %}",
|
|
title: "{% trans 'Import from another service' %}",
|
|
attachTo: {
|
|
element: "#tour-import-books",
|
|
on: "left",
|
|
},
|
|
buttons: [
|
|
{
|
|
action() {
|
|
return this.back();
|
|
},
|
|
secondary: true,
|
|
text: "{% trans 'Back' %}",
|
|
},
|
|
{
|
|
action() {
|
|
return this.next();
|
|
},
|
|
text: "{% trans 'Next' %}",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
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." %}`,
|
|
title: "{% trans 'Lists' %}",
|
|
attachTo: {
|
|
element: () => {
|
|
let menu = document.querySelector('#tour-navbar-start')
|
|
let display = window.getComputedStyle(menu).display;
|
|
return display == 'flex' ? '#tour-navbar-start' : '.navbar-burger';
|
|
},
|
|
on: "right",
|
|
},
|
|
highlightClass: 'tour-element-highlight',
|
|
buttons: [
|
|
{
|
|
action() {
|
|
return this.back();
|
|
},
|
|
secondary: true,
|
|
text: "{% trans 'Back' %}",
|
|
},
|
|
{
|
|
action() {
|
|
this.complete();
|
|
},
|
|
text: "{% trans 'Ok' %}"
|
|
},
|
|
]
|
|
}
|
|
])
|
|
|
|
tour.start()
|
|
</script>
|