From 4a09a0fd48d8c83e9ec88786ba45eb98f5b770eb Mon Sep 17 00:00:00 2001 From: Ramon Dias Ferreira Date: Wed, 14 Dec 2022 16:24:56 -0300 Subject: [PATCH] feat(addEventListener): evento de monitoramento da hash, ao mudar o checkout a class active acompanha --- checkout/src/arquivos/js/components/Header.js | 169 +++++++++++++++--- 1 file changed, 146 insertions(+), 23 deletions(-) diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index c4f9ae4..8b17e55 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -10,7 +10,7 @@ export default class Header { await this.selectors(); console.log(this.progressBar); this.progressBarHTML(); - await this.barProgress() + await this.barProgress(); } async selectors() { @@ -58,20 +58,32 @@ export default class Header { async barProgress() { if (this.progressBar && window.innerWidth > 1024) { - const barList = document.querySelectorAll(".progress-bar ul li"); + const barList = document.querySelectorAll(".progress-bar ul li"); barList.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["progress-bar-circle-1"]) { - li.children[0].children["progress-bar-circle-1"].classList.add("active") + li.children[0].children["progress-bar-circle-1"].classList.add("active"); } if (li.children[0].children["progress-bar-circle-2"]) { - if(li.children[0].children["progress-bar-circle-2"].classList.contains("active")) { - li.children[0].children["progress-bar-circle-2"].classList.remove("active") + if ( + li.children[0].children["progress-bar-circle-2"].classList.contains( + "active" + ) + ) { + li.children[0].children["progress-bar-circle-2"].classList.remove( + "active" + ); } } if (li.children[0].children["progress-bar-circle-3"]) { - if(li.children[0].children["progress-bar-circle-3"].classList.contains("active")) { - li.children[0].children["progress-bar-circle-3"].classList.remove("active") + if ( + li.children[0].children["progress-bar-circle-3"].classList.contains( + "active" + ) + ) { + li.children[0].children["progress-bar-circle-3"].classList.remove( + "active" + ); } } } else if ( @@ -80,45 +92,156 @@ export default class Header { window.location.href === "https://m3academy.myvtex.com/checkout/#/shipping" ) { if (li.children[0].children["progress-bar-circle-1"]) { - if(li.children[0].children["progress-bar-circle-1"].classList.contains("active")) { - li.children[0].children["progress-bar-circle-1"].classList.remove("active") - } + if ( + li.children[0].children["progress-bar-circle-1"].classList.contains( + "active" + ) + ) { + li.children[0].children["progress-bar-circle-1"].classList.remove( + "active" + ); + } } if (li.children[0].children["progress-bar-circle-2"]) { - li.children[0].children["progress-bar-circle-2"].classList.add("active") + li.children[0].children["progress-bar-circle-2"].classList.add("active"); } if (li.children[0].children["progress-bar-circle-3"]) { if ( - li.children[0].children["progress-bar-circle-3"].classList.contains("active") + li.children[0].children["progress-bar-circle-3"].classList.contains( + "active" + ) ) { - li.children[0].children["progress-bar-circle-3"].classList.remove("active") + li.children[0].children["progress-bar-circle-3"].classList.remove( + "active" + ); } } } else if ( window.location.href === "https://m3academy.myvtex.com/checkout/#/payment" ) { - if (li.children[0].children["progress-bar-circle-1"]){ + if (li.children[0].children["progress-bar-circle-1"]) { if ( - li.children[0].children["progress-bar-circle-1"].classList.contains("active") + li.children[0].children["progress-bar-circle-1"].classList.contains( + "active" + ) ) { - li.children[0].children["progress-bar-circle-1"].classList.remove("active") + li.children[0].children["progress-bar-circle-1"].classList.remove( + "active" + ); } } if (li.children[0].children["progress-bar-circle-2"]) { - if ( - li.children[0].children["progress-bar-circle-2"].classList.contains("active") + if ( + li.children[0].children["progress-bar-circle-2"].classList.contains( + "active" + ) ) { - li.children[0].children["progress-bar-circle-2"].classList.remove("active") + li.children[0].children["progress-bar-circle-2"].classList.remove( + "active" + ); } } if (li.children[0].children["progress-bar-circle-3"]) { - li.children[0].children["progress-bar-circle-3"].classList.add("active") + li.children[0].children["progress-bar-circle-3"].classList.add("active"); } } - }) + window.addEventListener("hashchange", () => { + if (window.location.hash == "#/cart") { + if (li.children[0].children["progress-bar-circle-1"]) { + li.children[0].children["progress-bar-circle-1"].classList.add( + "active" + ); + } + + if (li.children[0].children["progress-bar-circle-2"]) { + if ( + li.children[0].children["progress-bar-circle-2"].classList.contains( + "active" + ) + ) { + li.children[0].children["progress-bar-circle-2"].classList.remove( + "active" + ); + } + } + if (li.children[0].children["progress-bar-circle-3"]) { + if ( + li.children[0].children["progress-bar-circle-3"].classList.contains( + "active" + ) + ) { + li.children[0].children["progress-bar-circle-3"].classList.remove( + "active" + ); + } + } + } else if ( + window.location.hash == "#/email" || + window.location.hash == "#/profile" || + window.location.hash == "#/shipping" + ) { + if (li.children[0].children["progress-bar-circle-1"]) { + if ( + li.children[0].children["progress-bar-circle-1"].classList.contains( + "active" + ) + ) { + li.children[0].children["progress-bar-circle-1"].classList.remove( + "active" + ); + } + } + + if (li.children[0].children["progress-bar-circle-2"]) { + li.children[0].children["progress-bar-circle-2"].classList.add( + "active" + ); + + } + if (li.children[0].children["progress-bar-circle-3"]) { + if ( + li.children[0].children["progress-bar-circle-3"].classList.contains( + "active" + ) + ) { + li.children[0].children["progress-bar-circle-3"].classList.remove( + "active" + ); + } + } + } else if (window.location.hash == "#/payment") { + if (li.children[0].children["progress-bar-circle-1"]) { + if ( + li.children[0].children["progress-bar-circle-1"].classList.contains( + "active" + ) + ) { + li.children[0].children["progress-bar-circle-1"].classList.remove( + "active" + ); + } + } + if (li.children[0].children["progress-bar-circle-2"]) { + if ( + li.children[0].children["progress-bar-circle-2"].classList.contains( + "active" + ) + ) { + li.children[0].children["progress-bar-circle-2"].classList.remove( + "active" + ); + } + } + if (li.children[0].children["progress-bar-circle-3"]) { + li.children[0].children["progress-bar-circle-3"].classList.add( + "active" + ); + } + } + }); + }); } } - }