scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-02-02 21:20:08 +08:00
Code Issues Projects Releases Packages Wiki Activity

Refactored and added back button for tutorial for steps 14-15.

Browse source
This commit is contained in:
Matej Zrimšek 2016-11-16 11:44:43 +01:00
parent 4ee7baabec
commit bfe7c19f93
1 changed files with 55 additions and 122 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

177
app/assets/javascripts/my_modules/results.js.erb
View file

@ -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();
});