You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
xshop/resources/js/wizard.js

71 lines
2.5 KiB
JavaScript

2 years ago
jQuery(function () {
if ($('.wizard-form').length == 0 || isInit) {
return false;
}
$($('.wizard .step')[0]).addClass('active');
$($('.wizard .wizard-form')[0]).slideDown(1000).addClass('active');
var forms = $('.wizard .wizard-form');
var txt = '';
var nextStr = window.translate.next;
var prevStr = window.translate.prev;
var nextBtnClass = 'wizard-next btn btn-primary';
for (const i in forms) {
if (isNaN(parseInt(i))) {
break;
}
var j = (parseInt(i) + 1);
$($('.wizard .wizard-form')[i]).data('formStep', j).addClass('form-step' + j);
$($('.wizard .step')[i]).data('formStep', j).addClass('form-step' + (j));
if (j == forms.length) {
nextStr = `<span>` + window.translate.finishAndSave + `</span><i class="fas fa-spinner fa-spin"></i>`;
nextBtnClass = 'wizard-finish btn btn-success';
tag = 'button';
} else {
tag = 'div'
}
txt = `<div class="ml-2 mt-4">
<div class="wizard-prev btn btn-secondary" data-step="${j}">${prevStr}</div>
<${tag} class="${nextBtnClass}" data-step="${j}" ${tag === 'button' ? 'type="submit"' : ''}>${nextStr}</${tag}>
</div>`;
$($('.wizard .wizard-form')[i]).append(txt);
}
$(document).on('click', '.wizard .step', function () {
var step = $(this).data('formStep');
$('.wizard .wizard-form.active').slideUp(300).removeClass('active');
var percent = (100 * step / $('.wizard .step').length);
if (percent != 100) {
percent -= 10 + (6 - $('.wizard .step').length) + ($('.wizard .step').length - step) + ($('.wizard .step').length < 4 ? 1 : -1);
}
$(this).closest('.wizard').find('.prog').css('width', percent + '%');
setTimeout(function () {
$(`.wizard .wizard-form.form-step${step}`).slideDown(300, function () {
$(window).resize();
}).addClass('active');
$(`.wizard .step`).removeClass('active');
for (let i = 1; i <= step; i++) {
$(`.wizard .step.form-step${i}`).addClass('active');
}
$(window).resize();
}, 200);
});
$(document).on('click', '.wizard-prev,.wizard-next', function () {
var step = parseInt($(this).data('step'));
if ($(this).hasClass('wizard-prev')) {
step--;
} else {
step++;
}
$(".form-step" + step).click();
});
isInit = true;
});