76 lines
1.5 KiB
JavaScript
76 lines
1.5 KiB
JavaScript
|
export default {
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
step: 1,
|
||
|
|
isModalOpen: true
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted () {
|
||
|
|
this.setStepNumber();
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
$route () {
|
||
|
|
this.setStepNumber();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
totalStepCount () {
|
||
|
|
return this.stepNames.length;
|
||
|
|
},
|
||
|
|
stepComponent () {
|
||
|
|
return `Step${this.step}`;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
goToStep (stepNum) {
|
||
|
|
this.$router.push({
|
||
|
|
hash: `#step-${stepNum}`
|
||
|
|
});
|
||
|
|
},
|
||
|
|
isCurrentStep (stepNum) {
|
||
|
|
return this.step === stepNum;
|
||
|
|
},
|
||
|
|
openModal () {
|
||
|
|
this.isModalOpen = true;
|
||
|
|
},
|
||
|
|
closeModal () {
|
||
|
|
this.isModalOpen = false;
|
||
|
|
this.step = 1;
|
||
|
|
this.$emit('closeModal');
|
||
|
|
},
|
||
|
|
setStepNumber () {
|
||
|
|
const {stepNumber, isValid} = parseHashParameterWithNumber(this.$route.hash);
|
||
|
|
|
||
|
|
if (stepNumber > this.totalStepCount || !isValid) {
|
||
|
|
return this.$router.push({ hash: '#step-1' });
|
||
|
|
}
|
||
|
|
|
||
|
|
this.step = stepNumber;
|
||
|
|
},
|
||
|
|
getStepGTMString (stepNumber) {
|
||
|
|
return `gtm-${this.wizardName}-step${stepNumber}`;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
updated () {
|
||
|
|
if (this.$refs.wizard) {
|
||
|
|
this.$refs.wizard.scrollTo({ top: 0, left: 0 });
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
function parseHashParameterWithNumber (hash, token = 'step-') {
|
||
|
|
const stepIndex = hash.indexOf(token);
|
||
|
|
const includesStep = stepIndex > -1;
|
||
|
|
|
||
|
|
if (!includesStep) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const stepNumber = +hash.substring(stepIndex + token.length);
|
||
|
|
|
||
|
|
return {
|
||
|
|
isValid: Number.isInteger(stepNumber),
|
||
|
|
stepNumber: stepNumber
|
||
|
|
};
|
||
|
|
}
|