xref: /webtrees/resources/views/edit/input-addon-edit-name.phtml (revision 78606cf427772fbdc5222ff607ee23f43078f94b) 
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.removeChild(input_addon);
31  });
32  document.addEventListener('DOMContentLoaded', function () {
33    let NAME = document.getElementById('<?= e($id) ?>');
34    let container = NAME.parentNode.parentNode.parentNode;
35
36    if (NAME.id.endsWith('-INDI:NAME')) {
37      // NAME has children at the same level.
38      container = container.parentNode;
39    } else {
40      // ROMN/FONE have children in a collapsable panel
41      container = container.nextSibling.nextSibling;
42    }
43    let NPFX = container.querySelector('[id$=":NPFX"]');
44    let GIVN = container.querySelector('[id$=":GIVN"]');
45    let SPFX = container.querySelector('[id$=":SPFX"]');
46    let SURN = container.querySelector('[id$=":SURN"]');
47    let NSFX = container.querySelector('[id$=":NSFX"]');
48
49    if (NAME.value !== webtrees.buildNameFromParts(
50      NPFX ? NPFX.value : '',
51      GIVN ? GIVN.value : '',
52      SPFX ? SPFX.value : '',
53      SURN ? SURN.value : '',
54      NSFX ? NSFX.value : '',
55      'U',
56    )) {
57      document.getElementById('<?= e($id) ?>-edit').click();
58    } else {
59      let fn = function () {
60        if (NAME.readOnly === true) {
61          NAME.value = webtrees.buildNameFromParts(
62            NPFX ? NPFX.value : '',
63            GIVN ? GIVN.value : '',
64            SPFX ? SPFX.value : '',
65            SURN ? SURN.value : '',
66            NSFX ? NSFX.value : '',
67            'U',
68          );
69        }
70      };
71      NPFX && NPFX.addEventListener('input', fn);
72      GIVN && GIVN.addEventListener('input', fn);
73      SPFX && SPFX.addEventListener('input', fn);
74      SURN && SURN.addEventListener('input', fn);
75      SURN && SURN.addEventListener('blur', fn); // For autocompleted entries
76      NSFX && NSFX.addEventListener('input', fn);
77    }
78  });
79</script>
80