Ces blocs ne doivent servir qu'en phase de développement. Penser à les supprimer dans la version qui part en prod :)

U-comments

Présentation

u-comments est un module à utiliser en développement. Il permet d'afficher/masquer des « post-it » non destinés à être présents dans les sites en production.

Ils peuvent notamment servir pour les consignes à passer entre intégrateurs et développeurs.

Utilisation

Les attributs nécessaires à la dynamique afficher/masquer les post-it sont injectés par le script.

Pour que le script fonctionne correctement, le code html doit répondre à deux impératifs :

  1. L'élément déclencheur doit porter l'id sg-toggle-comments (pour le script js) et la class sg-toggle-comments pour lui appliquer des styles
  2. Les éléments à masquer/afficher doivent porter la class sg-comment.

Accessibilité

Un attribut aria-expanded (true ou false) est ajouté sur le bouton déclenchant l'affichage ou le masquage des commentaires.

Script associé

Le script u-comments.js associé doit être appelé dans le pied de page, avant la fermeture du body.

Note : copier le script présent dans le module à l'endroit où sont rangés les autres scripts.

Exemple

<!-- bouton à placer par exemple tout en haut de la page -->
<button type="button" id="sg-toggle-comments" class="sg-toggle-comments is-closed" aria-expanded="false">commentaires</button>

[…]

<div class="sg-comment">
  <p>Les messages d'erreur doivent être cachés par défaut et affichés si nécessaire grâce au script javascript.</p>
  <p>Penser à ajouter un compteur d'erreurs sur le message général en haut de page.</p>
</div>

Note : le css se charge d'ajouter selon les cas les mots Afficher les ou Masquer les avant le texte du bouton.

Démo

Ce module est mis en place sur cette page. Pour le voir en action repérer le bouton (placé visuellement en haut à droite de cette page et juste après l'ancre du contenu principal dans la navigation clavier) et l'actionner.

Les informations données dans cette rubrique correspondent à la version 1.0 release candidate de Scampi, encore en développement. Pour lire la documentation de la version courante (0.2.1), référez-vous au readme du dépôt.