Refactored and added back button for tutorial for steps 21-22. Minor tutorial function renaming and docs update.

2025-09-06 21:24:23 +08:00 · 2016-11-16 18:21:29 +01:00 · 2016-11-16 18:21:29 +01:00 · 0e97bfc002
commit 0e97bfc002
parent c64146904a
5 changed files with 52 additions and 52 deletions
--- a/app/assets/javascripts/my_modules/protocols.js
+++ b/app/assets/javascripts/my_modules/protocols.js
@ -120,6 +120,7 @@ function bindEditDueDateAjax() {
 */
 function initTutorial() {
  var resultsTab = $('#results-nav-tab');
+
  var nextPage = resultsTab.find('a').attr('href');
  var steps = [
    {
--- a/app/assets/javascripts/projects/canvas.js.erb
+++ b/app/assets/javascripts/projects/canvas.js.erb
@ -3171,6 +3171,7 @@ function initTutorial() {
    } else if (stepNum >= 10 || stepNum <= 11) {
      var qpcrModuleLeaf =
       $("li.leaf[data-module-id='" + tutorialData[0].qpcr_module + "']");
+
      var nextPage = qpcrModuleLeaf.find('a.module-link').attr('href');
      var steps = [
        {
--- a/app/assets/javascripts/projects/index.js.erb
+++ b/app/assets/javascripts/projects/index.js.erb
@ -341,56 +341,48 @@
      tutorialData = JSON.parse(tutorialData);
      var stepNum = parseInt(Cookies.get('current_tutorial_step'), 10);
      if (isNaN(stepNum)) {
+        // Cookies data initialization
        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 <= 3) {
+      if (stepNum >= 1 && stepNum <= 3) {
        var nextPage =
          $('#' + demoProjectId + '-project-canvas-link').attr('href');
        initPageTutorialSteps(1, 3, nextPage, tutorialBeforeCb,
-                              tutorialAfterCb);
-      }
-      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);
-        var position = "right";
-        if (demoProject.offset().left > window.innerWidth / 2 || window.innerWidth < demoProject.width() + 100) {
-          if (demoProject.offset().top > 500 && demoProject.offset().top > window.innerHeight / 2) {
-            position = "top";
+         tutorialAfterCb);
+      } else if (stepNum >= 21 && stepNum <= 22) {
+        var demoProject = $('#' + demoProjectId);
+        var firstStepPos = 'right';
+        if (demoProject.offset().left > window.innerWidth / 2 ||
+            window.innerWidth < demoProject.width() + 100) {
+          if (demoProject.offset().top > 500 && demoProject.offset().top >
+              window.innerHeight / 2) {
+            firstStepPos = 'top';
          } else {
-            position = "bottom";
+            firstStepPos = 'bottom';
          }
        }
-        var $introjs = introJs();
-        $introjs
-          .setOptions({
-            steps: [{
-              element: document.getElementById(demoProjectId),
-              intro: archiveProjectTutorial,
-              position: position
-            },{
-              element: document.getElementsByClassName("avatar")[0].parentNode,
-              intro: goodbye_message,
-              position: 'bottom-right-aligned'
-            }],
-            overlayOpacity: '0.2',
-            doneLabel: 'Start using sciNote',
-            nextLabel: 'Next',
-            skipLabel: 'End tutorial',
-            showBullets: false,
-            showStepNumbers: false,
-            disableInteraction: true,
-            exitOnOverlayClick: false,
-            exitOnEsc: false,
-            tooltipClass: 'custom next-page-link'
-          })
-          .start();
+
+        var nextPage = $('#new-report-btn').attr('href');
+        var steps = [
+          {
+            element: document.getElementById(demoProjectId),
+            intro: $('#projects-toolbar')
+                    .attr('data-archive-project-step-text'),
+            position: firstStepPos
+          },
+          {
+            element: document.getElementsByClassName('avatar')[0],
+            intro: $('#projects-toolbar').attr('data-goodbye-tutorial'),
+            position: 'left'
+          }
+        ];
+        initPageTutorialSteps(21, 22, nextPage, function() {}, function() {},
+         steps);
      }
    }
  }
@ -425,7 +417,7 @@
        'pointer-events': 'none',
        'color': '<%= Constants::COLOR_ALTO %>'});
      $(el)
-      .find('[data-action="edit"]')
+      .find("[data-action='edit']")
      .css({
        'pointer-events': 'none',
        'color': '<%= Constants::COLOR_ALTO %>'});
@ -449,7 +441,7 @@
        'pointer-events': 'auto',
        'color': '<%= Constants::COLOR_NERO %>'});
      $(el)
-      .find('[data-action="edit"]')
+      .find("[data-action='edit']")
      .css({
        'pointer-events': 'auto',
        'color': '<%= Constants::COLOR_NERO %>'});
--- a/app/assets/javascripts/reports/new.js.erb
+++ b/app/assets/javascripts/reports/new.js.erb
@ -1148,6 +1148,7 @@ function initializeReportSidebartruncation() {
 */
 function initTutorial() {
  ignoreUnsavedWorkAlert = true;
+
  var nextPage = $('#organization-link').attr('href');
  initPageTutorialSteps(19, 20, nextPage, function() {}, function() {
    ignoreUnsavedWorkAlert = false;
--- a/app/assets/javascripts/sitewide/utils.js
+++ b/app/assets/javascripts/sitewide/utils.js
@ -30,6 +30,8 @@ var TUTORIAL_STEPS_CNT = 22;

 /**
 * Initializes tutorial steps for the current page.
+ * NOTE: You can specify steps manually in JS with steps parameter (preferred
+ * way), or hardcode them in HTML
 * NOTE: If some steps edit page, then this function needs to be called several
 * times for the same page, but for different steps. The same goes if the page
 * has discontinuous tutorial steps. In such cases, use steps branching, e.g.:
@ -55,9 +57,11 @@ var TUTORIAL_STEPS_CNT = 22;
 *   {
 *   ...
 * ];
+ * NOTE: If only one page step is needed, then make pageFirstStepN ==
+ * pageLastStepN (both represent the one and only step number)
 *
- * @param  {number} pageFirstStep Page's first step
- * @param  {number} pageLastStep Page's last step
+ * @param  {number} pageFirstStepN Page's first step number
+ * @param  {number} pageLastStepN Page's last step number
 * @param  {string} nextPagePath Next page absolute path
 * @param {function} beforeCb Callback called before the tutorial starts. Mainly
 *  used for setting 'pointer-events: none' on the elements the page's steps
@ -68,13 +72,14 @@ var TUTORIAL_STEPS_CNT = 22;
 * @param {object} steps Optional JSON containing introJs steps. They can be
 *  specified here, or hardcoded in HTML.
 */
-function initPageTutorialSteps(pageFirstStep, pageLastStep, nextPagePath,
+function initPageTutorialSteps(pageFirstStepN, pageLastStepN, nextPagePath,
                               beforeCb, endCb, steps) {
  var tutorialData = Cookies.get('tutorial_data');
  if (tutorialData) {
    tutorialData = JSON.parse(tutorialData);
    var stepNum = parseInt(Cookies.get('current_tutorial_step'), 10);
    if (isNaN(stepNum)) {
+      // Cookies data initialization
      stepNum = 1;
      Cookies.set('current_tutorial_step', stepNum);
      tutorialData[0].backPagesPaths = [];
@ -84,7 +89,7 @@ function initPageTutorialSteps(pageFirstStep, pageLastStep, nextPagePath,
    beforeCb();

    // Initialize tutorial for the current page's steps
-    var doneLabel = (pageLastStep === TUTORIAL_STEPS_CNT) ?
+    var doneLabel = (pageLastStepN === TUTORIAL_STEPS_CNT) ?
     'Start using sciNote' : 'End tutorial';
    if (_.isUndefined(steps)) {
      introJs()
@ -101,10 +106,10 @@ function initPageTutorialSteps(pageFirstStep, pageLastStep, nextPagePath,
         disableInteraction: true,
         tooltipClass: 'custom next-page-link'
       })
-       .goToStep(stepNum - (pageFirstStep - 1))
+       .goToStep(stepNum - (pageFirstStepN - 1))
       .start();
    } else {
-      if (pageFirstStep === pageLastStep) {
+      if (pageFirstStepN === pageLastStepN) {
        // Only one page step, so add another fake one, so the back and next
        // buttons are added to the popup
        steps.push({});
@ -124,15 +129,15 @@ function initPageTutorialSteps(pageFirstStep, pageLastStep, nextPagePath,
         tooltipClass: 'custom next-page-link',
         steps: steps
       })
-       .goToStep(stepNum - (pageFirstStep - 1))
+       .goToStep(stepNum - (pageFirstStepN - 1))
       .start();
    }

    // Page navigation when coming to this page from previous/next page
    $(function() {
-      if (stepNum === pageFirstStep && stepNum > 1) {
+      if (stepNum === pageFirstStepN && stepNum > 1) {
        $('.introjs-prevbutton').removeClass('introjs-disabled');
-      } else if (stepNum === pageLastStep && stepNum < TUTORIAL_STEPS_CNT) {
+      } else if (stepNum === pageLastStepN && stepNum < TUTORIAL_STEPS_CNT) {
        $('.introjs-nextbutton').removeClass('introjs-disabled');
      }
    });
@ -150,9 +155,9 @@ function initPageTutorialSteps(pageFirstStep, pageLastStep, nextPagePath,
      if (stepNum > 1) {
        Cookies.set('current_tutorial_step', --stepNum);

-        if (stepNum === pageFirstStep && stepNum > 1) {
+        if (stepNum === pageFirstStepN && stepNum > 1) {
          $('.introjs-prevbutton').removeClass('introjs-disabled');
-        } else if (stepNum < pageFirstStep) {
+        } else if (stepNum < pageFirstStepN) {
          // Go to previous page;

          var prevPagePath = tutorialData[0].backPagesPaths.pop();
@ -168,9 +173,9 @@ function initPageTutorialSteps(pageFirstStep, pageLastStep, nextPagePath,
      if (stepNum < TUTORIAL_STEPS_CNT) {
        Cookies.set('current_tutorial_step', ++stepNum);

-        if (stepNum === pageLastStep && stepNum < TUTORIAL_STEPS_CNT) {
+        if (stepNum === pageLastStepN && stepNum < TUTORIAL_STEPS_CNT) {
          $('.introjs-nextbutton').removeClass('introjs-disabled');
-        } else if (stepNum > pageLastStep) {
+        } else if (stepNum > pageLastStepN) {
          // Go to next page

          tutorialData[0].backPagesPaths.push(thisPagePath);