diff --git a/app/assets/javascripts/my_modules/protocols.js b/app/assets/javascripts/my_modules/protocols.js index 540a3d189..9575271f1 100644 --- a/app/assets/javascripts/my_modules/protocols.js +++ b/app/assets/javascripts/my_modules/protocols.js @@ -123,6 +123,7 @@ function initTutorial() { { intro: moduleProtocolsClickResultsTutorial, element: resultsTab[0], + position: 'bottom-right-aligned', tooltipClass: 'custom next-page-link' } ], diff --git a/app/assets/javascripts/my_modules/results.js.erb b/app/assets/javascripts/my_modules/results.js.erb index 188148d37..88b7bdf40 100644 --- a/app/assets/javascripts/my_modules/results.js.erb +++ b/app/assets/javascripts/my_modules/results.js.erb @@ -101,6 +101,7 @@ function initTutorial() { { element: samplesTab[0], intro: moduleResultsClickSamplesTutorial, + position: 'bottom-right-aligned', tooltipClass: 'custom next-page-link' } ], diff --git a/app/assets/javascripts/projects/index.js.erb b/app/assets/javascripts/projects/index.js.erb index 345818510..e7e18c194 100644 --- a/app/assets/javascripts/projects/index.js.erb +++ b/app/assets/javascripts/projects/index.js.erb @@ -417,8 +417,9 @@ intro: archiveProjectTutorial, position: position },{ - element: document.getElementsByClassName("avatar")[0], - intro: goodbye_message + element: document.getElementsByClassName("avatar")[0].parentNode, + intro: goodbye_message, + position: 'bottom-right-aligned' }], overlayOpacity: '0.2', doneLabel: 'Start using sciNote', @@ -440,16 +441,6 @@ restore_after_tutorial(); }) .start(); - - window.onresize = function() { - switch (position) { - case "right": - $(".introjs-tooltip").css("left", (demoProject.width() + 20) + "px"); - break; - default: - $(".introjs-tooltip").css("left", (demoProject.width()/2 - $(".introjs-tooltip").width()/2) + "px"); - } - }; } } } diff --git a/app/assets/javascripts/reports/index.js b/app/assets/javascripts/reports/index.js index 67c4ab375..1cb9acf35 100644 --- a/app/assets/javascripts/reports/index.js +++ b/app/assets/javascripts/reports/index.js @@ -150,6 +150,7 @@ { element: document.getElementById("new-report-btn"), intro: reportsClickNewReportTutorial, + position: 'right', tooltipClass: "custom next-page-link" } ], diff --git a/app/assets/javascripts/samples/samples.js b/app/assets/javascripts/samples/samples.js index 916457cfb..274e142f3 100644 --- a/app/assets/javascripts/samples/samples.js +++ b/app/assets/javascripts/samples/samples.js @@ -156,21 +156,23 @@ function sampleAlertMsgHide() { function initTutorial() { var currentStep = parseInt(Cookies.get('current_tutorial_step'), 10); - if (showTutorial() && (currentStep > 15 && currentStep < 19)) { - var samplesTutorial =$("#samples-toolbar").attr("data-samples-step-text"); - var breadcrumbsTutorial = $("#samples-toolbar").attr("data-breadcrumbs-step-text"); + if (showTutorial() && (currentStep > 15 && currentStep < 19)) { + var samplesTutorial = $('#samples-toolbar').attr('data-samples-step-text'); + var breadcrumbsTutorial = $('#samples-toolbar') + .attr('data-breadcrumbs-step-text'); introJs() .setOptions({ steps: [ { - element: document.getElementById("importSamplesButton"), - intro: samplesTutorial + element: document.getElementById('importSamplesButton'), + intro: samplesTutorial, + position: 'right' }, { - element: document.getElementById("secondary-menu"), + element: document.getElementById('secondary-menu'), intro: breadcrumbsTutorial, - tooltipClass: 'custom next-page-link', + tooltipClass: 'custom next-page-link' } ], overlayOpacity: '0.1', @@ -184,28 +186,25 @@ function initTutorial() { disableInteraction: true, tooltipClass: "custom" }) - .onafterchange(function (tarEl) { + .onafterchange(function() { Cookies.set('current_tutorial_step', this._currentStep + 17); - if (this._currentStep == 1) { + if (this._currentStep === 1) { setTimeout(function() { $('.next-page-link a.introjs-nextbutton') .removeClass('introjs-disabled') - .attr('href', $("#reports-nav-tab a").attr('href')); + .attr('href', $('#reports-nav-tab a').attr('href')); $('.introjs-disableInteraction').remove(); - positionTutorialTooltip(); }, 500); - } else { - positionTutorialTooltip(); } }) - .goToStep(currentStep == 18 ? 2 : 1) + .goToStep(currentStep === 18 ? 2 : 1) .start(); // Destroy first-time tutorial cookies when skip tutorial // or end tutorial is clicked - $(".introjs-skipbutton").each(function (){ - $(this).click(function (){ + $('.introjs-skipbutton').each(function() { + $(this).click(function() { Cookies.remove('tutorial_data'); Cookies.remove('current_tutorial_step'); restore_after_tutorial(); @@ -214,26 +213,6 @@ function initTutorial() { } } -function positionTutorialTooltip() { - if (Cookies.get('current_tutorial_step') == 13) { - if ($("#reports-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"); - } - } 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')) diff --git a/app/views/protocols/index.html.erb b/app/views/protocols/index.html.erb index 0fe594965..ce0f2078f 100644 --- a/app/views/protocols/index.html.erb +++ b/app/views/protocols/index.html.erb @@ -3,7 +3,7 @@ <% if current_organization %> <%= render partial: "protocols/breadcrumbs.html.erb", locals: { organizations: @organizations, current_organization: @current_organization, type: @type } %> -