bookwyrm/bookwyrm/templates/guided_tour/user_books.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>