RamonDiasFerreira/m3-academy-template-checkout-ramon-dias-ferreira
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style(Header): remoção de selectors não utilizado, organização do codigo.

Browse Source
This commit is contained in:
Ramon Dias Ferreira 2022-12-18 15:43:28 -03:00
parent b7c4698596
commit 3077f8df10
2 changed files with 74 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

161
checkout/src/arquivos/js/components/Header.js
View File

@ -9,20 +9,13 @@ export default class Header {
async init() { async init() {
await this.selectors(); await this.selectors();
this.progressBarHTML(); this.progressBarHTML();
await this.progressBarProgress(); await this.barProgress();
} }
async selectors() { async selectors() {
this.header = await waitElement(".headerCheckout", {
//#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar
timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
});
this.progressBar = await waitElement("#progressBar", { this.progressBar = await waitElement("#progressBar", {
//#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar timeout: 5000,
timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise interval: 1000,
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
}); });
} }
@ -30,43 +23,29 @@ export default class Header {
if (this.progressBar && window.innerWidth > 1024) { if (this.progressBar && window.innerWidth > 1024) {
this.progressBar.innerHTML = ` this.progressBar.innerHTML = `
<ul> <ul>
<li>
<li> <div class="containerLi">
<div class="containerLi">
<p class="progress-bar-text">Meu Carrinho</p> <p class="progress-bar-text">Meu Carrinho</p>
<div style="margin-left: 29px;">
<div class="bolinha" style="margin-left: 29px;"> <p id="progress-bar-circle-1" class="progress-bar-circle"></p>
<p id="progress-bar-circle-1" class="progress-bar-circle"></p> <p class="progress-bar-line-1"></p>
<p class="progress-bar-line-1"></p>
</div> </div>
</div> </div>
</li>
</li> <li class="central">
<li class="central">
<div class="containerLi"> <div class="containerLi">
<p class="progress-bar-text">Dados Pessoais</p> <p class="progress-bar-text">Dados Pessoais</p>
<p id="progress-bar-circle-2" class="progress-bar-circle"></p> <p id="progress-bar-circle-2" class="progress-bar-circle"></p>
</div> </div>
</li> </li>
<li>
<div class="containerLi">
<p class="progress-bar-text">Pagamento</p>
<li> <div style="margin-right: 22px;">
<div class="containerLi"> <p id="progress-bar-circle-3" class="progress-bar-circle"></p>
<p class="progress-bar-text">Pagamento</p> </div>
<div class="bolinha" style="margin-right: 22px;">
<p id="progress-bar-circle-3" class="progress-bar-circle"></p>
<p class="progress-bar-line-2"></p> <p class="progress-bar-line-2"></p>
</div>
</div> </div>
</li> </li>
@ -80,28 +59,28 @@ export default class Header {
} }
} }
async progressBarProgress() { async barProgress() {
if (this.progressBar && window.innerWidth > 1024) { if (this.progressBar && window.innerWidth > 1024) {
const progressBarLista = document.querySelectorAll("#progressBar ul li"); const progressBarLista = document.querySelectorAll("#progressBar ul li");
progressBarLista.forEach((li) => { progressBarLista.forEach((li) => {
// console.log(li) console.log(li.children[0])
const liOne = li.children[0].children[1].children["progress-bar-circle-1"]; const circleOne = li.children[0].children[1].children["progress-bar-circle-1"];
const liTwo = li.children[0].children["progress-bar-circle-2"]; const circleTwo = li.children[0].children["progress-bar-circle-2"];
const liThree = li.children[0].children[1].children["progress-bar-circle-3"]; const circleThree = li.children[0].children[1].children["progress-bar-circle-3"];
if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") { if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
if (liOne) { if (circleOne) {
liOne.classList.add("active"); circleOne.classList.add("active");
} }
if (liTwo) { if (circleTwo) {
if (liTwo.classList.contains("active")) { if (circleTwo.classList.contains("active")) {
liTwo.classList.remove("active"); circleTwo.classList.remove("active");
} }
} }
if (liThree) { if (circleThree) {
if (liThree.classList.contains("active")) { if (circleThree.classList.contains("active")) {
liThree.classList.remove("active"); circleThree.classList.remove("active");
} }
} }
} else if ( } else if (
@ -109,53 +88,53 @@ export default class Header {
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 (liOne) { if (circleOne) {
if (liOne.classList.contains("active")) { if (circleOne.classList.contains("active")) {
liOne.classList.remove("active"); circleOne.classList.remove("active");
} }
} }
if (liTwo) { if (circleTwo) {
liTwo.classList.add("active"); circleTwo.classList.add("active");
} }
if (liThree) { if (circleThree) {
if (liThree.classList.contains("active")) { if (circleThree.classList.contains("active")) {
liThree.classList.remove("active"); circleThree.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 (liOne) { if (circleOne) {
if (liOne.classList.contains("active")) { if (circleOne.classList.contains("active")) {
liOne.classList.remove("active"); circleOne.classList.remove("active");
} }
} }
if (liTwo) { if (circleTwo) {
if (liTwo.classList.contains("active")) { if (circleTwo.classList.contains("active")) {
liTwo.classList.remove("active"); circleTwo.classList.remove("active");
} }
} }
if (liThree) { if (circleThree) {
liThree.classList.add("active"); circleThree.classList.add("active");
} }
} }
window.addEventListener("hashchange", () => { window.addEventListener("hashchange", () => {
if (window.location.hash == "#/cart") { if (window.location.hash == "#/cart") {
if (liOne) { if (circleOne) {
liOne.classList.add("active"); circleOne.classList.add("active");
} }
if (liTwo) { if (circleTwo) {
if (liTwo.classList.contains("active")) { if (circleTwo.classList.contains("active")) {
liTwo.classList.remove("active"); circleTwo.classList.remove("active");
} }
} }
if (liThree) { if (circleThree) {
if (liThree.classList.contains("active")) { if (circleThree.classList.contains("active")) {
liThree.classList.remove("active"); circleThree.classList.remove("active");
} }
} }
} else if ( } else if (
@ -163,34 +142,34 @@ export default class Header {
window.location.hash === "#/profile" || window.location.hash === "#/profile" ||
window.location.hash === "#/shipping" window.location.hash === "#/shipping"
) { ) {
if (liOne) { if (circleOne) {
if (liOne.classList.contains("active")) { if (circleOne.classList.contains("active")) {
liOne.classList.remove("active"); circleOne.classList.remove("active");
} }
} }
if (liTwo) { if (circleTwo) {
liTwo.classList.add("active"); circleTwo.classList.add("active");
} }
if (liThree) { if (circleThree) {
if (liThree.classList.contains("active")) { if (circleThree.classList.contains("active")) {
liThree.classList.remove("active"); circleThree.classList.remove("active");
} }
} }
} else if (window.location.hash == "#/payment") { } else if (window.location.hash == "#/payment") {
if (liOne) { if (circleOne) {
if (liOne.classList.contains("active")) { if (circleOne.classList.contains("active")) {
liOne.classList.remove("active"); circleOne.classList.remove("active");
} }
} }
if (liTwo) { if (circleTwo) {
if (liTwo.classList.contains("active")) { if (circleTwo.classList.contains("active")) {
liTwo.classList.remove("active"); circleTwo.classList.remove("active");
} }
} }
if (liThree) { if (circleThree) {
liThree.classList.add("active"); circleThree.classList.add("active");
} }
} }
}); });

8
checkout/src/arquivos/sass/partials/_header.scss
View File

@ -78,20 +78,20 @@
li .progress-bar-line-1 { li .progress-bar-line-1 {
position: absolute; position: absolute;
width: 100%;
left: 25%; left: 25%;
transform: translateY(-50%); transform: translateY(-50%);
bottom: 5px; bottom: 5px;
width: 100%;
height: 1px; height: 1px;
border-top: 1px solid #000000; border-top: 1px solid #000000;
} }
li .progress-bar-line-2 { li .progress-bar-line-2 {
position: absolute; position: absolute;
width: 100%;
right: 21%; right: 21%;
transform: translateY(-50%); transform: translateY(-50%);
bottom: 5px; bottom: 5px;
width: 100%;
height: 1px; height: 1px;
border-top: 1px solid #000000; border-top: 1px solid #000000;
} }
@ -123,11 +123,11 @@
text-transform: uppercase; text-transform: uppercase;
font-family: $font-family; font-family: $font-family;
line-height: 15px;
color: $color-gray;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 12px; font-size: 12px;
line-height: 15px;
color: $color-gray;
} }
img { img {