', {
class: classes.indicatorProgress
}),
$progressBarMeter = jQuery('
', {
class: classes.indicatorProgressMeter
});
$progressBar.append($progressBarMeter);
return $progressBar;
}
getProgressBarValue() {
const totalSteps = this.data.steps.length,
currentStep = this.state.currentStep,
percentage = currentStep ? (currentStep + 1) / totalSteps * 100 : 100 / totalSteps;
return Math.floor(percentage) + '%';
}
setProgressBar() {
const progressBarValue = this.getProgressBarValue();
this.updateProgressMeterCSSVariable(progressBarValue);
this.elements.$progressBarMeter.text(progressBarValue);
}
updateProgressMeterCSSVariable(value) {
this.$element[0].style.setProperty('--e-form-steps-indicator-progress-meter-width', value);
}
saveIndicatorsState() {
const stepsSettings = this.getElementSettings();
this.state.stepsType = stepsSettings.step_type;
if (!['none', 'text', 'progress_bar'].includes(stepsSettings.step_type)) {
this.state.stepsShape = stepsSettings.step_icon_shape;
}
}
buildIndicatorsFromStepsData() {
const indicators = [];
this.data.steps.forEach((stepObj, index) => {
if (index) {
indicators.push(this.getStepSeparator());
}
indicators.push(this.getStepIndicatorElement(stepObj, index));
});
return indicators;
}
getStepIndicatorElement(stepObj, index) {
const {
classes
} = this.getSettings(),
stepsSettings = this.getElementSettings(),
indicatorStateClass = this.getIndicatorStateClass(index),
indicatorClasses = [classes.indicator, indicatorStateClass],
$stepIndicator = jQuery('
', {
class: indicatorClasses.join(' ')
});
if (stepsSettings.step_type.includes('icon')) {
$stepIndicator.append(this.getStepIconElement(stepObj));
}
if (stepsSettings.step_type.includes('number')) {
$stepIndicator.append(this.getStepNumberElement(index));
}
if (stepsSettings.step_type.includes('text')) {
$stepIndicator.append(this.getStepLabelElement(stepObj.label));
}
return $stepIndicator;
}
getIndicatorStateClass(index) {
const {
classes
} = this.getSettings();
if (index < this.state.currentStep) {
return classes.indicatorCompleted;
} else if (index > this.state.currentStep) {
return classes.indicatorInactive;
}
return classes.indicatorActive;
}
getIndicatorShapeClass() {
const stepsSettings = this.getElementSettings(),
{
classes
} = this.getSettings();
return classes['indicatorShape' + this.firstLetterToUppercase(stepsSettings.step_icon_shape)];
}
firstLetterToUppercase(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
getStepNumberElement(index) {
const {
classes
} = this.getSettings(),
numberClasses = [classes.indicatorNumber, this.getIndicatorShapeClass()];
return jQuery('
', {
class: numberClasses.join(' '),
text: index + 1
});
}
getStepIconElement(stepObj) {
const {
classes
} = this.getSettings(),
iconClasses = [classes.indicatorIcon, this.getIndicatorShapeClass()],
$icon = jQuery('
', {
class: iconClasses.join(' ')
});
if (stepObj.icon) {
$icon.html(stepObj.icon);
} else {
let $iconElement;
if (stepObj.iconLibrary) {
$iconElement = jQuery('
', {
class: stepObj.iconLibrary
});
} else {
// Using the attributes inline when creating the object, otherwise the data attribute will not work.
$iconElement = jQuery(``);
// Updating an indicator svg fill color, when loaded inside an object tag with a separated scope.
$iconElement.on('load', event => {
event.target.contentDocument.querySelector('svg').style.fill = $iconElement.css('fill');
});
// Storing the indicators elements that contain object tags in order to change their fill color on steps change.
this.data.indicatorsWithObjectTags.push($iconElement);
}
$icon.append($iconElement);
}
return $icon;
}
getStepLabelElement(label) {
const {
classes
} = this.getSettings();
return jQuery('