Open Time

Il y a quelques jours je publiais la modif que j’avais faite pour ne plus utiliser jQuery pour la gestion d’un bouton d’aide associé au champ de mot de passe, bouton qui permet d’afficher et de masquer le contenu du champ.

Anthony Ricaud, plus connu sous le pseudo Rik — à moins que ce ne soit le contraire, mais ça n’a pas d’importance —, m’a proposé une revue de code et plein de conseils, ce que j’ai accepté bien volontiers, vous pensez-bien !

Du coup, au lieu de mon code qui marchotait (en fait il ne marchait qu’avec un seul champ mot de passe) :

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();
    });
  });
});

Voilà ce qu’il est devenu :

(function (){
  // Get locales
  const msg = dotclear.getData('dc_password_msg');

  function togglePasswordHelper(e) {
    e.preventDefault();
    const button = e.currentTarget;
    const isPasswordShown = button.classList.contains('pw-hide');

    let inputType = isPasswordShown ? 'password' : 'text';
    let buttonContent = isPasswordShown ? msg.show_password : msg.hide_password;

    button.classList.toggle('pw-hide', !isPasswordShown);
    button.classList.toggle('pw-show', isPasswordShown);

    button.previousElementSibling.setAttribute('type', inputType);
    button.setAttribute('title', buttonContent);
    button.querySelector('span').textContent = buttonContent;
  }

  function installPasswordHelpers() {
    // Compose button
    const buttonTemplate = 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;

    const passwordFields = document.querySelectorAll('input[type=password]');

    for (const passwordField of passwordFields) {
      const button = buttonTemplate.cloneNode(true);
      passwordField.after(button);
      button.addEventListener('click', togglePasswordHelper);
    }
  }

  window.addEventListener('DOMContentLoaded', installPasswordHelpers);
})();

Si vous voulez en savoir plus, il a gentiment commenté son code ici, c’est très instructif !

Et puis en discutant avec lui sur IRC, il m’a aussi signalé l’existence d’une balise HTML template qui pouvait servir de « modèle » pour créer des éléments en javascript.

Ça pourrait bien servir si je reprends en main le gestionnaire de média, en particulier quand on ajoute des médias dans un dossier…