Open Time

Côté administration on s’en sert un peu partout, encore ; par contre côté public je fais en sorte que ça ne soit pas le cas, en tout cas si on utilise uniquement le cœur de Dotclear, c’est-à-dire ce qu’on livre de façon standard et sans faire d’installations supplémentaires.

Hier, pour un besoin particulier, il a fallu que je convertisse du code jQuery en code pur Javascript. Je m’attendais à quelque chose de plus verbeux et en fait, voilà la comparaison.

Le code jQuery :

$(function() {
  $('input[type=password]').each(function() {
    // Compose button
    const xml = `<button type="button" class="pw-show" title="${dotclear.msg.show_password}"><span class="sr-only">${dotclear.msg.show_password}</span></button>`;
    // Add show/hide button after password input
    $(this).after(xml);
    $(this).next().on('click', function(e) {
      if ($(this).hasClass('pw-show')) {
        $(this).removeClass('pw-show');
        $(this).addClass('pw-hide');
        $(this).prev().get(0).type = 'text';
        $(this).prop('title', dotclear.msg.hide_password);
        $(this).children('span').text(dotclear.msg.hide_password);
      } else {
        $(this).removeClass('pw-hide');
        $(this).addClass('pw-show');
        $(this).prev().get(0).type = 'password';
        $(this).prop('title', dotclear.msg.show_password);
        $(this).children('span').text(dotclear.msg.show_password);
      }
      e.preventDefault();
    });
  });
});

Le code Javascript correspondant :

window.addEventListener('load', () => {
  // Compose button
  let xml = new DOMParser().parseFromString(
    `<button type="button" class="pw-show" title="${msg.show_password}"><span class="sr-only">${msg.show_password}</span></button>`,
    'text/html'
  ).body.firstChild;
  // Add show/hide button after password input
  const pwd = document.querySelectorAll('input[type=password]');
  pwd.forEach(function(element) {
    element.insertAdjacentElement('afterend', xml);
    element.nextElementSibling.addEventListener('click', function(e) {
      if (this.classList.contains('pw-show')) {
        this.classList.remove('pw-show');
        this.classList.add('pw-hide');
        this.previousElementSibling.setAttribute('type', 'text');
        this.setAttribute('title', msg.hide_password);
        this.querySelector('span').textContent = msg.hide_password;
      } else {
        this.classList.remove('pw-hide');
        this.classList.add('pw-show');
        this.previousElementSibling.setAttribute('type', 'password');
        this.setAttribute('title', msg.show_password);
        this.querySelector('span').textContent = msg.show_password;
      }
      e.preventDefault();
    });
  });
});

Soit quasi équivalent en nombre de lignes, et quasiment aussi facile à lire exception faite de quelques noms de méthode à rallonge côté Javascript.

Résultat, dans le 2e cas, pas besoin d’avoir à charger une librairie qui pèse quelques dizaines de kilo-octets !

by the way j’aimerais bien trouver un équivalent à magnific-popup, ou à défaut Lightbox, en javascript pur.