xref: /webtrees/resources/views/edit/input-addon-edit-name.phtml (revision 13adff1f29a9f4cc132345652c8d37d9d4d0c269)

<?php

declare(strict_types=1);

use Fisharebest\Webtrees\I18N;

/**
 * @var string $id
 */

?>

<span class="input-group-text">
    <a id="<?= e($id) ?>-edit" href="#" title="<?= I18N::translate('Edit the name') ?>">
        <?= view('icons/edit') ?>
        <span class="visually-hidden">
            <?= I18N::translate('Edit the name') ?>
        </span>
    </a>
</span>

<script>
  document.getElementById('<?= e($id) ?>-edit').addEventListener('click', function (event) {
    event.preventDefault();
    let element = document.getElementById('<?= e($id) ?>');
    element.readOnly = false;
    element.focus();

    let input_addon = this.parentNode;
    input_addon.removeChild(input_addon);
  });
  document.addEventListener('DOMContentLoaded', function () {
    let NAME = document.getElementById('<?= e($id) ?>');
    let container = NAME.parentNode.parentNode.parentNode;

    if (NAME.id.endsWith('-INDI:NAME')) {
      // NAME has children at the same level.
      container = container.parentNode;
    } else {
      // ROMN/FONE have children in a collapsable panel
      container = container.nextSibling.nextSibling;
    }
    let NPFX = container.querySelector('[id$=":NPFX"]');
    let GIVN = container.querySelector('[id$=":GIVN"]');
    let SPFX = container.querySelector('[id$=":SPFX"]');
    let SURN = container.querySelector('[id$=":SURN"]');
    let NSFX = container.querySelector('[id$=":NSFX"]');

    let generated_name = webtrees.buildNameFromParts(
      NPFX ? NPFX.value : '',
      GIVN ? GIVN.value : '',
      SPFX ? SPFX.value : '',
      SURN ? SURN.value : '',
      NSFX ? NSFX.value : '',
      'U',
    );

    if (NAME.value === '') {
      NAME.value = generated_name;
    }
    if (NAME.value !== generated_name) {
      document.getElementById('<?= e($id) ?>-edit').click();
    } else {
      let fn = function () {
        if (NAME.readOnly === true) {
          NAME.value = webtrees.buildNameFromParts(
            NPFX ? NPFX.value : '',
            GIVN ? GIVN.value : '',
            SPFX ? SPFX.value : '',
            SURN ? SURN.value : '',
            NSFX ? NSFX.value : '',
            'U',
          );
        }
      };
      NPFX && NPFX.addEventListener('input', fn);
      GIVN && GIVN.addEventListener('input', fn);
      SPFX && SPFX.addEventListener('input', fn);
      SURN && SURN.addEventListener('input', fn);
      SURN && SURN.addEventListener('blur', fn); // For autocompleted entries
      NSFX && NSFX.addEventListener('input', fn);
    }
  });
</script>