1<?php 2 3use Fisharebest\Webtrees\Individual; 4use Fisharebest\Webtrees\Module\ModuleTabInterface; 5use Fisharebest\Webtrees\View; 6use Illuminate\Support\Collection; 7 8/** 9 * @var Individual $record 10 * @var Collection<ModuleTabInterface> $tabs 11 */ 12?> 13 14<div class="wt-tabs-individual" id="individual-tabs"> 15 <ul class="nav nav-tabs flex-wrap" role="tablist"> 16 <?php foreach ($tabs as $tab) : ?> 17 <li class="nav-item" role="presentation"> 18 <a class="nav-link<?= $tab->isGrayedOut($record) ? ' text-muted' : '' ?>" data-bs-toggle="tab" role="tab" data-wt-href="<?= e(route('module', ['module' => $tab->name(), 'action' => 'Tab', 'tree' => $record->tree()->name(), 'xref' => $record->xref()])) ?>" href="#<?= $tab->name() ?>"> 19 <?= $tab->tabTitle() ?> 20 </a> 21 </li> 22 <?php endforeach ?> 23 </ul> 24 25 <div class="tab-content"> 26 <?php foreach ($tabs as $tab) : ?> 27 <div id="<?= $tab->name() ?>" class="tab-pane fade wt-ajax-load" role="tabpanel"><?php if (!$tab->canLoadAjax()) : 28 ?><?= $tab->getTabContent($record) ?><?php 29 endif ?></div> 30 <?php endforeach ?> 31 </div> 32</div> 33 34<?php View::push('javascript') ?> 35<script> 36 'use strict'; 37 38 // Bootstrap tabs - load content dynamically using AJAX 39 $('a[data-bs-toggle="tab"][data-wt-href]').on('show.bs.tab', function () { 40 let target = $(this.hash + ':empty'); 41 if (target.length > 0) { 42 // Start the download immediately... 43 let download = fetch(this.dataset.wtHref, { 44 headers: new Headers({ 'X-Requested-with': 'XMLHttpRequest' }), 45 }); 46 47 // ...but don't insert it until the tab is ready. 48 $(this).one('shown.bs.tab', () => { 49 download 50 .then(data => data.text()) 51 .then(data => target.html(data)); 52 }); 53 } 54 }); 55 56 // If the URL contains a fragment, then activate the corresponding tab. 57 // Use a prefix on the fragment, to prevent scrolling to the element. 58 let target = window.location.hash.replace("tab-", ""); 59 let tab = document.querySelector("#individual-tabs .nav-link[href='" + target + "']"); 60 // If not, then activate the first tab. 61 tab = tab ?? document.querySelector("#individual-tabs .nav-link"); 62 tab.click(); 63 64 // If the user selects a tab, update the URL to reflect this 65 $('#individual-tabs a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) { 66 window.location.hash = "tab-" + e.target.href.substring(e.target.href.indexOf('#') + 1); 67 }); 68</script> 69<?php View::endpush() ?> 70