xref: /webtrees/resources/views/edit/input-addon-edit-name.phtml (revision b11cdcd45131b1585d66693fab363cfeb18c51a4) 
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.style.backgroundColor = null; // Initially set to #e9ecef to match input-group-addon
28    element.focus();
29
30    this.parentNode.removeChild(this);
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    let generated_name = 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
58    if (NAME.value === '') {
59      NAME.value = generated_name;
60    }
61    if (NAME.value !== generated_name) {
62      document.getElementById('<?= e($id) ?>-edit').click();
63    } else {
64      let fn = function () {
65        if (NAME.readOnly === true) {
66          NAME.value = webtrees.buildNameFromParts(
67            NPFX ? NPFX.value : '',
68            GIVN ? GIVN.value : '',
69            SPFX ? SPFX.value : '',
70            SURN ? SURN.value : '',
71            NSFX ? NSFX.value : '',
72            'U',
73          );
74        }
75      };
76      NPFX && NPFX.addEventListener('input', fn);
77      GIVN && GIVN.addEventListener('input', fn);
78      SPFX && SPFX.addEventListener('input', fn);
79      SURN && SURN.addEventListener('input', fn);
80      SURN && SURN.addEventListener('blur', fn); // For autocompleted entries
81      NSFX && NSFX.addEventListener('input', fn);
82    }
83  });
84</script>
85