add guided tour for user groups page

- add ID for add group button
- add tour steps for user groups page
- trigger tour steps if guided tour is turned on
This commit is contained in:
Hugh Rundle 2022-06-13 20:27:36 +10:00
parent 7fbc9914de
commit 00df3c94df
3 changed files with 144 additions and 2 deletions

View file

@ -0,0 +1,136 @@
{% load i18n %}
{% csrf_token %}
<script>
const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
function disableTour() {
fetch('/guided-tour/False', {
headers: {
'X-CSRFToken': csrftoken,
},
method: 'POST',
redirect: 'follow',
mode: 'same-origin',
})
.then( resp => {console.log(resp.statusText) })
}
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() {
disableTour();
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: "#create_group_button",
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: "#create_group_header",
on: "right",
},
buttons: [
{
action() {
return this.back();
},
secondary: true,
text: "{% trans 'Back' %}",
},
{
action() {
return this.next();
},
text: "{% trans 'Next' %}",
},
],
},
{
text: "{% trans 'Groups can be ' %}\
<code>{% trans 'Public' %}</code>,\
<code>{% trans 'Unlisted' %}</code>,\
{% trans 'or ' %}\
<code>{% trans 'Private' %}</code><br><br>\
{% trans 'Anyone can see and join a public group. Unlisted groups are currently exactly the same as public groups. Private groups can only be seen by members of the group.' %}",
title: "{% trans 'Group visibility' %}",
attachTo: {
element: "privacy_select_button",
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 \'Save\' button.' %}",
title: "{% trans '' %}",
buttons: [
{
action() {
return this.complete();
},
text: "{% trans 'Ok' %}",
},
],
},
])
tour.start()
</script>

View file

@ -1,6 +1,6 @@
{% load i18n %}
{% load utilities %}
<div class="select {{ class }}">
<div class="select {{ class }}" id="privacy_select_button">
{% firstof privacy_uuid 0|uuid as uuid %}
{% if not no_label %}
<label class="is-sr-only" for="privacy_{{ uuid }}">{% trans "Post privacy" %}</label>

View file

@ -13,7 +13,7 @@
</h1>
</div>
{% if is_self %}
<div class="column is-narrow">
<div class="column is-narrow" id="create_group_button">
{% trans "Create group" as button_text %}
{% include 'snippets/toggle/open_button.html' with controls_text="create_group" icon_with_text="plus" text=button_text %}
</div>
@ -35,3 +35,9 @@
{% include 'snippets/pagination.html' with page=user.memberships path=path %}
</div>
{% endblock %}
{% block scripts %}
{% if user.show_guided_tour %}
{% include 'guided_tour/user_groups.html' %}
{% endif %}
{% endblock %}