xref: /webtrees/resources/views/edit/input-addon-edit-name.phtml (revision 49b21e1ab436397afe99f8e0c3035f1c9b944a85) 
1<?php
2
3declare(strict_types=1);
4
5use Fisharebest\Webtrees\I18N;
6
7/**
8 * @var string $id
9 */
10
11?>
12
13<span class="input-group-text">
14    <a id="<?= e($id) ?>-edit" href="#" title="<?= I18N::translate('Edit the name') ?>">
15        <?= view('icons/edit') ?>
16        <span class="visually-hidden">
17            <?= I18N::translate('Edit the name') ?>
18        </span>
19    </a>
20</span>
21
22<script>
23    document.getElementById('<?= e($id) ?>-edit').addEventListener('click', function (event) {
24        event.preventDefault();
25        let element = document.getElementById('<?= e($id) ?>');
26        element.readOnly = false;
27        element.focus();
28
29        let input_addon = this.parentNode;
30        input_addon.parentNode.removeChild(input_addon);
31    });
32    document.addEventListener('DOMContentLoaded', function () {
33        let container = document.getElementById('<?= e($id) ?>').parentNode.parentNode.parentNode.parentNode;
34        let NAME = container.querySelector('[id$="INDI:NAME"]');
35        let NPFX = container.querySelector('[id$="INDI:NAME:NPFX"]');
36        let GIVN = container.querySelector('[id$="INDI:NAME:GIVN"]');
37        let SPFX = container.querySelector('[id$="INDI:NAME:SPFX"]');
38        let SURN = container.querySelector('[id$="INDI:NAME:SURN"]');
39        let NSFX = container.querySelector('[id$="INDI:NAME:NSFX"]');
40
41        if (NAME.value !== webtrees.buildNameFromParts(
42            NPFX ? NPFX.value : '',
43            GIVN ? GIVN.value : '',
44            SPFX ? SPFX.value : '',
45            SURN ? SURN.value : '',
46            NSFX ? NSFX.value : '',
47            'U'
48        )) {
49            document.getElementById('<?= e($id) ?>-edit').click();
50        } else {
51            let fn = function () {
52                if (NAME.readOnly === true) {
53                    NAME.value = webtrees.buildNameFromParts(
54                        NPFX ? NPFX.value : '',
55                        GIVN ? GIVN.value : '',
56                        SPFX ? SPFX.value : '',
57                        SURN ? SURN.value : '',
58                        NSFX ? NSFX.value : '',
59                        'U'
60                    );
61                }
62            }
63            NPFX && NPFX.addEventListener('input', fn);
64            GIVN && GIVN.addEventListener('input', fn);
65            SPFX && SPFX.addEventListener('input', fn);
66            SURN && SURN.addEventListener('input', fn);
67            SURN && SURN.addEventListener('blur', fn); // For autocompleted entries
68            NSFX && NSFX.addEventListener('input', fn);
69        }
70    });
71</script>
72