From b0ecd04f2ad0503d5096e0ef0e91b90e2a6f8328 Mon Sep 17 00:00:00 2001 From: Gordon Koo Date: Tue, 24 Jul 2012 17:53:33 -0700 Subject: [PATCH] get demo page ready --- css/hopscotch.less | 6 ++++++ index.html | 31 +++++++++++++++++-------------- js/hopscotch.js | 27 +++++++++++++++++---------- 3 files changed, 40 insertions(+), 24 deletions(-) diff --git a/css/hopscotch.less b/css/hopscotch.less index 00e62242..fb4cd84e 100644 --- a/css/hopscotch.less +++ b/css/hopscotch.less @@ -29,6 +29,12 @@ div#hopscotch-bubble { right: 0; } + #hopscotch-bubble-number { + float: left; + font-size: 48px; + padding: 25px; + } + .hopscotch-nav-button { &.hide { display: none; diff --git a/index.html b/index.html index 02aaa9f4..1d9fef3a 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@ background-color: #fff; border: 5px solid #000; padding: 20px; - position: fixed; + position: absolute; top: 0; right: 0; } @@ -32,7 +32,7 @@

Content

  • Welcome to my hopscotch test page
  • Welcome to my hopscotch test page
  • Welcome to my hopscotch test page
    • -
  • Welcome to myWelcome to myWelcome to myWelcome to my Welcom Welcom Welcom Welcom Welcom Welcome to my hopscotch test page
    • +
  • Welcome to my hopscotch test page
    • @@ -47,8 +47,8 @@

    Content

    - @@ -59,8 +59,8 @@

    Content

    id: 'hello-hopscotch', steps: [ { - title: 'Here\'s my first step.', - 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 link.', + title: 'Welcome to the Hopscotch Demo Page!', + content: 'Hey there! Welcome to the Hopscotch Demo Page! Please excuse our dust; this is still a work in progress. To proceed, click the next button below. (And as you do, watch the title of the page turn red!!!)', targetId: 'subheading', orientation: 'bottom', nextCallback: function() { @@ -68,10 +68,10 @@

    Content

    } }, { - title: 'Here\'s my second step.', - content: 'Here is the content.', - targetId: 'my-list', - orientation: 'top', + title: 'Debug controls', + content: 'Here\'s the debug controls. Well, I guess I should say the debug control. It\'s just the start button, in case you need to X out of the tour at some point, you can come back here to start it back up again.', + targetId: 'debug', + orientation: 'left', width: 320, height: 480, prevCallback: function() { @@ -80,21 +80,24 @@

    Content

    }, { title: 'Spider-man', - content: 'Here are some window cleaners dressed as 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 buy some tickets?', targetId: 'spiderman', - orientation: 'bottom' + orientation: 'bottom', + width: 500 }, { title: 'Python decorator', - content: 'Here\'s an example of a python decorator', + content: 'Whoa, did you notice that the page just scrolled? If you didn\'t, you aren\'t very observant. (Or you have a very tall monitor)', targetId: 'python', orientation: 'right' }, { title: 'Mission district', - content: 'Some sort of sound heat map in the mission?', + content: 'Some sort of sound heat map in the mission? Did you notice that this bubble isn\'t completely aligned with this image? That\'s because I\'m using xOffset and yOffset options, which are available if you need to make slight positioning adjustments! Hopscotch has never been more fun!', targetId: 'mission', - orientation: 'left' + orientation: 'top', + xOffset: 100, + yOffset: -20 } ] } diff --git a/js/hopscotch.js b/js/hopscotch.js index 61755030..a5dc088c 100644 --- a/js/hopscotch.js +++ b/js/hopscotch.js @@ -12,15 +12,16 @@ * test css conflicts on different sites * improve auto-scrolling? * + * position screws up when you align it with a position:fixed element + * */ (function() { var Hopscotch, HopscotchBubble, utils, - context = (typeof window !== 'undefined') ? window : exports, - hasAddEventListener = typeof document.body.addEventListener !== 'undefined', - hasJquery = (typeof jQuery !== 'undefined'); + context = (typeof window !== 'undefined') ? window : exports; + //hasJquery = (typeof jQuery !== 'undefined'); if (context.hopscotch) { // Hopscotch already exists. @@ -204,8 +205,8 @@ var scrollTop = utils.getScrollTop(), scrollTarget = scrollTop + (direction * scrollIncr); - if ((direction > 0 && scrollTarget >= endScrollVal) - || direction < 0 && scrollTarget <= endScrollVal) { + if ((direction > 0 && scrollTarget >= endScrollVal) || + direction < 0 && scrollTarget <= endScrollVal) { // Overshot our target. Just manually set to equal the target // and clear the interval scrollTarget = endScrollVal; @@ -229,11 +230,14 @@ this.element = el; this.containerEl = document.createElement('div'); this.titleEl = document.createElement('h3'); + this.numberEl = document.createElement('span'); this.contentEl = document.createElement('p'); el.setAttribute('id', 'hopscotch-bubble'); this.containerEl.setAttribute('id', 'hopscotch-bubble-container'); + this.numberEl.setAttribute('id', 'hopscotch-bubble-number'); this.containerEl.appendChild(this.titleEl); + this.containerEl.appendChild(this.numberEl); this.containerEl.appendChild(this.contentEl); el.appendChild(this.containerEl); @@ -278,8 +282,7 @@ }; this.initCloseButton = function() { - var closeBtnEl = document.createElement('a'), - self = this; + var closeBtnEl = document.createElement('a'); closeBtnEl.setAttribute('id', 'hopscotch-bubble-close'); closeBtnEl.setAttribute('href', '#'); @@ -295,10 +298,11 @@ return this; }; - this.renderStep = function(step, btnToHide) { + this.renderStep = function(step, idx, btnToHide) { var self = this; if (step.title) { this.setTitle(step.title); } if (step.content) { this.setContent(step.content); } + this.setNum(idx); utils.removeClass(this.prevBtnEl, 'hide'); utils.removeClass(this.nextBtnEl, 'hide'); @@ -345,6 +349,10 @@ return this; }; + this.setNum = function(idx) { + this.numberEl.innerHTML = idx+1; + }; + this.show = function() { utils.removeClass(this.element, 'hide'); return this; @@ -483,7 +491,6 @@ }; this.startTour = function(tour) { - var self = this; this._currTour = tour; this.currStepIdx = 0; this.showStep(this.currStepIdx); @@ -511,7 +518,7 @@ else if (stepIdx === numTourSteps - 1) { btnToHide = 'next'; } - getBubble().renderStep(step, btnToHide); + getBubble().renderStep(step, stepIdx, btnToHide); }; this.prevStep = function() {