bookwyrm/bookwyrm/templates/guided_tour/user_books.html

{% load i18n %}

<script>
    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: "<code>{% trans 'To Read' %}</code>, \
            <code>{% trans 'Currently Reading' %}</code>, \
            <code>{% trans 'Read' %}</code>,\
            {% trans ' and ' %}\
            <code>{% trans 'Stopped Reading' %}</code> \
            {% trans 'are default shelves used to indicate the current reading status of books. A book can only be assigned to one of these shelves at any given moment e.g. a  book is not allowed to be on both the ' %}\
            <code>{% trans 'Currently Reading' %}</code>, \
            {% trans ' and the ' %}\
            <code>{% trans 'To Read' %}</code>, \
            {% trans ' shelves. When you change the reading status of a book it will automatically be moved to the matching shelf.' %}\
            ",
            title: "{% trans 'Reading status shelves' %}",
            attachTo: {
                element: "#tour-user-shelves",
                on: "bottom-start",
            },
            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! Click on the ' %}\
            <code>\
            {% trans 'Lists' %}\
            </code>\
            {% trans ' link here to continue the tour.' %}",
            title: "{% trans 'Lists' %}",
            attachTo: {
                element: "#tour-navbar-start",
                on: "right",
            },
            buttons: [
                {
                    action() {
                        return this.back();
                    },
                    secondary: true,
                    text: "{% trans 'Back' %}",
                },
                {
                    action() {
                        this.complete();
                    },
                    text: "{% trans 'Ok' %}"
                },
            ]
        }
    ])

    tour.start()
</script>