victor/Reem-Notas
SHA256
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Modificação na area do motorista

Browse Source
This commit is contained in:
victor
2026-08-26 15:45:25 -03:00
parent e4b17653ef
commit 044747a36b
1 changed files with 48 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
app/javascript/controllers/carrossel_controller.js
View File

@@ -1,27 +1,30 @@
// app/javascript/controllers/carrossel_controller.js
// Stimulus — paginação em "carrossel" para listas longas: mostra N itens por vez
// com setas grandes e o indicador "1–10 de 12".
// Stimulus — paginação em "carrossel" para listas longas: mostra uma página de
// itens por vez, com setas grandes e o indicador "1–5 de 12".
//
// PADRÃO EM TELA PEQUENA, LISTA INTEIRA EM TELA GRANDE. Em celular e monitor
// pequeno, uma lista de 30 cards vira rolagem infinita e o rodapé/ações da tela
// somem de vista; num monitor grande a mesma lista cabe e paginar só atrapalha
// (Ctrl+F do navegador não acha o que está escondido). O corte é por largura de
// janela — `maxLargura` — e é reavaliado no resize/rotação da tela.
// TAMANHO DE PÁGINA POR TELA (é o ponto do controller):
// • celular (até 640px) → 5 itens — cada card ocupa muita altura;
// 10 já viravam rolagem infinita;
// • até 1366px → 10 itens — tablet e notebook pequeno;
// • acima disso → lista INTEIRA, sem setas. Em monitor grande a
// lista cabe e esconder item só atrapalha (o
// Ctrl+F do navegador não acha o que está oculto).
//
// O corte é reavaliado no resize/rotação: girar o celular ou encostar a janela
// na lateral já muda o comportamento, e o item que estava no topo continua na
// tela (a posição é guardada pelo ÍNDICE do item, não pelo número da página).
//
// Os itens já vêm todos no HTML; aqui só escondemos os de fora da página. Por
// isso não serve para listas de centenas de itens (aí é paginação no servidor).
//
// Uso:
// <div data-controller="carrossel"
// data-carrossel-tamanho-value="10" <- itens por página
// data-carrossel-max-largura-value="1366"> <- acima disso, mostra tudo
// <div data-carrossel-target="item">…</div> <- cada item
// …
// <div data-carrossel-target="controles" class="hidden">
// <button data-action="carrossel#anterior" data-carrossel-target="anterior">
// <span data-carrossel-target="indicador"></span>
// <button data-action="carrossel#proxima" data-carrossel-target="proximo">
// </div>
// data-carrossel-tamanho-value="10" <- itens por página
// data-carrossel-tamanho-compacto-value="5" <- itens no celular
// data-carrossel-largura-compacta-value="640" <- até aqui é "celular"
// data-carrossel-max-largura-value="1366"> <- acima disso, mostra tudo
// <div data-carrossel-target="item">…</div>
// <%= render 'shared/carrossel_controles' %>
// </div>
//
// Um item com data-carrossel-inicial="true" (ex.: o motorista com a composição
@@ -32,12 +35,17 @@ import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ["item", "controles", "indicador", "anterior", "proximo"]
static values = {
tamanho: { type: Number, default: 10 },
maxLargura: { type: Number, default: 1366 }
tamanho: { type: Number, default: 10 },
tamanhoCompacto: { type: Number, default: 5 },
larguraCompacta: { type: Number, default: 640 },
maxLargura: { type: Number, default: 1366 }
}
connect() {
this.pagina = this.paginaInicial()
// Âncora = índice do primeiro item da página atual. Guardar o ÍNDICE (e não
// o número da página) é o que mantém o mesmo item na tela quando o tamanho
// da página muda junto com a largura.
this.ancora = this.indiceInicial()
this._aoRedimensionar = () => this.render()
window.addEventListener("resize", this._aoRedimensionar)
this.render()
@@ -51,26 +59,37 @@ export default class extends Controller {
anterior() { this.ir(this.pagina - 1) }
ir(destino) {
this.pagina = Math.min(Math.max(destino, 0), this.totalPaginas - 1)
const pagina = Math.min(Math.max(destino, 0), this.totalPaginas - 1)
this.ancora = pagina * this.tamanho
this.render()
// Volta ao topo da lista: sem isso, na 2ª página o leitor continua vendo o
// fim da anterior e parece que nada mudou.
// Volta ao topo da lista: sem isso, na página seguinte o leitor continua
// vendo o fim da anterior e parece que nada mudou.
this.element.scrollIntoView({ behavior: "smooth", block: "start" })
}
get tamanho() {
return window.innerWidth <= this.larguraCompactaValue
? this.tamanhoCompactoValue
: this.tamanhoValue
}
// Tela grande: sem paginação (a lista inteira aparece).
get paginando() {
return window.innerWidth <= this.maxLarguraValue &&
this.itemTargets.length > this.tamanhoValue
this.itemTargets.length > this.tamanho
}
get totalPaginas() {
return Math.max(Math.ceil(this.itemTargets.length / this.tamanhoValue), 1)
return Math.max(Math.ceil(this.itemTargets.length / this.tamanho), 1)
}
paginaInicial() {
get pagina() {
return Math.min(Math.floor(this.ancora / this.tamanho), this.totalPaginas - 1)
}
indiceInicial() {
const i = this.itemTargets.findIndex((el) => el.dataset.carrosselInicial === "true")
return i < 0 ? 0 : Math.floor(i / this.tamanhoValue)
return i < 0 ? 0 : i
}
render() {
@@ -82,11 +101,8 @@ export default class extends Controller {
return
}
// Uma tela menor pode ter reduzido o total de páginas desde a última vez.
this.pagina = Math.min(this.pagina, this.totalPaginas - 1)
const inicio = this.pagina * this.tamanhoValue
const fim = inicio + this.tamanhoValue
const inicio = this.pagina * this.tamanho
const fim = inicio + this.tamanho
this.itemTargets.forEach((item, i) => {
item.classList.toggle("hidden", i < inicio || i >= fim)
@@ -96,7 +112,7 @@ export default class extends Controller {
this.controlesTarget.classList.remove("hidden")
if (this.hasIndicadorTarget) {
// "1–10 de 12" e não "página 1 de 2": quem lê quer saber quantos itens
// "1–5 de 12" e não "página 1 de 3": quem lê quer saber quantos itens
// existem, não quantas páginas a tela tem.
this.indicadorTarget.textContent = `${inicio + 1}–${Math.min(fim, total)} de ${total}`
}