Add an example tour using Shepherd.js

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

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/shepherd.js@11.1.1/dist/js/shepherd.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/shepherd.js@11.1.1/dist/css/shepherd.css"/>

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>

static/js/tour.js

@@ -0,0 +1,237 @@
+import {offset} from 'https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.5.0/+esm';
+
+$(function () {
+  // Set a few things up
+  $('.dropdown').on('hide.bs.dropdown', function(e) {
+    return !!$(this).data('closable');
+  }).data('closable', true);
+
+  function setClosable(selector, closable) {
+    return $(selector).data('closable', closable);
+  }
+
+  function openDropdown(selector) {
+    let element = $(selector)
+    if (!element.hasClass("show")) {
+      element.find('.dropdown-toggle').dropdown('toggle');
+    }
+    return element;
+  }
+
+  // Initialise the tour
+  const tour = new Shepherd.Tour({
+    useModalOverlay: true,
+    defaultStepOptions: {
+      scrollTo: {
+        behavior: 'smooth',
+        block: 'center'
+      },
+      modalOverlayOpeningPadding: 2,
+      modalOverlayOpeningRadius: 16,
+      floatingUIOptions: { middleware: [offset({ mainAxis: 20, crossAxis: 0 })] }
+    }
+  });
+
+  // Add a tour step
+  tour.addStep({
+    id: 'welcome',
+    text: 'Welcome ot the AutSPACEs platform!<br/></br>Would you like to take a tour?',
+    buttons: [
+      {
+        text: 'No thank you',
+        action: tour.complete
+      },
+      {
+        text: 'Yes, let\'s go!',
+        action: tour.next
+      }
+    ]
+  });
+
+  // Add a tour step
+  tour.addStep({
+    id: 'explanation',
+    text: 'AutSPACEs is all about providing a platform for autistic people to share stories.',
+    attachTo: {
+      element: '.title-text',
+      on: 'bottom'
+    },
+    buttons: [
+      {
+        text: 'Back',
+        action: tour.back
+      },
+      {
+        text: 'Next',
+        action: tour.next
+      }
+    ]
+  });
+
+  // Add a tour step
+  tour.addStep({
+    id: 'code-of-conduct',
+    text: '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.',
+    attachTo: {
+      element: '#nav-coc',
+      on: 'bottom'
+    },
+    buttons: [
+      {
+        text: 'Back',
+        action: tour.back
+      },
+      {
+        text: 'Next',
+        action: tour.next
+      }
+    ]
+  });
+
+  // Add a tour step
+  tour.addStep({
+    id: 'experiences',
+    text: '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.',
+    attachTo: {
+      element: '#nav-experiences',
+      on: 'right-start'
+    },
+    advanceOn: {
+      selector: '#experienceDropdownMenuLink',
+      event: 'click'
+    },
+    buttons: [
+      {
+        text: 'Back',
+        action: tour.back
+      },
+      {
+        text: 'Next',
+        action: tour.next
+      }
+    ]
+  });
+
+  // Add a tour step
+  tour.addStep({
+    id: 'view',
+    text: '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.',
+    attachTo: {
+      element: '#nav-experiences-view',
+      on: 'right-start',
+    },
+    when: {
+      "before-show": function() {
+        setClosable('#nav-experiences', false);
+        openDropdown('#nav-experiences');
+      },
+      "before-hide": function() {
+        setClosable('#nav-experiences', true);
+      }
+    },
+    buttons: [
+      {
+        text: 'Back',
+        action: tour.back
+      },
+      {
+        text: 'Next',
+        action: tour.next
+      }
+    ]
+  });
+
+  // Add a tour step
+  tour.addStep({
+    id: 'account',
+    text: '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.',
+    attachTo: {
+      element: '#nav-account',
+      on: 'left-start'
+    },
+    advanceOn: {
+      selector: '#accountDropdownMenuLink',
+      event: 'click'
+    },
+    buttons: [
+      {
+        text: 'Back',
+        action: tour.back
+      },
+      {
+        text: 'Next',
+        action: tour.next
+      }
+    ]
+  });
+
+  // Add a tour step
+  tour.addStep({
+    id: 'profile',
+    text: 'Select the profile menu entry to view and edit your profile.',
+    attachTo: {
+      element: '#nav-account-profile',
+      on: 'left-start',
+    },
+    when: {
+      "before-show": function() {
+        setClosable('#nav-account', false);
+        openDropdown('#nav-account');
+      },
+      "before-hide": function() {
+        setClosable('#nav-account', true);
+      }
+    },
+    buttons: [
+      {
+        text: 'Back',
+        action: tour.back
+      },
+      {
+        text: 'Next',
+        action: tour.next
+      }
+    ]
+  });
+
+  // Add a tour step
+  tour.addStep({
+    id: 'get-involved',
+    text: '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.',
+    attachTo: {
+      element: '#cta',
+      on: 'top'
+    },
+    buttons: [
+      {
+        text: 'Back',
+        action: tour.back
+      },
+      {
+        text: 'Next',
+        action: tour.next
+      }
+    ]
+  });
+
+  // Add a tour step
+  tour.addStep({
+    id: 'finish',
+    text: 'That\s it! We hope you find the AutSPACEs platform useful and we look forward to helping share your experiences.',
+    buttons: [
+      {
+        text: 'Back',
+        action: tour.back
+      },
+      {
+        text: 'Finish',
+        action: tour.complete
+      }
+    ]
+  });
+
+  // Start the fans please!
+  tour.start();
+});
+
+