gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

adds back button for step challenges

Browse Source
This commit is contained in:
Arsen Melikyan
2015-10-31 17:24:05 +04:00
parent 33aed56f8c
commit ab83f6d5fa
2 changed files with 51 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
client/commonFramework.js
View File

@ -892,12 +892,32 @@ var runTests = function(err, data) {
// step challenge
common.init.push((function() {
var stepClass = '.challenge-step';
var prevBtnClass = '.challenge-step-btn-prev';
var nextBtnClass = '.challenge-step-btn-next';
var actionBtnClass = '.challenge-step-btn-action';
var finishBtnClass = '.challenge-step-btn-finish';
var submitBtnId = '#challenge-step-btn-submit';
var submitModalId = '#challenge-step-modal';
function getPreviousStep($challengeSteps) {
var length = $challengeSteps.length;
var $prevStep = false;
var prevStepIndex = 0;
$challengeSteps.each(function(index) {
var $step = $(this);
if (
!$step.hasClass('hidden') &&
index + 1 !== length
) {
prevStepIndex = index - 1;
}
});
$prevStep = $challengeSteps[prevStepIndex];
return $prevStep;
}
function getNextStep($challengeSteps) {
var length = $challengeSteps.length;
var $nextStep = false;
@ -917,11 +937,36 @@ common.init.push((function() {
return $nextStep;
}
function handlePrevStepClick(e) {
e.preventDefault();
var prevStep = getPreviousStep($(stepClass));
$(this)
.parent()
.removeClass('fadeOutLeft')
.addClass('animated fadeOutRight fast-animation')
.delay(250)
.queue(function(prev) {
$(this).addClass('hidden');
if (prevStep) {
$(prevStep)
.removeClass('hidden')
.removeClass('slideInRight')
.addClass('animated slideInLeft fast-animation')
.delay(500)
.queue(function(prev) {
prev();
});
}
prev();
});
}
function handleNextStepClick(e) {
e.preventDefault();
var nextStep = getNextStep($(stepClass));
$(this)
.parent()
.removeClass('fadeOutRight')
.addClass('animated fadeOutLeft fast-animation')
.delay(250)
.queue(function(next) {
@ -929,10 +974,10 @@ common.init.push((function() {
if (nextStep) {
$(nextStep)
.removeClass('hidden')
.removeClass('slideInLeft')
.addClass('animated slideInRight fast-animation')
.delay(500)
.queue(function(next) {
$(this).removeClass('slideInRight');
next();
});
}
@ -1035,6 +1080,7 @@ common.init.push((function() {
}
return function($) {
$(prevBtnClass).click(handlePrevStepClick);
$(nextBtnClass).click(handleNextStepClick);
$(actionBtnClass).click(handleActionClick);
$(finishBtnClass).click(handleFinishClick);

4
server/views/coursewares/showStep.jade
View File

@ -10,8 +10,12 @@ block content
p.large-p!= step[2]
if step[3]
a.btn.btn-block.btn-primary.challenge-step-btn-action(id='#{index}' href='#{step[3]}' target='_blank') Open link in new tab
.button-spacer
if index + 1 === description.length
.btn.btn-block.btn-primary.challenge-step-btn-finish(id='last' class=step[3] ? 'disabled' : '') Finish challenge
else if index !== 0
.col-xs-12.col-md-6.col-lg-6.btn.btn-danger.challenge-step-btn-prev(id='#{index - 1}' class=step[3] ? 'disabled' : '') Go to my previous step
.col-xs-12.col-md-6.col-lg-6.btn.btn-primary.challenge-step-btn-next(id='#{index}' class=step[3] ? 'disabled' : '') Go to my next step
else
.btn.btn-block.btn-primary.challenge-step-btn-next(id='#{index}' class=step[3] ? 'disabled' : '') Go to my next step
#challenge-step-modal.modal(tabindex='-1')