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 // Toggle the visibility of the full name inputs 26 // Hide the disabled input - does not send any value when posting the form 27 let disabledElement = document.getElementById('<?= e($id) ?>-disabled'); 28 disabledElement.classList.add('d-none'); 29 // Show the editable input - send value when posting the form 30 let editElement = document.getElementById('<?= e($id) ?>'); 31 editElement.classList.remove('d-none'); 32 editElement.focus(); 33 34 this.parentNode.parentNode.removeChild(this.parentNode); 35 }); 36 document.addEventListener('DOMContentLoaded', function () { 37 let NAME = document.getElementById('<?= e($id) ?>'); 38 let NAME_DISABLED = document.getElementById('<?= e($id) ?>-disabled'); 39 let container = NAME.parentNode.parentNode.parentNode; 40 41 let setNameValue = function(name_value) { 42 NAME.value = name_value; 43 NAME_DISABLED.value = name_value; 44 } 45 46 if (NAME.id.endsWith('-INDI-NAME')) { 47 // NAME has children at the same level. 48 container = container.parentNode; 49 } else { 50 // ROMN/FONE have children in a collapsable panel 51 container = container.nextSibling.nextSibling; 52 } 53 let NPFX = container.querySelector('[id$="-NPFX"]'); 54 let GIVN = container.querySelector('[id$="-GIVN"]'); 55 let SPFX = container.querySelector('[id$="-SPFX"]'); 56 let SURN = container.querySelector('[id$="-SURN"]'); 57 let NSFX = container.querySelector('[id$="-NSFX"]'); 58 59 let generated_name = webtrees.buildNameFromParts( 60 NPFX ? NPFX.value : '', 61 GIVN ? GIVN.value : '', 62 SPFX ? SPFX.value : '', 63 SURN ? SURN.value : '', 64 NSFX ? NSFX.value : '', 65 'U', 66 ); 67 68 if (NAME.value === '') { 69 setNameValue(generated_name); 70 } 71 if (NAME.value !== generated_name) { 72 document.getElementById('<?= e($id) ?>-edit').click(); 73 } else { 74 let fn = function () { 75 if (NAME.classList.contains("d-none") === true) { 76 setNameValue(webtrees.buildNameFromParts( 77 NPFX ? NPFX.value : '', 78 GIVN ? GIVN.value : '', 79 SPFX ? SPFX.value : '', 80 SURN ? SURN.value : '', 81 NSFX ? NSFX.value : '', 82 'U', 83 )); 84 } 85 }; 86 NPFX && NPFX.addEventListener('input', fn); 87 GIVN && GIVN.addEventListener('input', fn); 88 SPFX && SPFX.addEventListener('input', fn); 89 SURN && SURN.addEventListener('input', fn); 90 SURN && SURN.addEventListener('blur', fn); // For autocompleted entries 91 NSFX && NSFX.addEventListener('input', fn); 92 } 93 }); 94</script> 95