70 lines
2.1 KiB
JavaScript
70 lines
2.1 KiB
JavaScript
function Stepper(container, steps) {
|
|
if (container instanceof jQuery) {
|
|
this.container = container[0];
|
|
} else {
|
|
this.container = container;
|
|
}
|
|
|
|
this.steps = [];
|
|
|
|
for (var i = 1; i <= steps.length; i++) {
|
|
var stepContainer = document.createElement("div");
|
|
stepContainer.className = "step-container";
|
|
var step = document.createElement("span");
|
|
step.className = "step";
|
|
step.textContent = i;
|
|
var text = document.createElement("div");
|
|
text.className = "step-text";
|
|
text.textContent = steps[i - 1];
|
|
stepContainer.appendChild(step);
|
|
stepContainer.appendChild(text);
|
|
this.steps.push(stepContainer);
|
|
}
|
|
}
|
|
|
|
Stepper.prototype.render = function() {
|
|
var separator = document.createElement("div");
|
|
separator.className = "step-separator";
|
|
var stepsContainer = document.createElement("div");
|
|
stepsContainer.className = "steps";
|
|
|
|
for (var i = 0; i < this.steps.length; i++) {
|
|
if (i > 0) {
|
|
stepsContainer.appendChild(separator.cloneNode());
|
|
}
|
|
stepsContainer.appendChild(this.steps[i]);
|
|
}
|
|
|
|
this.container.innerHTML = "";
|
|
this.container.appendChild(stepsContainer);
|
|
};
|
|
|
|
Stepper.prototype.selectStep = function(step) {
|
|
for (var i = 0; i < this.steps.length; i++) {
|
|
if (i < step - 1) {
|
|
this.steps[i].querySelector(".step").classList.add("visited");
|
|
this.steps[i].querySelector(".step-text").classList.remove("active");
|
|
var separators = this.container.querySelectorAll(".step-separator");
|
|
if (separators[i]) {
|
|
separators[i].classList.add("visited");
|
|
}
|
|
} else if (i === step - 1) {
|
|
this.steps[i].querySelector(".step").classList.add("active");
|
|
this.steps[i].querySelector(".step-text").classList.add("active");
|
|
this.steps[i].querySelector(".step").classList.remove("visited");
|
|
} else {
|
|
this.steps[i]
|
|
.querySelector(".step")
|
|
.classList.remove("visited", "active");
|
|
|
|
this.steps[i].querySelector(".step-text").classList.remove("active");
|
|
|
|
var separators = this.container.querySelectorAll(".step-separator");
|
|
|
|
if (separators[i - 1]) {
|
|
separators[i - 1].classList.remove("visited");
|
|
}
|
|
}
|
|
}
|
|
};
|