1<?php 2 3use Fisharebest\Webtrees\I18N; 4 5/** 6 * @var string $id 7 */ 8 9?> 10 11<span class="input-group-text"> 12 <a id="<?= e($id) ?>-edit" href="#" title="<?= I18N::translate('Edit the name') ?>"> 13 <?= view('icons/edit') ?> 14 <span class="visually-hidden"> 15 <?= I18N::translate('Edit the name') ?> 16 </span> 17 </a> 18</span> 19 20<script> 21 document.getElementById('<?= e($id) ?>-edit').addEventListener('click', function (event) { 22 event.preventDefault(); 23 let element = document.getElementById('<?= e($id) ?>'); 24 element.readOnly = false; 25 element.focus(); 26 27 let input_addon = this.parentNode; 28 input_addon.removeChild(input_addon); 29 }); 30 document.addEventListener('DOMContentLoaded', function () { 31 let container = document.getElementById('<?= e($id) ?>').parentNode.parentNode.parentNode.parentNode; 32 let NAME = container.querySelector('[id$="INDI:NAME"]'); 33 let NPFX = container.querySelector('[id$="INDI:NAME:NPFX"]'); 34 let GIVN = container.querySelector('[id$="INDI:NAME:GIVN"]'); 35 let SPFX = container.querySelector('[id$="INDI:NAME:SPFX"]'); 36 let SURN = container.querySelector('[id$="INDI:NAME:SURN"]'); 37 let NSFX = container.querySelector('[id$="INDI:NAME:NSFX"]'); 38 39 if (NAME.value !== webtrees.buildNameFromParts( 40 NPFX ? NPFX.value : '', 41 GIVN ? GIVN.value : '', 42 SPFX ? SPFX.value : '', 43 SURN ? SURN.value : '', 44 NSFX ? NSFX.value : '', 45 'U' 46 )) { 47 document.getElementById('<?= e($id) ?>-edit').click(); 48 } else { 49 let fn = function () { 50 if (NAME.readOnly === true) { 51 NAME.value = webtrees.buildNameFromParts( 52 NPFX ? NPFX.value : '', 53 GIVN ? GIVN.value : '', 54 SPFX ? SPFX.value : '', 55 SURN ? SURN.value : '', 56 NSFX ? NSFX.value : '', 57 'U' 58 ); 59 } 60 } 61 NPFX && NPFX.addEventListener('input', fn); 62 GIVN && GIVN.addEventListener('input', fn); 63 SPFX && SPFX.addEventListener('input', fn); 64 SURN && SURN.addEventListener('input', fn); 65 SURN && SURN.addEventListener('blur', fn); // For autocompleted entries 66 NSFX && NSFX.addEventListener('input', fn); 67 } 68 }); 69</script> 70