bookwyrm/bookwyrm/templates/guided_tour/user_groups.html

{% load i18n %}

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

    tour.addSteps([
        {
            text: "{% trans 'You can create or join a group with other users. Groups can share group-curated book lists, and in future will be able to do other things.' %}",
            title: "{% trans 'Groups' %}",
            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 'Let\'s click the button to create a new group!' %}\
                    <br><br>\
                    {% trans 'Then click ' %}\
                    <code>{% trans 'Next' %}</code> \
                    {% trans 'to continue the tour.' %}",
            title: "{% trans 'Create group' %}",
            attachTo: {
                element: "#tour-create-group",
                on: "left-start",
            },
            buttons: [
                {
                    action() {
                        return this.back();
                    },
                    secondary: true,
                    text: "{% trans 'Back' %}",
                },
                {
                    action() {
                        return this.next();
                    },
                    text: "{% trans 'Next' %}",
                },
            ],
        },
        {
            text: "{% trans 'Give your group a name and describe what it is about. You can make user groups for any purpose - a reading group, a bunch of friends, whatever!' %}",
            title: "{% trans 'Creating a group' %}",
            attachTo: {
                element: "#tour-group-name",
                on: "right",
            },
            buttons: [
                {
                    action() {
                        return this.back();
                    },
                    secondary: true,
                    text: "{% trans 'Back' %}",
                },
                {
                    action() {
                        return this.next();
                    },
                    text: "{% trans 'Next' %}",
                },
            ],
        },
        {
            text: "{% trans 'Groups have privacy settings just like Lists, except that group privacy cannot be ' %}\
            <code>{% trans 'Followers' %}</code>.",
            title: "{% trans 'Group visibility' %}",
            attachTo: {
                element: "#tour-privacy",
                on: "left",
            },
            buttons: [
                {
                    action() {
                        return this.back();
                    },
                    secondary: true,
                    text: "{% trans 'Back' %}",
                },
                {
                    action() {
                        return this.next();
                    },
                    text: "{% trans 'Next' %}",
                },
            ],
        },
        {
            text: "{% trans 'Once you\'re happy with how your group is set up, click the ' %}\
            <code>{% trans 'Save' %}</code>\
            {% trans ' button to continue the tour.' %}",
            title: "{% trans 'Save your group' %}",
            buttons: [
                {
                    action() {
                        return this.complete();
                    },
                    text: "{% trans 'Ok' %}",
                },
            ],
        },
    ])

    tour.start()
</script>