https://sexualhealthrankings.com/dist/js/trjntour.js

1/* globals hopscotch: false */
2
3/* ============ */
4/* EXAMPLE TOUR */
5/* ============ */
6var tour = {
7  id: 'hello-trojan',
8  steps: [
9    {
10      target: 'tabs',
11      placement: 'top',
12      title: 'Interactive map and graph',
13      content: 'View the state rankings on a map or graph. Both are interactive and give you different options to view the data.'
14    },
15    {
16      target: 'tgtmap',
17      placement: 'bottom',
18      title: 'Play with the map',
19      content: 'Click or tap on a state to see its ranking and values for each of the indicators that make up the State by State Safer Sex Index.',
20    },
21     {
22      target: 'tgtgraph',
23      placement: 'bottom',
24      title: 'Play with the graph',
25      content: 'The graph shows how states are scored on the two dimensions of the State by State Safer Sex Index, and how those scores contribute to the overall rankings. States are plotted on the graph according to their scores on each dimension. Hover over a point to see a state\'\s scores and overall rank. Click/tap the bullet point to see state data values. Use the cursor to select an area of the chart to zoom in.',
26    },
27     {
28      target: 'map-and-graph',
29      placement: 'top',
30      title: 'Full size map and graph',
31      content: 'You can also open a larger view of the map and graph in a new window. In the full-size view, you can save the map and graph images for sharing or printing.'
32    },
33         {
34      target: 'sindicators',
35      placement: 'top',
36      title: 'Safer Sex Indicators',
37      content: 'Click/tap to view details about each indicator.',
38            xOffset: 'center',
39      arrowOffset: 'center'
40    },
41    {
42      target: 'safer-title',
43      placement: 'bottom',
44      title: 'You\'re all set!',
45      content: 'Now go and explore the rankings!',
46      xOffset: 'center',
47      arrowOffset: 'center'
48    }
49  ],
50  showPrevButton: true,
51  scrollTopMargin: 100
52},
53
54/* ========== */
55/* TOUR SETUP */
56/* ========== */
57addClickListener = function(el, fn) {
58  if (el.addEventListener) {
59    el.addEventListener('click', fn, false);
60  }
61  else {
62    el.attachEvent('onclick', fn);
63  }
64},
65
66init = function() {
67  var startBtnId = 'startTourBtn',
68      calloutId = '',
69      mgr = hopscotch.getCalloutManager(),
70      state = hopscotch.getState();
71
72  if (state && state.indexOf('hello-trojan:') === 0) {
73    // Already started the tour at some point!
74    hopscotch.startTour(tour);
75  }
76  else {
77    // Looking at the page for the first(?) time.
78    setTimeout(function() {
79      mgr.createCallout({
80        id: calloutId,
81        target: startBtnId,
82        placement: 'bottom',
83        display: 'none',
84        title: 'Take a tour?',
85        content: 'Find out about the features on this page.',
86        xOffset: 'center',
87        arrowOffset: 'center',
88        width: 200
89      });
90    }, 100);
91  }
92
93  addClickListener(document.getElementById(startBtnId), function() {
94    if (!hopscotch.isActive) {
95      mgr.removeAllCallouts();
96      hopscotch.startTour(tour);
97    }
98  });
99};
100
101init();