Skip to content
This repository has been archived by the owner on Feb 17, 2021. It is now read-only.

Commit

Permalink
get demo page ready
Browse files Browse the repository at this point in the history
  • Loading branch information
Gordon Koo committed Jul 25, 2012
1 parent afb3097 commit b0ecd04
Show file tree
Hide file tree
Showing 3 changed files with 40 additions and 24 deletions.
6 changes: 6 additions & 0 deletions css/hopscotch.less
View file
Expand Up @@ -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;
Expand Down
31 changes: 17 additions & 14 deletions index.html
View file
Expand Up @@ -15,7 +15,7 @@
background-color: #fff;
border: 5px solid #000;
padding: 20px;
position: fixed;
position: absolute;
top: 0;
right: 0;
}
Expand All @@ -32,7 +32,7 @@ <h2 id="subheading" class="one two three">Content</h2>
<li>Welcome to my hopscotch test page</li>
<li>Welcome to my hopscotch test page</li>
<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>
<li>Welcome to my <a href="#" id="tooltiptest" title="hello tooltip">hopscotch</a> test page</li>
</ul>
<div class="img-container">
<img id="spiderman" src="http://i.imgur.com/0O8k3.png">
Expand All @@ -47,8 +47,8 @@ <h2 id="subheading" class="one two three">Content</h2>
<div id="debug">
<input id="startBtn" type="button" value="Start">
</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>
-->
Expand All @@ -59,19 +59,19 @@ <h2 id="subheading" class="one two three">Content</h2>
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 <a href="http://www.google.com">link</a>.',
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() {
document.getElementById('pageTitle').style.color = '#f00';
}
},
{
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() {
Expand All @@ -80,21 +80,24 @@ <h2 id="subheading" class="one two three">Content</h2>
},
{
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 <a href="http://www.fandango.com/theamazingspiderman_126975/movieoverview" target="_new">buy some tickets</a>?',
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
}
]
}
Expand Down
27 changes: 17 additions & 10 deletions js/hopscotch.js
View file
Expand Up @@ -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.
Expand Down Expand Up @@ -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;
Expand All @@ -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);

Expand Down Expand Up @@ -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', '#');
Expand All @@ -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');
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -483,7 +491,6 @@
};

this.startTour = function(tour) {
var self = this;
this._currTour = tour;
this.currStepIdx = 0;
this.showStep(this.currStepIdx);
Expand Down Expand Up @@ -511,7 +518,7 @@
else if (stepIdx === numTourSteps - 1) {
btnToHide = 'next';
}
getBubble().renderStep(step, btnToHide);
getBubble().renderStep(step, stepIdx, btnToHide);
};

this.prevStep = function() {
Expand Down

0 comments on commit b0ecd04

Please sign in to comment.