Merge branch 'bugron-feature/add-back-button-to-step-challenges' into staging

client/commonFramework.js

@@ -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);

client/less/main.less

@@ -689,6 +689,18 @@ iframe.iphone {
   transition: background .2s ease-in-out, border .2s ease-in-out;
 }
 
+.btn-warning-ghost {
+  background: transparent;
+  color: @brand-warning;
+
+  /* CSS Transition */
+  -webkit-transition: background .2s ease-in-out, border .2s ease-in-out;
+  -moz-transition: background .2s ease-in-out, border .2s ease-in-out;
+  -ms-transition: background .2s ease-in-out, border .2s ease-in-out;
+  -o-transition: background .2s ease-in-out, border .2s ease-in-out;
+  transition: background .2s ease-in-out, border .2s ease-in-out;
+}
+
 .population-table {
   @media (max-width: 767px) {
     font-size: 16px;

server/views/coursewares/showStep.jade

@@ -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
+                            .btn.btn-block.btn-primary.challenge-step-btn-next(id='#{index}' class=step[3] ? 'disabled' : '') Go to my next step
+                            .btn.btn-block.btn-warning-ghost.challenge-step-btn-prev(id='#{index - 1}') Go to my previous 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')