diff --git a/app/assets/javascripts/my_modules/results.js.erb b/app/assets/javascripts/my_modules/results.js.erb index 88b7bdf40..0ac85eb90 100644 --- a/app/assets/javascripts/my_modules/results.js.erb +++ b/app/assets/javascripts/my_modules/results.js.erb @@ -1,4 +1,41 @@ //= require comments + +/** + * Initializes page + */ +function init() { + initHandsOnTables($(document)); + expandAllResults(); + initTutorial(); + applyCollapseLinkCallBack(); + + Comments.bindNewElement(); + Comments.initialize(); + + Comments.initCommentOptions("ul.content-comments"); + Comments.initEditComments("#results"); + Comments.initDeleteComments("#results"); + + $(function () { + $("#results-collapse-btn").click(function () { + $('.result .panel-collapse').collapse('hide'); + $(document).find("span.collapse-result-icon").each(function() { + $(this).addClass("glyphicon-collapse-down"); + $(this).removeClass("glyphicon-collapse-up"); + }); + }); + + $("#results-expand-btn").click(expandAllResults); + }); + + // This checks if the ctarget param exist in the rendered url and opens the + // comment tab + if( getParam('ctarget') ){ + var target = "#"+ getParam('ctarget'); + $(target).find('a.comment-tab-link').click(); + } +} + function initHandsOnTables(root) { root.find("div.hot-table").each(function() { var $container = $(this).find(".step-result-hot-table"); @@ -82,100 +119,25 @@ function renderTable(table) { } } -// Initialize first-time tutorial +/** + * Initializes tutorial + */ function initTutorial() { - var currentStep = Cookies.get('current_tutorial_step'); - if (showTutorial() && (currentStep > 13 && currentStep < 17)) { - var moduleResultsTutorial = $("#results").attr("data-module-protocols-step-text"); - var moduleResultsClickSamplesTutorial = $("#results").attr("data-module-protocols-click-samples-step-text"); - var samplesTab = $("#module-samples-nav-tab"); - - introJs() - .setOptions({ - steps: [ - { - element: document.getElementById("results-toolbar"), - intro: moduleResultsTutorial, - disableInteraction: true - }, - { - element: samplesTab[0], - intro: moduleResultsClickSamplesTutorial, - position: 'bottom-right-aligned', - tooltipClass: 'custom next-page-link' - } - ], - overlayOpacity: '0.1', - doneLabel: 'End tutorial', - skipLabel: 'End tutorial', - nextLabel: 'Next', - showBullets: false, - showStepNumbers: false, - exitOnOverlayClick: false, - exitOnEsc: false, - tooltipClass: 'custom', - disableInteraction: true - }) - .onafterchange(function (tarEl){ - Cookies.set('current_tutorial_step', this._currentStep + 15); - if (this._currentStep == 1) { - setTimeout(function() { - $('.next-page-link a.introjs-nextbutton') - .removeClass('introjs-disabled') - .attr('href', samplesTab.find("a").attr('href')); - - $(".introjs-disableInteraction").remove(); - positionTutorialTooltip(); - }, 500); - } else { - positionTutorialTooltip(); - } - }) - .goToStep(currentStep == 16 ? 2 : 1) - .start(); - - window.onresize = positionTutorialTooltip; - - // 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 positionTutorialTooltip() { - if (Cookies.get('current_tutorial_step') == 13) { - if ($("#module-samples-nav-tab").offset().left == 0) { - $(".introjs-tooltip").css("left", (window.innerWidth / 2 - 50) + "px"); - $(".introjs-tooltip").addClass("repositioned"); - } else if ($(".introjs-tooltip").hasClass("repositioned")) { - $(".introjs-tooltip").css("left", ""); - $(".introjs-tooltip").removeClass("repositioned"); + var samplesTab = $("#module-samples-nav-tab"); + var nextPage = samplesTab.find("a").attr('href'); + var steps = [ + { + element: document.getElementById("results-toolbar"), + intro: $("#results").attr("data-module-protocols-step-text") + }, + { + element: samplesTab[0], + intro: $("#results") + .attr("data-module-protocols-click-samples-step-text"), + position: 'left' } - } else { - if ($(".introjs-tooltip").offset().left > window.innerWidth) { - $(".introjs-tooltip").css("left", (window.innerWidth / 2 - 50) + "px"); - $(".introjs-tooltip").addClass("repositioned"); - } else if ($(".introjs-tooltip").hasClass("repositioned")) { - $(".introjs-tooltip").css("left", ""); - $(".introjs-tooltip").removeClass("repositioned"); - } - } -}; - -function showTutorial() { - var tutorialData; - if (Cookies.get('tutorial_data')) - tutorialData = JSON.parse(Cookies.get('tutorial_data')); - else - return false; - var tutorialModuleId = tutorialData[0].qpcr_module; - var currentModuleId = $("#results").attr("data-module-id"); - return tutorialModuleId == currentModuleId; + ]; + initPageTutorialSteps(14, 15, nextPage, function() {}, function() {}, steps); } var ResultTypeEnum = Object.freeze({ @@ -230,35 +192,6 @@ function processResult(ev, resultTypeEnum, editMode, forS3) { } } -// This checks if the ctarget param exist in the -// rendered url and opens the comment tab $(document).ready(function(){ - initHandsOnTables($(document)); - expandAllResults(); - initTutorial(); - applyCollapseLinkCallBack(); - - Comments.bindNewElement(); - Comments.initialize(); - - Comments.initCommentOptions("ul.content-comments"); - Comments.initEditComments("#results"); - Comments.initDeleteComments("#results"); - - $(function () { - $("#results-collapse-btn").click(function () { - $('.result .panel-collapse').collapse('hide'); - $(document).find("span.collapse-result-icon").each(function() { - $(this).addClass("glyphicon-collapse-down"); - $(this).removeClass("glyphicon-collapse-up"); - }); - }); - - $("#results-expand-btn").click(expandAllResults); - }); - - if( getParam('ctarget') ){ - var target = "#"+ getParam('ctarget'); - $(target).find('a.comment-tab-link').click(); - } + init(); });