mirrors/bookwyrm
1
0
Fork 1
mirror of https://github.com/bookwyrm-social/bookwyrm.git synced 2024-06-17 12:40:45 +00:00
Code Issues Projects Releases Wiki Activity

make guided tour cancel button DRY

Browse source 
Move cancel button function into a separate JS file.
The selector JS for this function cannot be within bookwyrm.js because the guided tour elements load after bookwyrm.js.
This commit is contained in:
Hugh Rundle 2022-06-18 13:27:00 +10:00
parent 5bf835b965
commit 57965973dc
6 changed files with 326 additions and 348 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
bookwyrm/static/js/guided_tour.js Normal file
View file

@ -0,0 +1,17 @@
/**
* Set guided tour user value to False
* @param {csrf_token} string
* @return {undefined}
*/
function disableGuidedTour(csrf_token) {
console.log(csrf_token);
fetch('/guided-tour/False', {
headers: {
'X-CSRFToken': csrf_token,
},
method: 'POST',
redirect: 'follow',
mode: 'same-origin',
})
}

30
bookwyrm/templates/guided_tour/group.html
View file

@ -1,21 +1,19 @@
{% load i18n %}
{% csrf_token %}
<!-- TODO: account for smaller screen view in all tours -->
<!--
order of tour:
1. home page
2. profile
3. books (shelves)
4. lists
5. groups
6. direct messages
7. settings
-->
<script>
// TODO: put this with the token back in general layout so it can be called from any tour
// TODO: account for smaller screen view in all tours
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,
});
@ -27,12 +25,12 @@
buttons: [
{
action() {
disableTour();
disableGuidedTour(csrf_token);
return this.complete();
},
secondary: true,
text: "{% trans 'End Tour' %}",
classes: "is-danger",
classes: "is-danger guided-tour-cancel-button",
},
{
action() {

359
bookwyrm/templates/guided_tour/home.html
View file

@ -2,204 +2,191 @@
{% 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 initiateTour = new Shepherd.Tour({
exitOnEsc: true,
});
const initiateTour = new Shepherd.Tour({
initiateTour.addSteps([
{
text: "{% trans 'Welcome to Bookwyrm!' %} \
<br><br> \
{% trans 'Would you like to take the guided tour to help you get started?' %}",
title: "{% trans 'Guided Tour' %}",
buttons: [
{
action() {
disableGuidedTour(csrf_token);
return this.next();
},
secondary: true,
text: "{% trans 'No thanks' %}",
classes: "is-danger",
},
{
action() {
this.cancel();
return homeTour.start()
},
text: "{% trans 'Yes please!' %}",
},
],
},
{
text: "{% trans 'If you ever change your mind, just click on the Guided Tour link to start your tour' %}",
title: "{% trans 'Guided Tour' %}",
attachTo: {
element: "#tour_button",
on: "left-start",
},
buttons: [
{
action() {
return this.complete()
},
text: "{% trans 'Ok' %}",
classes: "is-success",
}
],
}
])
const homeTour = new Shepherd.Tour({
exitOnEsc: true,
});
initiateTour.addSteps([
{
text: "{% trans 'Welcome to Bookwyrm!' %} \
<br><br> \
{% trans 'Would you like to take the guided tour to help you get started?' %}",
title: "{% trans 'Guided Tour' %}",
buttons: [
{
action() {
disableTour();
return this.next();
},
secondary: true,
text: "{% trans 'No thanks' %}",
classes: "is-danger",
},
{
action() {
this.cancel();
return homeTour.start()
},
text: "{% trans 'Yes please!' %}",
},
],
homeTour.addSteps([
{
text: "{% trans 'Search for books, users, or lists using this search box.' %}",
title: "{% trans 'Search box' %}",
attachTo: {
element: "#search_input",
on: "bottom",
},
{
text: "{% trans 'If you ever change your mind, just click on the Guided Tour link to start your tour' %}",
title: "{% trans 'Guided Tour' %}",
attachTo: {
element: "#tour_button",
on: "left-start",
},
buttons: [
{
action() {
return this.complete()
},
text: "{% trans 'Ok' %}",
classes: "is-success",
}
],
}
])
const homeTour = new Shepherd.Tour({
exitOnEsc: true,
});
homeTour.addSteps([
{
text: "{% trans 'Search for books, users, or lists using this search box.' %}",
title: "{% trans 'Search box' %}",
attachTo: {
element: "#search_input",
on: "bottom",
},
buttons: [
{
action() {
return this.next();
},
text: "{% trans 'Next' %}",
},
],
},
{
text: "{% trans 'Search book records by scanning an ISBN barcode using your camera.' %}",
title: "{% trans 'Barcode reader' %}",
attachTo: {
element: ".icon-barcode",
on: "bottom",
},
buttons: [
{
action() {
return this.back();
},
secondary: true,
text: "{% trans 'Back' %}",
},
{
action() {
return this.next();
},
text: "{% trans 'Next' %}",
},
],
},
{
text: "{% trans 'Use these links to discover the latest news from your feed, lists of books by topic, and the latest happenings on this Bookwyrm server!' %}",
title: "{% trans 'Navigation Bar' %}",
attachTo: {
element: ".navbar-start",
on: "bottom",
},
buttons: [
{
action() {
return this.back();
},
secondary: true,
text: "{% trans 'Back' %}",
},
{
action() {
return this.next();
},
text: "{% trans 'Next' %}",
},
],
},
{
text: "{% trans 'Books on your reading status shelves will be shown here.' %}",
title: "{% trans 'Your Books' %}",
attachTo: {
element: "#suggested_books_block",
on: "right",
},
buttons: [
buttons: [
{
action() {
return this.back();
},
secondary: true,
text: "{% trans 'Back' %}",
action() {
return this.next();
},
{
action() {
return this.next();
},
text: "{% trans 'Next' %}",
},
],
},
{
text: "{% trans 'This bell will light up when you have a new notification. When it does, click on it to find out what exciting thing has happened!' %}",
title: "{% trans 'Notifications' %}",
attachTo: {
element: '[href="/notifications"]',
on: "left-end",
text: "{% trans 'Next' %}",
},
buttons: [
],
},
{
text: "{% trans 'Search book records by scanning an ISBN barcode using your camera.' %}",
title: "{% trans 'Barcode reader' %}",
attachTo: {
element: ".icon-barcode",
on: "bottom",
},
buttons: [
{
action() {
return this.back();
},
secondary: true,
text: "{% trans 'Back' %}",
action() {
return this.back();
},
{
action() {
return this.next();
},
text: "{% trans 'Next' %}",
},
],
},
{
text: "{% trans 'Your profile, books, direct messages, and settings can be accessed by clicking on your name here.<br><br>Try selecting <code>Profile</code> from the drop down menu to continue the tour.' %}",
title: "{% trans 'Profile and settings menu' %}",
attachTo: {
element: "#navbar-dropdown",
on: "left-end",
secondary: true,
text: "{% trans 'Back' %}",
},
buttons: [
{
action() {
return this.back();
},
secondary: true,
text: "{% trans 'Back' %}",
{
action() {
return this.next();
},
{
action() {
return this.next();
},
text: "{% trans 'Ok' %}",
text: "{% trans 'Next' %}",
},
],
},
{
text: "{% trans 'Use these links to discover the latest news from your feed, lists of books by topic, and the latest happenings on this Bookwyrm server!' %}",
title: "{% trans 'Navigation Bar' %}",
attachTo: {
element: ".navbar-start",
on: "bottom",
},
buttons: [
{
action() {
return this.back();
},
],
}
]);
secondary: true,
text: "{% trans 'Back' %}",
},
{
action() {
return this.next();
},
text: "{% trans 'Next' %}",
},
],
},
{
text: "{% trans 'Books on your reading status shelves will be shown here.' %}",
title: "{% trans 'Your Books' %}",
attachTo: {
element: "#suggested_books_block",
on: "right",
},
buttons: [
{
action() {
return this.back();
},
secondary: true,
text: "{% trans 'Back' %}",
},
{
action() {
return this.next();
},
text: "{% trans 'Next' %}",
},
],
},
{
text: "{% trans 'This bell will light up when you have a new notification. When it does, click on it to find out what exciting thing has happened!' %}",
title: "{% trans 'Notifications' %}",
attachTo: {
element: '[href="/notifications"]',
on: "left-end",
},
buttons: [
{
action() {
return this.back();
},
secondary: true,
text: "{% trans 'Back' %}",
},
{
action() {
return this.next();
},
text: "{% trans 'Next' %}",
},
],
},
{
text: "{% trans 'Your profile, books, direct messages, and settings can be accessed by clicking on your name here.<br><br>Try selecting <code>Profile</code> from the drop down menu to continue the tour.' %}",
title: "{% trans 'Profile and settings menu' %}",
attachTo: {
element: "#navbar-dropdown",
on: "left-end",
},
buttons: [
{
action() {
return this.back();
},
secondary: true,
text: "{% trans 'Back' %}",
},
{
action() {
return this.next();
},
text: "{% trans 'Ok' %}",
},
],
}
]);
initiateTour.start()
initiateTour.start()
</script>

15
bookwyrm/templates/guided_tour/user_groups.html
View file

@ -1,19 +1,6 @@
{% 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,
});
@ -25,7 +12,7 @@
buttons: [
{
action() {
disableTour();
disableGuidedTour(csrf_token);
return this.complete();
},
secondary: true,

252
bookwyrm/templates/guided_tour/user_profile.html
View file

@ -2,149 +2,137 @@
{% 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,
});
const tour = new Shepherd.Tour({
exitOnEsc: true,
});
tour.addSteps([
{
text: "{% trans 'This is your user profile. All your latest activities will be listed here, as well as links to your reading goal, groups, lists, and shelves. Other Bookwyrm users can see this page too - though exactly what they can see depends on your settings.' %}",
title: "{% trans 'User Profile' %}",
buttons: [
{
action() {
disableTour();
return this.complete();
},
secondary: true,
text: "{% trans 'End Tour' %}",
classes: "is-danger",
tour.addSteps([
{
text: "{% trans 'This is your user profile. All your latest activities will be listed here, as well as links to your reading goal, groups, lists, and shelves. Other Bookwyrm users can see this page too - though exactly what they can see depends on your settings.' %}",
title: "{% trans 'User Profile' %}",
buttons: [
{
action() {
disableGuidedTour(csrf_token);
return this.complete();
},
{
action() {
return this.next();
},
text: "{% trans 'Next' %}",
},
],
},
{
text: "{% trans 'This tab shows everything you have read towards your annual reading goal, or allows you to set one. You do not have to set a reading goal if that\'s not your thing!' %}",
title: "{% trans 'Reading Goal' %}",
attachTo: {
element: "#reading_goal_tab",
on: "right",
secondary: true,
text: "{% trans 'End Tour' %}",
classes: "is-danger",
},
buttons: [
{
action() {
return this.back();
},
secondary: true,
text: "{% trans 'Back' %}",
{
action() {
return this.next();
},
{
action() {
return this.next();
},
text: "{% trans 'Next' %}",
},
],
},
{
text: "{% trans 'The Books tab shows your books, on various shelves.' %}",
title: "{% trans 'Books' %}",
attachTo: {
element: "#shelves_tab",
on: "right",
text: "{% trans 'Next' %}",
},
buttons: [
{
action() {
return this.back();
},
secondary: true,
text: "{% trans 'Back' %}",
},
{
action() {
return this.next();
},
text: "{% trans 'Next' %}",
},
],
],
},
{
text: "{% trans 'This tab shows everything you have read towards your annual reading goal, or allows you to set one. You do not have to set a reading goal if that\'s not your thing!' %}",
title: "{% trans 'Reading Goal' %}",
attachTo: {
element: "#reading_goal_tab",
on: "right",
},
{
text: "{% trans 'Here you can see your lists, or create a new one. A list is a collection of books that have something in common.' %}",
title: "{% trans 'Lists' %}",
attachTo: {
element: "#lists_tab",
on: "right",
buttons: [
{
action() {
return this.back();
},
secondary: true,
text: "{% trans 'Back' %}",
},
buttons: [
{
action() {
return this.back();
},
secondary: true,
text: "{% trans 'Back' %}",
{
action() {
return this.next();
},
{
action() {
return this.next();
},
text: "{% trans 'Next' %}",
},
],
},
{
text: "{% trans 'Here you can see your groups, or create a new one. A group brings together Bookwyrm users and allows them to curate lists together.' %}",
title: "{% trans 'Groups' %}",
attachTo: {
element: "#groups_tab",
on: "right",
text: "{% trans 'Next' %}",
},
buttons: [
{
action() {
return this.back();
},
secondary: true,
text: "{% trans 'Back' %}",
},
{
action() {
return this.next();
},
text: "{% trans 'Next' %}",
},
],
],
},
{
text: "{% trans 'The Books tab shows your books, on various shelves.' %}",
title: "{% trans 'Books' %}",
attachTo: {
element: "#shelves_tab",
on: "right",
},
{
text: "{% trans 'Now that you have seen the basics of your profile page, we\'re going to explore some of these concepts. Start by clicking on' %}<code>{% trans 'Groups' %}</code>.",
title: "{% trans 'Groups' %}",
buttons: [
{
action() {
return this.complete();
},
text: "{% trans 'Ok' %}",
buttons: [
{
action() {
return this.back();
},
],
secondary: true,
text: "{% trans 'Back' %}",
},
{
action() {
return this.next();
},
text: "{% trans 'Next' %}",
},
],
},
{
text: "{% trans 'Here you can see your lists, or create a new one. A list is a collection of books that have something in common.' %}",
title: "{% trans 'Lists' %}",
attachTo: {
element: "#lists_tab",
on: "right",
},
])
buttons: [
{
action() {
return this.back();
},
secondary: true,
text: "{% trans 'Back' %}",
},
{
action() {
return this.next();
},
text: "{% trans 'Next' %}",
},
],
},
{
text: "{% trans 'Here you can see your groups, or create a new one. A group brings together Bookwyrm users and allows them to curate lists together.' %}",
title: "{% trans 'Groups' %}",
attachTo: {
element: "#groups_tab",
on: "right",
},
buttons: [
{
action() {
return this.back();
},
secondary: true,
text: "{% trans 'Back' %}",
},
{
action() {
return this.next();
},
text: "{% trans 'Next' %}",
},
],
},
{
text: "{% trans 'Now that you have seen the basics of your profile page, we\'re going to explore some of these concepts. Start by clicking on' %}<code>{% trans 'Groups' %}</code>.",
title: "{% trans 'Groups' %}",
buttons: [
{
action() {
return this.complete();
},
text: "{% trans 'Ok' %}",
},
],
},
])
tour.start()
tour.start()
</script>

1
bookwyrm/templates/layout.html
View file

@ -225,6 +225,7 @@
<script src="{% static "js/status_cache.js" %}?v={{ js_cache }}"></script>
<script src="{% static "js/vendor/quagga.min.js" %}?v={{ js_cache }}"></script>
<script src="{% static "js/vendor/shepherd.min.js" %}?v={{ js_cache }}"></script>
<script src="{% static "js/guided_tour.js" %}?v={{ js_cache }}"></script>
{% block scripts %}{% endblock %}