Open Time

Bon, après moult essais et discussions sur IRC à propos de mon truc bizarre d’hier qui marchait sur Chrome et Safari et pas sur Firefox, il s’avère qu’en fait c’est un BUG si ça marche sur Chrome et Safari et pas sur Firefox, dixit Karl qui a ouvert un ticket à ce sujet.

Du coup j’ai tout repris en utilisant cette fois une image SVG directement dans le markup plutôt qu’en masque de fond CSS, en m’inspirant de Scampi (au passage allez faire un tour sur le site de ressources de la PIDILA, y’a plein de trucs cools et accessibles).

Je détaille pour ceux qui sont intéressés, les autres peuvent retourner vaquer à leurs occupations favorites…

Hier, mon code HTML était comme ça :

<input type="checkbox" id="dragndrop" title="L'ordonnancement par glisser-déposer des zones du tableau de bord est désactivé">

La CSS (source SASS) :

#dragndrop {
  position: absolute;
  width: 2em;
  height: 1.5em;
  -webkit-mask-image: url(dragndrop.svg#mask);
  mask-image: url(dragndrop.svg#mask);
  &:before {
    content: "";
    display: inline-block;
    width: 2em;
    height: 1.5em;
    background: $drag-n-drop-off; // Couleur OFF
  }
  &:checked:before {
    background: $drag-n-drop-on; // Couleur ON
  }
}

Et le SVG utilisé :

<svg id="mask" viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet">
  <path d="M7.9 7.9l2.1 7.5 1.7-2.6 3.2 3.2 1.1-1.1-3.3-3.2 2.7-1.6z" fill="#91DC5A">
  </path>
  <path d="M8 12h-7v-9h12v5.4l1 0.2v-6.6h-14v11h8.2z" fill="#91DC5A">
  </path>
</svg>

Et ça ça foirait dans certains cas (voir plus haut).

Aujourd’hui, j’ai remplacé le code HTML par :

<input type="checkbox" id="dragndrop" class="sr-only" title="L'ordonnancement par glisser-déposer des zones du tableau de bord est désactivé">
<label for="dragndrop"><svg aria-hidden="true" focusable="false" class="dragndrop-svg"><use xlink:href="images/dragndrop.svg#mask"></use></svg><span id="dragndrop-label" class="sr-only">L'ordonnancement par glisser-déposer des zones du tableau de bord est désactivé</span></label>

La CSS (source SASS) est :

#dragndrop {
  position: absolute;
  &+label {
    position: absolute;
    display: inline-block;
    line-height: 1;
  }
  &+label .dragndrop-svg {
    width: 2em;
    height: 1.5em;
    fill: $drag-n-drop-off; // Couleur OFF
  }
  &:checked+label .dragndrop-svg {
    fill: $drag-n-drop-on; // Couleur ON
  }
}

Et le SVG utilisé, qui n’a pas franchement varié :

<svg id="mask" viewbox="0 0 16 16" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <path d="M7.9 7.9l2.1 7.5 1.7-2.6 3.2 3.2 1.1-1.1-3.3-3.2 2.7-1.6z">
  </path>
  <path d="M8 12h-7v-9h12v5.4l1 0.2v-6.6h-14v11h8.2z">
  </path>
</svg>

Et ça ça fonctionne partout \o/

Après un peu de javascript pour activer et désactiver la fonctionnalité et changer les libellés et titres de façon appropriée et ça roule (je ne mets que l’extrait intéressant) :

// Set or reset sortable depending on #dragndrop checbkox value
$('#dragndrop').click(function() {
  if ($(this).is(':checked')) {
    // Activate sorting feature
    areas.forEach(element => init_positions(element[0], element[1]));
    $(this).prop('title', dotclear.dragndrop_on);
    $('#dragndrop-label').text(dotclear.dragndrop_on);
  } else {
    // Deactivate sorting feature
    areas.forEach(element => reset_positions(element[0]));
    $(this).prop('title', dotclear.dragndrop_off);
    $('#dragndrop-label').text(dotclear.dragndrop_off);
  }
});

Toujours est-il que je commence à comprendre un peu mieux comment fonctionne SVG, que les CSS, c’est pas toujours de tout repos vu les implémentations différentes selon les moteurs de rendu, que le Javascript ça permet de faire des trucs rigolos et qu’au passage jQuery est tout de même rudement pratique.

À vous les studios !