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.

bookwyrm/static/js/guided_tour.js

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

bookwyrm/templates/guided_tour/group.html

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

bookwyrm/templates/guided_tour/home.html

@@ -2,24 +2,11 @@
 {% 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({
+const initiateTour = new Shepherd.Tour({
     exitOnEsc: true,
-    });
+});
 
-    initiateTour.addSteps([
+initiateTour.addSteps([
     {
         text: "{% trans 'Welcome to Bookwyrm!' %} \
             <br><br> \
@@ -28,7 +15,7 @@
             buttons: [
                 {
                     action() {
-                            disableTour();
+                        disableGuidedTour(csrf_token);
                         return this.next();
                     },
                     secondary: true,
@@ -61,13 +48,13 @@
                 }
             ],
     }
-    ])
+])
 
-    const homeTour = new Shepherd.Tour({
+const homeTour = new Shepherd.Tour({
         exitOnEsc: true,
     });
 
-    homeTour.addSteps([
+homeTour.addSteps([
     {
         text: "{% trans 'Search for books, users, or lists using this search box.' %}",
         title: "{% trans 'Search box' %}",
@@ -199,7 +186,7 @@
             },
         ],
     }
-    ]);
+]);
 
-    initiateTour.start()
+initiateTour.start()
 </script>

bookwyrm/templates/guided_tour/user_groups.html

@@ -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,

bookwyrm/templates/guided_tour/user_profile.html

@@ -2,30 +2,18 @@
 {% 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({
+const tour = new Shepherd.Tour({
     exitOnEsc: true,
-    });
+});
 
-    tour.addSteps([
+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();
+                    disableGuidedTour(csrf_token);
                     return this.complete();
                 },
                 secondary: true,
@@ -144,7 +132,7 @@
             },
         ],
     },
-    ])
+])
 
-    tour.start()
+tour.start()
 </script>

bookwyrm/templates/layout.html

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