dtf-system/web/site-flow.js

/* Site DTF — Carousel, delivery choice and input masks.
   Extracted verbatim from the single inline script in web/index.html.
   Loaded as classic scripts in the order listed there: they share one global
   scope and run top to bottom, exactly as the original did. */
// ── decisões
// Remanejar conserta encaixe, não resolução — e a nota mede só resolução.
// Por isso a nota NÃO muda aqui. E a metragem nova só existe depois que o motor
// roda na folha de verdade, no servidor: o navegador recebe a folha fechada,
// não as artes separadas, então não há como recalcular aqui sem inventar número.
// Loose artworks still show the mounted sheet below; a ready sheet goes
// straight to the cart.
$('qOk').addEventListener('click',()=>{
  if($('qOk').disabled) return;
  if(!$('prev').classList.contains('on')){ adicionaAoCarrinho(); return; }
  const ok=$('ciente').classList.contains('on');
  qm(ok? '<b>Registrado.</b> Você confirmou que viu a ressalva de resolução.'
       : '<b>Certo.</b> Confira a folha montada abaixo.','var(--tx)');
  $('prev').scrollIntoView({behavior:'smooth',block:'start'});
});

// The finished item joins the order and the product page starts over empty.
function guardaItem(){
  if(itemAtual && !itemPodeEnviar(itemAtual)){
    $('ciente').scrollIntoView({behavior:'smooth',block:'center'});
    return false;
  }
  if(itemAtual){ pedido.push(itemAtual); itemAtual=null; }
  $('atual').style.display='none'; $('carrLin').innerHTML='';
  $('foco').classList.remove('on');
  ['qual','prev'].forEach(id=>$(id).classList.remove('on'));
  modo=null; artes=[]; folhas=[]; metros=0; nota=0; montagemCm=0;
  pintaAvisoEnvio();
  pintaPedido();
  return true;
}
function adicionaAoCarrinho(){
  if(!itemAtual){ $('compra').scrollIntoView({behavior:'smooth',block:'nearest'}); return; }
  if(guardaItem()) vaiPara(CARRINHO);
}
$('pOk').addEventListener('click',adicionaAoCarrinho);
$('pMais').addEventListener('click',()=>$('foco').scrollIntoView({behavior:'smooth'}));
$('pVolta').addEventListener('click',()=>{
  folhas=[]; artes=[]; reencaixado=false; pintaFolha(); pintaArtes();
  limpaPaineis();   // o carrinho só some se o pedido estiver vazio
  $('foco').scrollIntoView({behavior:'smooth'});
});
// carrossel
(function(){
  const tr=$('trilho'); if(!tr) return;
  const slides=[...tr.children], pontos=$('cPontos');
  slides.forEach((_,i)=>{
    const b=document.createElement('button');
    b.className='pt'+(i?'':' on'); b.setAttribute('aria-label','Cartão '+(i+1));
    b.addEventListener('click',()=>ir(i)); pontos.appendChild(b);
  });
  function ir(i){
    i=Math.max(0,Math.min(slides.length-1,i));
    tr.scrollTo({left:slides[i].offsetLeft-tr.offsetLeft,behavior:'smooth'});
  }
  function atual(){
    const meio=tr.scrollLeft+tr.clientWidth/2;
    let a=0,d=Infinity;
    slides.forEach((s,i)=>{
      const c=s.offsetLeft-tr.offsetLeft+s.offsetWidth/2;
      if(Math.abs(c-meio)<d){ d=Math.abs(c-meio); a=i; }
    });
    return a;
  }
  tr.addEventListener('scroll',()=>{
    const a=atual();
    [...pontos.children].forEach((p,i)=>p.classList.toggle('on',i===a));
  },{passive:true});
  $('cAnt').addEventListener('click',()=>ir(atual()-1));
  $('cPro').addEventListener('click',()=>ir(atual()+1));
})();

function pintaEntrega(){
  document.querySelectorAll('.opE').forEach(b=>
    b.classList.toggle('on', b.dataset.ent===entrega.tipo));
  $('cep').classList.toggle('on', entrega.tipo==='frete');
  $('vFrete').textContent = entrega.tipo!=='frete' ? '—'
    : entrega.cotado ? rs(entrega.valor) : 'a cotar';
  $('bPagar').disabled = !entrega.cotado || !clienteOk() || !enderecoOk() || !cartPodeEnviar();
  pintaPedido();
}

// máscaras e conferência dos campos do cliente
function liga(id,fmt,val,chave,erro,msg){
  const el=$(id), er=$(erro);
  el.addEventListener('input',e=>{
    e.target.value=fmt(e.target.value);
    cliente[chave]=e.target.value;
    el.classList.remove('ruim','bom'); er.textContent='';
    if(val(e.target.value)) el.classList.add('bom');
    pintaEntrega();
  });
  el.addEventListener('blur',()=>{
    if(!el.value){ el.classList.remove('ruim','bom'); er.textContent=''; return; }
    const ok=val(el.value);
    el.classList.toggle('ruim',!ok); el.classList.toggle('bom',ok);
    er.textContent = ok? '' : msg;
  });
}
liga('fCnpj', v=>{
  const d=v.replace(/\D/g,'').slice(0,14);
  return d.replace(/^(\d{2})(\d)/,'$1.$2').replace(/^(\d{2})\.(\d{3})(\d)/,'$1.$2.$3')
          .replace(/\.(\d{3})(\d)/,'.$1/$2').replace(/(\d{4})(\d)/,'$1-$2');
}, cnpjOk, 'cnpj', 'eCnpj', 'CNPJ inválido · confira os números');
liga('fZap', v=>{
  const d=v.replace(/\D/g,'').slice(0,11);
  return d.length>6 ? '('+d.slice(0,2)+') '+d.slice(2,d.length-4)+'-'+d.slice(-4)
       : d.length>2 ? '('+d.slice(0,2)+') '+d.slice(2) : d;
}, zapOk, 'zap', 'eZap', 'Faltam dígitos no número');
liga('fMail', v=>v.trim(), mailOk, 'mail', 'eMail', 'E-mail inválido');
function pintaZoom(){
  $('zTxt').textContent=Math.round(ZOOMS[zoomI]*100)+'%';
  $('zMenos').disabled = zoomI===0;
  $('zMais').disabled = zoomI===ZOOMS.length-1;
}
$('zMais').addEventListener('click',()=>{
  if(zoomI<ZOOMS.length-1){ zoomI++; pintaZoom(); previaAoVivo(); }
});
$('zMenos').addEventListener('click',()=>{
  if(zoomI>0){ zoomI--; pintaZoom(); previaAoVivo(); }
});
pintaZoom();
// A ready sheet has nothing to zoom: "Ampliar" shows the same preview bigger.
$('bAmpliar').addEventListener('click',()=>{
  const previas=$('vArea').querySelector('.folhaPrevias'); if(!previas) return;
  $('ampliaArea').replaceChildren(previas.cloneNode(true));
  $('ampliaDlg').showModal();
});
$('ampliaFecha').addEventListener('click',()=>$('ampliaDlg').close());
$('ampliaDlg').addEventListener('click',e=>{ if(e.target===$('ampliaDlg')) $('ampliaDlg').close(); });

document.querySelectorAll('.opE').forEach(b=>b.addEventListener('click',()=>{
  entrega.tipo=b.dataset.ent;
  entrega.cotado = entrega.tipo==='retira';
  entrega.valor=0;
  if(entrega.tipo==='frete') $('cepMsg').innerHTML='';
  pintaEntrega();
  // A CEP already typed is quoted again as soon as delivery is chosen.
  if(entrega.tipo==='frete' && entrega.cep.length===8 && window.dtfFreight) window.dtfFreight();
}));
function fmtCep(v){ v=String(v||'').replace(/\D/g,'').slice(0,8); return v.length>5 ? v.slice(0,5)+'-'+v.slice(5) : v; }
// The address of a complete CEP fills the form; only the number is left to type.
let cepBuscado='';
async function buscaEndereco(cep){
  if(cep===cepBuscado || !window.dtfApi) return;
  cepBuscado=cep;
  try{
    const a=await window.dtfApi('/cep/'+cep);
    if(entrega.cep!==cep) return;
    for(const [id,chave,valor] of [['eRua','rua',a.street],['eBairro','bairro',a.district],
                                   ['eCidade','cidade',a.city],['eUf','uf',a.state]]){
      if(!valor) continue;
      $(id).value=valor; entrega.end={...(entrega.end||{}),[chave]:valor};
    }
    pintaEntrega();
    const vazio=['eNome','eRua','eNum'].map($).find(el=>!el.value.trim());
    if(vazio && document.activeElement===$('cepIn')) vazio.focus();
  }catch(e){ /* sem consulta: o cliente preenche o endereço */ }
}
$('cepIn').addEventListener('input',e=>{
  const v=e.target.value.replace(/\D/g,'').slice(0,8);
  e.target.value = fmtCep(v);
  if(v===entrega.cep) return;
  entrega.cep=v; entrega.cotado=false; entrega.valor=0; entrega.dias=null; pintaEntrega();
  if(v.length===8){ buscaEndereco(v); if(window.dtfFreight) window.dtfFreight(); }
});
for(const [id,chave] of [['eNome','nome'],['eRua','rua'],['eNum','num'],['eComp','comp'],
                         ['eBairro','bairro'],['eCidade','cidade'],['eUf','uf']]){
  $(id).addEventListener('input',e=>{
    if(chave==='uf') e.target.value=e.target.value.replace(/[^a-z]/gi,'').toUpperCase();
    entrega.end={...(entrega.end||{}),[chave]:e.target.value};
    pintaEntrega();
  });
}
$('bMais').addEventListener('click',()=>{ if(guardaItem()) vaiPara('/#envio'); });

$('bPagar').addEventListener('click',()=>{
  if(window.dtfCheckout) window.dtfCheckout();
  else alert('O pedido online está indisponível no momento. Tente novamente em instantes.');
});
pintaEntrega();

// Dúvidas: every question stays in the row of links; one answer is open at a
// time, below the row, and its own link closes it again.
(function(){
  const req=$('req'); if(!req) return;
  const itens=[...req.querySelectorAll('details')];
  const barra=document.createElement('div'); barra.className='reqLinks';
  const botoes=itens.map(d=>{
    const b=document.createElement('button');
    b.type='button'; b.textContent=d.querySelector('summary').textContent.trim();
    b.addEventListener('click',()=>{
      const abrir=!d.open;
      itens.forEach(x=>{ x.open=false; });
      d.open=abrir;
    });
    return b;
  });
  const pinta=()=>botoes.forEach((b,i)=>{
    b.setAttribute('aria-expanded',String(itens[i].open));
    b.classList.toggle('on',itens[i].open);
  });
  itens.forEach(d=>d.addEventListener('toggle',pinta));
  barra.append(...botoes);
  req.querySelector('.reqcab').after(barra);
  pinta();
})();