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

Commit

Permalink
fixed some things related to skipIfNoElement and step delay
Browse files Browse the repository at this point in the history
  • Loading branch information
Gordon Koo committed Oct 22, 2012
1 parent 82b1eaa commit 88b2c73
Show file tree
Hide file tree
Showing 5 changed files with 151 additions and 109 deletions.
11 changes: 8 additions & 3 deletions index.html
View file
Expand Up @@ -98,16 +98,21 @@ <h3>Tour Options</h3>
-->
<script src="js/jquery-1.7.2.js"></script>
<!--<script src="js/hopscotch_jquery.js"></script>-->
<script src="js/hopscotch-0.0.1.min.js"></script>
<script src="js/hopscotch-0.0.2.js"></script>
<script src="js/exampletour.js"></script>
<script src="js/debug.js"></script>
<script>
//hopscotch.clearCookie();
var printLog = function(str) {
var el = document.getElementById('debug-output'),
newEl = document.createElement('p');
newEl.innerHTML = str;
el.appendChild(newEl);
if (el) {
newEl.innerHTML = str;
el.appendChild(newEl);
}
else {
console.log(str);
}
},
onStart = function(tourId) {
printLog('global start ' + tourId);
Expand Down
2 changes: 1 addition & 1 deletion js/exampletour.js
View file
Expand Up @@ -58,7 +58,7 @@ var tour = {
},
{
title: 'Polar bears',
//content: 'We made it!! Polar bears are very interesting creatures.',
content: 'We made it!! Polar bears are very interesting creatures.',
target: 'polarbears',
orientation: 'right',
showPrevButton: false
Expand Down
243 changes: 140 additions & 103 deletions js/hopscotch-0.0.1.js → js/hopscotch-0.0.2.js
View file
Expand Up @@ -981,6 +981,39 @@
}
},

/**
* goToStepWithTarget
*
* Helper function to increment the step number until a step is found where
* the step target exists or until we reach the end/beginning of the tour.
*
* @private
* @param {Number} direction Either 1 for incrementing or -1 for decrementing
* @returns {Number} step number we landed on
*/
goToStepWithTarget = function(direction) {
var foundTarget = false,
step;

while (!foundTarget &&
currStepNum + direction >= 0 &&
currStepNum + direction < currTour.steps.length) {
currStepNum += direction;
step = getCurrStep();
foundTarget = utils.getStepTarget(step);

if (!foundTarget) {
utils.invokeCallbacks('error', [currTour.id, currStepNum]);
}
}

if (!foundTarget) {
currStepNum = -1;
}

return currStepNum;
},

/**
* changeStep
*
Expand All @@ -992,57 +1025,46 @@
* @param {Number} direction Either 1 for "next" or -1 for "prev"
*/
changeStep = function(doCallbacks, direction) {
var self = this,
nextStep = currTour.steps[currStepNum + direction],
bubble = getBubble();
var bubble = getBubble();

doCallbacks = utils.valOrDefault(doCallbacks, true);

bubble.hide();
setTimeout(function() {
var step = getCurrStep(),
origStepNum = currStepNum,
foundTarget = false;

if (opt.skipIfNoElement) {
// increment step until we find a target or until we reach beginning
while (!foundTarget && currStepNum + direction >= 0 && currStepNum + direction < currTour.steps.length) {
currStepNum += direction;
step = getCurrStep();
foundTarget = utils.getStepTarget(step);
var step = getCurrStep(),
origStepNum = currStepNum;

if (!foundTarget) {
utils.invokeCallbacks('error', [currTour.id, currStepNum]);
}
}
if (!foundTarget) {
return self.endTour(true);
}
if (opt.skipIfNoElement) {
goToStepWithTarget(direction);

if (currStepNum === -1) {
// Wasn't able to find a step with an existing element. End tour.
return this.endTour(true);
}
else if (currStepNum + direction >= 0 && currStepNum + direction < currTour.steps.length) {
// only try incrementing once, and invoke error callback if no target is found
currStepNum += direction;
step = getCurrStep();
if (!utils.getStepTarget(step)) {
utils.invokeCallbacks('error', [currTour.id, currStepNum]);
return self.endTour(true, false);
}
}
else if (currStepNum + direction >= 0 && currStepNum + direction < currTour.steps.length) {
// only try incrementing once, and invoke error callback if no target is found
currStepNum += direction;
step = getCurrStep();
if (!utils.getStepTarget(step)) {
utils.invokeCallbacks('error', [currTour.id, currStepNum]);
return this.endTour(true, false);
}
}

if (doCallbacks) {
// invoke callbacks
if (direction > 0 && step.onNext) {
step.onNext();
}
else if (direction < 0 && step.onPrev) {
step.onPrev();
}
utils.invokeCallbacks(direction > 0 ? 'next' : 'prev', [currTour.id, origStepNum]);
if (doCallbacks) {
// invoke callbacks
if (direction > 0 && step.onNext) {
step.onNext();
}
else if (direction < 0 && step.onPrev) {
step.onPrev();
}
utils.invokeCallbacks(direction > 0 ? 'next' : 'prev', [currTour.id, origStepNum]);
}

//this.showStep(currStepNum, currSubstepNum);
self.showStep(currStepNum);
}, nextStep.delay ? nextStep.delay : 0);
//this.showStep(currStepNum, currSubstepNum);
this.showStep(currStepNum);

return this;
},
Expand Down Expand Up @@ -1141,7 +1163,8 @@
*/
this.startTour = function(tour, stepNum, substepNum) {
var bubble,
step;
step,
foundTarget;

// loadTour if we are calling startTour directly. (When we call startTour
// from window onLoad handler, we'll use currTour)
Expand All @@ -1167,18 +1190,29 @@
currStepNum = cookieTourStep;
currSubstepNum = cookieTourSubstep;
step = getCurrStep();
if (!step || !utils.getStepTarget(step)) {
// May have just refreshed the page. Previous step should work. (but don't change cookie)
foundTarget = utils.getStepTarget(step);
if (!foundTarget) {
// No target found for the step specified by the cookie. May have just refreshed
// the page. Try previous step. (but don't change cookie)
--currStepNum;
step = getCurrStep();
if (!utils.getStepTarget(step)) {
// Previous target doesn't exist either. The user may have just
// clicked on a link that wasn't part of the tour. Let's just "end"
// the tour and depend on the cookie to pick the user back up where
// she left off.
this.endTour(false, false);
return this;
}
foundTarget = utils.getStepTarget(step);
}
if (!foundTarget && opt.skipIfNoElement) {
// Previous target doesn't exist either. The user may have just
// clicked on a link that wasn't part of the tour. Another possibility is that
// the user clicked on the correct link, but the target is just missing for
// whatever reason. In either case, we should just advance until we find a step
// that has a target on the page or end the tour if we can't find such a step.
goToStepWithTarget(1);
foundTarget = (currStepNum !== -1) && utils.getStepTarget(currTour.steps[currStepNum]);
}
if (!foundTarget) {
// Whether or not to trigger onEnd callback? Err on the safe side and don't
// trigger. Don't want weird stuff happening on a page that wasn't meant for
// the tour. Up to the developer to fix their tour.
this.endTour(false, false);
return this;
}
}
else {
Expand Down Expand Up @@ -1227,66 +1261,69 @@
* @returns {Object} Hopscotch
*/
this.showStep = function(stepNum, substepNum) {
var tourSteps = currTour.steps,
step = tourSteps[stepNum],
numTourSteps = tourSteps.length,
cookieVal = currTour.id + ':' + stepNum,
bubble = getBubble(),
self = this,
targetEl = utils.getStepTarget(step),
nextStepFn,
isLast;
var self = this,
step = currTour.steps[stepNum];

// Update bubble for current step
currStepNum = stepNum;
currSubstepNum = substepNum;

// Only do fade if we're not animating.
if (!opt.animate) {
bubble.hide(false);
}

/* UNCOMMENT WHEN MULTI-PART STEPS ARE FINISHED
if (typeof substepNum !== undefinedStr && isInMultiPartStep()) {
step = step[substepNum];
cookieVal += '-' + substepNum;
}
*/
setTimeout(function() {
var tourSteps = currTour.steps,
numTourSteps = tourSteps.length,
cookieVal = currTour.id + ':' + stepNum,
bubble = getBubble(),
targetEl = utils.getStepTarget(step),
nextStepFn,
isLast;

// Update bubble for current step
currStepNum = stepNum;
currSubstepNum = substepNum;

// When nextOnTargetClick is true, attach nextStepFn to the click event
// of the target element.
if (step.nextOnTargetClick) {
/**
* @private
*/
nextStepFn = function() {
self.nextStep(false);
// Detach the listener after we've clicked on the target.
return targetEl.removeEventListener ? targetEl.removeEventListener('click', nextStepFn) : targetEl.detachEvent('click', nextStepFn);
};
}

isLast = (stepNum === numTourSteps - 1) || (substepNum >= step.length - 1);
bubble.renderStep(step, stepNum, substepNum, isLast, function() {
// when done adjusting window scroll, call bubble.show()
adjustWindowScroll(function() {
bubble.show();
});
// Only do fade if we're not animating.
if (!opt.animate) {
bubble.hide(false);
}

if (step.onShow) { step.onShow(); }
/* UNCOMMENT WHEN MULTI-PART STEPS ARE FINISHED
if (typeof substepNum !== undefinedStr && isInMultiPartStep()) {
step = step[substepNum];
cookieVal += '-' + substepNum;
}
*/

// If we want to advance to next step when user clicks on target.
// When nextOnTargetClick is true, attach nextStepFn to the click event
// of the target element.
if (step.nextOnTargetClick) {
utils.addClickListener(targetEl, nextStepFn);
/**
* @private
*/
nextStepFn = function() {
self.nextStep(false);
// Detach the listener after we've clicked on the target.
return targetEl.removeEventListener ? targetEl.removeEventListener('click', nextStepFn) : targetEl.detachEvent('click', nextStepFn);
};
}
});
utils.invokeCallbacks('show', [currTour.id, currStepNum]);

if (step.multipage) {
cookieVal += ':mp';
}
isLast = (stepNum === numTourSteps - 1) || (substepNum >= step.length - 1);
bubble.renderStep(step, stepNum, substepNum, isLast, function() {
// when done adjusting window scroll, call bubble.show()
adjustWindowScroll(function() {
bubble.show();
});

if (step.onShow) { step.onShow(); }

// If we want to advance to next step when user clicks on target.
if (step.nextOnTargetClick) {
utils.addClickListener(targetEl, nextStepFn);
}
});
utils.invokeCallbacks('show', [currTour.id, currStepNum]);

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

utils.setState(opt.cookieName, cookieVal, 1);
utils.setState(opt.cookieName, cookieVal, 1);
}, step.delay ? step.delay : 0);
return this;
};

Expand Down

0 comments on commit 88b2c73

Please sign in to comment.