Refactored and added back button for tutorial for steps 6-11.

app/assets/javascripts/projects/canvas.js.erb

@@ -136,13 +136,17 @@ var tutorialData;
 //************************************
 // DEFAULT INITIALIZATION CODE
 //************************************
-jsPlumb.ready(function () {
+function init() {
   bindModeChange();
   bindAjax();
   bindWindowResizeEvent();
   initializeGraph(".diagram .module-large");
   initializeFullZoom();
-  initializeTutorial(false);
+  initTutorial();
+}
+
+jsPlumb.ready(function () {
+  init();
 });
 
 //************************************
@@ -245,8 +249,6 @@ function initializeEdit() {
       { color: 'white', shadow: true }
     );
   });
-
-  initializeTutorial(true);
 }
 
 function destroyEdit() {
@@ -3120,201 +3122,109 @@ function initJsPlumb(containerSel, containerChildSel, modulesSel, params) {
   }
 })();
 
-// Initialize first-time tutorial
-function initializeTutorial(isEditMode) {
-  if (showTutorial()) {
-    var currentStep = Cookies.get('current_tutorial_step');
-    // Add edit canvas tutorial step and show it
-    if (!isEditMode && currentStep > 4 && currentStep < 8) {
-      var $introJs = introJs();
-      $introJs
-        .setOptions({
-          overlayOpacity: '0.2',
-          nextLabel: 'Next',
-          doneLabel: 'End tutorial',
-          skipLabel: 'End tutorial',
-          showBullets: false,
-          showStepNumbers: false,
-          exitOnEsc: false,
-          exitOnOverlayClick: false,
-          tooltipClass: 'custom next-page-link'
-        })
-        .onafterchange(function (tarEl) {
-          Cookies.set('current_tutorial_step', this._currentStep + 6);
-          if (this._currentStep == 1) {
-            $introJs.setOption("disableInteraction", true);
-            // Go to project canvas
-            setTimeout(function() {
-              $('.next-page-link a.introjs-nextbutton')
-              .removeClass('introjs-disabled')
-              .on('click', function() {
-                $('#edit-canvas-button').click();
-              });
-            }, 500);
-          } else {
-            $introJs.setOption("disableInteraction", false);
-            var top = $('#canvas-container').position().top +  $('#canvas-container').height()/3;
-            $(".introjs-tooltipReferenceLayer").css({
-              top: top + 'px'
-            });
-          }
-        })
-        .goToStep(currentStep == "6" ? 2 : 1)
-        .start();
-        canvas_tutorial_helper();
+/**
+ * Initializes tutorial
+ */
+function initTutorial() {
+  var tutorialData = Cookies.get('tutorial_data');
+  if (tutorialData) {
+    tutorialData = JSON.parse(tutorialData);
+    var stepNum = parseInt(Cookies.get('current_tutorial_step'), 10);
 
-        window.onresize = function() {
-          $(".introjs-tooltip").css("right", ($("#canvas-container").width() + 20)  + "px");
-        };
-    } else if (isEditMode && currentStep > 6 && currentStep < 10) {
-      var editWorkflowTutorial = $("#canvas-container").attr("data-edit-workflow-step-text");
-      var editWorkflowClickSaveTutorial = $("#canvas-container").attr("data-edit-workflow-click-save-step-text");
-      $(".introjs-overlay").remove();
-      $(".introjs-helperLayer").remove();
-      $(".introjs-tooltipReferenceLayer").remove();
+    if (stepNum >= 6 && stepNum <= 7) {
+      var nextPage = window.location.pathname;
+      initPageTutorialSteps(6, 7, nextPage, tutorialBeforeCb,
+                            tutorialAfterCb);
+    } else if (stepNum >= 8 && stepNum <= 9) {
+      // Go to edit canvas mode
+      $('.introjs-overlay').remove();
+      $('.introjs-helperLayer').remove();
+      $('.introjs-tooltipReferenceLayer').remove();
+      $('#edit-canvas-button').click();
 
       setTimeout(function() {
-        introJs()
-          .setOptions({
-            steps: [
-            {
-              intro: editWorkflowTutorial,
-              element: document.querySelector('#canvas-new-module'),
-              disableInteraction: true
-            },
-            {
-              intro: editWorkflowClickSaveTutorial,
-              element: document.querySelector('#canvas-save')
-            }
-            ],
-            overlayOpacity: '0.1',
-            nextLabel: 'Next',
-            doneLabel: 'End tutorial',
-            skipLabel: 'End tutorial',
-            showBullets: false,
-            showStepNumbers: false,
-            exitOnOverlayClick: false,
-            exitOnEsc: false,
-            tooltipClass: 'custom next-page-link'
-          })
-          .onafterchange(function (tarEl) {
-            // Go to edit workflow mode
-            Cookies.set('current_tutorial_step', this._currentStep + 8);
-            if (this._currentStep == 0) {
-                $(".introjs-tooltipReferenceLayer").addClass("max");
-                $(".introjs-tooltip").css("left", "0");
-            } else if (this._currentStep == 1) {
-              setTimeout(function () {
-                $(".introjs-tooltipReferenceLayer").removeClass("max");
-                $(".introjs-tooltip").css("left", "0");
-                $('.next-page-link a.introjs-nextbutton')
-                  .removeClass('introjs-disabled')
-                  .on('click', function() { $("#" + tarEl.id).click(); });
-              }, 500);
-            }
-          })
-          .start();
-          canvas_tutorial_helper();
-        }, 500);
-
-      // Destroy first-time tutorial cookies when skip tutorial
-      // or end tutorial is clicked
-      setTimeout( function(){
-        $(".introjs-skipbutton").each(function (){
-          $(this).click(function (){
-            Cookies.remove('tutorial_data');
-            Cookies.remove('current_tutorial_step');
-            restore_after_tutorial();
-          });
-        });
-      }, 600);
-    } else if (!isEditMode && currentStep > 8 && currentStep < 13) {
-      var sidebarTutorial = $("#canvas-container").attr("data-sidebar-step-text");
-      var sidebarClickModuleTutorial = $("#canvas-container").attr("data-sidebar-click-module-step-text");
-      var qpcrModuleLeaf = $("li.leaf[data-module-id='" + tutorialData[0].qpcr_module + "']");
-
-      introJs()
-        .setOptions({
-          steps: [
+        var nextPage = window.location.pathname;
+        var editWorkflowTutorial =
+         $('#canvas-container').attr('data-edit-workflow-step-text');
+        var editWorkflowClickSaveTutorial =
+         $('#canvas-container').attr('data-edit-workflow-click-save-step-text');
+        var steps = [
           {
-            element: document.querySelector("#slide-panel .tree"),
-            intro: sidebarTutorial,
+            intro: editWorkflowTutorial,
+            element: document.querySelector('#canvas-new-module'),
+            disableInteraction: true,
             position: 'right'
           },
           {
-            element: qpcrModuleLeaf[0],
-            intro: sidebarClickModuleTutorial,
+            intro: editWorkflowClickSaveTutorial,
+            element: document.querySelector('#canvas-save'),
             position: 'right'
           }
-          ],
-          overlayOpacity: '0.2',
-          doneLabel: 'End tutorial',
-          skipLabel: 'End tutorial',
-          nextLabel: 'Next',
-          showBullets: false,
-          showStepNumbers: false,
-          exitOnEsc: false,
-          exitOnOverlayClick: false,
-          tooltipClass: 'custom next-page-link'
-        })
-        .onafterchange(function(tarEl) {
-          Cookies.set('current_tutorial_step', this._currentStep + 10);
-          if (this._currentStep == 1) {
-            setTimeout(function() {
-              $('.next-page-link a.introjs-nextbutton')
-                .removeClass('introjs-disabled')
-                .attr('href', qpcrModuleLeaf.find("a.module-link").attr('href'));
-            }, 500);
-          } else {
-            $(".introjs-tooltipReferenceLayer").css("top", $("#slide-panel .tree").height()/3 + "px");
-          }
-        })
-        .goToStep(currentStep == "10" ? 2 : 1)
-        .start();
-        canvas_tutorial_helper();
+        ];
+        initPageTutorialSteps(8, 9, nextPage, tutorialBeforeCb,
+                              tutorialAfterCb, steps);
+      }, 1000);
+    } else if (stepNum >= 10 || stepNum <= 11) {
+      // Go out of edit canvas mode
+      $('.cancel-edit-canvas').click();
 
+      var qpcrModuleLeaf =
+       $("li.leaf[data-module-id='" + tutorialData[0].qpcr_module + "']");
+      var nextPage = qpcrModuleLeaf.find('a.module-link').attr('href');
+      var sidebarTutorial =
+       $('#canvas-container').attr('data-sidebar-step-text');
+      var sidebarClickModuleTutorial =
+       $('#canvas-container').attr('data-sidebar-click-module-step-text');
+      var steps = [
+        {
+          element: document.querySelector('#slide-panel .tree'),
+          intro: sidebarTutorial,
+          position: 'right'
+        },
+        {
+          element: qpcrModuleLeaf[0],
+          intro: sidebarClickModuleTutorial,
+          position: 'right'
+        }
+      ];
+      initPageTutorialSteps(10, 11, nextPage, tutorialBeforeCb,
+                            tutorialAfterCb, steps);
     }
-
-    // Destroy first-time tutorial cookies when skip tutorial
-    // or end tutorial is clicked
-    $(".introjs-skipbutton").each(function (){
-      $(this).click(function (){
-        Cookies.remove('tutorial_data');
-        Cookies.remove('current_tutorial_step');
-        restore_after_tutorial();
-      });
-    });
   }
 }
 
-function canvas_tutorial_helper(){
-    if( $('div').hasClass('introjs-overlay') ){
-      $('#slide-panel')
-        .css({'pointer-events': 'none'});
-      $('#canvas-container')
-        .css({'pointer-events': 'none'});
+/**
+ * Callback to be executed before tutorial starts
+ */
+function tutorialBeforeCb() {
+  $('#slide-panel')
+    .css({'pointer-events': 'none'});
+  $('#canvas-new-module')
+    .css({'pointer-events': 'none'});
 
-      $.each( $('.panel-default'), function(i, el){
-        $(el)
-        .find('.tab-pane')
-        .css({'pointer-events': 'none'});
-        $(el)
-        .find('.edit-tags-link')
-        .css({'pointer-events': 'none'});
-        $(el)
-        .find('.panel-heading')
-        .css({'pointer-events': 'none'});
-      });
-    }
+  $.each($('.panel-default'), function(i, el) {
+    $(el)
+    .find('.tab-pane')
+    .css({'pointer-events': 'none'});
+    $(el)
+    .find('.edit-tags-link')
+    .css({'pointer-events': 'none'});
+    $(el)
+    .find('.panel-heading')
+    .css({'pointer-events': 'none'});
+  });
 }
 
-function restore_after_tutorial(){
-  $('#canvas-container')
-    .css({'pointer-events': 'auto'});
+/**
+ * Callback to be executed after tutorial exits
+ */
+function tutorialAfterCb() {
   $('#slide-panel')
     .css({'pointer-events': 'auto'});
+  $('#canvas-new-module')
+    .css({'pointer-events': 'auto'});
 
-  $.each( $('.panel-default'), function(i, el){
+  $.each($('.panel-default'), function(i, el) {
     $(el)
     .find('.tab-pane')
     .css({'pointer-events': 'auto'});
@@ -3326,13 +3236,3 @@ function restore_after_tutorial(){
     .css({'pointer-events': 'auto'});
   });
 }
-
-function showTutorial() {
-  if (Cookies.get('tutorial_data'))
-    tutorialData = JSON.parse(Cookies.get('tutorial_data'));
-  else
-    return false;
-  var tutorialProjectId = tutorialData[0].project;
-  var currentProjectId = $("#canvas-container").attr("data-project-id");
-  return tutorialProjectId == currentProjectId;
-}

app/assets/javascripts/projects/index.js.erb

@@ -339,21 +339,23 @@
     var tutorialData = Cookies.get('tutorial_data');
     if (tutorialData) {
       tutorialData = JSON.parse(tutorialData);
-      var demoProjectId = tutorialData[0].project;
-      var demoProject = $('#' + demoProjectId);
       var stepNum = parseInt(Cookies.get('current_tutorial_step'), 10);
       if (isNaN(stepNum)) {
         stepNum = 1;
         Cookies.set('current_tutorial_step', stepNum);
+        tutorialData[0].backPagesPaths = [];
+        Cookies.set('tutorial_data', tutorialData);
       }
+      var demoProjectId = tutorialData[0].project;
+      var demoProject = $('#' + demoProjectId);
 
-      if (stepNum < 4) {
+      if (stepNum <= 3) {
         var nextPage =
           $('#' + demoProjectId + '-project-canvas-link').attr('href');
         initPageTutorialSteps(1, 3, nextPage, tutorialBeforeCb,
                               tutorialAfterCb);
       }
-      else if (stepNum > 18) {
+      else if (stepNum >= 19) {
         var archiveProjectTutorial = $("#projects-toolbar").attr("data-archive-project-step-text");
         var goodbye_message = $("#projects-toolbar").attr("data-goodbye-tutorial");
         Cookies.set('current_tutorial_step', 20);
@@ -394,7 +396,7 @@
   }
 
   /**
-   * Callback to be executed before tutorial sterts
+   * Callback to be executed before tutorial starts
    */
   function tutorialBeforeCb() {
     var tutorialData = JSON.parse(Cookies.get('tutorial_data'));

app/assets/javascripts/projects/show.js

@@ -72,7 +72,7 @@
   }
 
   /**
-   * Callback to be executed before tutorial sterts
+   * Callback to be executed before tutorial starts
    */
   function tutorialBeforeCb() {
     $.each( $(".panel-title"), function(){

app/assets/javascripts/sitewide/utils.js

@@ -35,9 +35,11 @@ var TUTORIAL_STEPS_CNT = 20;
  * @param  {string} nextPagePath Next page absolute path
  * @param {function} beforeCb Callback called before the fucntion logic
  * @param {function} afterCb Callback called after the fucntion logic
+ * @param {object} steps Optional JSON containing introJs steps. They can be
+ *  specified here, or hardcoded in HTML.
  */
 function initPageTutorialSteps(pageFirstStep, pageLastStep, nextPagePath,
-                               beforeCb, afterCb) {
+                               beforeCb, afterCb, steps) {
   var tutorialData = Cookies.get('tutorial_data');
   if (tutorialData) {
     tutorialData = JSON.parse(tutorialData);
@@ -45,34 +47,57 @@ function initPageTutorialSteps(pageFirstStep, pageLastStep, nextPagePath,
     if (isNaN(stepNum)) {
       stepNum = 1;
       Cookies.set('current_tutorial_step', stepNum);
+      tutorialData[0].backPagesPaths = [];
+      Cookies.set('tutorial_data', tutorialData);
     }
+    var thisPagePath = window.location.pathname;
     beforeCb();
 
     // Initialize tutorial for the current page's steps
     var doneLabel = (pageLastStep === TUTORIAL_STEPS_CNT) ?
      'Start using sciNote' : 'End tutorial';
-    introJs()
-      .setOptions({
-        overlayOpacity: '0.2',
-        prevLabel: 'Back',
-        nextLabel: 'Next',
-        skipLabel: 'End tutorial',
-        doneLabel: doneLabel,
-        showBullets: false,
-        showStepNumbers: false,
-        exitOnOverlayClick: false,
-        exitOnEsc: false,
-        disableInteraction: true,
-        tooltipClass: 'custom next-page-link'
-      })
-      .goToStep(stepNum - (pageFirstStep - 1))
-      .start();
+    if (_.isUndefined(steps)) {
+      introJs()
+       .setOptions({
+         overlayOpacity: '0.2',
+         prevLabel: 'Back',
+         nextLabel: 'Next',
+         skipLabel: 'End tutorial',
+         doneLabel: doneLabel,
+         showBullets: false,
+         showStepNumbers: false,
+         exitOnOverlayClick: false,
+         exitOnEsc: false,
+         disableInteraction: true,
+         tooltipClass: 'custom next-page-link'
+       })
+       .goToStep(stepNum - (pageFirstStep - 1))
+       .start();
+    } else {
+      introJs()
+       .setOptions({
+         overlayOpacity: '0.2',
+         prevLabel: 'Back',
+         nextLabel: 'Next',
+         skipLabel: 'End tutorial',
+         doneLabel: doneLabel,
+         showBullets: false,
+         showStepNumbers: false,
+         exitOnOverlayClick: false,
+         exitOnEsc: false,
+         disableInteraction: true,
+         tooltipClass: 'custom next-page-link',
+         steps: steps
+       })
+       .goToStep(stepNum - (pageFirstStep - 1))
+       .start();
+    }
 
     // Page navigation when coming to this page from previous/next page
     $(function() {
       if (stepNum === pageFirstStep && stepNum > 1) {
         $('.introjs-prevbutton').removeClass('introjs-disabled');
-      } else if (stepNum === pageLastStep) {
+      } else if (stepNum === pageLastStep && stepNum < TUTORIAL_STEPS_CNT) {
         $('.introjs-nextbutton').removeClass('introjs-disabled');
       }
     });
@@ -94,9 +119,11 @@ function initPageTutorialSteps(pageFirstStep, pageLastStep, nextPagePath,
         if (stepNum === pageFirstStep && stepNum > 1) {
           $('.introjs-prevbutton').removeClass('introjs-disabled');
         } else if (stepNum < pageFirstStep) {
-          // Going to previous page
-          var prevPage = tutorialData[0].previousPage;
-          $('.introjs-prevbutton').attr('href', prevPage);
+          // Go to previous page;
+
+          var prevPagePath = tutorialData[0].backPagesPaths.pop();
+          Cookies.set('tutorial_data', tutorialData);
+          $('.introjs-prevbutton').attr('href', prevPagePath);
         }
       }
     });
@@ -108,12 +135,10 @@ function initPageTutorialSteps(pageFirstStep, pageLastStep, nextPagePath,
         if (stepNum === pageLastStep && stepNum < TUTORIAL_STEPS_CNT) {
           $('.introjs-nextbutton').removeClass('introjs-disabled');
         } else if (stepNum > pageLastStep) {
-          // Going to next page
+          // Go to next page
 
-          var prevPage = window.location.pathname;
-          tutorialData[0].previousPage = prevPage;
+          tutorialData[0].backPagesPaths.push(thisPagePath);
           Cookies.set('tutorial_data', tutorialData);
-
           $('.introjs-nextbutton').attr('href', nextPagePath);
         }
       }