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

<?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 container = document.getElementById('<?= e($id) ?>').parentNode.parentNode.parentNode.parentNode;
        let NAME = container.querySelector('[id$="INDI:NAME"]');
        let NPFX = container.querySelector('[id$="INDI:NAME:NPFX"]');
        let GIVN = container.querySelector('[id$="INDI:NAME:GIVN"]');
        let SPFX = container.querySelector('[id$="INDI:NAME:SPFX"]');
        let SURN = container.querySelector('[id$="INDI:NAME:SURN"]');
        let NSFX = container.querySelector('[id$="INDI:NAME:NSFX"]');

        if (NAME.value !== webtrees.buildNameFromParts(
            NPFX ? NPFX.value : '',
            GIVN ? GIVN.value : '',
            SPFX ? SPFX.value : '',
            SURN ? SURN.value : '',
            NSFX ? NSFX.value : '',
            'U'
        )) {
            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>