mirror of
https://github.com/OpenXE-org/OpenXE.git
synced 2024-11-15 12:37:14 +01:00
1435 lines
46 KiB
JavaScript
1435 lines
46 KiB
JavaScript
/**
|
|
* Template function for Wizard objects
|
|
*/
|
|
var Wizard = function ($) {
|
|
|
|
var me = {
|
|
|
|
storage: {
|
|
key: null,
|
|
settings: {},
|
|
steps: null,
|
|
title: null,
|
|
activeStep: null,
|
|
minimizedStorageKey: null,
|
|
overlay: null,
|
|
stepGroups: null,
|
|
ajaxRunning: false,
|
|
submitPrevented: null,
|
|
linkPrevented: null,
|
|
minimized: false
|
|
},
|
|
|
|
elem: {
|
|
$body: null,
|
|
$container: null,
|
|
$hideTrigger: null,
|
|
$self: null,
|
|
$highlight: null,
|
|
$window: $(window),
|
|
$clickByClickContainer: null
|
|
},
|
|
|
|
/**
|
|
* @param {Object} data
|
|
*/
|
|
init: function (data) {
|
|
var key = data.key;
|
|
|
|
me.storage.key = key;
|
|
me.storage.minimized = data.minimized;
|
|
me.storage.stepGroups = data.step_groups;
|
|
me.storage.settings.title = data.title;
|
|
me.storage.settings.subTitle = data.sub_title;
|
|
me.storage.settings.skipLinkText = data.skip_link_text;
|
|
|
|
me.storage.minimizedStorageKey = 'wizard_' + key + '_minimized';
|
|
|
|
me.elem.$container = $('#wizard-container');
|
|
me.elem.$hint = $('#wizard-hint');
|
|
me.elem.$hideTrigger = $('#wizard-hide-trigger');
|
|
me.elem.$body = $('body');
|
|
|
|
me.generateContainerContents();
|
|
|
|
me.nextStep();
|
|
},
|
|
|
|
show: function () {
|
|
me.elem.$self.show();
|
|
},
|
|
|
|
hide: function () {
|
|
me.elem.$self.slideUp();
|
|
},
|
|
|
|
/**
|
|
* @return {boolean}
|
|
*/
|
|
isMinimized: function () {
|
|
return me.storage.minimized;
|
|
},
|
|
|
|
/**
|
|
* Minimize wizard
|
|
*/
|
|
minimize: function () {
|
|
me.storage.minimized = true;
|
|
$('a').unbind("click.wizard");
|
|
$('form').unbind("submit.wizard");
|
|
},
|
|
|
|
/**
|
|
* Maximize wizard
|
|
*/
|
|
maximize: function () {
|
|
me.storage.minimized = false;
|
|
},
|
|
|
|
finishWizard: function() {
|
|
|
|
var current, i,
|
|
numberOfStepGroups = Object.keys(me.storage.stepGroups).length,
|
|
numberOfCompletedStepGroups = 0;
|
|
|
|
for (var stepGroup in me.storage.stepGroups) {
|
|
if (!me.storage.stepGroups.hasOwnProperty(stepGroup)) {
|
|
return;
|
|
}
|
|
|
|
if(me.storage.stepGroups[stepGroup].completed){
|
|
numberOfCompletedStepGroups++;
|
|
}
|
|
}
|
|
|
|
if(numberOfStepGroups === numberOfCompletedStepGroups){
|
|
me.toggleWizardDetails();
|
|
}
|
|
},
|
|
|
|
toggleWizardDetails: function(){
|
|
$('.wizard-details').toggle();
|
|
},
|
|
|
|
cancelWizard: function(){
|
|
$.ajax({
|
|
url: 'index.php?module=wizard&action=ajax&cmd=cancel_active_wizard&key=' + me.storage.key,
|
|
method: 'post',
|
|
dataType: 'json',
|
|
success: function (data) {
|
|
// we don't need to know
|
|
},
|
|
error: function (xhr, ajaxOptions, thrownError) {
|
|
console.warn(xhr.status, thrownError);
|
|
}
|
|
})
|
|
},
|
|
|
|
/**
|
|
*
|
|
* @param {String} param
|
|
*
|
|
* @returns {String}
|
|
*/
|
|
getUrlParameter: function (param) {
|
|
var sPageURL = window.location.search.substring(1),
|
|
sURLVariables = sPageURL.split('&'),
|
|
sParameterName,
|
|
i;
|
|
|
|
for (i = 0; i < sURLVariables.length; i++) {
|
|
sParameterName = sURLVariables[i].split('=');
|
|
|
|
if (sParameterName[0] === param) {
|
|
return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Register functionality on standard and custom events
|
|
*/
|
|
registerEvents: function () {
|
|
me.elem.$self.find('.wizard-step-group h4').on('click touch', function () {
|
|
$(this).parent().toggleClass('closed');
|
|
});
|
|
|
|
me.elem.$self.find('.wizard-small-trigger').on('click touch', function () {
|
|
$(this).parent().toggleClass('closed');
|
|
});
|
|
|
|
// Handle clicks on step items
|
|
me.elem.$container.on('click touch', '.wizard-step', function () {
|
|
var $step = $(this);
|
|
var link = $step.data('link');
|
|
var stepKey = $step.data('key');
|
|
var $wizard = $step.parents('.wizard');
|
|
var wizardKey = $wizard.data('key');
|
|
var action = $step.data('action');
|
|
|
|
action = action.replace(/'/g, '"');
|
|
action = JSON.parse(action);
|
|
|
|
me.storage.activeStep = {
|
|
key: stepKey,
|
|
node: $step
|
|
};
|
|
|
|
// checks if there is a running ajax request,
|
|
if($.active === 1){
|
|
$(document).ajaxStop(function () {
|
|
$(this).unbind("ajaxStop");
|
|
actionHandling();
|
|
});
|
|
} else {
|
|
actionHandling();
|
|
}
|
|
|
|
function actionHandling(){
|
|
if (action.type === 'highlight') {
|
|
me.elem.$highlight = me.findHighlightElement(action);
|
|
|
|
if (me.elem.$highlight && me.elem.$highlight.length > 0) {
|
|
|
|
if (me.elem.$hint.length > 0) {
|
|
me.elem.$hint.remove();
|
|
}
|
|
|
|
me.scrollElementIntoView();
|
|
|
|
me.createHint();
|
|
|
|
me.bindRedirectPrevention();
|
|
} else if (link !== undefined && link !== "undefined" && link.length > 0) {
|
|
me.visitUrl(link, wizardKey, stepKey);
|
|
}
|
|
}
|
|
|
|
if(action.type === 'click_by_click_assistant'){
|
|
if(link !== undefined && link !== "undefined"){
|
|
var cleanLink = "";
|
|
|
|
if(link.charAt(0) === "."){ //sent links usually start with, "./index.php..." - not compareable
|
|
cleanLink = link.replace('.', '');
|
|
}
|
|
|
|
if(window.location.href.indexOf(cleanLink) > -1){ // if the user is on the correct page
|
|
me.createClickByClickAssistant(action.data);
|
|
} else { // otherwise go to the correct page first
|
|
me.visitUrl(link, wizardKey, stepKey);
|
|
}
|
|
|
|
} else {
|
|
me.createClickByClickAssistant(action.data);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
me.elem.$body.on('click touch blur change focus', '.wizard-highlight', function (e) {
|
|
if (e.type === $(this).data('data-event')) {
|
|
me.completeStep();
|
|
me.removeHint();
|
|
me.nextStep();
|
|
}
|
|
});
|
|
|
|
$('#wizard-container .progress').on('progress-update', function () {
|
|
var self = $(this);
|
|
|
|
if (self.data('value') === self.data('max')) {
|
|
var parentStepgroup = self.parents('.wizard-step-group');
|
|
|
|
parentStepgroup.removeClass('in-progress');
|
|
parentStepgroup.addClass(['complete', 'closed']);
|
|
|
|
me.storage.stepGroups[parentStepgroup.data('name')].completed = true;
|
|
}
|
|
|
|
me.finishWizard();
|
|
});
|
|
|
|
// A form submit has to wait until a Ajax is done
|
|
$('form').on('submit.wizard', function (e) {
|
|
if(me.storage.minimized){
|
|
return;
|
|
}
|
|
|
|
var self = $(this);
|
|
e.preventDefault();
|
|
|
|
me.storage.submitPrevented = self;
|
|
|
|
if(!me.storage.ajaxRunning){
|
|
self.unbind('submit.wizard').submit();
|
|
}
|
|
});
|
|
|
|
$('.close-wizard').on('click touch',function () {
|
|
me.elem.$hideTrigger.trigger('click');
|
|
me.cancelWizard();
|
|
me.elem.$container.remove();
|
|
me.elem.$hideTrigger.remove();
|
|
})
|
|
},
|
|
|
|
bindRedirectPrevention: function(){
|
|
$('a').on('click.wizard', function (e) {
|
|
if(me.storage.minimized){
|
|
return;
|
|
}
|
|
|
|
var self = $(this);
|
|
e.preventDefault();
|
|
|
|
me.storage.linkPrevented = self;
|
|
});
|
|
},
|
|
|
|
/**
|
|
*
|
|
* @param {Object} data
|
|
*/
|
|
createClickByClickAssistant: function(data){
|
|
me.elem.$clickByClickContainer =
|
|
$('<click-by-click-assistant' +
|
|
' id="click-by-click-wizard"' +
|
|
' v-if="showAssistant"' +
|
|
' @close="showAssistant = false"' +
|
|
' :pages="pages"' +
|
|
' :allowClose="allowClose"' +
|
|
' :pagination="pagination">' +
|
|
'</click-by-click-assistant>');
|
|
|
|
me.elem.$clickByClickContainer.appendTo(me.elem.$body);
|
|
|
|
if(data.pagination === undefined){
|
|
data.pagination = false;
|
|
}
|
|
|
|
new Vue({
|
|
el: '#click-by-click-wizard',
|
|
data: data
|
|
});
|
|
},
|
|
|
|
scrollElementIntoView: function(){
|
|
var element = me.elem.$highlight,
|
|
elementTop = element.offset().top,
|
|
elementBottom = elementTop + element.outerHeight(),
|
|
viewportTop = me.elem.$window.scrollTop(),
|
|
viewportBottom = viewportTop + me.elem.$window.height(),
|
|
elementInViewport = elementBottom > viewportTop && elementTop < viewportBottom;
|
|
|
|
if(elementInViewport){
|
|
return;
|
|
}
|
|
|
|
var elementHeight = element.height(),
|
|
viewportHeight = me.elem.$window.height(),
|
|
elementOffset = element.offset().top,
|
|
offset;
|
|
|
|
if (elementHeight < viewportHeight) {
|
|
offset = elementOffset - ((viewportHeight / 2) - (elementHeight / 2));
|
|
}
|
|
|
|
window.setTimeout(function () {
|
|
window.scrollTo({
|
|
top: offset,
|
|
behavior: 'smooth'
|
|
});
|
|
}, 100);
|
|
},
|
|
|
|
/**
|
|
* @param {string} url
|
|
* @param {string|null} wizardKey
|
|
* @param {string|null} stepKey
|
|
*/
|
|
visitUrl: function (url, wizardKey, stepKey) {
|
|
if(url === undefined){
|
|
return;
|
|
}
|
|
|
|
if (typeof wizardKey === 'undefined' && typeof stepKey === 'undefined') {
|
|
window.location.href = me.addParameterToUrl(url);
|
|
return;
|
|
}
|
|
|
|
window.location.href = me.addParameterToUrl(url);
|
|
},
|
|
|
|
/**
|
|
* @param {string} url
|
|
*
|
|
* @return {string}
|
|
*/
|
|
addParameterToUrl: function (url) {
|
|
var finalUrl,
|
|
elementParam = '';
|
|
|
|
var hashCharPosition = url.lastIndexOf('#');
|
|
if (hashCharPosition === -1) {
|
|
// Keine Sprungmarke in URL > Random-Parameter wird nicht benötigt
|
|
finalUrl = url;
|
|
} else {
|
|
var randomNumber = Math.floor(Math.random() * Math.floor(9999)),
|
|
urlStart = url.slice(0, hashCharPosition),
|
|
urlEnd = url.slice(hashCharPosition);
|
|
|
|
finalUrl = urlStart + elementParam + '&rand=' + randomNumber + urlEnd;
|
|
}
|
|
|
|
return finalUrl + elementParam;
|
|
},
|
|
|
|
/**
|
|
* Creates hint box
|
|
*/
|
|
createHint: function () {
|
|
if (me.elem.$highlight.length === 0) {
|
|
return;
|
|
}
|
|
|
|
var hintHtml =
|
|
'<div id="wizard-hint"><div class="wizard-hint-arrow"></div>' +
|
|
'<h2>' + me.storage.activeStep.node.data('hint-title') + '</h2>' +
|
|
'<p>' + me.storage.activeStep.node.data('hint-content') + '</p>' +
|
|
'<div class="wizard-hint-action">';
|
|
|
|
if(me.storage.activeStep.node.data('hint-cta') !== false){
|
|
hintHtml += '<button class="button button-secondary">Weiter</button>'
|
|
}
|
|
|
|
hintHtml +=
|
|
'</div>' +
|
|
'</div>'
|
|
|
|
me.elem.$hint = $(hintHtml).appendTo('body');
|
|
|
|
me.elem.$hint.find('.wizard-hint-action').on('click touch', function () {
|
|
me.completeStep();
|
|
me.removeHint();
|
|
me.nextStep();
|
|
});
|
|
|
|
var resizeTimeout;
|
|
$(window).on('resize scroll', function () {
|
|
if (me.storage.overlay === null) {
|
|
return;
|
|
}
|
|
|
|
if (!!resizeTimeout) {
|
|
clearTimeout(resizeTimeout);
|
|
}
|
|
|
|
resizeTimeout = setTimeout(function () {
|
|
me.storage.overlay.focus(me.elem.$highlight);
|
|
me.positionHintAtHighlight();
|
|
}, 10);
|
|
});
|
|
|
|
me.positionHintAtHighlight();
|
|
},
|
|
|
|
removeHint: function () {
|
|
if(me.elem.$hint !== undefined && me.elem.$hint !== null){
|
|
me.elem.$hint.remove();
|
|
}
|
|
|
|
if(me.storage.overlay !== undefined && me.storage.overlay !== null){
|
|
me.storage.overlay.remove();
|
|
me.storage.overlay = null;
|
|
}
|
|
|
|
$('a').unbind('click.wizard');
|
|
$('form').unbind('submit.wizard');
|
|
},
|
|
|
|
/**
|
|
* Moves hint to highlighted element
|
|
*/
|
|
positionHintAtHighlight: function () {
|
|
if (me.storage.overlay !== null) {
|
|
me.storage.overlay.focus(me.elem.$highlight);
|
|
} else {
|
|
me.storage.overlay = new focusOverlay;
|
|
me.storage.overlay.init(me.elem.$highlight);
|
|
}
|
|
|
|
var hintOptions = {
|
|
my: 'left-10px top+15px',
|
|
at: 'left bottom',
|
|
of: me.elem.$highlight
|
|
}
|
|
|
|
var hintArrowOptions = {
|
|
my: 'left top+5',
|
|
at: 'left bottom',
|
|
of: me.elem.$highlight
|
|
}
|
|
|
|
if(me.elem.$highlight.hasClass('hasDatepicker')){
|
|
me.elem.$hint.find('.wizard-hint-arrow').addClass('point-right');
|
|
hintOptions.my = 'left-230 top-50%';
|
|
hintOptions.at = 'left bottom';
|
|
|
|
hintArrowOptions.my = 'right+5 top-24';
|
|
hintArrowOptions.at = 'left bottom';
|
|
}
|
|
|
|
window.setTimeout(function () {
|
|
me.elem.$hint.position(hintOptions);
|
|
me.elem.$hint.find('.wizard-hint-arrow').position(hintArrowOptions);
|
|
},100);
|
|
|
|
me.elem.$highlight.addClass('hint-added');
|
|
me.elem.$highlight.addClass('wizard-highlight');
|
|
},
|
|
|
|
/**
|
|
* Completes a step and informs the backend
|
|
*/
|
|
completeStep: function () {
|
|
var stepName = me.storage.activeStep.node.data('step-name'),
|
|
parentGroup = me.storage.activeStep.node.data('parent-group'),
|
|
parentSubgroup = me.storage.activeStep.node.data('parent-sub-group');
|
|
|
|
if(me.elem.$highlight){
|
|
me.elem.$highlight.removeClass('wizard-highlight');
|
|
}
|
|
|
|
me.storage.activeStep.node.addClass('checked');
|
|
me.updateProgressBar();
|
|
|
|
if (me.storage.overlay !== null) {
|
|
me.storage.overlay.remove();
|
|
}
|
|
|
|
me.updateSubGroupProgress(parentGroup, parentSubgroup, stepName);
|
|
},
|
|
|
|
/**
|
|
*
|
|
* @param {String} groupName
|
|
* @param {String} subGroupName
|
|
* @param {String} stepName
|
|
*/
|
|
updateSubGroupProgress: function (groupName, subGroupName, stepName) {
|
|
var steps = me.storage.stepGroups[groupName].sub_groups[subGroupName].steps;
|
|
var currentStep = steps[stepName];
|
|
|
|
//set step completed in storage
|
|
currentStep.completed = true;
|
|
|
|
// check how many siblings the subgroup has and if they are completed
|
|
var stepCounter = 0,
|
|
completeSteps = 0;
|
|
for (var step in steps) {
|
|
if (!steps.hasOwnProperty(step)) {
|
|
continue;
|
|
}
|
|
|
|
if (steps[step].completed) {
|
|
completeSteps++;
|
|
}
|
|
|
|
stepCounter++;
|
|
}
|
|
|
|
if (stepCounter === completeSteps) {
|
|
me.storage.stepGroups[groupName].sub_groups[subGroupName].completed = true;
|
|
|
|
me.postCompleteStepGroup(groupName, subGroupName);
|
|
}
|
|
},
|
|
|
|
/**
|
|
*
|
|
* @param {String} groupName
|
|
* @param {String} subGroupName
|
|
*/
|
|
postCompleteStepGroup: function(groupName, subGroupName){
|
|
me.storage.ajaxRunning = true;
|
|
|
|
$.ajax({
|
|
url: 'index.php?module=wizard&action=ajax&cmd=complete_step&key=' + me.storage.key,
|
|
method: 'post',
|
|
data: {
|
|
step: groupName + '-' + subGroupName,
|
|
link: '.' + window.location.href.substring(window.location.href.indexOf('/index'))
|
|
},
|
|
dataType: 'json',
|
|
success: function (data) {
|
|
// we don't need to know
|
|
console.info('ajax done')
|
|
},
|
|
error: function (xhr, ajaxOptions, thrownError) {
|
|
console.warn(xhr.status, thrownError);
|
|
}
|
|
}).always(function () {
|
|
me.storage.ajaxRunning = false;
|
|
|
|
if(me.storage.submitPrevented){
|
|
me.storage.submitPrevented.unbind('submit.wizard').submit();
|
|
me.storage.submitPrevented = null;
|
|
}
|
|
|
|
if(me.storage.linkPrevented){
|
|
window.location.href = me.storage.linkPrevented.attr('href');
|
|
|
|
me.storage.linkPrevented = null;
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Finds and triggers the next open step
|
|
* @param {String|null} presetHighlight
|
|
*/
|
|
nextStep: function (presetHighlight) {
|
|
if(me.storage.minimized){
|
|
return;
|
|
}
|
|
|
|
$('.wizard-step').removeClass('next-step');
|
|
|
|
// regular next step
|
|
var incompleteSteps = $('.wizard-step:not(.checked)'),
|
|
nextStep = incompleteSteps[0];
|
|
|
|
$(nextStep).addClass('next-step').trigger('click');
|
|
$(nextStep).parents('.wizard-step-group').removeClass("closed");
|
|
$(nextStep).parents('.wizard-step-group').addClass("in-progress");
|
|
},
|
|
|
|
/**
|
|
* Looks for a element in DOM
|
|
* @param {String} selector
|
|
* @returns {jQuery|HTMLElement}
|
|
*/
|
|
findHighlightElement: function (selector) {
|
|
|
|
var selectorString = '',
|
|
element;
|
|
|
|
if (selector.node.parent) {
|
|
addSelectors(selector.node.parent);
|
|
}
|
|
|
|
if (selector.node.previous_sibling) {
|
|
var initialLength = selectorString.length,
|
|
processedLength = 0;
|
|
selectorString += initialLength > 0 ? ' ' : '';
|
|
|
|
addSelectors(selector.node.previous_sibling);
|
|
|
|
processedLength = selectorString.length;
|
|
|
|
if (initialLength < processedLength) {
|
|
selectorString += ' +';
|
|
}
|
|
}
|
|
|
|
if (selector.node.self) {
|
|
selectorString += selectorString.length > 0 ? ' ' : '';
|
|
|
|
addSelectors(selector.node.self);
|
|
}
|
|
|
|
element = $(selectorString).filter(function () { return $(this).css('display') !== 'none'; });
|
|
|
|
if (element.length === 0) {
|
|
console.warn('element not found in dom', selectorString);
|
|
return '';
|
|
} else {
|
|
element.data('data-event', selector.complete_event);
|
|
}
|
|
|
|
/**
|
|
* Combines
|
|
* @param object
|
|
*/
|
|
function addSelectors(object) {
|
|
for (key in object) {
|
|
if(!object.hasOwnProperty(key)){
|
|
continue;
|
|
}
|
|
|
|
var current = object[key];
|
|
|
|
if (key === 'node_name' && current.length > 0) {
|
|
selectorString += current;
|
|
|
|
} else if (key === 'class' && current.length > 0) {
|
|
|
|
if(current.indexOf(' ') > - 1){
|
|
current = current.split(' ');
|
|
|
|
for(var i = 0; i < current.length; i++){
|
|
selectorString += '.' + current[i]
|
|
}
|
|
|
|
} else {
|
|
selectorString += '.' + current;
|
|
}
|
|
} else if(key === 'contains') {
|
|
selectorString += ':contains("' + current + '")';
|
|
} else if(key === 'css_selector'){
|
|
selectorString += current;
|
|
} else if (current.length > 0) {
|
|
selectorString += '[' + key + '="' + current + '"]';
|
|
}
|
|
}
|
|
}
|
|
|
|
if(element.length > 1){
|
|
element = $(element[0]);
|
|
}
|
|
|
|
return element;
|
|
},
|
|
|
|
/**
|
|
* Updates progress bar on step group
|
|
*/
|
|
updateProgressBar: function () {
|
|
var progress = $('.wizard-progress');
|
|
|
|
if (progress.length === 0) {
|
|
return;
|
|
}
|
|
|
|
var totalSteps = 0;
|
|
|
|
for (var j = 0; j < progress.length; j++) {
|
|
var steps = $(progress[j]).parent('ul').find('li'),
|
|
progressEle = $(progress[j]).find('.progress'),
|
|
count = 0;
|
|
|
|
totalSteps = steps.length;
|
|
|
|
for (var i = 0; i < steps.length; i++) {
|
|
if ($(steps[i]).hasClass('checked')) {
|
|
count++;
|
|
}
|
|
}
|
|
|
|
progressEle.css('width', count / totalSteps * 100 + '%');
|
|
progressEle.attr('data-value', count);
|
|
progressEle.trigger('progress-update');
|
|
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Generates the HTML content of a step group
|
|
* @param {string} groupName
|
|
* @param {Object} group
|
|
* @param {Number} groupIndex
|
|
*
|
|
* @returns {string}
|
|
*/
|
|
generateStepGroupHtml: function (groupName, group, groupIndex) {
|
|
var stepsTotal = 0,
|
|
stepsFinished = 0,
|
|
self = this,
|
|
groupHtml =
|
|
'<div data-name="' + groupName + '" class="wizard-step-group {{groupActive}} {{groupComplete}} {{groupClosed}}">' +
|
|
'<h4 data-number="{{groupIndex}}">{{groupTitle}}</h4><div class="wizard-group-content"><ul>';
|
|
|
|
// subgroup
|
|
var subGroupIndex = 0;
|
|
|
|
for (var subGroup in group.sub_groups) {
|
|
if (!group.sub_groups.hasOwnProperty(subGroup)) {
|
|
continue;
|
|
}
|
|
|
|
var subGroupComplete = '';
|
|
if(group.sub_groups[subGroup].completed){
|
|
subGroupComplete = 'sub-group-complete';
|
|
|
|
stepsFinished += Object.keys(group.sub_groups[subGroup].steps).length;
|
|
}
|
|
|
|
groupHtml += '<div class="wizard-sub-group '+ subGroupComplete +'">';
|
|
|
|
// create steps
|
|
var stepIndex = 0;
|
|
for (var step in group.sub_groups[subGroup].steps) {
|
|
if (!group.sub_groups[subGroup].steps.hasOwnProperty(step)) {
|
|
continue;
|
|
}
|
|
|
|
groupHtml += self.generateStepHTML(group.sub_groups[subGroup].steps[step], stepIndex, groupName,
|
|
subGroup, step, group.sub_groups[subGroup].completed);
|
|
|
|
stepsTotal++;
|
|
stepIndex++;
|
|
}
|
|
|
|
groupHtml += '</div>';
|
|
|
|
subGroupIndex++;
|
|
}
|
|
|
|
groupHtml += '<div class="wizard-progress">' +
|
|
' <div class="progress" style="width: {{progress}}%" data-value="{{stepsFinished}}" data-max="{{stepsTotal}}"></div>' +
|
|
' </div></ul></div></div>';
|
|
|
|
groupHtml = groupHtml.replace('{{progress}}', stepsFinished / stepsTotal * 100);
|
|
groupHtml = groupHtml.replace('{{stepsFinished}}', stepsFinished);
|
|
groupHtml = groupHtml.replace('{{stepsTotal}}', stepsTotal);
|
|
groupHtml = groupHtml.replace('{{groupIndex}}', groupIndex + 1);
|
|
groupHtml = groupHtml.replace('{{groupTitle}}', group.title);
|
|
groupHtml = groupHtml.replace('{{groupActive}}', group.active ? 'active' : '');
|
|
groupHtml = groupHtml.replace('{{groupComplete}}', group.complete || group.completed ? 'complete closed' : '');
|
|
groupHtml = groupHtml.replace('{{groupClosed}}', group.closed ? 'closed' : '');
|
|
|
|
return groupHtml;
|
|
},
|
|
|
|
/**
|
|
*
|
|
* @param {Object} item
|
|
* @param {Number} index
|
|
* @param {String} parentGroup
|
|
* @param {String} parentSubGroup
|
|
* @param {String} stepName
|
|
*
|
|
* @returns {*}
|
|
*/
|
|
generateStepHTML: function (item, index, parentGroup, parentSubGroup, stepName, parentSubgroupCompleted) {
|
|
var captionHtml = '',
|
|
classes = item.completed === true || parentSubgroupCompleted === true ? 'wizard-step checked' : 'wizard-step';
|
|
|
|
if(item.visible !== undefined && item.visible === false){
|
|
classes += ' invisible';
|
|
}
|
|
|
|
if (typeof item.title !== 'undefined' && item.title !== null) {
|
|
captionHtml = '<span class="caption">' + item.title + '</span>';
|
|
}
|
|
|
|
var itemHtml =
|
|
'<li ' +
|
|
'id="{{id}}" ' +
|
|
'class="{{classes}}" ' +
|
|
'data-key="{{key}}" ' +
|
|
'data-link="{{link}}" ' +
|
|
'data-step-index="{{stepIndex}}" ' +
|
|
'data-action="{{action}}" ' +
|
|
'data-hint-title="{{hintTitle}}" ' +
|
|
'data-hint-cta="{{hintCta}}" ' +
|
|
'data-hint-content="{{hintContent}}"' +
|
|
'data-parent-group="{{parent-group}}"' +
|
|
'data-step-name="{{step-name}}"' +
|
|
'data-parent-sub-group="{{parent-sub-group}}">' +
|
|
'{{captionLine}}' +
|
|
'</li>';
|
|
|
|
itemHtml = itemHtml.replace('{{id}}', me.storage.key + '_' + item.position);
|
|
itemHtml = itemHtml.replace('{{classes}}', classes);
|
|
itemHtml = itemHtml.replace('{{link}}', item.link);
|
|
itemHtml = itemHtml.replace('{{key}}', item.position);
|
|
itemHtml = itemHtml.replace('{{stepIndex}}', index);
|
|
itemHtml = itemHtml.replace('{{captionLine}}', captionHtml);
|
|
itemHtml = itemHtml.replace('{{step-name}}', stepName);
|
|
itemHtml = itemHtml.replace('{{parent-sub-group}}', parentSubGroup);
|
|
itemHtml = itemHtml.replace('{{parent-group}}', parentGroup);
|
|
if (item.action) {
|
|
item.action = JSON.stringify(item.action).replace(/"/g, '\'');
|
|
|
|
itemHtml = itemHtml.replace('{{action}}', item.action);
|
|
itemHtml = itemHtml.replace('{{hintTitle}}', item.caption);
|
|
itemHtml = itemHtml.replace('{{hintContent}}', item.description);
|
|
itemHtml = itemHtml.replace('{{hintCta}}', item.hint_cta);
|
|
}
|
|
|
|
return itemHtml;
|
|
},
|
|
|
|
/**
|
|
* Generates the content of the wizard
|
|
*/
|
|
generateContainerContents: function () {
|
|
var settings = me.storage.settings,
|
|
subTitle,
|
|
groupsHtml = '',
|
|
content,
|
|
iterationIndex = 0,
|
|
previousGroupComplete = false;
|
|
|
|
for (var stepGroup in me.storage.stepGroups) {
|
|
if (!me.storage.stepGroups.hasOwnProperty(stepGroup)) {
|
|
return;
|
|
}
|
|
|
|
if(iterationIndex > 0){
|
|
me.storage.stepGroups[stepGroup].closed = !previousGroupComplete;
|
|
}
|
|
|
|
groupsHtml += me.generateStepGroupHtml(stepGroup, me.storage.stepGroups[stepGroup], iterationIndex);
|
|
|
|
previousGroupComplete = me.storage.stepGroups[stepGroup].completed;
|
|
iterationIndex++;
|
|
}
|
|
|
|
content =
|
|
'<div class="wizard-small-trigger"></div>'+
|
|
'<div class="wizard-details">' +
|
|
' <h2>{{titleMinimized}}</h2>' +
|
|
' <h3>{{subTitle}}</h3>' +
|
|
' {{groupsHtml}}' +
|
|
' <span class="close-wizard">Wizard beenden</span>' +
|
|
'</div>';
|
|
|
|
content +=
|
|
'<div class="wizard-details wizard-overlay">' +
|
|
'<h2>Wizard erfolgreich beendet!</h2>' +
|
|
' <p>Du kannst nun zurück zum Learning Dashboard oder hier bleiben</p>' +
|
|
' <a title="Zurück zum Learning Dashboard" href="index.php?module=learningdashboard&action=list" class="button button-primary">Zurück zum Learning Dashboard</a>' +
|
|
'</div>';
|
|
|
|
if (typeof currentStepDescription !== 'undefined' && currentStepDescription !== null) {
|
|
subTitle = '<div class="wizard-description">' + currentStepDescription + '</div>';
|
|
}
|
|
|
|
content = content.replace('{{titleMinimized}}', settings.title);
|
|
content = content.replace('{{titleMaximized}}', settings.title);
|
|
content = content.replace('{{groupsHtml}}', groupsHtml);
|
|
content = content.replace('{{subTitle}}', settings.subTitle);
|
|
|
|
// Wizard-Element erzeugen und in Wizard-Box packen
|
|
me.elem.$self = $('<div>')
|
|
.addClass('wizard closed')
|
|
.attr('id', 'wizard_' + me.storage.key)
|
|
.data('key', me.storage.key)
|
|
.html(content);
|
|
me.elem.$self.appendTo(me.elem.$container);
|
|
|
|
me.registerEvents();
|
|
},
|
|
|
|
/**
|
|
* @return {object|null}
|
|
*/
|
|
getCurrentStepSettings: function () {
|
|
var currentStep = null;
|
|
|
|
// rand-Parameter aus aktueller URL entfernen
|
|
var currentUrl = window.location.href.replace(/&rand=[\d]*/, '');
|
|
|
|
me.storage.stepGroups.forEach(function (group) {
|
|
|
|
group.steps.forEach(function (step) {
|
|
// Führenden Punkt aus Schritt-URL entfernen: './index.php?foo' => '/index.php?foo'
|
|
// Ansonsten ist Vergleich mit aktueller URL nicht möglich
|
|
var dotPrefixRegex = /\.\/index\.php/;
|
|
var stepUrl = step.link.replace(dotPrefixRegex, '/index.php');
|
|
|
|
var isCurrentStep = me.stringEndsWith(currentUrl, stepUrl);
|
|
if (isCurrentStep) {
|
|
currentStep = step;
|
|
}
|
|
});
|
|
});
|
|
|
|
return currentStep;
|
|
},
|
|
|
|
/**
|
|
* @param {string} haystack
|
|
* @param {string} needle
|
|
* @return {boolean}
|
|
*/
|
|
stringEndsWith: function (haystack, needle) {
|
|
var position = haystack.length - needle.length;
|
|
if (position < 0) {
|
|
return false;
|
|
}
|
|
|
|
var lastIndex = haystack.indexOf(needle, position);
|
|
|
|
return lastIndex !== -1 && lastIndex === position;
|
|
}
|
|
};
|
|
|
|
return {
|
|
init: me.init,
|
|
show: me.show,
|
|
hide: me.hide,
|
|
completeStep: me.completeStep,
|
|
nextStep: me.nextStep,
|
|
minimize: me.minimize,
|
|
maximize: me.maximize,
|
|
isMinimized: me.isMinimized,
|
|
removeHint: me.removeHint
|
|
};
|
|
};
|
|
|
|
|
|
var WizardContainer = (function ($) {
|
|
|
|
var me = {
|
|
|
|
elem: {
|
|
$container: null,
|
|
$hint: null,
|
|
$hideTrigger: null
|
|
},
|
|
|
|
storage: {
|
|
initialized: false,
|
|
fetchedWizardData: null,
|
|
minimized: false,
|
|
wizards: {} // Loaded wizard instances
|
|
},
|
|
|
|
init: function () {
|
|
if (!me.isEnabled()) {
|
|
console.info('Wizard ist deaktiviert.');
|
|
return;
|
|
}
|
|
if (me.isInitialized()) {
|
|
console.warn('Wizard ist bereits initialisiert!');
|
|
return;
|
|
}
|
|
|
|
me.storage.initialized = true;
|
|
|
|
me.fetchWizards().then(me.createContainerPromise).then(me.createWizards);
|
|
},
|
|
|
|
show: function () {
|
|
me.elem.$hideTrigger.removeClass('is-hidden');
|
|
me.elem.$container.removeClass('is-hidden');
|
|
me.elem.$container.css({
|
|
opacity: '1',
|
|
display: 'block'
|
|
});
|
|
|
|
me.setWizardMinimizedState(false);
|
|
|
|
me.storage.minimized = false;
|
|
},
|
|
|
|
hide: function () {
|
|
me.elem.$hideTrigger.addClass('is-hidden');
|
|
me.elem.$container.addClass('is-hidden');
|
|
me.elem.$container.css({
|
|
opacity: '0',
|
|
display: 'none'
|
|
});
|
|
|
|
$('a').unbind('click.wizard');
|
|
$('form').unbind('submit.wizard');
|
|
|
|
me.setWizardMinimizedState(true);
|
|
|
|
me.storage.minimized = true;
|
|
|
|
for(var wizard in me.storage.wizards){
|
|
me.storage.wizards[wizard].removeHint();
|
|
}
|
|
},
|
|
|
|
completeStep: function(){
|
|
for(var wizard in me.storage.wizards){
|
|
me.storage.wizards[wizard].completeStep();
|
|
me.storage.wizards[wizard].nextStep();
|
|
}
|
|
},
|
|
|
|
/**
|
|
*
|
|
* @param {Boolean} isMinimized
|
|
*/
|
|
setWizardMinimizedState: function(isMinimized) {
|
|
|
|
$.ajax({
|
|
url: 'index.php?module=wizard&action=ajax&cmd=set_minimized&value=' + isMinimized,
|
|
method: 'post',
|
|
success: function(data){
|
|
|
|
},
|
|
error: function (jqXhr) {
|
|
console.warn('Fehler: ' + jqXhr.responseJSON.error);
|
|
}
|
|
});
|
|
},
|
|
|
|
enable: function () {
|
|
localStorage.setItem('wizard_enabled', 'true');
|
|
me.init();
|
|
},
|
|
|
|
isMinimized: function(){
|
|
return me.storage.minimized;
|
|
},
|
|
|
|
disable: function () {
|
|
me.hide();
|
|
me.storage.initialized = false;
|
|
me.elem.$container.remove();
|
|
me.elem.$container = null;
|
|
localStorage.setItem('wizard_enabled', 'false');
|
|
},
|
|
|
|
/**
|
|
* @return {boolean}
|
|
*/
|
|
isEnabled: function () {
|
|
var store = localStorage.getItem('wizard_enabled');
|
|
|
|
return typeof store !== 'undefined' && store !== 'false';
|
|
},
|
|
|
|
/**
|
|
* @return {boolean}
|
|
*/
|
|
isInitialized: function () {
|
|
return me.storage.initialized;
|
|
},
|
|
|
|
/**
|
|
* Creates wizard container only if there is at least one wizard
|
|
*
|
|
* @return {Promise}
|
|
*/
|
|
createContainerPromise: function () {
|
|
return $.Deferred(function (dfd) {
|
|
if (me.storage.fetchedWizardData === null) {
|
|
console.info('No active wizards found.');
|
|
dfd.fail();
|
|
return;
|
|
}
|
|
|
|
me.storage.minimized = me.storage.fetchedWizardData.minimized;
|
|
|
|
me.createContainerElement();
|
|
dfd.resolve();
|
|
}).promise();
|
|
},
|
|
|
|
/**
|
|
* Creates wizard container and events
|
|
*/
|
|
createContainerElement: function () {
|
|
me.elem.$container = $('<div id="wizard-container"></div>').appendTo('body');
|
|
me.elem.$container.css({
|
|
opacity: '0',
|
|
display: 'none'
|
|
});
|
|
|
|
// Make container draggable
|
|
me.elem.$container.draggable({
|
|
start: function () {
|
|
$(this).css({transition: 'none'});
|
|
},
|
|
stop: function () {
|
|
$(this).css({height: 'auto'}); // otherwise jQuery would set a fixed height
|
|
}
|
|
});
|
|
|
|
// Hide/Show wizard container
|
|
me.elem.$hideTrigger = $(
|
|
'<div id="wizard-hide-trigger">' +
|
|
'<div class="wizard-trigger-overlay"></div>' +
|
|
'<div class="wizard-close-x"></div>' +
|
|
'</div>').appendTo('body');
|
|
|
|
if(me.storage.minimized){
|
|
me.elem.$hideTrigger.addClass('is-hidden');
|
|
}
|
|
|
|
me.elem.$hideTrigger.on('click touch', function (e) {
|
|
e.preventDefault();
|
|
if (me.elem.$hideTrigger.hasClass('is-hidden')) {
|
|
me.show();
|
|
me.storage.minimized = false;
|
|
} else {
|
|
me.hide();
|
|
me.storage.minimized = true;
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Fetch active wizards
|
|
*
|
|
* @return {Deferred} jQuery Promise Object
|
|
*/
|
|
fetchWizards: function () {
|
|
var activeWizardEle = $('#active-wizard'),
|
|
key;
|
|
|
|
if (activeWizardEle.length > 0) {
|
|
key = JSON.parse(activeWizardEle.text());
|
|
}
|
|
|
|
if (key === undefined || typeof key.key !== 'string') {
|
|
return $.Deferred(function (dfd) {
|
|
dfd.reject();
|
|
}).promise();
|
|
} else {
|
|
return $.ajax({
|
|
url: 'index.php?module=wizard&action=ajax&cmd=get_by_key&key=' + key.key,
|
|
method: 'get',
|
|
success: function (data) {
|
|
me.storage.fetchedWizardData = data;
|
|
}
|
|
});
|
|
}
|
|
},
|
|
|
|
/**
|
|
*
|
|
*/
|
|
createWizards: function () {
|
|
me.createWizard(me.storage.fetchedWizardData);
|
|
if(!me.storage.minimized){
|
|
me.show();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @param {Object} data
|
|
*/
|
|
createWizard: function (data) {
|
|
var wizardInstance = new Wizard($);
|
|
var wizardKey = data.key;
|
|
|
|
wizardInstance.init(data);
|
|
me.storage.wizards[wizardKey] = wizardInstance;
|
|
},
|
|
|
|
/**
|
|
* @param {string} key
|
|
*
|
|
* @return {boolean}
|
|
*/
|
|
hasWizard: function (key) {
|
|
return me.storage.wizards.hasOwnProperty(key);
|
|
},
|
|
|
|
/**
|
|
* @param {string} key
|
|
*
|
|
* @return {Wizard}
|
|
*/
|
|
getWizard: function (key) {
|
|
return me.storage.wizards[key];
|
|
},
|
|
|
|
/**
|
|
* @param {String} wizardKey
|
|
*/
|
|
skipWizard: function (wizardKey) {
|
|
if (!me.hasWizard(wizardKey)) {
|
|
return;
|
|
}
|
|
|
|
$.ajax({
|
|
url: 'index.php?module=wizard&action=ajax&cmd=deactivate_wizard',
|
|
method: 'post',
|
|
data: {
|
|
wizard: wizardKey
|
|
},
|
|
dataType: 'json',
|
|
success: function () {
|
|
me.getWizard(wizardKey).hide();
|
|
},
|
|
error: function (jqXhr) {
|
|
alert('Fehler: ' + jqXhr.responseJSON.error);
|
|
}
|
|
});
|
|
}
|
|
|
|
};
|
|
|
|
return {
|
|
init: me.init,
|
|
show: me.show,
|
|
hide: me.hide,
|
|
enable: me.enable,
|
|
disable: me.disable,
|
|
completeStep: me.completeStep,
|
|
isMinimized: me.isMinimized
|
|
};
|
|
|
|
})(jQuery);
|
|
|
|
$(document).ready(function () {
|
|
WizardContainer.init();
|
|
});
|
|
|
|
|
|
var focusOverlay = function () {
|
|
|
|
var me = {
|
|
|
|
storage: {
|
|
target: {},
|
|
window: {},
|
|
targetOffset: null,
|
|
settings: null,
|
|
platesPositions: ['top', 'right', 'bottom', 'left']
|
|
},
|
|
|
|
elem: {
|
|
$container: null,
|
|
$target: null,
|
|
$self: null,
|
|
$window: null,
|
|
$plates: []
|
|
},
|
|
|
|
init: function (element) {
|
|
if (element === undefined || element.length === 0) {
|
|
console.warn('Please pass an element to focus');
|
|
return;
|
|
}
|
|
|
|
me.elem.$container = $('<div id="focus-overlay"></div>').appendTo('body');
|
|
me.addEventHandler();
|
|
|
|
me.focus(element);
|
|
},
|
|
|
|
addEventHandler: function () {
|
|
var resizeTimeout;
|
|
$(window).on('resize scroll', function () {
|
|
if (!!resizeTimeout) {
|
|
clearTimeout(resizeTimeout);
|
|
}
|
|
resizeTimeout = setTimeout(function () {
|
|
me.storeWindow();
|
|
me.focus();
|
|
}, 10);
|
|
});
|
|
},
|
|
|
|
storeElement: function (element) {
|
|
me.elem.$target = element;
|
|
me.storage.target.offset = element.offset();
|
|
me.storage.target.width = element.outerWidth();
|
|
me.storage.target.height = element.outerHeight();
|
|
},
|
|
|
|
storeWindow: function () {
|
|
me.elem.$window = $(window);
|
|
me.storage.window.width = me.elem.$window.outerWidth();
|
|
me.storage.window.height = me.elem.$window.outerHeight();
|
|
me.storage.window.scrollTop = me.elem.$window.scrollTop();
|
|
},
|
|
|
|
focus: function (element) {
|
|
element = element || me.elem.$target;
|
|
me.storeElement(element);
|
|
me.storeWindow();
|
|
|
|
me.addOverlay();
|
|
},
|
|
|
|
remove: function () {
|
|
me.elem.$container.remove();
|
|
},
|
|
|
|
addOverlay: function () {
|
|
var current,
|
|
overlay,
|
|
finishedOptions = [],
|
|
overlayTemplate = $('<div class="focus-overlay-plate"></div>');
|
|
|
|
for (var i = 0; i < me.storage.platesPositions.length; i++) {
|
|
current = me.storage.platesPositions[i];
|
|
|
|
if (me.elem.$plates.length < 4) {
|
|
overlay = overlayTemplate.clone();
|
|
} else {
|
|
overlay = me.elem.$plates[i];
|
|
}
|
|
|
|
var options = {
|
|
'width': 0,
|
|
'height': 0,
|
|
'top': 0,
|
|
'right': 0,
|
|
'bottom': 0,
|
|
'left': 0
|
|
};
|
|
|
|
if(finishedOptions[0] !== undefined){
|
|
var topEleHeigt = finishedOptions[0].height;
|
|
}
|
|
|
|
if(finishedOptions[1] !== undefined){
|
|
var rightEleWidth = finishedOptions[1].width;
|
|
}
|
|
|
|
if(finishedOptions[2] !== undefined){
|
|
var bottomEleHeight = finishedOptions[2].height;
|
|
}
|
|
|
|
var elementViewportOffset = me.storage.target.offset.top - me.storage.window.scrollTop;
|
|
|
|
if (current === 'top') {
|
|
options.width = '100%';
|
|
options.height = elementViewportOffset - 10;
|
|
}
|
|
|
|
if (current === 'right') {
|
|
options.width = me.storage.window.width - me.storage.target.offset.left - me.storage.target.width -
|
|
10;
|
|
options.height = me.storage.window.height - topEleHeigt;
|
|
options.top = topEleHeigt;
|
|
options.left = me.storage.target.offset.left + me.storage.target.width + 10;
|
|
}
|
|
|
|
if (current === 'bottom') {
|
|
options.width = me.storage.window.width - rightEleWidth;
|
|
options.height = me.storage.window.height - elementViewportOffset -
|
|
me.storage.target.height - 10;
|
|
options.top = elementViewportOffset + me.storage.target.height + 10;
|
|
|
|
if(me.elem.$target.hasClass('hasDatepicker')){
|
|
options.top += 150;
|
|
options.height -= 150;
|
|
}
|
|
}
|
|
|
|
if (current === 'left') {
|
|
options.width = me.storage.target.offset.left - 10;
|
|
options.height = me.storage.window.height - topEleHeigt -
|
|
bottomEleHeight;
|
|
options.top = topEleHeigt;
|
|
}
|
|
|
|
finishedOptions.push(options)
|
|
|
|
if (me.elem.$plates.length < 4) {
|
|
overlay.addClass(current);
|
|
overlay.appendTo(me.elem.$container);
|
|
me.elem.$plates.push(overlay);
|
|
}
|
|
}
|
|
|
|
// options are not pushed in for loop, in order to add them all at once. (animation issues)
|
|
me.elem.$plates[0].css(finishedOptions[0]);
|
|
me.elem.$plates[1].css(finishedOptions[1]);
|
|
me.elem.$plates[2].css(finishedOptions[2]);
|
|
me.elem.$plates[3].css(finishedOptions[3]);
|
|
|
|
}
|
|
};
|
|
|
|
return {
|
|
init: me.init,
|
|
focus: me.focus,
|
|
remove: me.remove
|
|
};
|
|
};
|