Mois : décembre 2018

[javaScript] Un accordéon avec l’attribut HTML onClick

20/12/2018 / admin

Problème: les composants Accordéon de Bootstrap et Foundation font lagguer l’affichage sur des pages longues (lorsqu’ils sont initialisés trop de fois).

Solution: ne pas les utiliser, mais préférer une petite fonction « ouvrir/fermer » qui s’active via un onClick="$(this).<ma_fonction>();" placé sur l’élément qui déclanche l’ouverture/fermeture.

<script type="text/javascript">
  $.fn.openRow = function() {
    var $this = $(this);
    var $class = $this.attr('class');

    if ($this.attr('aria-expanded') == 'false') {
      $this.attr('aria-expanded', true);
      if ($class == 'flights-primary-info') {
        $this.next('.is-sharecode').attr('aria-expanded', true);
      }
      else {
        $this.prev('.flights-primary-info').attr('aria-expanded', true);
      }
      $this.nextAll('.flights-secondary-info:first').attr('aria-expanded', true).removeClass('is-hidden');
    }

    else {
      $this.attr('aria-expanded', false);
      if ($class == 'flights-primary-info') {
        $this.next('.is-sharecode').attr('aria-expanded', false);
      }
      else {
        $this.prev('.flights-primary-info').attr('aria-expanded', false);
      }
      $this.nextAll('.flights-secondary-info:first').attr('aria-expanded', false).addClass('is-hidden');
    }
  };
</script>

$.fn.openRow = function() {

var $this = $(this);

var $class = $this.attr('class');

if ($this.attr('aria-expanded') == 'false') {

$this.attr('aria-expanded', true);

if ($class == 'flights-primary-info') {

$this.next('.is-sharecode').attr('aria-expanded', true);

}

else {

$this.prev('.flights-primary-info').attr('aria-expanded', true);

}

$this.nextAll('.flights-secondary-info:first').attr('aria-expanded', true).removeClass('is-hidden');

}

else {

$this.attr('aria-expanded', false);

if ($class == 'flights-primary-info') {

$this.next('.is-sharecode').attr('aria-expanded', false);

}

else {

$this.prev('.flights-primary-info').attr('aria-expanded', false);

}

$this.nextAll('.flights-secondary-info:first').attr('aria-expanded', false).addClass('is-hidden');

}

};

</script>

<a class="flights-primary-info" data-toggle="mobileSecondary-${repeat/flight/number}" aria-expanded="false" onClick="$(this).openRow();">

1	<a class="flights-primary-info" data-toggle="mobileSecondary-${repeat/flight/number}" aria-expanded="false" onClick="$(this).openRow();">

[javaScript] Passer une classe CSS comme paramètre d’une fonction avec document.getElementsByClassName();

19/12/2018 / admin

pass CSS .class as a parameter to javascript function
sur stackoverflow.

function panelTransition(panelOut, panelIn) {
    var inPanels = document.getElementsByClassName(panelIn);
    for (var i = 0; i < inPanels.length; i++) {
        inPanels[i].style.display = 'inline';
    }

    var outPanels = document.getElementsByClassName(panelOut);
    for (var i = 0; i < outPanels.length; i++) {
        outPanels[i].style.display = 'none';
    }
}

function panelTransition(panelOut, panelIn) {

var inPanels = document.getElementsByClassName(panelIn);

for (var i = 0; i < inPanels.length; i++) {

inPanels[i].style.display = 'inline';

}

var outPanels = document.getElementsByClassName(panelOut);

for (var i = 0; i < outPanels.length; i++) {

outPanels[i].style.display = 'none';

}

<img class="panel1" src=1.gif onclick="panelTransition('panel1', 'panel2')" />
<img class="panel2" src=2.gif />

1 2	<img class="panel1" src=1.gif onclick="panelTransition('panel1', 'panel2')" /> <img class="panel2" src=2.gif />

[Bootstrap] Accessibilité du composant Collapse de Bootstrap 2 avec ajout des attributs aria-expanded et tabindex

18/12/2018 / admin

Accessible sur 2 niveaux (fonctionnement standard du composant Collapse de Bootstrap 2)

Dans mon exemple, la classe .group-toggle est affectée à l’élément <a /> qui reçoit la classe .collapsed lorsqu’au clic sur celui-ci, l’élément « collapsible » qui lui est associé s’ouvre.

L’élément qui engloble le contenu qui s’affiche/se masque au clic (auquel sont affectées les classes .collapse et .collapse.in lorsqu’il est ouvert) doit aussi reçevoir l’attribut aria-expanded.

Attention: il faut ajouter dans votre code HTML l’attribut tabindex="-1" à l’ensemble des éléments <a /> qui seront cachés au chargement de la page afin que la navigation au clavier ne tienne pas compte de vos liens invisibles jusqu’à l’ouverture des accordéons.

La doc de Bootstrap v2.3.2 concernant le composant Collapse.

    // Accessibilité du composant 'Collapse' pour la FAQ:
    // [RGAA 7.1.1] Compatibilité avec les outils d'assistance
    var $listeFaq = $('#liste-faq');
    
    // tabindex
    $('a[class^="spip_"]', $listeFaq).attr('tabindex', '-1');
    
    $('.group-toggle', $listeFaq).each(function(){
       var $this = $(this);
       $this.on('click', function(){
           // Clic pour ouverture
           if(!$this.hasClass('active')){
               $this.closest($listeFaq).find('[aria-expanded]').attr('aria-expanded', 'false');
               // tabindex
               $this.closest($listeFaq).find('a[class^="spip_"]').attr('tabindex', '-1');
               
               $this
                   .attr('aria-expanded', 'true')
                   // voir plus/moins
                   .find('.plus-moins')
                   .text('voir moins');
               $this
                   .closest('.article--faq__question')
                   .next('.collapse')
                   .attr('aria-expanded', 'true')
                   // tabindex
                   .find('a[class^="spip_"]')
                   .attr('tabindex', '0');
           }
           // Clic pour fermeture
           else {
               $this
                   .attr('aria-expanded', 'false')
                    // voir plus/moins
                   .find('.plus-moins')
                   .text('voir plus');
               $this
                   .closest('.article--faq__question')
                   .next('.collapse')
                   .attr('aria-expanded', 'false')
                   // tabindex
                   .find('a[class^="spip_"]')
                   .attr('tabindex', '-1');
           }
       });
    });

// Accessibilité du composant 'Collapse' pour la FAQ:

// [RGAA 7.1.1] Compatibilité avec les outils d'assistance

var $listeFaq = $('#liste-faq');

// tabindex

$('a[class^="spip_"]', $listeFaq).attr('tabindex', '-1');

$('.group-toggle', $listeFaq).each(function(){

var $this = $(this);

$this.on('click', function(){

// Clic pour ouverture

if(!$this.hasClass('active')){

$this.closest($listeFaq).find('[aria-expanded]').attr('aria-expanded', 'false');

// tabindex

$this.closest($listeFaq).find('a[class^="spip_"]').attr('tabindex', '-1');

$this

.attr('aria-expanded', 'true')

// voir plus/moins

.find('.plus-moins')

.text('voir moins');

$this

.closest('.article--faq__question')

.next('.collapse')

.attr('aria-expanded', 'true')

// tabindex

.find('a[class^="spip_"]')

.attr('tabindex', '0');

}

// Clic pour fermeture

else {

$this

.attr('aria-expanded', 'false')

// voir plus/moins

.find('.plus-moins')

.text('voir plus');

$this

.closest('.article--faq__question')

.next('.collapse')

.attr('aria-expanded', 'false')

// tabindex

.find('a[class^="spip_"]')

.attr('tabindex', '-1');

}

});

Accessible sur 3 niveaux

Accessible sur 3 niveaux en fonction des classes .navigation-sommaire__fleche--niv3. Il faudra ré-adapter pour votre utilisation de Collapse. Ce n’est pas du plug’n’play.

La doc de Bootstrap v2.3.2 concernant le composant Collapse.

$(document).ready(function(){
    // Accessibilité du composant 'Collapse' pour le Sommaire:
    // [RGAA 7.1.1] Compatibilité avec les outils d'assistance
    // Dans la colonne de droite de certaines pages, les chevrons permettant de déplier le sommaire
    // d'un article de la même rubrique devrait avoir un aria-expanded, piloté par le script qui
    // plie/déplie l'accordéon.

    // D'autre part, lorsque le contenu de l'accordéon est masqué, il continue à être tabulable, et à 
    //être "vu" par la synthèse vocale, ce ne devrait pas être le cas.

    $('.group-toggle', 'nav[id^="sommaire"]').each(function(){
       var $this = $(this);
       $this.on('click', function(){
           // Clic pour ouverture
           if(!$this.hasClass('active')){
               // Clic pour ouverture d'un niveau 2 seulement:
               if(!$this.hasClass('navigation-sommaire__fleche--niv3')){
                   $this.closest('nav[id^="sommaire"]').find('[aria-expanded]').attr('aria-expanded', 'false');                   

                   // tabindex
                   $this.closest('nav[id^="sommaire"]').find('[tabindex]').attr('tabindex', '-1');
                   $this.closest('.has_children').next('.collapse').find('.navigation-sommaire__link--niv2, .navigation-sommaire__fleche--niv3').attr('tabindex', '0');
               }
               // Clic pour ouverture d'un niveau 3 seulement:
               else {
                   // tab-index
                   $this.closest('.has_children').next('.collapse').find('.navigation-sommaire__link--niv3').attr('tabindex', '0');
               }
               
               // ...et quoi qu'il arrive:
               $this.attr('aria-expanded', 'true');
               $this.closest('.has_children').next('.collapse').attr('aria-expanded', 'true');
           }
           // Clic pour fermeture
           else {
               // Clic pour fermeture d'un niveau 2 seulement:
               if(!$this.hasClass('navigation-sommaire__fleche--niv3')){
                   // tabindex
                   $this.closest('nav[id^="sommaire"]').find('[tabindex]').attr('tabindex', '-1');                  
               }
               // Clic pour fermeture d'un niveau 3 seulement:
               else {
                   // tabindex
                   $this.closest('.has_children').next('.collapse').find('.navigation-sommaire__link--niv3').attr('tabindex', '-1');
               }
               
               // ...et quoi qu'il arrive:               
               $this.attr('aria-expanded', 'false');
               $this.closest('.has_children').next('.collapse').attr('aria-expanded', 'false');
           }
       });
    });    
});

$(document).ready(function(){

// Accessibilité du composant 'Collapse' pour le Sommaire:

// [RGAA 7.1.1] Compatibilité avec les outils d'assistance

// Dans la colonne de droite de certaines pages, les chevrons permettant de déplier le sommaire

// d'un article de la même rubrique devrait avoir un aria-expanded, piloté par le script qui

// plie/déplie l'accordéon.

// D'autre part, lorsque le contenu de l'accordéon est masqué, il continue à être tabulable, et à

//être "vu" par la synthèse vocale, ce ne devrait pas être le cas.

$('.group-toggle', 'nav[id^="sommaire"]').each(function(){

var $this = $(this);

$this.on('click', function(){

// Clic pour ouverture

if(!$this.hasClass('active')){

// Clic pour ouverture d'un niveau 2 seulement:

if(!$this.hasClass('navigation-sommaire__fleche--niv3')){

$this.closest('nav[id^="sommaire"]').find('[aria-expanded]').attr('aria-expanded', 'false');

// tabindex

$this.closest('nav[id^="sommaire"]').find('[tabindex]').attr('tabindex', '-1');

$this.closest('.has_children').next('.collapse').find('.navigation-sommaire__link--niv2, .navigation-sommaire__fleche--niv3').attr('tabindex', '0');

}

// Clic pour ouverture d'un niveau 3 seulement:

else {

// tab-index

$this.closest('.has_children').next('.collapse').find('.navigation-sommaire__link--niv3').attr('tabindex', '0');

}

// ...et quoi qu'il arrive:

$this.attr('aria-expanded', 'true');

$this.closest('.has_children').next('.collapse').attr('aria-expanded', 'true');

}

// Clic pour fermeture

else {

// Clic pour fermeture d'un niveau 2 seulement:

if(!$this.hasClass('navigation-sommaire__fleche--niv3')){

// tabindex

$this.closest('nav[id^="sommaire"]').find('[tabindex]').attr('tabindex', '-1');

}

// Clic pour fermeture d'un niveau 3 seulement:

else {

// tabindex

$this.closest('.has_children').next('.collapse').find('.navigation-sommaire__link--niv3').attr('tabindex', '-1');

}

// ...et quoi qu'il arrive:

$this.attr('aria-expanded', 'false');

$this.closest('.has_children').next('.collapse').attr('aria-expanded', 'false');

}

});

[SPIP] Notes et astuces

13/12/2018 / admin

Attention: ce billet ne constitue en aucun cas une documentation ou des bonnes pratiques sur l’utilisation de SPIP. Je l’ai commencé dès le 1er jour où j’ai utilisé SPIP dans des conditions de correction d’audit RGAA. Je devais trouver vite des solutions aux différents problèmes remontés.

Liens importants (doc)

Manuel de référence des boucles et balises

Astuces de rédacteur

Comment mettre l’attribut title dans les liens SPIP ?

Remplir les attributs « alt » et « title » dans SPIP

[/[En savoir plus|Point d’information sur la maladie à virus Zika - En savoir plus->article317051]/]

Astuces de développeur

Ajoutez à la fin de l’url le paramètre ?var_mode=inclure pour avoir l’ensemble des éléments composants votre page.

Utiliser la balise `#TITRE` pour récupérer le titre d’un article dans un menu accordéon

<span class="texte-access"><:mass:lien_sommaire_article:> "#TITRE"</span>

Ajouter du contenu « en dur » dans un attribut (alt, title…)


[(#LOGO_SITE_SPIP
|inserer_attribut{alt,#VAL{'Accueil '}|concat{#NOM_SITE_SPIP}|attribut_html}
|inserer_attribut{class,'footer__logo logo-site'}
)]

Utiliser des locales de texte

Dans les vues HTML (*.html) :

<:mass:bouton_texte_plus:>

Les locales sont stockées dans des fichiers de type mass_.php, soit pour le français mass_fr.php:

<?php

// Ceci est un fichier langue de SPIP -- This is a SPIP language file

if (!defined('_ECRIRE_INC_VERSION')) return;

$GLOBALS[$GLOBALS['idx_lang']] = array(
  'bouton_texte_plus' => 'Augmenter la taille du texte',
);

<?php

// Ceci est un fichier langue de SPIP -- This is a SPIP language file

if (!defined('_ECRIRE_INC_VERSION')) return;

$GLOBALS[$GLOBALS['idx_lang']] = array(

'bouton_texte_plus' => 'Augmenter la taille du texte',

);

Utiliser la balise `#ENV` pour récupérer un niveau de navigation et les opérateurs de comparaison pour afficher ou non des attributs à des balises HTML

Ligne 3: j’affiche un attribut tabindex à l’élément <a /> si le niveau de navigation est supérieur à 1:

<a class="navigation-sommaire__link[ navigation-sommaire__link--niv(#ENV{niveau})]" 
   href="#GET{url}" 
   [(#ENV{niveau}|>{1}|oui) tabindex="-1" ]>
(#GET{titre})
</a>

<a class="navigation-sommaire__link[ navigation-sommaire__link--niv(#ENV{niveau})]"

href="#GET{url}"

[(#ENV{niveau}|>{1}|oui) tabindex="-1" ]>

(#GET{titre})

</a>

Pour charger des scripts sur TOUTES les pages

utiliser le squelette inc-insert-head.html

Vider manuellement le cache du site

Après une action en BO sur un changement de DOCTYPE, supprimer le contenu du répertoire local/, tmp/cache et tmp/logs.

[Vagrant] Quelques astuces d’utilisation

13/12/2018 / admin

Lien direct vers les résolutions d’erreurs

Stopper proprement une VM

$ vagrant halt <name or UUID>

Démarrer une VM

vagrant up <name or UUID>

List all available virtual machines

$ VBoxManage list vms

List all running available virtual machines

$ VBoxManage list runningvms

Stop (power off) a running a VM

$ vboxmanage controlvm dicom-portail poweroff

Delete a VM

$ vboxmanage unregistervm <name or UUID> --delete

Résolution d’erreurs

POUR TOUS LES PBMS DE MERDE AVEC LA VAGRANT QUI EXISTE DEJA QUI EST EN STILL RUNNING OU POWER OFF ET QU’ON PEUT PAS DESTROY:

$ vagrant reload <nom>

$ vagrant provision <nom>

Chemins à connaître

Chemin vers les VMs Virtual Box: C:\Users\flang\VirtualBox VMs.
Chemin vers les Vagrant: C:\Users\<utilisateur_windows>\.vagrant.d.

vagrant up > « Warning: Authentication failure. Retrying… «

Solution #1

à savoir: mettre à jour Virtual Box peut aider en cas de mise à jour de Windows.

Problème: du jour au lendemain, la commande vagrant up me pète une erreur Warning: Authentication failure. Retrying….

Via l’outil CMD (invite de commandes) de Windows exécuté en tant qu’administrateur, se rendre à la racine du dossier à partir duquel vous exécutez votre commande vagrant up et taper une première fois:

vagrant up

1	vagrant up

Une fois que le message d’erreur « Warning: Authentication failure. Retrying… « aura avorté la tentative de « up », taper les commandes suivantes:

vagrant ssh 
password: vagrant 
wget https://raw.githubusercontent.com/mitchellh/vagrant/master/keys/vagrant.pub -O ~/.ssh/authorized_keys
chmod 700 ~/.ssh
chmod 600 ~/.ssh/authorized_keys
chown -R vagrant:vagrant ~/.ssh
exit

vagrant ssh

password: vagrant

wget https://raw.githubusercontent.com/mitchellh/vagrant/master/keys/vagrant.pub -O ~/.ssh/authorized_keys

chmod 700 ~/.ssh

chmod 600 ~/.ssh/authorized_keys

chown -R vagrant:vagrant ~/.ssh

exit

Ensuite, exécuter la commande vagrant halt, puis relancer un vagrant up.

Solution #2 (pas testée)

Pour ton soucis de authentification :

Sur ta vagrant fait : vagrant ssh
Log toi
Tape ceci : echo "ssh-rsa AAAAB3NzaC1yc2EAAAABIwAAAQEA6NF8iallvQVp22WDkTkyrtvp9eWW6A8YVr+kz4TjGYe7gHzIw+niNltGEFHzD8+v1I2YJ6oXevct1YeS0o9HZyN1Q9qgCgzUFtdOKLv6IedplqoPkcmF0aYet2PkEDo3MlTBckFXPITAMzF8dJSIFo9D8HfdOV0IAdx4O7PtixWKn5y2hMNG0zQPyUecp4pzC6kivAIhyfHilFR61RGL+GPXQ2MWZWFYbAGjyiYJnAmCP3NOTd0jMZEnDkbUvxhMmBYSdETk1rRgm+R4LOzFUGaHqHDLKLX+FIPKcF96hrucXzcWyLbIbEgE98OHlnVYCzRdK8jlqm8tehUc9c9WhQ== vagrant insecure public key" > .ssh/authorized_keys
puis tu sors de ta vagrant
et tu fais un vagrant reload

Cela corrige le problème sur les vagrant ou j’ai eu le soucis.

Vagrant was unable to mount VirtualBox shared folders; /sbin/mount.vboxsf: mounting failed with the error: No such device

Erreur complète:

Vagrant was unable to mount VirtualBox shared folders. This is usually
because the filesystem « vboxsf » is not available. This filesystem is
made available via the VirtualBox Guest Additions and kernel module.
Please verify that these guest additions are properly installed in the
guest. This is not a bug in Vagrant and is usually caused by a faulty
Vagrant box. For context, the command attempted was:

mount -t vboxsf -o uid=1000,gid=1000 vagrant /vagrant

The error output from the command was:

/sbin/mount.vboxsf: mounting failed with the error: No such device

Solution trouvée ici (/sbin/mount.vboxsf: mounting failed with the error: No such device): j’ai downgradé ma version de Virtual Box à la version 5.2.22 (j’utilisais la version 6.0.0).

Failed to restart apache2.service: Unit apache2.service failed to load: No such file or directory.

Solution: installer apache2 à la main dans le Vagrant.

vagrant ssh 
password: vagrant 
sudo apt-get install apache2
exit

vagrant ssh

password: vagrant

sudo apt-get install apache2

exit

Articles récents

Catégories

Archives

Méta

Mois : décembre 2018

[javaScript] Un accordéon avec l’attribut HTML onClick

[javaScript] Passer une classe CSS comme paramètre d’une fonction avec document.getElementsByClassName();

[Bootstrap] Accessibilité du composant Collapse de Bootstrap 2 avec ajout des attributs aria-expanded et tabindex

Accessible sur 2 niveaux (fonctionnement standard du composant Collapse de Bootstrap 2)

Accessible sur 3 niveaux

[SPIP] Notes et astuces

Liens importants (doc)

Astuces de rédacteur

Comment mettre l’attribut title dans les liens SPIP ?

Astuces de développeur

Utiliser la balise `#TITRE` pour récupérer le titre d’un article dans un menu accordéon

Ajouter du contenu « en dur » dans un attribut (alt, title…)

Utiliser des locales de texte

Utiliser la balise `#ENV` pour récupérer un niveau de navigation et les opérateurs de comparaison pour afficher ou non des attributs à des balises HTML

Pour charger des scripts sur TOUTES les pages

Vider manuellement le cache du site

[Vagrant] Quelques astuces d’utilisation

Résolution d’erreurs

Chemins à connaître

vagrant up > « Warning: Authentication failure. Retrying… «

Solution #1

Solution #2 (pas testée)

Vagrant was unable to mount VirtualBox shared folders; /sbin/mount.vboxsf: mounting failed with the error: No such device

Failed to restart apache2.service: Unit apache2.service failed to load: No such file or directory.

Accessible sur 2 niveaux (fonctionnement standard du composant Collapse de Bootstrap 2)

Accessible sur 3 niveaux

Liens importants (doc)

Astuces de rédacteur

Comment mettre l’attribut title dans les liens SPIP ?

Astuces de développeur

Utiliser la balise #TITRE pour récupérer le titre d’un article dans un menu accordéon

Ajouter du contenu « en dur » dans un attribut (alt, title…)

Utiliser des locales de texte

Utiliser la balise #ENV pour récupérer un niveau de navigation et les opérateurs de comparaison pour afficher ou non des attributs à des balises HTML

Pour charger des scripts sur TOUTES les pages

Vider manuellement le cache du site

Résolution d’erreurs

Chemins à connaître

vagrant up > « Warning: Authentication failure. Retrying… «

Solution #1

Solution #2 (pas testée)

Vagrant was unable to mount VirtualBox shared folders; /sbin/mount.vboxsf: mounting failed with the error: No such device

Failed to restart apache2.service: Unit apache2.service failed to load: No such file or directory.

Utiliser la balise `#TITRE` pour récupérer le titre d’un article dans un menu accordéon

Utiliser la balise `#ENV` pour récupérer un niveau de navigation et les opérateurs de comparaison pour afficher ou non des attributs à des balises HTML