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