HenriqueSantosSantana/m3-academy-template-checkout-henrique-santos-santana
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'feature/progressbar' (#2) from feature/progressbar into develop

Browse Source 
Reviewed-on: #2
This commit is contained in:
Henrique Santos Santana 2022-12-14 16:33:59 +00:00
commit e0b92f5df4
3 changed files with 207 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,116 @@
// import waitForEl from "../helpers/waitForEl";
import { waitElement } from "m3-utils";
/**
* @param {Object} options
* @param {HTMLAllElement} target
* @return {Object}
*/
function OnProgress(target) {
if (!target) {
return;
}
const innerElement = () => {
target.innerHTML = `<ul class="progress-list">
<li class="progress-item progress-item--left">
<div class="progress-container">
<div class="progress-content">
<p>Meu Carrinho</p>
<span class="progress-bullet"></span>
<span class="progress-line"></span>
</div>
</div>
</li>
<li class="progress-item progress-item--center">
<div class="progress-container">
<div class="progress-content">
<p>Dados Pessoais</p>
<span class="progress-bullet"></span>
<span class="progress-line"></span>
</div>
</div>
</li>
<li class="progress-item progress-item--right">
<div class="progress-container">
<div class="progress-content">
<p>Pagamento</p>
<span class="progress-bullet"></span>
<span class="progress-line"></span>
</div>
</div>
</li>
</ul>`;
};
const verifyCurrentRoute = () => {
let bullets = target.querySelectorAll(".progress-bullet");
bullets.forEach((bullet) => {
if (window.location.href.endsWith("#/cart")) {
bullets[0].classList.add("active");
}
if (
window.location.href.endsWith("#/email") ||
window.location.href.endsWith("#/shipping") ||
window.location.href.endsWith("#/profile")
) {
bullets[1].classList.add("active");
}
if (window.location.href.endsWith("#/payment")) {
bullets[2].classList.add("active");
}
window.addEventListener("hashchange", () => {
if (window.location.href.endsWith("#/cart")) {
bullets[0].classList.add("active");
if (bullet != bullets[0]) {
bullet.classList.remove("active");
}
}
if (
window.location.href.endsWith("#/email") ||
window.location.href.endsWith("#/shipping") ||
window.location.href.endsWith("#/profile")
) {
bullets[1].classList.add("active");
if (bullet != bullets[1]) {
bullet.classList.remove("active");
}
}
if (window.location.href.endsWith("#/payment")) {
bullets[2].classList.add("active");
if (bullet != bullets[2]) {
bullet.classList.remove("active");
}
}
});
});
};
const init = () => {
innerElement();
verifyCurrentRoute();
};
const remove = () => {
target.innerHTML = "";
};
return {
ref: target,
init,
remove,
};
}
export default class Header {
constructor() {
this.init();
@ -8,14 +118,19 @@ export default class Header {
async init() {
await this.selectors();
console.log(this.item);
this.innerToProgressBar();
}
async selectors() {
this.item = await waitElement("#my-element", {
//#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", {
timeout: 5000,
interval: 1000,
});
}
innerToProgressBar() {
let progress = OnProgress(this.progressBar);
progress.init();
}
}

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

@ -108,3 +108,89 @@
}
}
}
.headerCheckout {
.progress-bar {
width: 439px;
.progress-list {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0;
}
.progress-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 12px;
}
.progress-content,
.progress-container {
display: flex;
align-items: center;
flex-direction: column;
}
.progress-container {
position: relative;
justify-content: center;
width: 100%;
}
.progress-item {
&--left,
&--right {
width: 39.9183%;
.progress-line {
position: absolute;
bottom: 6px;
width: 100%;
height: 1px;
border-bottom: 1px solid #000;
}
}
&--left {
.progress-container {
align-items: flex-start;
}
.progress-line {
left: 75%;
transform: translateX(-50%);
}
}
&--right {
.progress-container {
align-items: flex-end;
}
.progress-line {
left: 29%;
transform: translateX(-50%);
}
}
}
.progress-bullet {
width: 12px;
height: 12px;
background-color: $clr-common-white;
position: relative;
border: 1px solid $clr-common-black;
z-index: 10;
border-radius: 100%;
&.active {
background-color: $clr-common-black;
}
}
}
}

2
checkout/src/arquivos/sass/utils/_variaveis.scss
View File

@ -5,7 +5,7 @@ $font-family-100: "Open Sans", sans-serif;
$font-family-200: "Tenor Sans", sans-serif;
/* Colors */
$clr-common-black: #000;
$clr-common-white: #fff;
$clr-gray-600: #292929;