@gouvfr/dsfr-roller/src/script/pattern/name/add-firstname.js

Le module `dsfr-roller` permet de publier le site de documentation du Système de Design de l’État - DSFR

const getFieldsetElement = (node) => {
  const parent = node.parentNode;
  if (parent.className.indexOf('fr-fieldset__element') > -1) return parent;
  return getFieldsetElement(parent);
};

window.addFirstname = (button, id) => {
  button.firstnamesCount = (button.firstnamesCount + 1) || 1;

  const firstname = getFieldsetElement(document.getElementById(id));
  const reference = getFieldsetElement(button);

  const copy = firstname.cloneNode(true);
  let html = copy.innerHTML;
  const regexp = new RegExp(id, 'g');
  html = html.replace(regexp, `${id}-added-${button.firstnamesCount}`);
  html = html.replace('name="given-name"', `name="additional-name-${button.firstnamesCount}"`);
  html = html.replace('autocomplete="given-name"', 'autocomplete="additional-name"');
  copy.innerHTML = html;

  const wrapper = document.createElement('div');
  wrapper.classList.add('fr-input-wrap', 'fr-input-wrap--action');

  const removeButton = document.createElement('button');
  const labelRemoveButton = '<%= getText("label.remove-firstname", "name") %>';
  removeButton.classList.add('fr-btn', 'fr-btn--secondary', 'fr-icon-delete-line');
  removeButton.innerHTML = labelRemoveButton;
  removeButton.title = labelRemoveButton;

  removeButton.setAttribute('onclick', 'removeFirstname(this.copy)');
  removeButton.copy = copy;

  wrapper.appendChild(copy.getElementsByTagName('input')[0]);
  wrapper.appendChild(removeButton);
  copy.getElementsByTagName('label')[0].after(wrapper);
  reference.parentNode.insertBefore(copy, reference);
  document.getElementById(`${id}-added-${button.firstnamesCount}`).focus();
};