Barre d'infos à onglets

{%- comment -%} NAHNAH AI · Barre d'infos à onglets {%- endcomment -%}
{%- if section.blocks.size > 0 -%}
<div class="nn-annonces-onglets-infos" style="--nn-fond: {{ section.settings.couleur_fond }}; --nn-texte: {{ section.settings.couleur_texte }}; --nn-accent: {{ section.settings.couleur_accent }};">
  <div class="nn-annonces-onglets-infos__onglets" role="tablist" aria-label="Informations">
    {%- for block in section.blocks -%}
      <button type="button" role="tab" id="nn-onglet-{{ block.id }}" aria-controls="nn-panneau-{{ block.id }}" aria-selected="{% if forloop.first %}true{% else %}false{% endif %}" tabindex="{% if forloop.first %}0{% else %}-1{% endif %}" class="nn-annonces-onglets-infos__onglet" {{ block.shopify_attributes }}>{{ block.settings.onglet | escape }}</button>
    {%- endfor -%}
  </div>
  {%- for block in section.blocks -%}
    <p role="tabpanel" id="nn-panneau-{{ block.id }}" aria-labelledby="nn-onglet-{{ block.id }}" class="nn-annonces-onglets-infos__panneau" {% unless forloop.first %}hidden{% endunless %}>
      {{ block.settings.message | escape }}{%- if block.settings.lien != blank -%} <a href="{{ block.settings.lien }}">{{ block.settings.texte_lien | escape }}</a>{%- endif -%}
    </p>
  {%- endfor -%}
</div>
{%- endif -%}
{% schema %}
{"name":"Infos à onglets","settings":[
{"type":"color","id":"couleur_fond","label":"Fond","default":"#111827"},
{"type":"color","id":"couleur_texte","label":"Texte","default":"#F9FAFB"},
{"type":"color","id":"couleur_accent","label":"Onglet actif","default":"#34D399"}],
"blocks":[{"type":"info","name":"Onglet","limit":5,"settings":[
{"type":"text","id":"onglet","label":"Nom de l'onglet","default":"Livraison"},
{"type":"text","id":"message","label":"Message","default":"Expédition sous 48 h ouvrées"},
{"type":"text","id":"texte_lien","label":"Texte du lien","default":"Détails"},
{"type":"url","id":"lien","label":"Lien"}]}],
"presets":[{"name":"Barre d'infos à onglets","blocks":[
{"type":"info","settings":{"onglet":"Livraison","message":"Expédition sous 48 h ouvrées"}},
{"type":"info","settings":{"onglet":"Retours","message":"Retours acceptés sous 30 jours"}},
{"type":"info","settings":{"onglet":"Paiement","message":"Paiement sécurisé par carte"}}]}]}
{% endschema %}

{% stylesheet %}
/* Barre à onglets */
.nn-annonces-onglets-infos{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;background:var(--nn-fond);color:var(--nn-texte);padding:8px 16px;font-size:14px}
.nn-annonces-onglets-infos__onglets{display:flex;gap:4px;padding:3px;border-radius:999px;background:color-mix(in srgb,var(--nn-texte) 10%,transparent)}
.nn-annonces-onglets-infos__onglet{border:0;background:transparent;color:inherit;font:inherit;font-size:12px;padding:4px 12px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s}
.nn-annonces-onglets-infos__onglet[aria-selected="true"]{background:var(--nn-accent);color:var(--nn-fond);font-weight:700}
.nn-annonces-onglets-infos__onglet:focus-visible{outline:2px solid var(--nn-accent);outline-offset:2px}
.nn-annonces-onglets-infos__panneau{margin:0;animation:nn-onglet-entree .35s ease}
.nn-annonces-onglets-infos__panneau a{color:inherit;font-weight:700}
@keyframes nn-onglet-entree{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.nn-annonces-onglets-infos__panneau{animation:none}.nn-annonces-onglets-infos__onglet{transition:none}}
{% endstylesheet %}

{% javascript %}
// Gère le changement d'onglet au clic et aux flèches du clavier
(function () {
  document.querySelectorAll('.nn-annonces-onglets-infos').forEach(function (barre) {
    var onglets = Array.prototype.slice.call(barre.querySelectorAll('[role="tab"]'));
    function activer(index) {
      onglets.forEach(function (onglet, i) {
        var actif = i === index;
        onglet.setAttribute('aria-selected', actif ? 'true' : 'false');
        onglet.tabIndex = actif ? 0 : -1;
        var panneau = document.getElementById(onglet.getAttribute('aria-controls'));
        if (panneau) { panneau.hidden = !actif; }
      });
    }
    onglets.forEach(function (onglet, i) {
      onglet.addEventListener('click', function () { activer(i); });
      onglet.addEventListener('keydown', function (e) {
        // Flèches gauche/droite pour passer d'un onglet à l'autre
        if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
          var suivant = (i + (e.key === 'ArrowRight' ? 1 : -1) + onglets.length) % onglets.length;
          activer(suivant);
          onglets[suivant].focus();
        }
      });
    });
  });
})();
{% endjavascript %}