feat: the upload bar says how long is left, not a notice before it
All checks were successful
Build and deploy / Validate source (push) Successful in 4s
Build and deploy / Integration suite on a real stack (push) Successful in 2m42s
Build and deploy / Secret scan and release gate (push) Successful in 5s
Build and deploy / Publish images (push) Successful in 1m2s
All checks were successful
Build and deploy / Validate source (push) Successful in 4s
Build and deploy / Integration suite on a real stack (push) Successful in 2m42s
Build and deploy / Secret scan and release gate (push) Successful in 5s
Build and deploy / Publish images (push) Successful in 1m2s
The product page's notice about the upload time is gone. The cart's upload bar now reads "Enviando seus arquivos · faltam cerca de 6 min", measured from the upload's own speed (a range from the size for the first seconds), with a line saying the time depends on the internet and to keep the page open. The header and the pay button show the same time instead of a percentage. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -147,15 +147,15 @@
|
|||||||
return {total, sent, fase, pct:Math.floor(sent/total*100),
|
return {total, sent, fase, pct:Math.floor(sent/total*100),
|
||||||
restante: fase==='enviando' && taxa>0 ? (total-sent)/taxa : null};
|
restante: fase==='enviando' && taxa>0 ? (total-sent)/taxa : null};
|
||||||
}
|
}
|
||||||
const tempo=s=>s<60 ? 'menos de 1 min' : 'cerca de '+Math.ceil(s/60)+' min';
|
const falta=s=>s<60 ? 'falta menos de 1 min' : 'faltam cerca de '+duracao(s);
|
||||||
|
// The time left, measured from the upload's own speed; until there is a
|
||||||
|
// measure, a range from the size.
|
||||||
|
const restante=e=>e.restante!=null ? falta(e.restante) : 'estimativa '+faixaEnvio(e.total-e.sent);
|
||||||
function textoEnvio(e) {
|
function textoEnvio(e) {
|
||||||
if (!e) return '';
|
if (!e) return '';
|
||||||
if (e.fase==='pronto') return 'Arquivos enviados';
|
if (e.fase==='pronto') return 'Arquivos enviados';
|
||||||
if (e.fase==='verificando') return 'Arquivos enviados · verificando a segurança…';
|
if (e.fase==='verificando') return 'Arquivos enviados · verificando a segurança…';
|
||||||
// Until the speed is measured, the range from the file size.
|
return 'Enviando seus arquivos · '+restante(e);
|
||||||
return 'Enviando seus arquivos: '+e.pct+'% · '+mb(e.sent)+' de '+mb(e.total)+' · '+
|
|
||||||
(e.restante!=null ? tempo(e.restante) : 'estimativa '+faixaEnvio(e.total-e.sent))+
|
|
||||||
'. Mantenha a página aberta.';
|
|
||||||
}
|
}
|
||||||
function pintaEnvio() {
|
function pintaEnvio() {
|
||||||
const e=estadoEnvio(), texto=textoEnvio(e);
|
const e=estadoEnvio(), texto=textoEnvio(e);
|
||||||
@@ -183,13 +183,18 @@
|
|||||||
}
|
}
|
||||||
if (e?.fase==='pronto') el.insertAdjacentHTML('beforeend', icone('okCirculo'));
|
if (e?.fase==='pronto') el.insertAdjacentHTML('beforeend', icone('okCirculo'));
|
||||||
if (texto) el.append(document.createTextNode(texto));
|
if (texto) el.append(document.createTextNode(texto));
|
||||||
|
if (e?.fase==='enviando') {
|
||||||
|
const nota=document.createElement('small'); nota.className='envioNota';
|
||||||
|
nota.textContent='O tempo depende da velocidade da sua internet. Mantenha a página aberta.';
|
||||||
|
el.append(nota);
|
||||||
|
}
|
||||||
el.classList.toggle('ok', e?.fase==='pronto');
|
el.classList.toggle('ok', e?.fase==='pronto');
|
||||||
}
|
}
|
||||||
// Visible on every page while it runs.
|
// Visible on every page while it runs.
|
||||||
if (topo) topo.textContent = !e || e.fase==='pronto' ? '' : e.fase==='verificando' ? '· verificando' : '· enviando '+e.pct+'%';
|
if (topo) topo.textContent = !e || e.fase==='pronto' ? '' : e.fase==='verificando' ? '· verificando' : e.restante!=null ? '· '+duracao(e.restante) : '· enviando';
|
||||||
if (busy && texto) {
|
if (busy && texto) {
|
||||||
message(texto);
|
message(texto);
|
||||||
$('bPagarTx').textContent = e && e.fase!=='pronto' ? (e.fase==='verificando' ? 'Verificando os arquivos…' : 'Enviando arquivos… '+e.pct+'%') : $('bPagarTx').textContent;
|
$('bPagarTx').textContent = e && e.fase!=='pronto' ? (e.fase==='verificando' ? 'Verificando os arquivos…' : 'Enviando arquivos… '+restante(e)) : $('bPagarTx').textContent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Leaving the page pauses an upload; it resumes, but the customer is warned.
|
// Leaving the page pauses an upload; it resumes, but the customer is warned.
|
||||||
|
|||||||
@@ -917,7 +917,6 @@ footer a:hover{color:var(--laranja2)}
|
|||||||
<div class="trocouCam" id="avisoTipo" style="display:none"></div>
|
<div class="trocouCam" id="avisoTipo" style="display:none"></div>
|
||||||
<div class="recusa" id="recusa" style="display:none"></div>
|
<div class="recusa" id="recusa" style="display:none"></div>
|
||||||
<div id="lista"></div>
|
<div id="lista"></div>
|
||||||
<p class="avisoEnvio" id="avisoEnvio" role="note" hidden></p>
|
|
||||||
<div class="zona" id="zona" tabindex="0" role="button">
|
<div class="zona" id="zona" tabindex="0" role="button">
|
||||||
<div class="ico"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m17 8-5-5-5 5"/><path d="M12 3v12"/></svg></div>
|
<div class="ico"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m17 8-5-5-5 5"/><path d="M12 3v12"/></svg></div>
|
||||||
<b id="zTit">Arraste aqui</b><span id="zSub"></span>
|
<b id="zTit">Arraste aqui</b><span id="zSub"></span>
|
||||||
|
|||||||
@@ -77,7 +77,6 @@ function pintaPedido(){
|
|||||||
if(pedido.length || itemAtual) $('carr').classList.add('on');
|
if(pedido.length || itemAtual) $('carr').classList.add('on');
|
||||||
if($('cartN')){ $('cartN').textContent=noCarrinho>99?'99+':noCarrinho; $('cartN').hidden=!noCarrinho;
|
if($('cartN')){ $('cartN').textContent=noCarrinho>99?'99+':noCarrinho; $('cartN').hidden=!noCarrinho;
|
||||||
$('cartLink').setAttribute('aria-label','Carrinho, '+noCarrinho+(noCarrinho===1?' item':' itens')); }
|
$('cartLink').setAttribute('aria-label','Carrinho, '+noCarrinho+(noCarrinho===1?' item':' itens')); }
|
||||||
pintaAvisoEnvio();
|
|
||||||
window.dispatchEvent(new Event('dtf-cart-changed'));
|
window.dispatchEvent(new Event('dtf-cart-changed'));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -124,22 +124,13 @@ const destinoApi=()=>entrega.tipo!=='frete' ? null : {
|
|||||||
// Tempo de envio antes de medir a internet de quem compra: uma faixa entre um
|
// Tempo de envio antes de medir a internet de quem compra: uma faixa entre um
|
||||||
// upload lento (10 Mbps) e um rápido (150 Mbps). O arquivo vai direto para o
|
// upload lento (10 Mbps) e um rápido (150 Mbps). O arquivo vai direto para o
|
||||||
// armazenamento, então é o upload do cliente que manda.
|
// armazenamento, então é o upload do cliente que manda.
|
||||||
const ENVIO_LENTO=10e6/8, ENVIO_RAPIDO=150e6/8, ENVIO_AVISA_S=120;
|
const ENVIO_LENTO=10e6/8, ENVIO_RAPIDO=150e6/8;
|
||||||
const duracao=s=>{
|
const duracao=s=>{
|
||||||
const min=Math.ceil(s/60);
|
const min=Math.ceil(s/60);
|
||||||
return s<60 ? 'menos de 1 min' : min<60 ? min+' min' : Math.floor(min/60)+' h'+(min%60? ' '+min%60+' min' : '');
|
return s<60 ? 'menos de 1 min' : min<60 ? min+' min' : Math.floor(min/60)+' h'+(min%60? ' '+min%60+' min' : '');
|
||||||
};
|
};
|
||||||
const faixaEnvio=bytes=>bytes/ENVIO_RAPIDO<60 ? 'até '+duracao(bytes/ENVIO_LENTO)
|
const faixaEnvio=bytes=>bytes/ENVIO_RAPIDO<60 ? 'até '+duracao(bytes/ENVIO_LENTO)
|
||||||
: 'de '+duracao(bytes/ENVIO_RAPIDO)+' a '+duracao(bytes/ENVIO_LENTO);
|
: 'de '+duracao(bytes/ENVIO_RAPIDO)+' a '+duracao(bytes/ENVIO_LENTO);
|
||||||
// Só enquanto há arquivos no produto aberto: sai quando o item vai para o carrinho.
|
|
||||||
function pintaAvisoEnvio(){
|
|
||||||
const el=$('avisoEnvio'); if(!el) return;
|
|
||||||
const total=modo ? (ehFolha()?folhas:artes).reduce((t,x)=>t+(x.f?.size||0),0) : 0;
|
|
||||||
el.hidden = total/ENVIO_LENTO < ENVIO_AVISA_S;
|
|
||||||
if(el.hidden) return;
|
|
||||||
el.innerHTML='<b>Envio: '+faixaEnvio(total)+'</b> ('+fmt(total)+'), conforme sua internet. '+
|
|
||||||
'Mantenha a página aberta.';
|
|
||||||
}
|
|
||||||
const larguraFilme=()=>MODOS[modo].larg;
|
const larguraFilme=()=>MODOS[modo].larg;
|
||||||
// cobrança proporcional: arredonda para cima em 10 cm · 2,75 m vira 2,80 m
|
// cobrança proporcional: arredonda para cima em 10 cm · 2,75 m vira 2,80 m
|
||||||
const cobrar=m=>Math.max(MINIMO_M, Math.ceil(m*10)/10);
|
const cobrar=m=>Math.max(MINIMO_M, Math.ceil(m*10)/10);
|
||||||
|
|||||||
@@ -29,7 +29,6 @@ function guardaItem(){
|
|||||||
$('foco').classList.remove('on');
|
$('foco').classList.remove('on');
|
||||||
['qual','prev'].forEach(id=>$(id).classList.remove('on'));
|
['qual','prev'].forEach(id=>$(id).classList.remove('on'));
|
||||||
modo=null; artes=[]; folhas=[]; metros=0; nota=0; montagemCm=0;
|
modo=null; artes=[]; folhas=[]; metros=0; nota=0; montagemCm=0;
|
||||||
pintaAvisoEnvio();
|
|
||||||
pintaPedido();
|
pintaPedido();
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -11,7 +11,6 @@ function escolheProduto(m){
|
|||||||
}
|
}
|
||||||
function abrir(m){
|
function abrir(m){
|
||||||
modo=m; artes=[]; folhas=[]; metros=0; nota=0; reencaixado=false;
|
modo=m; artes=[]; folhas=[]; metros=0; nota=0; reencaixado=false;
|
||||||
pintaAvisoEnvio();
|
|
||||||
montagemCm=0;
|
montagemCm=0;
|
||||||
avisoTipo('');
|
avisoTipo('');
|
||||||
pintaModo();
|
pintaModo();
|
||||||
@@ -90,7 +89,6 @@ document.querySelectorAll('#tipoEnvio .cam').forEach(b=>b.addEventListener('clic
|
|||||||
function trocaTipo(destino){
|
function trocaTipo(destino){
|
||||||
if(!destino || modo===destino) return;
|
if(!destino || modo===destino) return;
|
||||||
folhas=[]; artes=[]; recemChegada=null; metros=0; nota=0; montagemCm=0;
|
folhas=[]; artes=[]; recemChegada=null; metros=0; nota=0; montagemCm=0;
|
||||||
pintaAvisoEnvio();
|
|
||||||
modo=destino;
|
modo=destino;
|
||||||
history.replaceState(history.state,'',PAGINAS[modo]); document.title=tituloPagina();
|
history.replaceState(history.state,'',PAGINAS[modo]); document.title=tituloPagina();
|
||||||
$('lista').innerHTML=''; $('rA').style.display='none'; recusa([]);
|
$('lista').innerHTML=''; $('rA').style.display='none'; recusa([]);
|
||||||
|
|||||||
@@ -406,7 +406,6 @@ function detalhesDaFolha(a,i,aberto){
|
|||||||
}
|
}
|
||||||
function pintaFolha(){
|
function pintaFolha(){
|
||||||
invalidaItemAtual();
|
invalidaItemAtual();
|
||||||
pintaAvisoEnvio();
|
|
||||||
const L=larguraFilme();
|
const L=larguraFilme();
|
||||||
pintaTipoEnvio(); // trava o seletor enquanto houver folha
|
pintaTipoEnvio(); // trava o seletor enquanto houver folha
|
||||||
$('zona').classList.toggle('compacta', folhas.length>0);
|
$('zona').classList.toggle('compacta', folhas.length>0);
|
||||||
@@ -529,7 +528,6 @@ function pintaProgressoArte(a){
|
|||||||
}
|
}
|
||||||
function pintaArtes(){
|
function pintaArtes(){
|
||||||
invalidaItemAtual();
|
invalidaItemAtual();
|
||||||
pintaAvisoEnvio();
|
|
||||||
$('zona').classList.toggle('compacta', artes.length>0);
|
$('zona').classList.toggle('compacta', artes.length>0);
|
||||||
// The same card as a finished sheet: thumbnail, size, a DPI chip, then the
|
// The same card as a finished sheet: thumbnail, size, a DPI chip, then the
|
||||||
// width (with the usual sizes), copies, rotation and mirroring.
|
// width (with the usual sizes), copies, rotation and mirroring.
|
||||||
|
|||||||
@@ -339,8 +339,6 @@ section+section{border-top:0}
|
|||||||
/* The payment pages: paying on the left, the order summary on the right */
|
/* The payment pages: paying on the left, the order summary on the right */
|
||||||
html:is([data-rota="pagamento"],[data-rota="pix"]) .checkout{max-width:1040px;margin-top:8px}
|
html:is([data-rota="pagamento"],[data-rota="pix"]) .checkout{max-width:1040px;margin-top:8px}
|
||||||
html:is([data-rota="pagamento"],[data-rota="pix"]) .pagGrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start}
|
html:is([data-rota="pagamento"],[data-rota="pix"]) .pagGrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start}
|
||||||
.avisoEnvio{margin:10px 0 0;padding:10px 12px;border-radius:8px;background:var(--aviso-fundo);color:#5A3A00;font-size:15px;line-height:1.5}
|
|
||||||
.avisoEnvio[hidden]{display:none}
|
|
||||||
.ic{width:21px;height:21px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
|
.ic{width:21px;height:21px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
|
||||||
.busca .lupa{display:flex;font-size:0}
|
.busca .lupa{display:flex;font-size:0}
|
||||||
.busca .lupa .ic{width:18px;height:18px}
|
.busca .lupa .ic{width:18px;height:18px}
|
||||||
@@ -373,6 +371,7 @@ html:is([data-rota="pagamento"],[data-rota="pix"]) .pagGrid{display:grid;grid-te
|
|||||||
.qi .c .ic{width:15px;height:15px;stroke-width:3}
|
.qi .c .ic{width:15px;height:15px;stroke-width:3}
|
||||||
.passos a span .ic{width:17px;height:17px;stroke-width:3}
|
.passos a span .ic{width:17px;height:17px;stroke-width:3}
|
||||||
.obr{color:#B42318;font-weight:700}
|
.obr{color:#B42318;font-weight:700}
|
||||||
|
.envioNota{display:block;margin-top:4px;font-size:14px;color:var(--fraco)}
|
||||||
.envioArq{font-size:15px;color:var(--texto2);margin-top:14px;line-height:1.5}
|
.envioArq{font-size:15px;color:var(--texto2);margin-top:14px;line-height:1.5}
|
||||||
.envioArq.ok{color:var(--verde)}
|
.envioArq.ok{color:var(--verde)}
|
||||||
.envioArq.erro{color:#B42318}
|
.envioArq.erro{color:#B42318}
|
||||||
|
|||||||
Reference in New Issue
Block a user