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