From 2e95b8c363bd9334b1e7efa05e6c16e19819a7c3 Mon Sep 17 00:00:00 2001 From: HenriqueSSan Date: Tue, 13 Dec 2022 20:48:14 -0300 Subject: [PATCH 1/3] fix(header): not found common black variable --- checkout/src/arquivos/sass/utils/_variaveis.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index fc78867..9577752 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -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; From 6963eca4eedb6997672f81edc624d47d6e95be87 Mon Sep 17 00:00:00 2001 From: HenriqueSSan Date: Wed, 14 Dec 2022 11:05:50 -0300 Subject: [PATCH 2/3] feat(progressbar): created progress bar for checkout routes and added initial styles for large devices 1280px > 2500px --- checkout/src/arquivos/js/components/Header.js | 79 ++++++++++++++++-- .../src/arquivos/sass/partials/_header.scss | 82 +++++++++++++++++++ 2 files changed, 156 insertions(+), 5 deletions(-) diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 6744524..43c56ae 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -1,6 +1,70 @@ // 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 = ``; + }; + + const verifyCurrentRoute = () => { + console.log(options); + }; + + const init = () => { + innerElement(); + verifyCurrentRoute(options); + }; + + const remove = () => { + target.innerHTML = ""; + }; + + return { + ref: target, + init, + remove, + }; +} + export default class Header { constructor() { this.init(); @@ -8,14 +72,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(); + } } diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index a0d5443..0a906b2 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -108,3 +108,85 @@ } } } + +.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%; + } + } +} From 0d60233fdd92b5b9d33aa9db878e99a7cc1011d1 Mon Sep 17 00:00:00 2001 From: HenriqueSSan Date: Wed, 14 Dec 2022 13:32:12 -0300 Subject: [PATCH 3/3] feat(progressbar): created the show current url route --- checkout/src/arquivos/js/components/Header.js | 50 ++++++++++++++++++- .../src/arquivos/sass/partials/_header.scss | 4 ++ 2 files changed, 52 insertions(+), 2 deletions(-) diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 43c56ae..fe7e30f 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -46,12 +46,58 @@ function OnProgress(target) { }; const verifyCurrentRoute = () => { - console.log(options); + 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(options); + verifyCurrentRoute(); }; const remove = () => { diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 0a906b2..5ed41d9 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -187,6 +187,10 @@ border: 1px solid $clr-common-black; z-index: 10; border-radius: 100%; + + &.active { + background-color: $clr-common-black; + } } } }