zedfrigg/bookwyrm
1
0
Fork 0
Code 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
Download patch file Download diff file Expand all files Collapse all files

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>