From 57965973dc075817dbcce69d1815d4d8bc8592b7 Mon Sep 17 00:00:00 2001
From: Hugh Rundle <hugh@hughrundle.net>
Date: Sat, 18 Jun 2022 13:27:00 +1000
Subject: [PATCH] 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             |  17 +
 bookwyrm/templates/guided_tour/group.html     |  30 +-
 bookwyrm/templates/guided_tour/home.html      | 359 +++++++++---------
 .../templates/guided_tour/user_groups.html    |  15 +-
 .../templates/guided_tour/user_profile.html   | 252 ++++++------
 bookwyrm/templates/layout.html                |   1 +
 6 files changed, 326 insertions(+), 348 deletions(-)
 create mode 100644 bookwyrm/static/js/guided_tour.js

diff --git a/bookwyrm/static/js/guided_tour.js b/bookwyrm/static/js/guided_tour.js
new file mode 100644
index 000000000..7c9d9a7f1
--- /dev/null
+++ b/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',
+    })
+}
diff --git a/bookwyrm/templates/guided_tour/group.html b/bookwyrm/templates/guided_tour/group.html
index 619c48929..68d4e7759 100644
--- a/bookwyrm/templates/guided_tour/group.html
+++ b/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() {
diff --git a/bookwyrm/templates/guided_tour/home.html b/bookwyrm/templates/guided_tour/home.html
index f0aef4667..418d25f39 100644
--- a/bookwyrm/templates/guided_tour/home.html
+++ b/bookwyrm/templates/guided_tour/home.html
@@ -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>
diff --git a/bookwyrm/templates/guided_tour/user_groups.html b/bookwyrm/templates/guided_tour/user_groups.html
index 1eebe2a09..603bc53b6 100644
--- a/bookwyrm/templates/guided_tour/user_groups.html
+++ b/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,
diff --git a/bookwyrm/templates/guided_tour/user_profile.html b/bookwyrm/templates/guided_tour/user_profile.html
index e68e7fde5..2f044f952 100644
--- a/bookwyrm/templates/guided_tour/user_profile.html
+++ b/bookwyrm/templates/guided_tour/user_profile.html
@@ -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>
diff --git a/bookwyrm/templates/layout.html b/bookwyrm/templates/layout.html
index 0155c6650..9c99eb7fa 100644
--- a/bookwyrm/templates/layout.html
+++ b/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 %}