forked from M3-Academy/m3-academy-template-checkout
refactor: separando funções em responsabilidades unicas
This commit is contained in:
parent
8890726729
commit
27d740563c
@ -46,188 +46,63 @@ export default class Header {
|
|||||||
const progressBarLista = document.querySelectorAll("#progressBar ul li");
|
const progressBarLista = document.querySelectorAll("#progressBar ul li");
|
||||||
progressBarLista.forEach((li) => {
|
progressBarLista.forEach((li) => {
|
||||||
if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
|
if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
|
||||||
if (li.children[0].children[0].children["progress-bar-circle-1"]) {
|
this.trataPonto(li, 1);
|
||||||
li.children[0].children[0].children["progress-bar-circle-1"].classList.add(
|
|
||||||
"active"
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (li.children[0].children[0].children["progress-bar-circle-2"]) {
|
|
||||||
if (
|
|
||||||
li.children[0].children[0].children[
|
|
||||||
"progress-bar-circle-2"
|
|
||||||
].classList.contains("active")
|
|
||||||
) {
|
|
||||||
li.children[0].children[0].children[
|
|
||||||
"progress-bar-circle-2"
|
|
||||||
].classList.remove("active");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
|
|
||||||
if (
|
|
||||||
li.children[0].children[0].children[
|
|
||||||
"progress-bar-circle-3"
|
|
||||||
].classList.contains("active")
|
|
||||||
) {
|
|
||||||
li.children[0].children[0].children[
|
|
||||||
"progress-bar-circle-3"
|
|
||||||
].classList.remove("active");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else if (
|
} else if (
|
||||||
window.location.href === "https://m3academy.myvtex.com/checkout/#/email" ||
|
window.location.href === "https://m3academy.myvtex.com/checkout/#/email" ||
|
||||||
window.location.href == "https://m3academy.myvtex.com/checkout/#/profile" ||
|
window.location.href == "https://m3academy.myvtex.com/checkout/#/profile" ||
|
||||||
window.location.href == "https://m3academy.myvtex.com/checkout/#/shipping"
|
window.location.href == "https://m3academy.myvtex.com/checkout/#/shipping"
|
||||||
) {
|
) {
|
||||||
if (li.children[0].children[0].children["progress-bar-circle-1"]) {
|
this.trataPonto(li, 2);
|
||||||
if (
|
|
||||||
li.children[0].children[0].children[
|
|
||||||
"progress-bar-circle-1"
|
|
||||||
].classList.contains("active")
|
|
||||||
) {
|
|
||||||
li.children[0].children[0].children[
|
|
||||||
"progress-bar-circle-1"
|
|
||||||
].classList.remove("active");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (li.children[0].children[0].children["progress-bar-circle-2"]) {
|
|
||||||
li.children[0].children[0].children["progress-bar-circle-2"].classList.add(
|
|
||||||
"active"
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
|
|
||||||
if (
|
|
||||||
li.children[0].children[0].children[
|
|
||||||
"progress-bar-circle-3"
|
|
||||||
].classList.contains("active")
|
|
||||||
) {
|
|
||||||
li.children[0].children[0].children[
|
|
||||||
"progress-bar-circle-3"
|
|
||||||
].classList.remove("active");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else if (
|
} else if (
|
||||||
window.location.href === "https://m3academy.myvtex.com/checkout/#/payment"
|
window.location.href === "https://m3academy.myvtex.com/checkout/#/payment"
|
||||||
) {
|
) {
|
||||||
if (li.children[0].children[0].children["progress-bar-circle-1"]) {
|
this.trataPonto(li, 3);
|
||||||
if (
|
|
||||||
li.children[0].children[0].children[
|
|
||||||
"progress-bar-circle-1"
|
|
||||||
].classList.contains("active")
|
|
||||||
) {
|
|
||||||
li.children[0].children[0].children[
|
|
||||||
"progress-bar-circle-1"
|
|
||||||
].classList.remove("active");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (li.children[0].children[0].children["progress-bar-circle-2"]) {
|
|
||||||
if (
|
|
||||||
li.children[0].children[0].children[
|
|
||||||
"progress-bar-circle-2"
|
|
||||||
].classList.contains("active")
|
|
||||||
) {
|
|
||||||
li.children[0].children[0].children[
|
|
||||||
"progress-bar-circle-2"
|
|
||||||
].classList.remove("active");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
|
|
||||||
li.children[0].children[0].children["progress-bar-circle-3"].classList.add(
|
|
||||||
"active"
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
window.addEventListener("hashchange", () => {
|
window.addEventListener("hashchange", () => {
|
||||||
if (window.location.hash == "#/cart") {
|
if (window.location.hash == "#/cart") {
|
||||||
if (li.children[0].children[0].children["progress-bar-circle-1"]) {
|
this.trataPonto(li, 1);
|
||||||
li.children[0].children[0].children[
|
|
||||||
"progress-bar-circle-1"
|
|
||||||
].classList.add("active");
|
|
||||||
}
|
|
||||||
if (li.children[0].children[0].children["progress-bar-circle-2"]) {
|
|
||||||
if (
|
|
||||||
li.children[0].children[0].children[
|
|
||||||
"progress-bar-circle-2"
|
|
||||||
].classList.contains("active")
|
|
||||||
) {
|
|
||||||
li.children[0].children[0].children[
|
|
||||||
"progress-bar-circle-2"
|
|
||||||
].classList.remove("active");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
|
|
||||||
if (
|
|
||||||
li.children[0].children[0].children[
|
|
||||||
"progress-bar-circle-3"
|
|
||||||
].classList.contains("active")
|
|
||||||
) {
|
|
||||||
li.children[0].children[0].children[
|
|
||||||
"progress-bar-circle-3"
|
|
||||||
].classList.remove("active");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else if (
|
} else if (
|
||||||
window.location.hash == "#/email" ||
|
window.location.hash == "#/email" ||
|
||||||
window.location.hash == "#/profile" ||
|
window.location.hash == "#/profile" ||
|
||||||
window.location.hash == "#/shipping"
|
window.location.hash == "#/shipping"
|
||||||
) {
|
) {
|
||||||
if (li.children[0].children[0].children["progress-bar-circle-1"]) {
|
this.trataPonto(li, 2);
|
||||||
if (
|
|
||||||
li.children[0].children[0].children[
|
|
||||||
"progress-bar-circle-1"
|
|
||||||
].classList.contains("active")
|
|
||||||
) {
|
|
||||||
li.children[0].children[0].children[
|
|
||||||
"progress-bar-circle-1"
|
|
||||||
].classList.remove("active");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (li.children[0].children[0].children["progress-bar-circle-2"]) {
|
|
||||||
li.children[0].children[0].children[
|
|
||||||
"progress-bar-circle-2"
|
|
||||||
].classList.add("active");
|
|
||||||
}
|
|
||||||
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
|
|
||||||
if (
|
|
||||||
li.children[0].children[0].children[
|
|
||||||
"progress-bar-circle-3"
|
|
||||||
].classList.contains("active")
|
|
||||||
) {
|
|
||||||
li.children[0].children[0].children[
|
|
||||||
"progress-bar-circle-3"
|
|
||||||
].classList.remove("active");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else if (window.location.hash == "#/payment") {
|
} else if (window.location.hash == "#/payment") {
|
||||||
if (li.children[0].children[0].children["progress-bar-circle-1"]) {
|
this.trataPonto(li, 3);
|
||||||
if (
|
|
||||||
li.children[0].children[0].children[
|
|
||||||
"progress-bar-circle-1"
|
|
||||||
].classList.contains("active")
|
|
||||||
) {
|
|
||||||
li.children[0].children[0].children[
|
|
||||||
"progress-bar-circle-1"
|
|
||||||
].classList.remove("active");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (li.children[0].children[0].children["progress-bar-circle-2"]) {
|
|
||||||
if (
|
|
||||||
li.children[0].children[0].children[
|
|
||||||
"progress-bar-circle-2"
|
|
||||||
].classList.contains("active")
|
|
||||||
) {
|
|
||||||
li.children[0].children[0].children[
|
|
||||||
"progress-bar-circle-2"
|
|
||||||
].classList.remove("active");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
|
|
||||||
li.children[0].children[0].children[
|
|
||||||
"progress-bar-circle-3"
|
|
||||||
].classList.add("active");
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
marcarPonto(li, local) {
|
||||||
|
if (li.children[0].children[0].children["progress-bar-circle-" + local]) {
|
||||||
|
li.children[0].children[0].children["progress-bar-circle-" + local].classList.add(
|
||||||
|
"active"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
removerPonto(li, local) {
|
||||||
|
if (li.children[0].children[0].children["progress-bar-circle-" + local]) {
|
||||||
|
if (
|
||||||
|
li.children[0].children[0].children[
|
||||||
|
"progress-bar-circle-" + local
|
||||||
|
].classList.contains("active")
|
||||||
|
) {
|
||||||
|
li.children[0].children[0].children[
|
||||||
|
"progress-bar-circle-" + local
|
||||||
|
].classList.remove("active");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
trataPonto(li, local) {
|
||||||
|
const indice = [1, 2, 3];
|
||||||
|
let indicesPontoBranco = indice.splice(local - 1, 1);
|
||||||
|
this.marcarPonto(li, local);
|
||||||
|
for (const i of indice) {
|
||||||
|
this.removerPonto(li, i);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user