From 3f8d3d59390f9caf682a0aac8184724df0ff53ec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matej=20Zrim=C5=A1ek?= Date: Tue, 15 Nov 2016 19:30:17 +0100 Subject: [PATCH] Refactored and added back button for tutorial for steps 6-11. --- app/assets/javascripts/projects/canvas.js.erb | 278 ++++++------------ app/assets/javascripts/projects/index.js.erb | 12 +- app/assets/javascripts/projects/show.js | 2 +- app/assets/javascripts/sitewide/utils.js | 75 +++-- 4 files changed, 147 insertions(+), 220 deletions(-) diff --git a/app/assets/javascripts/projects/canvas.js.erb b/app/assets/javascripts/projects/canvas.js.erb index 93947205d..b4f28b349 100644 --- a/app/assets/javascripts/projects/canvas.js.erb +++ b/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; -} diff --git a/app/assets/javascripts/projects/index.js.erb b/app/assets/javascripts/projects/index.js.erb index 14505d2e6..9d49fca69 100644 --- a/app/assets/javascripts/projects/index.js.erb +++ b/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')); diff --git a/app/assets/javascripts/projects/show.js b/app/assets/javascripts/projects/show.js index d1a844b52..1d82f63e8 100644 --- a/app/assets/javascripts/projects/show.js +++ b/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(){ diff --git a/app/assets/javascripts/sitewide/utils.js b/app/assets/javascripts/sitewide/utils.js index 1d27de40c..ea87e7a49 100644 --- a/app/assets/javascripts/sitewide/utils.js +++ b/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); } }