scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-03-09 06:04:46 +08:00
Code Issues Projects Releases Packages Wiki Activity

Refactored and added back button for tutorial for steps 16-17. Tutorial now exits upon page leave.

Browse source
This commit is contained in:
Matej Zrimšek 2016-11-16 13:22:07 +01:00
parent bfe7c19f93
commit 00ed91e856
2 changed files with 23 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

96
app/assets/javascripts/samples/samples.js
View file

@ -154,89 +154,23 @@ function sampleAlertMsgHide() {
$('#content-wrapper').removeClass('alert-shown');
}
/**
* Initializes tutorial
*/
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');
introJs()
.setOptions({
steps: [
{
element: document.getElementById('importSamplesButton'),
intro: samplesTutorial,
position: 'right'
},
{
element: document.getElementById('secondary-menu'),
intro: breadcrumbsTutorial,
tooltipClass: 'custom next-page-link'
}
],
overlayOpacity: '0.1',
nextLabel: 'Next',
doneLabel: 'End tutorial',
skipLabel: 'End tutorial',
showBullets: false,
showStepNumbers: false,
exitOnOverlayClick: false,
exitOnEsc: false,
disableInteraction: true,
tooltipClass: "custom"
})
.onafterchange(function() {
Cookies.set('current_tutorial_step', this._currentStep + 17);
if (this._currentStep === 1) {
setTimeout(function() {
$('.next-page-link a.introjs-nextbutton')
.removeClass('introjs-disabled')
.attr('href', $('#reports-nav-tab a').attr('href'));
$('.introjs-disableInteraction').remove();
}, 500);
}
})
.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() {
Cookies.remove('tutorial_data');
Cookies.remove('current_tutorial_step');
restore_after_tutorial();
});
});
}
}
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 = $("#samples-toolbar").attr("data-module-id");
return tutorialModuleId == currentModuleId;
}
function samples_tutorial_helper(){
if( $('div').hasClass('introjs-overlay') ){
$.each( $('#secondary-menu').find('a'), function(){
$(this).css({ 'pointer-events': 'none' });
});
var nextPage = $('#reports-nav-tab a').attr('href');
var steps = [
{
element: document.getElementById('importSamplesButton'),
intro: $('#samples-toolbar').attr('data-samples-step-text'),
position: 'right'
},
{
element: document.getElementById('secondary-menu'),
intro: $('#samples-toolbar').attr('data-breadcrumbs-step-text')
}
];
initPageTutorialSteps(16, 17, nextPage, function() {}, function() {}, steps);
}
function restore_after_tutorial(){
$.each( $('#secondary-menu').find('a'), function(){
$(this).css({ 'pointer-events': 'auto' });
});
}
// Initialize first-time tutorial
initTutorial();
samples_tutorial_helper();

10
app/assets/javascripts/sitewide/utils.js
View file

@ -59,8 +59,12 @@ var TUTORIAL_STEPS_CNT = 20;
* @param {number} pageFirstStep Page's first step
* @param {number} pageLastStep Page's last step
* @param {string} nextPagePath Next page absolute path
* @param {function} beforeCb Callback called before the tutorial starts
* @param {function} endCb Callback called after the tutorial ends
* @param {function} beforeCb Callback called before the tutorial starts. Mainly
* used for setting 'pointer-events: none' on the elements the page's steps
* highlight.
* @param {function} endCb Callback called after the tutorial ends. Mainly used
* for setting 'pointer-events: auto' on the elements the page's steps
* highlight.
* @param {object} steps Optional JSON containing introJs steps. They can be
* specified here, or hardcoded in HTML.
*/
@ -149,6 +153,7 @@ function initPageTutorialSteps(pageFirstStep, pageLastStep, nextPagePath,
var prevPagePath = tutorialData[0].backPagesPaths.pop();
Cookies.set('tutorial_data', tutorialData);
$('.introjs-prevbutton').attr('href', prevPagePath);
introJs().exit();
endCb();
}
}
@ -166,6 +171,7 @@ function initPageTutorialSteps(pageFirstStep, pageLastStep, nextPagePath,
tutorialData[0].backPagesPaths.push(thisPagePath);
Cookies.set('tutorial_data', tutorialData);
$('.introjs-nextbutton').attr('href', nextPagePath);
introJs().exit();
endCb();
}
}