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