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