Heure limite d'expédition du jour

{%- comment -%} NAHNAH AI · Heure limite d'expédition du jour {%- endcomment -%}
<div class="nn-compte-a-rebours-coupure-expedition" data-heure="{{ section.settings.heure_limite }}" data-weekend="{{ section.settings.expedie_weekend }}" data-avant="{{ section.settings.texte_avant | escape }}" data-apres="{{ section.settings.texte_apres | escape }}" data-prochain="{{ section.settings.texte_prochain | escape }}" style="--nn-fond: {{ section.settings.couleur_fond }}; --nn-texte: {{ section.settings.couleur_texte }}; --nn-accent: {{ section.settings.couleur_accent }};" hidden>
  <svg class="nn-compte-a-rebours-coupure-expedition__camion" viewBox="0 0 32 20" aria-hidden="true"><path d="M1 3h18v11H1zM19 7h6l5 4v3H19z"/><circle cx="7" cy="16" r="2.5"/><circle cx="24" cy="16" r="2.5"/></svg>
  <p class="nn-compte-a-rebours-coupure-expedition__texte" aria-live="polite"></p>
</div>
{% schema %}
{"name":"Heure limite d'expédition","settings":[
{"type":"range","id":"heure_limite","label":"Heure limite d'expédition (heure du visiteur)","min":6,"max":22,"step":1,"unit":"h","default":14},
{"type":"checkbox","id":"expedie_weekend","label":"J'expédie aussi le samedi et le dimanche","default":false},
{"type":"text","id":"texte_avant","label":"Texte avant le temps","default":"Commande dans"},
{"type":"text","id":"texte_apres","label":"Texte après le temps","default":"pour une expédition aujourd'hui"},
{"type":"text","id":"texte_prochain","label":"Texte quand l'heure est passée","default":"Expédition prévue"},
{"type":"color","id":"couleur_fond","label":"Fond","default":"#F0FDF4"},
{"type":"color","id":"couleur_texte","label":"Texte","default":"#14532D"},
{"type":"color","id":"couleur_accent","label":"Accent","default":"#16A34A"}],
"presets":[{"name":"Heure limite d'expédition du jour"}]}
{% endschema %}

{% stylesheet %}
/* Bandeau d'expédition avec camion qui roule */
.nn-compte-a-rebours-coupure-expedition{display:flex;align-items:center;gap:12px;margin:12px 16px;padding:12px 16px;border-radius:12px;background:var(--nn-fond);color:var(--nn-texte);font-size:15px;border:1px solid color-mix(in srgb,var(--nn-accent) 30%,transparent)}
.nn-compte-a-rebours-coupure-expedition__camion{flex:none;width:34px;height:22px;fill:var(--nn-accent);animation:nn-compte-a-rebours-coupure-expedition-roule 1.6s ease-in-out infinite}
.nn-compte-a-rebours-coupure-expedition__texte{margin:0;line-height:1.4}
.nn-compte-a-rebours-coupure-expedition b{color:var(--nn-accent);font-variant-numeric:tabular-nums}
@keyframes nn-compte-a-rebours-coupure-expedition-roule{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@media (prefers-reduced-motion: reduce){.nn-compte-a-rebours-coupure-expedition__camion{animation:none}}
{% endstylesheet %}

{% javascript %}
// Calcule le temps restant avant l'heure limite du jour, ou le prochain jour d'expédition
(function () {
  var jours = ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'];
  document.querySelectorAll('.nn-compte-a-rebours-coupure-expedition').forEach(function (bloc) {
    var heure = parseInt(bloc.getAttribute('data-heure'), 10) || 14;
    var weekend = bloc.getAttribute('data-weekend') === 'true';
    var zone = bloc.querySelector('.nn-compte-a-rebours-coupure-expedition__texte');
    // Jour expédié ou non
    function ouvre(d) { var j = d.getDay(); return weekend || (j !== 0 && j !== 6); }
    function maj() {
      var maintenant = new Date();
      var limite = new Date(maintenant); limite.setHours(heure, 0, 0, 0);
      if (ouvre(maintenant) && maintenant < limite) {
        var m = Math.ceil((limite - maintenant) / 60000);
        var h = Math.floor(m / 60);
        zone.innerHTML = '';
        zone.append(bloc.getAttribute('data-avant') + ' ');
        var b = document.createElement('b'); b.textContent = (h ? h + ' h ' : '') + (m % 60) + ' min'; zone.append(b);
        zone.append(' ' + bloc.getAttribute('data-apres'));
      } else {
        // Cherche le prochain jour d'expédition
        var d = new Date(maintenant); d.setDate(d.getDate() + 1);
        while (!ouvre(d)) { d.setDate(d.getDate() + 1); }
        var demain = new Date(maintenant); demain.setDate(demain.getDate() + 1);
        var nom = d.toDateString() === demain.toDateString() ? 'demain' : jours[d.getDay()];
        zone.innerHTML = '';
        zone.append(bloc.getAttribute('data-prochain') + ' ');
        var b2 = document.createElement('b'); b2.textContent = nom; zone.append(b2);
      }
      bloc.hidden = false;
    }
    maj();
    setInterval(maj, 30000);
  });
})();
{% endjavascript %}