bookwyrm/bookwyrm/templates/guided_tour/book.html

{% load i18n %}

<script>
    const tour = new Shepherd.Tour({
        exitOnEsc: true,
    });

    tour.addSteps([
        {
            text: "{% trans 'This is home page of a book. Let\'s see what you can do while you\'re here!' %}",
            title: "{% trans 'Book page' %}",
            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 'This is where you can set a reading status for this book. You can press the button to move to the next stage, or use the drop down button to select the reading status you want to set.' %}",
            title: "{% trans 'Reading status' %}",
            attachTo: {
                element: "#tour-shelve-button",
                on: "right",
            },
            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 also manually add reading dates here. Unlike changing the reading status using the previous method, adding dates manually will not automatically add them to your <strong>Read</strong> or <strong>Reading</strong> shelves.<br><br>Got a favourite you re-read every year? We\'ve got you covered - you can add multiple read dates for the same book 😀' %}",
            title: "{% trans 'Add read dates' %}",
            attachTo: {
                element: "#tour-add-readthrough",
                on: "top",
            },
            highlightClass: 'tour-element-highlight',
            buttons: [
                {
                    action() {
                        return this.back();
                    },
                    secondary: true,
                    text: "{% trans 'Back' %}",
                },
                {
                    action() {
                        return this.next();
                    },
                    text: "{% trans 'Next' %}",
                },
            ],
        },
        {
            text: "{% trans 'There can be multiple editions of a book, in various formats or languages. You can choose which edition you want to use.' %}",
            title: "{% trans 'Other editions' %}",
            attachTo: {
                element: "#tour-other-editions-link",
                on: "left",
            },
            buttons: [
                {
                    action() {
                        return this.back();
                    },
                    secondary: true,
                    text: "{% trans 'Back' %}",
                },
                {
                    action() {
                        return this.next();
                    },
                    text: "{% trans 'Next' %}",
                },
            ],
        },
        {
            text: "{% trans 'Some ebooks can be downloaded for free from external sources. They will be shown here.' %}",
            title: "{% trans 'Download links' %}",
            attachTo: {
                element: "#tour-book-file-links",
                on: "left",
            },
            highlightClass: 'tour-element-highlight',
            buttons: [
                {
                    action() {
                        return this.back();
                    },
                    secondary: true,
                    text: "{% trans 'Back' %}",
                },
                {
                    action() {
                        return this.next();
                    },
                    text: "{% trans 'Next' %}",
                },
            ],
        },
        {
            text: "{% trans '<p class=\'notification is-warning is-light mt-3\'> Continue the tour by selecting <strong>Your books</strong> from the drop down menu.</p>' %}",
            title: "{% trans 'Next' %}",
            attachTo: {
            element: "#navbar-dropdown",
            on: "left-end",
        },
            buttons: [
                {
                    action() {
                        return this.back();
                    },
                    secondary: true,
                    text: "{% trans 'Back' %}",
                },
                {
                    action() {
                        return this.complete();
                    },
                    text: "{% trans 'Ok' %}",
                },
            ],
        },
    ])

    tour.start()
</script>