forked from M3-Academy/m3-academy-template-checkout
style(Header): remoção de selectors não utilizado, organização do codigo.
This commit is contained in:
parent
b7c4698596
commit
3077f8df10
@ -9,20 +9,13 @@ export default class Header {
|
||||
async init() {
|
||||
await this.selectors();
|
||||
this.progressBarHTML();
|
||||
await this.progressBarProgress();
|
||||
await this.barProgress();
|
||||
}
|
||||
|
||||
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", {
|
||||
//#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
|
||||
timeout: 5000,
|
||||
interval: 1000,
|
||||
});
|
||||
}
|
||||
|
||||
@ -30,43 +23,29 @@ export default class Header {
|
||||
if (this.progressBar && window.innerWidth > 1024) {
|
||||
this.progressBar.innerHTML = `
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
|
||||
<div class="containerLi">
|
||||
|
||||
|
||||
<li>
|
||||
<div class="containerLi">
|
||||
<p class="progress-bar-text">Meu Carrinho</p>
|
||||
|
||||
<div class="bolinha" style="margin-left: 29px;">
|
||||
<p id="progress-bar-circle-1" class="progress-bar-circle"></p>
|
||||
<p class="progress-bar-line-1"></p>
|
||||
|
||||
<div style="margin-left: 29px;">
|
||||
<p id="progress-bar-circle-1" class="progress-bar-circle"></p>
|
||||
<p class="progress-bar-line-1"></p>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li class="central">
|
||||
</li>
|
||||
<li class="central">
|
||||
<div class="containerLi">
|
||||
<p class="progress-bar-text">Dados Pessoais</p>
|
||||
<p id="progress-bar-circle-2" class="progress-bar-circle"></p>
|
||||
|
||||
</div>
|
||||
</li>
|
||||
</li>
|
||||
<li>
|
||||
<div class="containerLi">
|
||||
<p class="progress-bar-text">Pagamento</p>
|
||||
|
||||
<li>
|
||||
<div class="containerLi">
|
||||
<p class="progress-bar-text">Pagamento</p>
|
||||
|
||||
<div class="bolinha" style="margin-right: 22px;">
|
||||
<p id="progress-bar-circle-3" class="progress-bar-circle"></p>
|
||||
<div style="margin-right: 22px;">
|
||||
<p id="progress-bar-circle-3" class="progress-bar-circle"></p>
|
||||
</div>
|
||||
<p class="progress-bar-line-2"></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</li>
|
||||
@ -80,28 +59,28 @@ export default class Header {
|
||||
}
|
||||
}
|
||||
|
||||
async progressBarProgress() {
|
||||
async barProgress() {
|
||||
if (this.progressBar && window.innerWidth > 1024) {
|
||||
const progressBarLista = document.querySelectorAll("#progressBar ul li");
|
||||
progressBarLista.forEach((li) => {
|
||||
// console.log(li)
|
||||
const liOne = li.children[0].children[1].children["progress-bar-circle-1"];
|
||||
const liTwo = li.children[0].children["progress-bar-circle-2"];
|
||||
const liThree = li.children[0].children[1].children["progress-bar-circle-3"];
|
||||
console.log(li.children[0])
|
||||
const circleOne = li.children[0].children[1].children["progress-bar-circle-1"];
|
||||
const circleTwo = li.children[0].children["progress-bar-circle-2"];
|
||||
const circleThree = li.children[0].children[1].children["progress-bar-circle-3"];
|
||||
|
||||
if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
|
||||
if (liOne) {
|
||||
liOne.classList.add("active");
|
||||
if (circleOne) {
|
||||
circleOne.classList.add("active");
|
||||
}
|
||||
|
||||
if (liTwo) {
|
||||
if (liTwo.classList.contains("active")) {
|
||||
liTwo.classList.remove("active");
|
||||
if (circleTwo) {
|
||||
if (circleTwo.classList.contains("active")) {
|
||||
circleTwo.classList.remove("active");
|
||||
}
|
||||
}
|
||||
if (liThree) {
|
||||
if (liThree.classList.contains("active")) {
|
||||
liThree.classList.remove("active");
|
||||
if (circleThree) {
|
||||
if (circleThree.classList.contains("active")) {
|
||||
circleThree.classList.remove("active");
|
||||
}
|
||||
}
|
||||
} 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/#/shipping"
|
||||
) {
|
||||
if (liOne) {
|
||||
if (liOne.classList.contains("active")) {
|
||||
liOne.classList.remove("active");
|
||||
if (circleOne) {
|
||||
if (circleOne.classList.contains("active")) {
|
||||
circleOne.classList.remove("active");
|
||||
}
|
||||
}
|
||||
if (liTwo) {
|
||||
liTwo.classList.add("active");
|
||||
if (circleTwo) {
|
||||
circleTwo.classList.add("active");
|
||||
}
|
||||
if (liThree) {
|
||||
if (liThree.classList.contains("active")) {
|
||||
liThree.classList.remove("active");
|
||||
if (circleThree) {
|
||||
if (circleThree.classList.contains("active")) {
|
||||
circleThree.classList.remove("active");
|
||||
}
|
||||
}
|
||||
} else if (
|
||||
window.location.href === "https://m3academy.myvtex.com/checkout/#/payment"
|
||||
) {
|
||||
if (liOne) {
|
||||
if (liOne.classList.contains("active")) {
|
||||
liOne.classList.remove("active");
|
||||
if (circleOne) {
|
||||
if (circleOne.classList.contains("active")) {
|
||||
circleOne.classList.remove("active");
|
||||
}
|
||||
}
|
||||
|
||||
if (liTwo) {
|
||||
if (liTwo.classList.contains("active")) {
|
||||
liTwo.classList.remove("active");
|
||||
if (circleTwo) {
|
||||
if (circleTwo.classList.contains("active")) {
|
||||
circleTwo.classList.remove("active");
|
||||
}
|
||||
}
|
||||
|
||||
if (liThree) {
|
||||
liThree.classList.add("active");
|
||||
if (circleThree) {
|
||||
circleThree.classList.add("active");
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("hashchange", () => {
|
||||
if (window.location.hash == "#/cart") {
|
||||
if (liOne) {
|
||||
liOne.classList.add("active");
|
||||
if (circleOne) {
|
||||
circleOne.classList.add("active");
|
||||
}
|
||||
|
||||
if (liTwo) {
|
||||
if (liTwo.classList.contains("active")) {
|
||||
liTwo.classList.remove("active");
|
||||
if (circleTwo) {
|
||||
if (circleTwo.classList.contains("active")) {
|
||||
circleTwo.classList.remove("active");
|
||||
}
|
||||
}
|
||||
if (liThree) {
|
||||
if (liThree.classList.contains("active")) {
|
||||
liThree.classList.remove("active");
|
||||
if (circleThree) {
|
||||
if (circleThree.classList.contains("active")) {
|
||||
circleThree.classList.remove("active");
|
||||
}
|
||||
}
|
||||
} else if (
|
||||
@ -163,34 +142,34 @@ export default class Header {
|
||||
window.location.hash === "#/profile" ||
|
||||
window.location.hash === "#/shipping"
|
||||
) {
|
||||
if (liOne) {
|
||||
if (liOne.classList.contains("active")) {
|
||||
liOne.classList.remove("active");
|
||||
if (circleOne) {
|
||||
if (circleOne.classList.contains("active")) {
|
||||
circleOne.classList.remove("active");
|
||||
}
|
||||
}
|
||||
if (liTwo) {
|
||||
liTwo.classList.add("active");
|
||||
if (circleTwo) {
|
||||
circleTwo.classList.add("active");
|
||||
}
|
||||
|
||||
if (liThree) {
|
||||
if (liThree.classList.contains("active")) {
|
||||
liThree.classList.remove("active");
|
||||
if (circleThree) {
|
||||
if (circleThree.classList.contains("active")) {
|
||||
circleThree.classList.remove("active");
|
||||
}
|
||||
}
|
||||
} else if (window.location.hash == "#/payment") {
|
||||
if (liOne) {
|
||||
if (liOne.classList.contains("active")) {
|
||||
liOne.classList.remove("active");
|
||||
if (circleOne) {
|
||||
if (circleOne.classList.contains("active")) {
|
||||
circleOne.classList.remove("active");
|
||||
}
|
||||
}
|
||||
|
||||
if (liTwo) {
|
||||
if (liTwo.classList.contains("active")) {
|
||||
liTwo.classList.remove("active");
|
||||
if (circleTwo) {
|
||||
if (circleTwo.classList.contains("active")) {
|
||||
circleTwo.classList.remove("active");
|
||||
}
|
||||
}
|
||||
if (liThree) {
|
||||
liThree.classList.add("active");
|
||||
if (circleThree) {
|
||||
circleThree.classList.add("active");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -78,20 +78,20 @@
|
||||
|
||||
li .progress-bar-line-1 {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 25%;
|
||||
transform: translateY(-50%);
|
||||
bottom: 5px;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border-top: 1px solid #000000;
|
||||
}
|
||||
|
||||
li .progress-bar-line-2 {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
right: 21%;
|
||||
transform: translateY(-50%);
|
||||
bottom: 5px;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border-top: 1px solid #000000;
|
||||
}
|
||||
@ -123,11 +123,11 @@
|
||||
|
||||
text-transform: uppercase;
|
||||
font-family: $font-family;
|
||||
line-height: 15px;
|
||||
color: $color-gray;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
line-height: 15px;
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
img {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user