Create helpers API for callbacks

index.html

@@ -100,39 +100,9 @@ <h3>Tour Options</h3>
     <!--<script src="js/jquery-1.7.2.js"></script>-->
     <!--<script src="js/hopscotch_jquery.js"></script>-->
     <script src="js/hopscotch-0.0.5.js"></script>
+    <script src="js/li_helpers.js"></script>
     <script src="js/exampletour.js"></script>
     <script src="js/debug.js"></script>
-    <script>
-      //hopscotch.clearCookie();
-      var printLog = function(str) {
-        var el = document.getElementById('debug-output'),
-            newEl = document.createElement('p');
-        if (el) {
-          newEl.innerHTML = str;
-          el.appendChild(newEl);
-        }
-        else {
-          console.log(str);
-        }
-      },
-      onStart = function(tourId) {
-        printLog('global start ' + tourId);
-      },
-      onEnd = function(tourId) {
-        printLog('global end ' + tourId);
-      },
-      onNext = function(tourId, stepNum) {
-        printLog('global next ' + tourId + ' ' + stepNum);
-      },
-      onPrev = function(tourId, stepNum) {
-        printLog('global prev ' + tourId + ' ' + stepNum);
-      };
-      hopscotch.listen('start', onStart)
-               .listen('end', onEnd)
-               .listen('next', onNext)
-               .listen('prev', onPrev);
-
-      hopscotch.startTour(tour);
-    </script>
+    <script src="js/toursetup.js"></script>
   </body>
 </html>

js/exampletour.js

@@ -51,23 +51,25 @@ var tour = {
       title: 'Multi-page test',
       content: 'Are you ready? We\'re going to try hopping to another page and then back!!! Where we\'re going, we won\'t need roads... (Please click this link.)',
       target: 'secpagelink',
-      orientation: 'bottom',
-      showNextButton: false,
+      orientation: 'right',
+      yOffset: -20,
+      onNext: ["goTo", "secondpage.html"],
       multipage: true
     },
     {
       title: 'Polar bears',
       content: 'We made it!! Polar bears are very interesting creatures.',
       target: 'polarbears',
-      orientation: 'right',
+      orientation: 'right'
       //showPrevButton: false
     },
     {
       title: 'Returning to the first page',
       content: 'Time to go back home... Please click this link to return to the first page.',
       target: 'firstpagelink',
       orientation: 'bottom',
-      showNextButton: false,
+      //showNextButton: false,
+      onNext: ['goTo', 'index.html'],
       //showPrevButton: false,
       multipage: true // this indicates that next step will be on a different page
     },
@@ -88,6 +90,13 @@ var tour = {
   scrollDuration: 500,
   cookieName: 'li_hs',
   skipIfNoElement: true,
+  onStart: ['printlog', 'tour-onstart: start'],
+  onNext: ['printlog', 'clicked next'],
+  onPrev: ['printlog', 'clicked prev'],
+  onShow: ['printlog', 'showing'],
+  onClose: [['printlog', 'clicked close'], ['alert', 'closing the tour']],
+  onEnd: ['printlog', 'end']
+  /*
   onNext: function(tourId, idx) {
     var newLi,
         list = document.getElementById('my-list');
@@ -123,6 +132,7 @@ var tour = {
   onClose: function() {
     printLog('closing');
   }
+  */
   //i18n: {
     ////nextBtn: 'Forward',
     ////prevBtn: 'Backward',