From 0e11aa8f776b9e8b61887b0d029962fc17e9ffde Mon Sep 17 00:00:00 2001
From: Gordon Koo <gordon@gordonkoo.com>
Date: Tue, 24 Jul 2012 10:31:36 -0700
Subject: [PATCH] Get rid of Hopscotch Manager

add nav buttons for bubble
add some positioning utils
---
 css/hopscotch.less |  12 +-
 css/util.less      |   7 +
 index.html         |  52 +++---
 js/hopscotch.js    | 426 ++++++++++++++++++++++++++++-----------------
 4 files changed, 310 insertions(+), 187 deletions(-)

diff --git a/css/hopscotch.less b/css/hopscotch.less
index 8a19a7e9..6fd865fe 100644
--- a/css/hopscotch.less
+++ b/css/hopscotch.less
@@ -2,8 +2,8 @@
 
 @anim-duration: .5s;
 
-#hopscotch-bubble {
-  background-color: #eee;
+div#hopscotch-bubble {
+  background-color: #fff;
   border: 1px solid #000;
   padding: 20px;
   position: absolute;
@@ -12,4 +12,12 @@
   &.animate {
     .transition('top, left', @anim-duration, ease-in-out);
   }
+
+  .round-corners;
+
+  .hopscotch-nav-button {
+    &.hide {
+      display: none;
+    }
+  }
 }
diff --git a/css/util.less b/css/util.less
index 73350eec..7eabb85b 100644
--- a/css/util.less
+++ b/css/util.less
@@ -1,3 +1,10 @@
+.round-corners (@radius: 5px) {
+  -moz-border-radius: @radius;
+  -ms-border-radius: @radius;
+  -o-border-radius: @radius;
+  -webkit-border-radius: @radius;
+  border-radius: @radius;
+}
 .transition (@property, @duration, @timing) {
   -moz-transition-property: @property;
   -moz-transition-duration: @duration;
diff --git a/index.html b/index.html
index 55de4377..6576cd7f 100644
--- a/index.html
+++ b/index.html
@@ -38,45 +38,40 @@ <h2 id="subheading" class="one two three">Content</h2>
         <li>Welcome to my hopscotch test page</li>
         <li>Welcome to myWelcome to myWelcome to myWelcome to my Welcom   Welcom   Welcom   Welcom       Welcom    Welcome to my <a href="#" id="tooltiptest" title="hello tooltip">hopscotch</a> test page</li>
       </ul>
-      <div id="spiderman" class="img-container">
-        <img src="http://i.imgur.com/0O8k3.png">
+      <div class="img-container">
+        <img id="spiderman" src="http://i.imgur.com/0O8k3.png">
       </div>
-      <div id="python" class="img-container">
-        <img src="http://i.imgur.com/mIgyw.jpg">
+      <div class="img-container">
+        <img id="python" src="http://i.imgur.com/mIgyw.jpg">
       </div>
-      <div id="mission" class="img-container">
-        <img src="http://cdn.theatlanticcities.com/img/upload/2012/07/19/20120719-mission1/largest.jpg">
+      <div class="img-container">
+        <img id="mission" src="http://cdn.theatlanticcities.com/img/upload/2012/07/19/20120719-mission1/largest.jpg">
       </div>
     </div>
     <div id="debug">
       <input id="startBtn" type="button" value="Start">
-      <input id="prevStepBtn" type="button" value="Prev">
-      <input id="nextStepBtn" type="button" value="Next">
-      <input id="scrollTopBtn" type="button" value="Alert Scroll Top">
     </div>
-    <!--
     <script src="js/jquery-1.7.2.js"></script>
+    <!--
     <script src="bootstrap/js/bootstrap-tooltip.js""></script>
     <script src="bootstrap/js/bootstrap-popover.js""></script>
     -->
     <script src="js/hopscotch.js"></script>
     <script>
-      var hopscotch = hopscotchManager.getInstance();
-          /*
-          tours = [
+      var tours = [
             {
               id: 'hello-hopscotch',
               steps: [
                 {
                   title: 'Here\'s my first step.',
-                  content: 'Here is the content. Here is a <a href="http://www.google.com">link</a>.',
-                  targetSelector: '#subheading',
+                  content: 'Here is the content. Here is the content. Here is the content. Here is the content. Here is the content. Here is the content. Here is the content. Here is the content. Here is the content. Here is the content. Here is the content. Here is a <a href="http://www.google.com">link</a>.',
+                  targetId: 'subheading',
                   orientation: 'bottom'
                 },
                 {
                   title: 'Here\'s my second step.',
                   content: 'Here is the content.',
-                  targetSelector: '#my-list li',
+                  targetId: 'my-list',
                   orientation: 'top',
                   width: 320,
                   height: 480
@@ -84,55 +79,54 @@ <h2 id="subheading" class="one two three">Content</h2>
                 {
                   title: 'Spider-man',
                   content: 'Here are some window cleaners dressed as spider-man',
-                  targetSelector: '#spiderman img',
-                  orientation: 'left'
+                  targetId: 'spiderman',
+                  orientation: 'bottom'
                 },
                 {
                   title: 'Python decorator',
                   content: 'Here\'s an example of a python decorator',
-                  targetSelector: '#python img',
+                  targetId: 'python',
                   orientation: 'right'
                 },
                 {
                   title: 'Mission district',
                   content: 'Some sort of sound heat map in the mission?',
-                  targetSelector: '#mission img',
-                  orientation: 'top',
-                  xOffset: 30
+                  targetId: 'mission',
+                  orientation: 'left'
                 }
               ]
             }
           ];
-      hopscotch.setOptions({
-        animate: true
+      hopscotch.configure({
+        animate: true,
+        showNavButtons: true
       });
-      //hopscotch.startTour(tours[0]);
       if (document.body.addEventListener) {
         document.getElementById('startBtn').addEventListener('click', function() {
           hopscotch.startTour(tours[0]);
         });
+        /*
         document.getElementById('prevStepBtn').addEventListener('click', function() {
           hopscotch.prevStep();
         });
         document.getElementById('nextStepBtn').addEventListener('click', function() {
           hopscotch.nextStep();
         });
+        */
       }
       else if (document.body.attachEvent) {
         document.getElementById('startBtn').attachEvent('onclick', function() {
           hopscotch.startTour(tours[0]);
         });
+        /*
         document.getElementById('prevStepBtn').attachEvent('onclick', function() {
           hopscotch.prevStep();
         });
         document.getElementById('nextStepBtn').attachEvent('onclick', function() {
           hopscotch.nextStep();
         });
-        document.getElementById('scrollTopBtn').attachEvent('onclick', function() {
-          alert(document.body.scrollTop);
-        });
+        */
       }
-      */
     </script>
     <!--
     <script>
diff --git a/js/hopscotch.js b/js/hopscotch.js
index 89199d9e..bea5cad5 100644
--- a/js/hopscotch.js
+++ b/js/hopscotch.js
@@ -5,29 +5,41 @@
  *
  * Require jQuery only when browser is IE<8?
  * support > 1 bubble at a time?
- *
- * Feature ideas:
- * ==============
  * offset for steps, to allow for manual position correction
  *
+ * TODO:
+ * =====
+ * scrollTo
+ * - If target or bubble is offscreen
+ * need to factor in pageXOffset as well
+ * event listener for window resize? (to reposition bubble);
+ * close button
+ * test css conflicts on different sites
+ *
  */
 
 (function() {
-  var HopscotchManager,
+  var Hopscotch,
       HopscotchBubble,
       utils,
-      context = typeof window !== 'undefined' ? window : exports,
-      hasBoundingClientRect = typeof document.body.getBoundingClientRect !== 'undefined';
+      context             = (typeof window !== 'undefined') ? window : exports,
+      hasAddEventListener = typeof document.body.addEventListener !== 'undefined',
+      hasJquery           = (typeof jQuery !== 'undefined');
 
-  if (context.hopscotchManager) {
-    // Hopscotch Manager already exists.
+  if (context.hopscotch) {
+    // Hopscotch already exists.
     return;
   }
 
   utils = {
+    /**
+     * addClass
+     * ========
+     * Adds a class to a DOM element.
+     */
     addClass: function(domEl, classToAdd) {
       var domClasses,
-          i, len, found = false;
+          i, len;
 
       if (domEl.className.length === 0) {
         domEl.className = classToAdd;
@@ -46,7 +58,7 @@
 
     removeClass: function(domEl, classToRemove) {
       var domClasses = domEl.className.split(' '),
-          i, len, found = false;
+          i, len;
 
       for (i = 0, len = domClasses.length; i < len; ++i) {
         if (domClasses[i] === classToRemove) {
@@ -60,7 +72,7 @@
       }
     },
 
-    extractPixelValue: function(val) {
+    getPixelValue: function(val) {
       switch(typeof val) {
         case 'undefined':
           return 0;
@@ -75,19 +87,132 @@
 
     getValueOrDefault: function(val, valDefault) {
       return typeof val !== 'undefined' ? val : valDefault;
+    },
+
+    getScrollTop: function() {
+      if (typeof window.pageYOffset !== 'undefined') {
+        return window.pageYOffset;
+      }
+      else {
+        // Most likely IE <=8, which doesn't support pageYOffset
+        return document.documentElement.scrollTop;
+      }
+    },
+
+    getScrollLeft: function() {
+      if (typeof window.pageXOffset !== 'undefined') {
+        return window.pageXOffset;
+      }
+      else {
+        // Most likely IE <=8, which doesn't support pageXOffset
+        return document.documentElement.scrollLeft;
+      }
+    },
+
+    getWindowHeight: function() {
+      if (window.innerHeight) {
+        return window.innerHeight;
+      }
+      else {
+        return document.documentElement.clientHeight;
+      }
+    },
+
+    getWindowWidth: function() {
+      if (window.innerWidth) {
+        return window.innerWidth;
+      }
+      else {
+        return document.documentElement.clientWidth;
+      }
     }
   };
 
   HopscotchBubble = function(opt) {
+    var createButton = function(id, text) {
+      var btnEl = document.createElement('input');
+      btnEl.setAttribute('id', id);
+      btnEl.setAttribute('type', 'button');
+      btnEl.setAttribute('value', text);
+      utils.addClass(btnEl, 'hopscotch-nav-button');
+      return btnEl;
+    },
+
+    /**
+     * adjustWindowScroll
+     * ==================
+     * Checks if the bubble or target element is partially or completely
+     * outside of the viewport. If it is, adjust the window scroll position
+     * to bring it back into the viewport.
+     */
+    adjustWindowScroll = function(top, left, boundingRect) {
+      console.log('top: ' + top);
+      console.log('left: ' + left);
+      console.log('bR.top: ' + boundingRect.top);
+      console.log('bR.left: ' + boundingRect.left);
+      console.log(utils.getScrollTop());
+      console.log(utils.getScrollLeft());
+    };
+
     this.init = function() {
-      this.element   = document.createElement('div');
+      var el         = document.createElement('div');
+
+      this.element   = el;
       this.titleEl   = document.createElement('h3');
       this.contentEl = document.createElement('p');
 
-      this.element.setAttribute('id', 'hopscotch-bubble');
-      this.element.appendChild(this.titleEl);
-      this.element.appendChild(this.contentEl);
-      document.body.appendChild(this.element);
+      el.setAttribute('id', 'hopscotch-bubble');
+      el.appendChild(this.titleEl);
+      el.appendChild(this.contentEl);
+
+      if (this.showNavButtons) {
+        this.initNavButtons();
+      }
+
+      document.body.appendChild(el);
+    };
+
+    this.initNavButtons = function() {
+      var buttonsEl  = document.createElement('div');
+
+      this.prevBtnEl = createButton('hopscotch-prev', 'Prev');
+      this.nextBtnEl = createButton('hopscotch-next', 'Next');
+
+      buttonsEl.setAttribute('id', 'hopscotch-actions');
+      buttonsEl.appendChild(this.prevBtnEl);
+      buttonsEl.appendChild(this.nextBtnEl);
+      this.buttonsEl = buttonsEl;
+
+      if (hasAddEventListener) {
+        this.prevBtnEl.addEventListener('click', function() {
+          context.hopscotch.prevStep();
+        });
+        this.nextBtnEl.addEventListener('click', function() {
+          context.hopscotch.nextStep();
+        });
+      }
+
+      this.element.appendChild(buttonsEl);
+    };
+
+    this.renderStep = function(step, btnToHide) {
+      var self = this;
+      if (step.title) { this.setTitle(step.title); }
+      if (step.content) { this.setContent(step.content); }
+
+      utils.removeClass(this.prevBtnEl, 'hide');
+      utils.removeClass(this.nextBtnEl, 'hide');
+      if (btnToHide === 'prev') {
+        utils.addClass(this.prevBtnEl, 'hide');
+      }
+      else if (btnToHide === 'next') {
+        utils.addClass(this.nextBtnEl, 'hide');
+      }
+
+      // Timeout to get correct height of bubble.
+      setTimeout(function() {
+        self.setPosition(step);
+      }, 10);
     };
 
     this.setTitle = function(titleStr) {
@@ -127,57 +252,56 @@
       var bubbleWidth,
           bubbleHeight,
           bubblePadding,
-          targetElBoundBox,
+          boundingRect,
           top,
           left,
-          targetEl = document.querySelector(step.targetSelector),
-          scrollPos = window.pageYOffset,
+          targetEl = document.getElementById(step.targetId),
           el = this.element;
 
-      bubbleWidth = utils.extractPixelValue(step.width) || this.defaultWidth;
+      bubbleWidth = utils.getPixelValue(step.width) || this.defaultWidth;
       bubblePadding = utils.getValueOrDefault(step.padding, 10);
 
-      if (typeof scrollPos === 'undefined') {
-        // Most likely IE <=8, which doesn't support pageYOffset
-        scrollPos = document.documentElement.scrollTop;
-      }
-      if (hasBoundingClientRect) {
-        boundingRect = targetEl.getBoundingClientRect();
-        if (step.orientation === 'top') {
-          bubbleHeight = el.offsetHeight;
-          top = (boundingRect.top - bubbleHeight);
-          left = boundingRect.left;
-        }
-        else if (step.orientation === 'bottom') {
-          top = boundingRect.bottom;
-          left = boundingRect.left;
-        }
-        else if (step.orientation === 'left') {
-          top = boundingRect.top;
-          left = boundingRect.left - bubbleWidth - 2*bubblePadding;
-        }
-        else if (step.orientation === 'right') {
-          top = boundingRect.top;
-          left = boundingRect.right;
-        }
-        else {
-          throw "Invalid bubble orientation: " + step.orientation + ". Valid orientations are: top, bottom, left, right.";
-        }
+      // SET POSITION
+      boundingRect = targetEl.getBoundingClientRect();
+      if (step.orientation === 'top') {
+        bubbleHeight = el.offsetHeight;
+        top = (boundingRect.top - bubbleHeight);
+        left = boundingRect.left;
+      }
+      else if (step.orientation === 'bottom') {
+        top = boundingRect.bottom;
+        left = boundingRect.left;
+      }
+      else if (step.orientation === 'left') {
+        top = boundingRect.top;
+        left = boundingRect.left - bubbleWidth - 2*bubblePadding;
+      }
+      else if (step.orientation === 'right') {
+        top = boundingRect.top;
+        left = boundingRect.right;
+      }
+      else {
+        throw "Invalid bubble orientation: " + step.orientation + ". Valid orientations are: top, bottom, left, right.";
       }
 
+      // SET OFFSETS
       if (step.xOffset) {
-        left += utils.extractPixelValue(step.xOffset);
+        left += utils.getPixelValue(step.xOffset);
       }
       if (step.yOffset) {
-        top += utils.extractPixelValue(step.yOffset);
+        top += utils.getPixelValue(step.yOffset);
       }
 
-      top += scrollPos; // adjust for scroll
+      // ADJUST TOP FOR SCROLL POSITION
+      top += utils.getScrollTop();
+      left += utils.getScrollLeft();
 
       el.style.top = top + 'px';
       el.style.left = left + 'px';
       el.style.width = bubbleWidth + 'px';
       el.style.padding = bubblePadding + 'px';
+
+      adjustWindowScroll(top, left, boundingRect);
     };
 
     /**
@@ -196,122 +320,112 @@
      * only after the element is created.
      */
     this.initAnimate = function() {
-      if (this.animate) {
-        utils.addClass(this.element, 'animate');
-      }
+      utils.addClass(this.element, 'animate');
     };
 
     this.defaultWidth = utils.getValueOrDefault(opt.bubbleWidth, 280);
     this.defaultPadding = utils.getValueOrDefault(opt.bubblePadding, 20);
-    this.animate = opt.animate;
+    this.showNavButtons = opt.showNavButtons;
 
     this.init();
   };
 
-  HopscotchManager = function() {};
-  HopscotchManager.prototype = {
-
-    getInstance: function() {
-
-      if (!this._hopscotchInstance) {
-        this._hopscotchInstance = {
-          // PUBLIC METHODS
-          /**
-           * loadTours
-           * =========
-           * Accepts an array of tours defined as JSON objects.
-           */
-          loadTours: function(tours) {
-            this._tours = tours;
-          },
-
-          getTourById: function(id) {
-            var i, len, tour;
-            for (i=0, len=this._tours.length; i<len; ++i) {
-              if (this._tours[i].id === id) {
-                return this._tours[i];
-              }
-            }
-          },
-
-          startTour: function(tour) {
-            var self = this;
-            this._currTour = tour;
-            this.currStep = 0;
-            this.showStep(this.currStep);
-            setTimeout(function() {
-              self._getBubble().initAnimate();
-            }, 50);
-          },
-
-          showStep: function(stepIdx) {
-            var step,
-                targetEl,
-                targetElBoundBox,
-                bubbleEl;
-
-            if (!this._currTour) {
-              throw "No tour currently selected!";
-            }
-
-            step = this._currTour.steps[stepIdx];
-            bubble = this._getBubble();
-
-            // Update bubble for current step
-            bubble.setTitle(step.title);
-            bubble.setContent(step.content);
-            setTimeout(function() {
-              bubble.setPosition(step);
-            }, 10);
-          },
-
-          prevStep: function() {
-            if (this.currStep <= 0) {
-              // TODO: all done!
-              alert('at the first step. can\'t go back any further.');
-            }
-            else {
-              this.showStep(--this.currStep);
-            }
-          },
-
-          nextStep: function() {
-            if (!this._currTour) {
-              throw "No tour was selected prior to calling nextStep!";
-            }
-            if (this.currStep >= this._currTour.steps.length-1) {
-              // TODO: all done!
-              alert('all done!');
-            }
-            else {
-              this.showStep(++this.currStep);
-            }
-          },
-
-          setOptions: function(opt) {
-            this._opt = opt;
-          },
-
-          // PRIVATE METHODS
-          /**
-           * _getBubble
-           * ==========
-           * Retrieves the "singleton" bubble div or creates it
-           * if it doesn't exist yet.
-           */
-          _getBubble: function() {
-            if (!this._bubble) {
-              this._bubble = new HopscotchBubble(this._opt);
-            }
-
-            return this._bubble;
-          },
-        };
-      }
-      return this._hopscotchInstance;
-    }
+  Hopscotch = function() {
+    var bubble,
+        opt,
 
+    /**
+     * getBubble
+     * ==========
+     * Retrieves the "singleton" bubble div or creates it
+     * if it doesn't exist yet.
+     */
+    getBubble = function() {
+      if (!bubble) {
+        bubble = new HopscotchBubble(opt);
+      }
+
+      return bubble;
+    };
+
+    // PUBLIC METHODS
+    /**
+     * loadTours
+     * =========
+     * Accepts an array of tours defined as JSON objects.
+     */
+    this.loadTours = function(tours) {
+      this._tours = tours;
+    };
+
+    this.getTourById = function(id) {
+      var i, len;
+      for (i=0, len=this._tours.length; i<len; ++i) {
+        if (this._tours[i].id === id) {
+          return this._tours[i];
+        }
+      }
+    };
+
+    this.startTour = function(tour) {
+      var self = this;
+      this._currTour = tour;
+      this.currStepIdx = 0;
+      this.showStep(this.currStepIdx);
+      if (opt.animate) {
+        setTimeout(function() {
+          getBubble().initAnimate();
+        }, 50);
+      }
+    };
+
+    this.showStep = function(stepIdx) {
+      var step = this._currTour.steps[stepIdx],
+          numTourSteps = this._currTour.steps.length,
+          btnToHide = null;
+
+      if (!this._currTour) {
+        throw "No tour currently selected!";
+      }
+
+      // Update bubble for current step
+      this.currStepIdx = stepIdx;
+      if (stepIdx === 0) {
+        btnToHide = 'prev';
+      }
+      else if (stepIdx === numTourSteps - 1) {
+        btnToHide = 'next';
+      }
+      getBubble().renderStep(step, btnToHide);
+    };
+
+    this.prevStep = function() {
+      if (this.currStepIdx <= 0) {
+        // TODO: all done!
+        alert('at the first step. can\'t go back any further.');
+      }
+      else {
+        this.showStep(--this.currStepIdx);
+      }
+    };
+
+    this.nextStep = function() {
+      if (!this._currTour) {
+        throw "No tour was selected prior to calling nextStep!";
+      }
+      if (this.currStepIdx >= this._currTour.steps.length-1) {
+        // TODO: all done!
+        alert('all done!');
+      }
+      else {
+        this.showStep(++this.currStepIdx);
+      }
+    };
+
+    this.configure = function(options) {
+      opt = options;
+    };
   };
 
-  context.hopscotchManager = new HopscotchManager();
+  context.hopscotch = new Hopscotch();
 }());