|
| 1 | +import {offset} from 'https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.5.0/+esm'; |
| 2 | + |
| 3 | +$(function () { |
| 4 | + // Set a few things up |
| 5 | + $('.dropdown').on('hide.bs.dropdown', function(e) { |
| 6 | + return !!$(this).data('closable'); |
| 7 | + }).data('closable', true); |
| 8 | + |
| 9 | + function setClosable(selector, closable) { |
| 10 | + return $(selector).data('closable', closable); |
| 11 | + } |
| 12 | + |
| 13 | + function openDropdown(selector) { |
| 14 | + let element = $(selector) |
| 15 | + if (!element.hasClass("show")) { |
| 16 | + element.find('.dropdown-toggle').dropdown('toggle'); |
| 17 | + } |
| 18 | + return element; |
| 19 | + } |
| 20 | + |
| 21 | + // Initialise the tour |
| 22 | + const tour = new Shepherd.Tour({ |
| 23 | + useModalOverlay: true, |
| 24 | + defaultStepOptions: { |
| 25 | + scrollTo: { |
| 26 | + behavior: 'smooth', |
| 27 | + block: 'center' |
| 28 | + }, |
| 29 | + modalOverlayOpeningPadding: 2, |
| 30 | + modalOverlayOpeningRadius: 16, |
| 31 | + floatingUIOptions: { middleware: [offset({ mainAxis: 20, crossAxis: 0 })] } |
| 32 | + } |
| 33 | + }); |
| 34 | + |
| 35 | + // Add a tour step |
| 36 | + tour.addStep({ |
| 37 | + id: 'welcome', |
| 38 | + text: 'Welcome ot the AutSPACEs platform!<br/></br>Would you like to take a tour?', |
| 39 | + buttons: [ |
| 40 | + { |
| 41 | + text: 'No thank you', |
| 42 | + action: tour.complete |
| 43 | + }, |
| 44 | + { |
| 45 | + text: 'Yes, let\'s go!', |
| 46 | + action: tour.next |
| 47 | + } |
| 48 | + ] |
| 49 | + }); |
| 50 | + |
| 51 | + // Add a tour step |
| 52 | + tour.addStep({ |
| 53 | + id: 'explanation', |
| 54 | + text: 'AutSPACEs is all about providing a platform for autistic people to share stories.', |
| 55 | + attachTo: { |
| 56 | + element: '.title-text', |
| 57 | + on: 'bottom' |
| 58 | + }, |
| 59 | + buttons: [ |
| 60 | + { |
| 61 | + text: 'Back', |
| 62 | + action: tour.back |
| 63 | + }, |
| 64 | + { |
| 65 | + text: 'Next', |
| 66 | + action: tour.next |
| 67 | + } |
| 68 | + ] |
| 69 | + }); |
| 70 | + |
| 71 | + // Add a tour step |
| 72 | + tour.addStep({ |
| 73 | + id: 'code-of-conduct', |
| 74 | + 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.', |
| 75 | + attachTo: { |
| 76 | + element: '#nav-coc', |
| 77 | + on: 'bottom' |
| 78 | + }, |
| 79 | + buttons: [ |
| 80 | + { |
| 81 | + text: 'Back', |
| 82 | + action: tour.back |
| 83 | + }, |
| 84 | + { |
| 85 | + text: 'Next', |
| 86 | + action: tour.next |
| 87 | + } |
| 88 | + ] |
| 89 | + }); |
| 90 | + |
| 91 | + // Add a tour step |
| 92 | + tour.addStep({ |
| 93 | + id: 'experiences', |
| 94 | + 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.', |
| 95 | + attachTo: { |
| 96 | + element: '#nav-experiences', |
| 97 | + on: 'right-start' |
| 98 | + }, |
| 99 | + advanceOn: { |
| 100 | + selector: '#experienceDropdownMenuLink', |
| 101 | + event: 'click' |
| 102 | + }, |
| 103 | + buttons: [ |
| 104 | + { |
| 105 | + text: 'Back', |
| 106 | + action: tour.back |
| 107 | + }, |
| 108 | + { |
| 109 | + text: 'Next', |
| 110 | + action: tour.next |
| 111 | + } |
| 112 | + ] |
| 113 | + }); |
| 114 | + |
| 115 | + // Add a tour step |
| 116 | + tour.addStep({ |
| 117 | + id: 'view', |
| 118 | + 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.', |
| 119 | + attachTo: { |
| 120 | + element: '#nav-experiences-view', |
| 121 | + on: 'right-start', |
| 122 | + }, |
| 123 | + when: { |
| 124 | + "before-show": function() { |
| 125 | + setClosable('#nav-experiences', false); |
| 126 | + openDropdown('#nav-experiences'); |
| 127 | + }, |
| 128 | + "before-hide": function() { |
| 129 | + setClosable('#nav-experiences', true); |
| 130 | + } |
| 131 | + }, |
| 132 | + buttons: [ |
| 133 | + { |
| 134 | + text: 'Back', |
| 135 | + action: tour.back |
| 136 | + }, |
| 137 | + { |
| 138 | + text: 'Next', |
| 139 | + action: tour.next |
| 140 | + } |
| 141 | + ] |
| 142 | + }); |
| 143 | + |
| 144 | + // Add a tour step |
| 145 | + tour.addStep({ |
| 146 | + id: 'account', |
| 147 | + 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.', |
| 148 | + attachTo: { |
| 149 | + element: '#nav-account', |
| 150 | + on: 'left-start' |
| 151 | + }, |
| 152 | + advanceOn: { |
| 153 | + selector: '#accountDropdownMenuLink', |
| 154 | + event: 'click' |
| 155 | + }, |
| 156 | + buttons: [ |
| 157 | + { |
| 158 | + text: 'Back', |
| 159 | + action: tour.back |
| 160 | + }, |
| 161 | + { |
| 162 | + text: 'Next', |
| 163 | + action: tour.next |
| 164 | + } |
| 165 | + ] |
| 166 | + }); |
| 167 | + |
| 168 | + // Add a tour step |
| 169 | + tour.addStep({ |
| 170 | + id: 'profile', |
| 171 | + text: 'Select the profile menu entry to view and edit your profile.', |
| 172 | + attachTo: { |
| 173 | + element: '#nav-account-profile', |
| 174 | + on: 'left-start', |
| 175 | + }, |
| 176 | + when: { |
| 177 | + "before-show": function() { |
| 178 | + setClosable('#nav-account', false); |
| 179 | + openDropdown('#nav-account'); |
| 180 | + }, |
| 181 | + "before-hide": function() { |
| 182 | + setClosable('#nav-account', true); |
| 183 | + } |
| 184 | + }, |
| 185 | + buttons: [ |
| 186 | + { |
| 187 | + text: 'Back', |
| 188 | + action: tour.back |
| 189 | + }, |
| 190 | + { |
| 191 | + text: 'Next', |
| 192 | + action: tour.next |
| 193 | + } |
| 194 | + ] |
| 195 | + }); |
| 196 | + |
| 197 | + // Add a tour step |
| 198 | + tour.addStep({ |
| 199 | + id: 'get-involved', |
| 200 | + 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.', |
| 201 | + attachTo: { |
| 202 | + element: '#cta', |
| 203 | + on: 'top' |
| 204 | + }, |
| 205 | + buttons: [ |
| 206 | + { |
| 207 | + text: 'Back', |
| 208 | + action: tour.back |
| 209 | + }, |
| 210 | + { |
| 211 | + text: 'Next', |
| 212 | + action: tour.next |
| 213 | + } |
| 214 | + ] |
| 215 | + }); |
| 216 | + |
| 217 | + // Add a tour step |
| 218 | + tour.addStep({ |
| 219 | + id: 'finish', |
| 220 | + text: 'That\s it! We hope you find the AutSPACEs platform useful and we look forward to helping share your experiences.', |
| 221 | + buttons: [ |
| 222 | + { |
| 223 | + text: 'Back', |
| 224 | + action: tour.back |
| 225 | + }, |
| 226 | + { |
| 227 | + text: 'Finish', |
| 228 | + action: tour.complete |
| 229 | + } |
| 230 | + ] |
| 231 | + }); |
| 232 | + |
| 233 | + // Start the fans please! |
| 234 | + tour.start(); |
| 235 | +}); |
| 236 | + |
| 237 | + |
0 commit comments