Refactored and added back button for tutorial for steps 19-20. Updated tutorial steps count.

app/assets/javascripts/reports/new.js.erb

@@ -21,6 +21,25 @@ var ignoreUnsavedWorkAlert;
  * INITIALIZATION FUNCTIONS
  */
 
+ /**
+  * Initializes page
+  */
+ function init() {
+   initializeReportElements($(REPORT_CONTENT));
+   initializeGlobalReportSort();
+   initializePrintPopup();
+   initializeSaveToPdf();
+   initializeSaveReport();
+   initializeAddContentsModal();
+   initializeSidebarNavigation();
+   initializeUnsavedWorkDialog();
+   initTutorial();
+
+   $('.report-nav-link').each(function() {
+     truncateLongString($(this), <%= Constants::NAME_TRUNCATION_LENGTH %>);
+   });
+ }
+
 /**
  * Initialize the hands on table on the given
  * element with the specified data.
@@ -445,26 +464,25 @@ function initializeUnsavedWorkDialog() {
 
   ignoreUnsavedWorkAlert = false;
 
-  $(window).on("beforeunload", function() {
-    $(window).off('beforeunload');
-    $(document).off('page:before-change');
-    return alertText;
-  });
-
-  $(document).on("page:before-change", function() {
+  /**
+   * Before unload event logic
+   */
+  function beforeUnload() {
     var exit;
     if (ignoreUnsavedWorkAlert) {
       exit = true;
     } else {
       exit = confirm(alertText);
     }
-    if ( exit ) {
+    if (exit) {
       // We leave the page so remove all listeners
       $(window).off('beforeunload');
       $(document).off('page:before-change');
     }
-    return exit;
-  });
+  }
+
+  $(window).on('beforeunload', beforeUnload);
+  $(document).on('page:before-change', beforeUnload);
 }
 
 /**
@@ -1125,89 +1143,22 @@ function initializeReportSidebartruncation() {
   observer.observe(target, config);
 }
 
-/* Initialize the first-time demo tutorial if needed. */
-function initializeTutorial() {
-  if (showTutorial()) {
-    ignoreUnsavedWorkAlert = true;
-
-    introJs()
-      .setOptions({
-        overlayOpacity: '0.1',
-        nextLabel: 'Next',
-        doneLabel: 'End tutorial',
-        skipLabel: 'End tutorial',
-        showBullets: false,
-        showStepNumbers: false,
-        exitOnOverlayClick: false,
-        exitOnEsc: false,
-        tooltipClass: 'custom next-page-link',
-        disableInteraction: true
-      })
-      .onafterchange(function (tarEl) {
-        Cookies.set('current_tutorial_step', this._currentStep + 20);
-        if (this._currentStep == 1) {
-          setTimeout(function() {
-            $('.next-page-link a.introjs-nextbutton')
-              .removeClass('introjs-disabled')
-              .attr('href', '/protocols');
-            $('.introjs-disableInteraction').remove();
-          }, 500);
-        } else {
-
-        }
-      })
-      .start();
-
-    window.onresize = function() {
-      if (Cookies.get('current_tutorial_step') == 20) {
-        $(".introjs-tooltip").css("right", ($(".new-element.initial").width() + 60)  + "px");
-      }
-    };
-
-    // 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');
-      });
-    });
-  }
-}
-
-function showTutorial() {
-  var tutorialData;
-  if (Cookies.get('tutorial_data'))
-    tutorialData = JSON.parse(Cookies.get('tutorial_data'));
-  else
-    return false;
-  var currentStep = Cookies.get('current_tutorial_step');
-  if (currentStep < 18 && currentStep > 22)
-    return false;
-  var tutorialProjectId = tutorialData[0].project;
-  var currentProjectId = $("#data-holder").attr("data-project-id");
-  return tutorialProjectId == currentProjectId;
+/**
+ * Initializes tutorial
+ */
+function initTutorial() {
+  ignoreUnsavedWorkAlert = true;
+  var nextPage = $('#organization-link').attr('href');
+  initPageTutorialSteps(19, 20, nextPage, function() {}, function() {
+    ignoreUnsavedWorkAlert = false;
+  });
+>>>>>>> Refactored and added back button for tutorial for steps 19-20. Updated tutorial steps count.
 }
 
 $(document).ready(function() {
-  /**
-  * ACTUAL CODE
-  */
-  //Check if we are actually at new report page
-  if ( $(REPORT_CONTENT).length ) {
-    initializeReportElements($(REPORT_CONTENT));
-    initializeGlobalReportSort();
-    initializePrintPopup();
-    initializeSaveToPdf();
-    initializeSaveReport();
-    initializeAddContentsModal();
-    initializeSidebarNavigation();
-    initializeUnsavedWorkDialog();
-    initializeTutorial();
-
-    $('.report-nav-link').each(function() {
-      truncateLongString($(this), <%= Constants::NAME_TRUNCATION_LENGTH %>);
-    });
+  // Check if we are actually at new report page
+  if ($(REPORT_CONTENT).length) {
+    init();
   }
 })
 

app/assets/javascripts/sitewide/utils.js

@@ -26,7 +26,7 @@ $.fn.onAjaxComplete = function (cb) {
   });
 }
 
-var TUTORIAL_STEPS_CNT = 20;
+var TUTORIAL_STEPS_CNT = 22;
 
 /**
  * Initializes tutorial steps for the current page.

app/views/reports/elements/_new_element.html.erb

@@ -2,7 +2,7 @@
 <% if !defined? initial then initial = false end %>
 <div class="new-element <%= "hidden" if hide %> <%= "initial" if initial %>" data-ts="ignore" data-type="new" title="<%=t "projects.reports.elements.new_element.title" %>"
   <% if initial %>
-    data-step="20"
+    data-step="19"
     data-position="left"
     data-intro="<%=t 'tutorial.new_report_html' %>"
   <% end %>>

app/views/reports/new/_report_navigation.html.erb

@@ -5,7 +5,7 @@
         <ul class="breadcrumb" style="margin-left: 15px;">
           <li>
             <% if can_view_projects(@project.organization) %>
-              <a href="<%= projects_path :organization => @project.organization.id %>" data-intro="<%=t 'tutorial.new_report_click_org_html', private_org: @project.organization.name %>" data-step="21" data-position="right">
+              <a id="organization-link" href="<%= projects_path :organization => @project.organization.id %>" data-intro="<%=t 'tutorial.new_report_click_org_html', private_org: @project.organization.name %>" data-step="20">
             <% end %>
             <span class="hidden-sm hidden-md hidden-lg">Org</span>
             <span class="hidden-xs"><%= @project.organization.name %></span>
@@ -53,7 +53,7 @@
           <span class="hidden-xs"><%=t "projects.reports.new.nav_save" %></span>
         <% end %>
 
-        <%= link_to project_reports_path(@project), class: "btn btn-default" do %>
+        <%= link_to project_reports_path(@project), id: "cancel-report-link", class: "btn btn-default" do %>
           <span class="glyphicon glyphicon-remove"></span>
           <span class="hidden-xs"><%=t "projects.reports.new.nav_close" %></span>
         <% end %>