Create a Size Selector Component #265
Conversation
There was a problem hiding this comment.
Temos um problema de comportamento, precisamos que quando um size for selecionado ele seja animado para o centro e ai fique em destaque, da forma que está agora é um problema de usabilidade
Essa sessão aqui é um bom exemplo, porém precisamos que a troca de size tambem seja animada alem da troca de posição
https://www.medcel.com.br/serie
JonasGz
force-pushed
the
issue-23
branch
2 times, most recently
from
b969706
to
f013e61
Compare
JonasGz
force-pushed
the
issue-23
branch
4 times, most recently
from
955eb5b
to
524dce6
Compare
refiz todo o componente e agora parece estar adequado para o que queremos. |
| if (event.key === 'ArrowRight' || event.key === 'ArrowDown') { | ||
| next = card.nextElementSibling; | ||
| if (next) { | ||
| nextIndex = this.$cards.indexOf(next); | ||
| next.focus(); | ||
| this.selectCard(next, nextIndex); | ||
| this.getCardActiveEvent('keydown', next, nextIndex); | ||
| } | ||
| } | ||
| if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') { | ||
| prev = card.previousElementSibling; | ||
| if (prev) { | ||
| prevIndex = this.$cards.indexOf(prev); | ||
| prev.focus(); | ||
| this.selectCard(prev, prevIndex); | ||
| this.getCardActiveEvent('keydown', prev, prevIndex); | ||
| } | ||
| } |
There was a problem hiding this comment.
Seria legal separar isso em funções, acredito inclusive que vc consegue fazer apenas 1 função que lida com o "proximo" item, passando os parametros corretos ele sabe lidar se é um item seguinte ou um item anterior
There was a problem hiding this comment.
consegui reduzir pra uma função apenas mas nao sei se daria p melhorar, vou conversar ctg
| if (index === 0) | ||
| this.$sizeList.classList.add( | ||
| 'container-size-selector__size-list--active-padding', | ||
| ); |
There was a problem hiding this comment.
Oq isso faz?
Pq precisamos disso?
Outra coisa, quando vc tem um conteudo de um if mais complexo sempre abra o bloco do if, isso q vc fez funciona, mas prejudiuca muito a leitura
There was a problem hiding this comment.
o motivo disso é pelo seguinte:
eu preciso adicionar um padding nas laterais para ter espaço para o primeiro card e o último scrollarem para o centro.
no entanto, quando eu adiciono o padding da lateral esquerda na inicialização, os cards já iniciam totalmente para a direita colocando o primeiro card ao centro, que é diferente do comportamento que esperamos de ter o card do meio no centro e não o primeiro.
Para resolver isso eu coloquei para o componente iniciar sem padding a esquerda e adicionar apenas quando eu quiser que o primeiro card vá para o centro que é clicando no mesmo.
adicionei o bloco nos if
| const cardRect = card.getBoundingClientRect(); | ||
| const listRect = this.$sizeList.getBoundingClientRect(); | ||
| const cardCenter = cardRect.left + cardRect.width / 2; | ||
| const listCenter = listRect.left + listRect.width / 2; | ||
| const offset = cardCenter - listCenter; |
There was a problem hiding this comment.
To com a sensaçào de que esse não é o melhor modo de fazer...
| element.setAttribute('aria-checked', 'true'); | ||
| }, | ||
|
|
||
| getCardActiveEvent(eventName, card, index) { |
There was a problem hiding this comment.
O nome dessa função ta meio ruim, deveria ser trigger events ou algo assim, get usamos quando pegamos algo, nesse caso não estamos pegando nada hm
There was a problem hiding this comment.
poderia ser emitCardEvent?
| } | ||
| }, | ||
|
|
||
| getCardActive() { |
There was a problem hiding this comment.
Esse nome tambem não me parece correto. No caso vc ta retornando, mas seria getActiveCard
There was a problem hiding this comment.
corrigi para getActiveCard e to pensando se da pra usar outro nome
feat: add responsive chore: changed imgs to template sting fix: translation bug mobile fix: add aria-checked event feat: create new sizeSelector feat: create methods and add navigation with keyboard feat: finish component fix: remove css noPet fix: remove justify-content: center
Closes #23
Feature
Criação do componente de seleção de peso.
Visual evidences 🖼️
DESKTOP
MOBILE
Checklist
Additional info
N/A