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

Commit

Permalink
added delay, z-index option for steps
Browse files Browse the repository at this point in the history
  • Loading branch information
Gordon Koo committed Aug 27, 2012
1 parent 9cdf846 commit cd71009
Show file tree
Hide file tree
Showing 5 changed files with 68 additions and 45 deletions.
86 changes: 50 additions & 36 deletions js/exampletour.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,14 @@ var tour = {
document.getElementById('pageTitle').style.color = '#f00';
},
},
{
title: 'Mission district',
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!',
target: 'mission',
orientation: 'top',
xOffset: 100,
arrowOffset: 100
},
{
title: 'Debug controls',
content: 'Here are the debug controls. They\'re pretty self-explanatory: start a tour, end a tour, clear the tour cookie (if you want the tour to forget what step you are on).',
Expand All @@ -19,53 +27,47 @@ var tour = {
width: 320,
height: 480,
showSkip: true,
fixedElement: true,
xOffset: 20,
zindex: 15,
delay: 1000,
onPrev: function() {
document.getElementById('pageTitle').style.color = '#000';
}
},
{
title: 'Mission district',
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!',
target: 'mission',
orientation: 'top',
xOffset: 100,
arrowOffset: 100
title: 'Cool wave',
content: 'This is a <b>colorful</b> wave. Here is the the <a href="http://imgur.com/s632o" target="_new">page</a> where I found it.',
target: 'wave',
orientation: 'bottom',
width: 500,
//xOffset: -50,
//arrowOffset: 400,
//showPrevButton: false
},
{
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,
multipage: true
},
{
title: 'Polar bears',
//content: 'We made it!! Polar bears are very interesting creatures.',
target: 'polarbears',
orientation: 'right',
showPrevButton: false
},
[
{
title: 'Cool wave',
content: 'This is a <b>colorful</b> wave. Here is the the <a href="http://imgur.com/s632o" target="_new">page</a> where I found it.',
target: 'wave',
orientation: 'bottom',
width: 500,
//xOffset: -50,
//arrowOffset: 400,
//showPrevButton: false
},
{
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,
multiPage: true
},
{
title: 'Polar bears',
//content: 'We made it!! Polar bears are very interesting creatures.',
target: 'polarbears',
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,
showPrevButton: false,
multiPage: true // this indicates that next step will be on a different page
multipage: true // this indicates that next step will be on a different page
},
{
title: 'Python decorator',
Expand All @@ -90,7 +92,8 @@ var tour = {
list = document.getElementById('my-list');
if (list) {
newLi = document.createElement('li');
newLi.innerHTML = 'going from step ' + (idx + 1) + ' to step ' + (idx+2) + '. (can use this callback for tracking)';
newLi.innerHTML = 'clicked next on step ' + (idx + 1);
//newLi.innerHTML = 'going from step ' + (idx + 1) + ' to step ' + (idx+2) + '. (can use this callback for tracking)';
list.appendChild(newLi);
}
},
Expand All @@ -104,7 +107,18 @@ var tour = {
console.log('tour end ' + tourId);
},
onError: function(tourId, idx) {
alert('DANGER!!! tourId: ' + tourId + ' and idx: ' + idx);
//alert('DANGER!!! tourId: ' + tourId + ' and idx: ' + idx);
var newLi,
list = document.getElementById('my-list');
if (list) {
newLi = document.createElement('li');
newLi.innerHTML = 'error on step ' + (idx + 1);
//newLi.innerHTML = 'going from step ' + (idx + 1) + ' to step ' + (idx+2) + '. (can use this callback for tracking)';
list.appendChild(newLi);
}
},
onClose: function() {
console.log('closing');
}
//i18n: {
////nextBtn: 'Forward',
Expand Down
2 changes: 1 addition & 1 deletion js/hopscotch-min.js
View file

Large diffs are not rendered by default.

13 changes: 8 additions & 5 deletions js/hopscotch.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,6 @@
* test css conflicts on different sites
* improve auto-scrolling?
*
* position screws up when you align it with a position:fixed element
* - handle header items specially
*
* support horizontal smooth scroll????????
*
* NICETOHAVE:
Expand Down Expand Up @@ -569,6 +566,8 @@
this.containerEl.style.width = bubbleWidth + 'px';
this.containerEl.style.padding = bubblePadding + 'px';

this.element.style.zIndex = (step.zindex ? step.zindex : '');

if (step.orientation === 'top') {
// Timeout to get correct height of bubble for positioning.
setTimeout(function() {
Expand Down Expand Up @@ -1013,6 +1012,7 @@
numTourSteps = tourSteps.length,
cookieVal = currTour.id + ':' + stepIdx,
bubble = getBubble(),
delay = utils.valOrDefault(step.delay, 0),
isLast;

// Update bubble for current step
Expand All @@ -1025,14 +1025,17 @@
}

isLast = (stepIdx === numTourSteps - 1) || (substepIdx >= step.length - 1);
bubble.renderStep(step, stepIdx, substepIdx, isLast, adjustWindowScroll);

setTimeout(function() {
bubble.renderStep(step, stepIdx, substepIdx, isLast, adjustWindowScroll);
bubble.show();
}, delay);

if (step.multipage) {
cookieVal += ':mp';
}

utils.setState(opt.cookieName, cookieVal, 1);
getBubble().show();
return this;
};

Expand Down
2 changes: 1 addition & 1 deletion js/hopscotch_jquery-min.js
View file

Large diffs are not rendered by default.

10 changes: 8 additions & 2 deletions js/hopscotch_jquery.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -497,6 +497,8 @@
padding: bubblePadding + 'px'
});

this.$element.css('zIndex', step.zindex ? step.zindex : '');

if (step.orientation === 'top') {
// Timeout to get correct height of bubble for positioning.
setTimeout(function() {
Expand Down Expand Up @@ -880,6 +882,7 @@
numTourSteps = tourSteps.length,
cookieVal = currTour.id + ':' + stepIdx,
bubble = getBubble(),
delay = utils.valOrDefault(step.delay, 0),
isLast;

// Update bubble for current step
Expand All @@ -892,14 +895,17 @@
}

isLast = (stepIdx === numTourSteps - 1) || (substepIdx >= step.length - 1);
bubble.renderStep(step, stepIdx, substepIdx, isLast, adjustWindowScroll);

setTimeout(function() {
bubble.renderStep(step, stepIdx, substepIdx, isLast, adjustWindowScroll);
bubble.show();
}, delay);

if (step.multipage) {
cookieVal += ':mp';
}

utils.setState(opt.cookieName, cookieVal, 1);
getBubble().show();
return this;
};

Expand Down

0 comments on commit cd71009

Please sign in to comment.