make guided tour cancel button DRY

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

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',
})
}

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() {

View file

@ -2,19 +2,6 @@
{% 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,
});
@ -28,7 +15,7 @@
buttons: [
{
action() {
disableTour();
disableGuidedTour(csrf_token);
return this.next();
},
secondary: true,

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,

View file

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

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 %}