some code cleanup

LinkedInAttic · Jul 31, 2012 · f2e1b89 · f2e1b89
1 parent a9ac625
commit f2e1b89
Show file tree

Hide file tree

Showing 5 changed files with 242 additions and 234 deletions.
diff --git a/index.html b/index.html
@@ -38,7 +38,7 @@ <h2 id="subheading" class="one two three">Content</h2>
         <li>Testing multi-page tours. Continue to the <a href="secondpage.html" id="secpagelink" title="hello tooltip">hopscotch</a> second page</li>
       </ul>
       <div class="img-container">
-        <img id="spiderman" src="http://i.imgur.com/0O8k3.png">
+        <img id="wave" src="http://i.imgur.com/s632o.jpg">
       </div>
       <div class="img-container">
         <img id="python" src="http://i.imgur.com/mIgyw.jpg">
@@ -77,6 +77,7 @@ <h3>Tour Options</h3>
         <input type="checkbox" id="showAsianStepNumsCheck"> showAsianStepNums
       </label>
       <br/>
+      <label>Go to step number: <input id="gototext" type="text" size="5"><input id="gotobtn" type="button" value="Go!"></label>
     </div>
     <!--
     <script src="js/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
@@ -92,50 +93,6 @@ <h3>Tour Options</h3>
       hopscotch.loadTour(tour);
       //hopscotch.clearCookie();
       hopscotch.startTour();
-
-      // ==========
-      // START TOUR
-      // ==========
-      if (document.body.addEventListener) {
-        document.getElementById('startBtn').addEventListener('click', function() {
-          hopscotch.loadTour(tour);
-          hopscotch.startTour();
-        });
-      }
-      else if (document.body.attachEvent) {
-        document.getElementById('startBtn').attachEvent('onclick', function() {
-          hopscotch.loadTour(tour);
-          hopscotch.startTour();
-        });
-      }
-
-      // ========
-      // END TOUR
-      // ========
-      if (document.body.addEventListener) {
-        document.getElementById('endBtn').addEventListener('click', function() {
-          hopscotch.endTour();
-        });
-      }
-      else if (document.body.attachEvent) {
-        document.getElementById('endBtn').attachEvent('onclick', function() {
-          hopscotch.endTour();
-        });
-      }
-
-      // ============
-      // CLEAR COOKIE
-      // ============
-      if (document.body.addEventListener) {
-        document.getElementById('clearCookieBtn').addEventListener('click', function() {
-          hopscotch.clearCookie();
-        });
-      }
-      else if (document.body.attachEvent) {
-        document.getElementById('clearCookieBtn').attachEvent('onclick', function() {
-          hopscotch.clearCookie();
-        });
-      }
     </script>
   </body>
 </html>
diff --git a/js/debug.js b/js/debug.js
@@ -11,6 +11,15 @@ var i,
       'showNextButton'
     ],
 
+addClickListener = function(el, fn) {
+  if (el.addEventListener) {
+    el.addEventListener('click', fn);
+  }
+  else {
+    el.attachEvent('onclick', fn);
+  }
+},
+
 attachListenerForOption = function(checkbox, optionName) {
   var fn = function() {
     var options = {};
@@ -25,12 +34,14 @@ attachListenerForOption = function(checkbox, optionName) {
   }
 };
 
+// BOOLEAN CONTROLS
 for (i = 0, len = booleanControls.length; i < len; i++) {
   optionName = booleanControls[i];
   checkbox = document.getElementById(optionName + 'Check');
   attachListenerForOption(checkbox, optionName);
 }
 
+// SHOW ASIAN STEP NUMS
 (function() {
   var checkbox = document.getElementById('showAsianStepNumsCheck'),
   fn = function() {
@@ -54,4 +65,36 @@ for (i = 0, len = booleanControls.length; i < len; i++) {
   else {
     checkbox.attachEvent('onchange', fn);
   }
-}())
+}());
+
+// GO TO STEP NUM
+(function() {
+  var gotobtn  = document.getElementById('gotobtn');
+  addClickListener(gotobtn, function() {
+    var gototext = document.getElementById('gototext');
+    hopscotch.showStep(parseInt(gototext.value, 10)-1);
+  });
+
+  // ==========
+  // START TOUR
+  // ==========
+  addClickListener(document.getElementById('startBtn'), function() {
+    hopscotch.loadTour(tour);
+    hopscotch.startTour();
+  });
+
+  // ========
+  // END TOUR
+  // ========
+  addClickListener(document.getElementById('endBtn'), function() {
+    hopscotch.endTour();
+  });
+
+  // ============
+  // CLEAR COOKIE
+  // ============
+  addClickListener(document.getElementById('clearCookieBtn'), function() {
+    hopscotch.clearCookie();
+  });
+
+}());
diff --git a/js/exampletour.js b/js/exampletour.js
@@ -35,34 +35,34 @@ var tour = {
           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.)',
           targetId: 'secpagelink',
           orientation: 'bottom',
-          showNextBtn: false,
+          showNextButton: false,
           multiPage: true
         },
         {
           title: 'Polar bears',
           content: 'We made it!! Polar bears are very interesting creatures.',
           targetId: 'polarbears',
           orientation: 'right',
-          showPrevBtn: false
+          showPrevButton: false
         },
         {
           title: 'Returning to the first page',
           content: 'Time to go back home... Please click this link to return to the first page.',
           targetId: 'firstpagelink',
           orientation: 'bottom',
-          showNextBtn: false,
-          showPrevBtn: false,
+          showNextButton: false,
+          showPrevButton: false,
           multiPage: true // this indicates that next step will be on a different page
         },
         {
-          title: 'Spider-man',
-          content: 'Here are some window cleaners dressed as Spider-man. Did you see the new Spider-man movie? It was pretty awesome, especially the part where Spider-man is fighting the Lizard on the bridge. I\'m pretty sure it\'s still showing. Why don\'t you <a href="http://www.fandango.com/theamazingspiderman_126975/movieoverview" target="_new">buy some tickets</a>?',
-          targetId: 'spiderman',
+          title: 'Cool wave',
+          content: 'This is a colorful wave. Here is the the <a href="http://imgur.com/s632o" target="_new">page</a> where I found it.',
+          targetId: 'wave',
           orientation: 'bottom',
           width: 500,
           xOffset: -50,
           arrowOffset: 400,
-          showPrevBtn: false
+          showPrevButton: false
         },
         {
           title: 'Python decorator',
@@ -93,8 +93,8 @@ var tour = {
       },
       */
       i18n: {
-        nextBtn: 'Go to Next',
-        prevBtn: 'Go Back A Bit',
+        nextBtn: 'Forward',
+        prevBtn: 'Backward',
         stepNums: [
           '&#x4e00;',
           '&#x4e8c;',

diff --git a/js/hopscotch-min.js b/js/hopscotch-min.js