mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-02-02 21:20:08 +08:00
Refactored and added back button for tutorial for steps 14-15.
This commit is contained in:
Matej Zrimšek
parent
4ee7baabec
commit
bfe7c19f93
1 changed files with 55 additions and 122 deletions
|
|
@ -1,4 +1,41 @@
|
||||||
//= require comments
|
//= 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) {
|
function initHandsOnTables(root) {
|
||||||
root.find("div.hot-table").each(function() {
|
root.find("div.hot-table").each(function() {
|
||||||
var $container = $(this).find(".step-result-hot-table");
|
var $container = $(this).find(".step-result-hot-table");
|
||||||
|
|
@ -82,100 +119,25 @@ function renderTable(table) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Initialize first-time tutorial
|
/**
|
||||||
|
* Initializes tutorial
|
||||||
|
*/
|
||||||
function initTutorial() {
|
function initTutorial() {
|
||||||
var currentStep = Cookies.get('current_tutorial_step');
|
var samplesTab = $("#module-samples-nav-tab");
|
||||||
if (showTutorial() && (currentStep > 13 && currentStep < 17)) {
|
var nextPage = samplesTab.find("a").attr('href');
|
||||||
var moduleResultsTutorial = $("#results").attr("data-module-protocols-step-text");
|
var steps = [
|
||||||
var moduleResultsClickSamplesTutorial = $("#results").attr("data-module-protocols-click-samples-step-text");
|
{
|
||||||
var samplesTab = $("#module-samples-nav-tab");
|
element: document.getElementById("results-toolbar"),
|
||||||
|
intro: $("#results").attr("data-module-protocols-step-text")
|
||||||
introJs()
|
},
|
||||||
.setOptions({
|
{
|
||||||
steps: [
|
element: samplesTab[0],
|
||||||
{
|
intro: $("#results")
|
||||||
element: document.getElementById("results-toolbar"),
|
.attr("data-module-protocols-click-samples-step-text"),
|
||||||
intro: moduleResultsTutorial,
|
position: 'left'
|
||||||
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");
|
|
||||||
}
|
}
|
||||||
} else {
|
];
|
||||||
if ($(".introjs-tooltip").offset().left > window.innerWidth) {
|
initPageTutorialSteps(14, 15, nextPage, function() {}, function() {}, steps);
|
||||||
$(".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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
var ResultTypeEnum = Object.freeze({
|
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(){
|
$(document).ready(function(){
|
||||||
initHandsOnTables($(document));
|
init();
|
||||||
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();
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue