alan-turing-institute · llewelld · Aug 4, 2023
diff --git a/server/apps/main/templates/main/application.html b/server/apps/main/templates/main/application.html
@@ -8,7 +8,7 @@
 
     <!-- jQuery -->
     {% include 'main/partials/jquery.html' %}
-    
+
     <!-- Bootstrap CSS -->
 
     <!--Google Fonts-->
@@ -25,6 +25,10 @@
     <link href="{% static '/css/main.css' %}" rel="stylesheet">
     {%block page_css%} {% endblock %}
 
+    <!-- TourGuide (TODO: should only be included when needed) -->
+    <script src="https://unpkg.com/@sjmc11/tourguidejs/dist/tour.js" crossorigin="anonymous"
+      referrerpolicy="no-referrer" type"module"'></script>
+    <link rel="stylesheet" href="https://unpkg.com/@sjmc11/tourguidejs/dist/css/tour.min.css">
   </head>
 
   <body {% block body_attributes%} {% endblock %}>

diff --git a/server/apps/main/templates/main/home.html b/server/apps/main/templates/main/home.html
@@ -6,6 +6,8 @@
 
   {% block content %}
 
+<script type="module" src="{% static 'js/tour.js' %}"></script>
+
 <!--Navigation-->
 <section id="title">
 <!--  Navigation-->

diff --git a/server/apps/main/templates/main/partials/jquery.html b/server/apps/main/templates/main/partials/jquery.html
@@ -1,3 +1,5 @@
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/shepherd.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/shepherd.css"/>
diff --git a/server/apps/main/templates/main/partials/navigation.html b/server/apps/main/templates/main/partials/navigation.html
@@ -11,65 +11,65 @@
       <div class="collapse navbar-collapse" id="navbarText">
         <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
           <li>
-            <a class="nav-content nav-item nav-link" href="{% url 'main:what_autism_is' %}">What is Autism</a>
+            <a class="nav-content nav-item nav-link" id="nav-what-is-autism" href="{% url 'main:what_autism_is' %}">What is Autism</a>
           </li>
           {% if user.is_authenticated %}
-          <li class="nav-item dropdown nav-nopadding">
+          <li class="nav-item dropdown nav-nopadding" id="nav-experiences">
             <a class="nav-link dropdown-toggle nav-content" href="#" id="experienceDropdownMenuLink" role="button"
               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             Experiences
             </a>
             <div class="dropdown-menu" aria-labelledby="experienceDropdownMenuLink">
-              <a class="dropdown-item" href="{% url 'main:public_experiences' %}">View Stories</a>
-              <a class="dropdown-item" href="{% url 'main:share_exp' %}">Share Stories</a>
+              <a class="dropdown-item" id="nav-experiences-view" href="{% url 'main:public_experiences' %}">View Stories</a>
+              <a class="dropdown-item" id="nav-experiences-share" href="{% url 'main:share_exp' %}">Share Stories</a>
             </div>
           </li>
           {% is_moderator user as moderator %}
           {% if moderator %}
           <li class="nav-item dropdown nav-nopadding">
-            <a class="nav-link dropdown-toggle nav-content" href="#" id="navbarDropdownMenuLink" role="button"
+            <a class="nav-link dropdown-toggle nav-content" id="nav-moderation" href="#" id="navbarDropdownMenuLink" role="button"
               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             Moderation
             </a>
             <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
-              <a class="dropdown-item" href="{% url 'main:moderation_list' %}?status=pending">Pending</a>
-              <a class="dropdown-item" href="{% url 'main:moderation_list' %}?status=approved">Approved</a>
-              <a class="dropdown-item" href="{% url 'main:moderation_list' %}?status=rejected">Rejected</a>
+              <a class="dropdown-item" id="nav-moderation-pending" href="{% url 'main:moderation_list' %}?status=pending">Pending</a>
+              <a class="dropdown-item" id="nav-moderation-approved" href="{% url 'main:moderation_list' %}?status=approved">Approved</a>
+              <a class="dropdown-item" id="nav-moderation-rejected" href="{% url 'main:moderation_list' %}?status=rejected">Rejected</a>
             </div>
           </li>
 
           {% endif %}
           <li>
-            <a class="nav-content nav-item nav-link" href="{% url 'main:my_stories' %}">My Stories</a>
+            <a class="nav-content nav-item nav-link" id="nav-my-stories" href="{% url 'main:my_stories' %}">My Stories</a>
           </li>
           {% else %}
           <li>
-            <a class="nav-content nav-item nav-link" href="{% url 'main:public_experiences' %}">View Stories</a>
+            <a class="nav-content nav-item nav-link" id="nav-public-experiences" href="{% url 'main:public_experiences' %}">View Stories</a>
           </li>
           {% endif %}
           <li>
-            <a class="nav-content nav-item nav-link" href="{% url 'main:about_us' %}">About Us</a>
+            <a class="nav-content nav-item nav-link" id="nav-about" href="{% url 'main:about_us' %}">About Us</a>
           </li>
           <li>
-            <a class="nav-content nav-item nav-link" href="{% url 'main:code_of_conduct' %}">Code of Conduct</a>
+            <a class="nav-content nav-item nav-link" id="nav-coc" href="{% url 'main:code_of_conduct' %}">Code of Conduct</a>
           </li>
           <li>
-            <a class="nav-content nav-item nav-link" href="{% url 'main:help' %}">Help</a>
+            <a class="nav-content nav-item nav-link" id="nav-help" href="{% url 'main:help' %}">Help</a>
           </li>
         </ul>
 
 
 
         {% if user.is_authenticated %}
         <ul class="navbar-nav nav-right">
-          <li class="nav-item dropdown nav-nopadding">
+          <li class="nav-item dropdown nav-nopadding" id="nav-account">
             <a class="nav-link dropdown-toggle nav-content nav-account" href="#" id="accountDropdownMenuLink" role="button"
               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             Account
             </a>
             <div class="dropdown-menu" aria-labelledby="accountDropdownMenuLink">
-              <a class="dropdown-item" href="{% url 'users:profile' %}">Profile</a>
-              <form class="form-inline nav-nomargin" action="{% url 'main:logout' %}" method="post">
+              <a class="dropdown-item" id="nav-account-profile" href="{% url 'users:profile' %}">Profile</a>
+              <form class="form-inline nav-nomargin" id="nav-account-logout" action="{% url 'main:logout' %}" method="post">
                 {% csrf_token %}
                 <button class="dropdown-item" type="submit">Log out</button>
               </form>

diff --git a/server/settings/environments/development.py b/server/settings/environments/development.py
@@ -79,6 +79,7 @@ def _custom_show_toolbar(request):
     'cdnjs.cloudflare.com',
     'maxcdn.bootstrapcdn.com',
     'cdn.jsdelivr.net',
+    'unpkg.com',
 )
 CSP_IMG_SRC = (
     "'self'",
@@ -101,6 +102,7 @@ def _custom_show_toolbar(request):
     'maxcdn.bootstrapcdn.com',
     'netdna.bootstrapcdn.com',
     'cdn.jsdelivr.net',
+    'unpkg.com',
 )
 
 # nplusone

diff --git a/static/js/tour.js b/static/js/tour.js
@@ -0,0 +1,124 @@
+$(function () {
+  // Set a few things up
+  function openDropdown(selector) {
+    let element = $(selector)
+    if (!element.hasClass("show")) {
+      element.find('.dropdown-toggle').dropdown('toggle');
+    }
+    return element;
+  }
+
+  function closeDropdown(selector) {
+    let element = $(selector)
+    if (element.hasClass("show")) {
+      element.find('.dropdown-toggle').dropdown('toggle');
+    }
+    return element;
+  }
+
+  // Set up the steps
+  const steps = [
+    {
+      content: "Welcome ot the AutSPACEs platform!<br/></br>Please take a few minutes to go through our introductory tour.",
+      title: "Welcome",
+      target: undefined,
+      order: 0,
+      group: "main"
+    },
+    {
+      content: "AutSPACEs is all about providing a platform for autistic people to share stories.",
+      title: "AutSPACEs",
+      target: ".title-text",
+      order: 1,
+      group: "main"
+    },
+    {
+      content: "Before submitting a story, please make sure you read our Code of Conduct carefully. It will only take a few minutes. Once you\'ve read it, press your browser\'s \`back\` button to return to this tour.",
+      title: "Code of conduct",
+      target: "#nav-coc",
+      order: 2,
+      group: "main"
+    },
+    {
+      content: "A good place to start is by reading others\'s stories to get an idea of what\'s already here. Select the \'Experiences\' item now to open the experiences submienu.",
+      title: "Experiences",
+      target: "#nav-experiences",
+      order: 3,
+      group: "main"
+    },
+    {
+      content: "A good place to start is by reading others\'s stories to get an idea of what\'s already here. Select the \'View Stories\' option under the \'Experiences\' item to check them out.",
+      title: "View",
+      target: "#nav-experiences-view",
+      order: 4,
+      group: "main",
+      beforeEnter: async () => {
+        return new Promise(async (resolve) => {
+          openDropdown('#nav-experiences');
+          return resolve(true);
+        })
+      },
+      beforeLeave: async () => {
+        return new Promise(async (resolve) => {
+          closeDropdown('#nav-experiences');
+          return resolve(true);
+        })
+      }
+    },
+    {
+      content: "Before you submit your first experience, please take the time to fill out your details in the user profile. To open your profile select the Account menu.",
+      title: "Account",
+      target: "#nav-account",
+      order: 5,
+      group: "main"
+    },
+    {
+      content: "Select the profile menu entry to view and edit your profile.",
+      title: "Profile",
+      target: "#nav-account-profile",
+      order: 6,
+      group: "main",
+      beforeEnter: async () => {
+        return new Promise(async (resolve) => {
+          openDropdown('#nav-account');
+          return resolve(true);
+        })
+      },
+      beforeLeave: async () => {
+        return new Promise(async (resolve) => {
+          closeDropdown('#nav-account');
+          return resolve(true);
+        })
+      }
+    },
+    {
+      content: "AutSPACEs is co-developed with our community. We\'d love for you to be involved too. Whatever your skills we can use them, from research to design to documentation to development to discussion. Find out more here.",
+      title: "Get involved",
+      target: "#cta",
+      order: 7,
+      group: "main"
+    },
+    {
+      content: "That\s it! We hope you find the AutSPACEs platform useful and we look forward to helping share your experiences.",
+      title: "Finish",
+      target: undefined,
+      order: 8,
+      group: "main"
+    },
+  ];
+
+  // Initialise the tour
+  const tg =  new tourguide.TourGuideClient({
+    steps: steps,
+  });
+
+  // Ensure the dialog is above the backdrop
+  tg.setOptions({
+    dialogZ: 1002
+  });
+
+  tg.start();
+
+  // Bootstrap places its menus at z-index 1000, the backdrop should be above this
+  tg.backdrop.style.zIndex = "1001";
+});