Icônes à double état

{%- comment -%} NAHNAH AI · Icônes à double état (bibliothèque Sections & effets) : icônes au trait animées {%- endcomment -%}
<div class="nn-icones-etats" data-nn-invitation="{{ section.settings.invitation }}" style="--nn-mh: {{ section.settings.marge_haut }}px; --nn-mb: {{ section.settings.marge_bas }}px; --nn-fond: {{ section.settings.couleur_fond }}; --nn-texte: {{ section.settings.couleur_texte }}; --nn-accent: {{ section.settings.couleur_accent }}; --nn-icone: {{ section.settings.couleur_icone }};">
  {%- if section.settings.titre != blank or section.settings.texte != blank -%}
    <div class="nn-icones-etats__entete">
      {%- if section.settings.titre != blank -%}<h2 class="nn-icones-etats__titre">{{ section.settings.titre }}</h2>{%- endif -%}
      {%- if section.settings.texte != blank -%}<p class="nn-icones-etats__intro">{{ section.settings.texte | escape }}</p>{%- endif -%}
    </div>
  {%- endif -%}
  <ul class="nn-icones-etats__liste" role="list">
    {%- for block in section.blocks -%}
      <li class="nn-icones-etats__item" {{ block.shopify_attributes }}>
        <button type="button" class="nn-icones-etats__bouton nn-icones-etats__bouton--{{ block.settings.paire }}" data-nn-etat="a" data-nn-texte-a="{{ block.settings.texte_a | escape }}" data-nn-texte-b="{{ block.settings.texte_b | escape }}">
          <svg class="nn-icones-etats__svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">{%- case block.settings.paire -%}
            {%- when 'chargement' -%}<g class="nn-icones-etats__a"><path pathLength="1" d="M12 3a9 9 0 1 0 9 9"/></g><g class="nn-icones-etats__b"><circle pathLength="1" cx="12" cy="12" r="9"/><path pathLength="1" d="m8 12.2 2.8 2.8L16.5 9"/></g>
            {%- when 'menu' -%}<g class="nn-icones-etats__a"><path pathLength="1" d="M4 7h16M4 12h16M4 17h16"/></g><g class="nn-icones-etats__b"><path pathLength="1" d="M6 6l12 12M18 6 6 18"/></g>
            {%- when 'lecture' -%}<g class="nn-icones-etats__a"><path pathLength="1" d="M8 5.5v13l10.5-6.5z"/></g><g class="nn-icones-etats__b"><path pathLength="1" d="M8.5 5.5v13M15.5 5.5v13"/></g>
            {%- when 'son' -%}<path pathLength="1" d="M3.5 9.5h3l4.5-4v13l-4.5-4h-3z"/><g class="nn-icones-etats__a"><path pathLength="1" d="M15 9.5a3.5 3.5 0 0 1 0 5M17.8 7a7 7 0 0 1 0 10"/></g><g class="nn-icones-etats__b"><path pathLength="1" d="m15.5 9.5 5 5M20.5 9.5l-5 5"/></g>
            {%- when 'plus' -%}<g class="nn-icones-etats__a"><path pathLength="1" d="M12 5v14M5 12h14"/></g><g class="nn-icones-etats__b"><path pathLength="1" d="M5 12h14"/></g>
            {%- when 'coeur' -%}<g class="nn-icones-etats__a"><path pathLength="1" d="M12 20.5 4.6 13.2a4.6 4.6 0 0 1 6.5-6.5l.9.9.9-.9a4.6 4.6 0 0 1 6.5 6.5z"/></g><g class="nn-icones-etats__b"><path pathLength="1" d="M12 20.5 4.6 13.2a4.6 4.6 0 0 1 6.5-6.5l.9.9.9-.9a4.6 4.6 0 0 1 6.5 6.5z" fill="currentColor"/></g>
          {%- endcase -%}</svg>
          <span class="nn-icones-etats__texte">{{ block.settings.texte_a | escape }}</span>
        </button>
      </li>
    {%- endfor -%}
  </ul>
  <p class="nn-icones-etats__annonce" aria-live="polite"></p>
</div>

{% schema %}
{
  "name": "Icônes à double état",
  "tag": "section",
  "class": "nn-section-icones-etats",
  "max_blocks": 16,
  "settings": [
    {
      "type": "inline_richtext",
      "id": "titre",
      "label": "Titre",
      "default": "Des icônes qui réagissent"
    },
    {
      "type": "textarea",
      "id": "texte",
      "label": "Texte d’introduction",
      "default": "Touche une icône pour la faire changer d’état."
    },
    {
      "type": "checkbox",
      "id": "invitation",
      "label": "Jouer les animations toutes seules quand la section est visible",
      "default": false
    },
    {
      "type": "paragraph",
      "content": "Les animations sont coupées automatiquement si le visiteur a demandé à réduire les animations."
    },
    {
      "type": "header",
      "content": "Couleurs"
    },
    {
      "type": "color",
      "id": "couleur_fond",
      "label": "Fond",
      "default": "#0F1115"
    },
    {
      "type": "color",
      "id": "couleur_texte",
      "label": "Texte",
      "default": "#F2F5F9"
    },
    {
      "type": "color",
      "id": "couleur_accent",
      "label": "Accent",
      "default": "#2EE6A8"
    },
    {
      "type": "color",
      "id": "couleur_icone",
      "label": "Icône",
      "default": "#F2F5F9"
    },
    {
      "type": "header",
      "content": "Espacement"
    },
    {
      "type": "range",
      "id": "marge_haut",
      "label": "Marge haute",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "default": 48
    },
    {
      "type": "range",
      "id": "marge_bas",
      "label": "Marge basse",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "default": 48
    }
  ],
  "blocks": [
    {
      "type": "etat",
      "name": "Icône à deux états",
      "settings": [
        {
          "type": "select",
          "id": "paire",
          "label": "Icône",
          "options": [
            {
              "value": "chargement",
              "label": "Chargement → validé"
            },
            {
              "value": "menu",
              "label": "Menu → croix"
            },
            {
              "value": "lecture",
              "label": "Lecture → pause"
            },
            {
              "value": "son",
              "label": "Son → muet"
            },
            {
              "value": "plus",
              "label": "Plus → moins"
            },
            {
              "value": "coeur",
              "label": "Cœur vide → plein"
            }
          ],
          "default": "chargement"
        },
        {
          "type": "text",
          "id": "texte_a",
          "label": "Texte de l’état de départ",
          "default": "Envoi…"
        },
        {
          "type": "text",
          "id": "texte_b",
          "label": "Texte de l’autre état",
          "default": "Envoyé"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Icônes à double état",
      "blocks": [
        {
          "type": "etat",
          "settings": {
            "paire": "chargement",
            "texte_a": "Envoi…",
            "texte_b": "Envoyé"
          }
        },
        {
          "type": "etat",
          "settings": {
            "paire": "menu",
            "texte_a": "Menu",
            "texte_b": "Fermer"
          }
        },
        {
          "type": "etat",
          "settings": {
            "paire": "lecture",
            "texte_a": "Lecture",
            "texte_b": "Pause"
          }
        },
        {
          "type": "etat",
          "settings": {
            "paire": "son",
            "texte_a": "Son activé",
            "texte_b": "Son coupé"
          }
        },
        {
          "type": "etat",
          "settings": {
            "paire": "plus",
            "texte_a": "Afficher",
            "texte_b": "Masquer"
          }
        },
        {
          "type": "etat",
          "settings": {
            "paire": "coeur",
            "texte_a": "Ajouter aux favoris",
            "texte_b": "Dans tes favoris"
          }
        }
      ]
    }
  ]
}
{% endschema %}

{% stylesheet %}
.nn-icones-etats {
  padding: var(--nn-mh) 16px var(--nn-mb);
  background: var(--nn-fond);
  color: var(--nn-texte);
}
.nn-icones-etats__entete { max-width: 640px; margin: 0 auto 28px; text-align: center; }
.nn-icones-etats__titre { margin: 0 0 8px; font-size: clamp(24px, 4vw, 34px); line-height: 1.2; }
.nn-icones-etats__intro { margin: 0; opacity: 0.8; font-size: 16px; line-height: 1.5; }
.nn-icones-etats__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.nn-icones-etats__bouton {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 18px 10px;
  border: 1px solid color-mix(in srgb, var(--nn-texte) 14%, transparent);
  border-radius: 18px;
  color: var(--nn-texte);
  background: color-mix(in srgb, var(--nn-texte) 4%, transparent);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.nn-icones-etats__bouton:focus-visible { outline: 3px solid var(--nn-accent); outline-offset: 3px; }
@media (hover: hover) { .nn-icones-etats__bouton:hover { border-color: color-mix(in srgb, var(--nn-accent) 60%, transparent); } }
.nn-icones-etats__bouton[data-nn-etat="b"] { border-color: color-mix(in srgb, var(--nn-accent) 70%, transparent); background: color-mix(in srgb, var(--nn-accent) 10%, transparent); }
.nn-icones-etats__svg { width: 34px; height: 34px; color: var(--nn-icone); overflow: visible; }
.nn-icones-etats__a, .nn-icones-etats__b { transform-box: view-box; transform-origin: 12px 12px; transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.5, 0, 0.2, 1.3); }
.nn-icones-etats__b { opacity: 0; transform: rotate(-90deg) scale(0.5); }
.nn-icones-etats__bouton[data-nn-etat="b"] .nn-icones-etats__a, [data-nn-demo] .nn-icones-etats__a { opacity: 0; transform: rotate(90deg) scale(0.5); }
.nn-icones-etats__bouton[data-nn-etat="b"] .nn-icones-etats__b, [data-nn-demo] .nn-icones-etats__b { opacity: 1; transform: none; }
@keyframes nn-icones-etats-tourne { to { transform: rotate(1turn); } }
.nn-icones-etats__bouton--chargement .nn-icones-etats__a > * { transform-box: view-box; transform-origin: 12px 12px; animation: nn-icones-etats-tourne 0.9s linear infinite; }
.nn-icones-etats__bouton--chargement .nn-icones-etats__b > :nth-child(2) { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.45s ease 0.15s; }
.nn-icones-etats__bouton--chargement[data-nn-etat="b"] .nn-icones-etats__b > :nth-child(2), [data-nn-demo] .nn-icones-etats__bouton--chargement .nn-icones-etats__b > :nth-child(2) { stroke-dashoffset: 0; }
.nn-icones-etats__bouton--plus .nn-icones-etats__b { transform: rotate(-180deg); }
.nn-icones-etats__bouton--coeur .nn-icones-etats__b { transform: scale(0.2); color: var(--nn-accent); }
.nn-icones-etats__bouton--son .nn-icones-etats__a, .nn-icones-etats__bouton--son .nn-icones-etats__b { transform-origin: 18px 12px; }
.nn-icones-etats__annonce { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nn-icones-etats { position: relative; }
@media (prefers-reduced-motion: reduce) {
  .nn-icones-etats *, .nn-icones-etats *::before, .nn-icones-etats *::after {
    animation: none !important;
    transition: none !important;
  }
}
{% endstylesheet %}

{% javascript %}
(function () {
  // Bascule A ⇄ B au clic ; le nouvel état est annoncé une fois (aria-live) ; l'invitation bascule sans annoncer
  var reduit = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  function basculer(bouton, annoncer) {
    var b = bouton.getAttribute("data-nn-etat") !== "b";
    bouton.setAttribute("data-nn-etat", b ? "b" : "a");
    var texte = bouton.getAttribute(b ? "data-nn-texte-b" : "data-nn-texte-a") || "";
    var libelle = bouton.querySelector(".nn-icones-etats__texte");
    if (libelle) libelle.textContent = texte;
    var annonce = annoncer && bouton.closest(".nn-icones-etats") && bouton.closest(".nn-icones-etats").querySelector(".nn-icones-etats__annonce");
    if (annonce) annonce.textContent = texte;
  }
  function brancher(racine) {
    if (racine.dataset.nnPret) return;
    racine.dataset.nnPret = "1";
    var boutons = racine.querySelectorAll(".nn-icones-etats__bouton");
    boutons.forEach(function (bouton) {
      bouton.addEventListener("click", function () { racine.dataset.nnManuel = "1"; basculer(bouton, true); });
    });
    if (reduit || racine.getAttribute("data-nn-invitation") !== "true" || !boutons.length || !("IntersectionObserver" in window)) return;
    var i = 0;
    var minuteur = null;
    new IntersectionObserver(function (entrees) {
      var visible = entrees[0].isIntersecting;
      if (visible && !minuteur) {
        minuteur = setInterval(function () {
          if (racine.dataset.nnManuel) { clearInterval(minuteur); return; }
          basculer(boutons[i % boutons.length], false);
          i++;
        }, 900);
      } else if (!visible && minuteur) { clearInterval(minuteur); minuteur = null; }
    }).observe(racine);
  }
  function tout() { document.querySelectorAll(".nn-icones-etats").forEach(brancher); }
  tout();
  document.addEventListener("shopify:section:load", tout);
})();
{% endjavascript %}

Les 12 icônes, une par une

• ChargementCopier
• ValidéCopier
• MenuCopier
• FermerCopier
• LectureCopier
• PauseCopier
• SonCopier
• MuetCopier
• OuvrirCopier
• RéduireCopier
• FavoriCopier
• Favori ajoutéCopier