1<?php 2 3declare(strict_types=1); 4 5use Fisharebest\Webtrees\View; 6 7/** 8 * @var array<string,string> $tabs 9 * @var string $title 10 */ 11 12?> 13 14<h2 class="wt-page-title"> 15 <?= $title ?> 16</h2> 17 18<div class="wt-page-content wt-chart wt-statistics-chart" id="statistics-tabs"> 19 <ul class="nav nav-tabs" role="tablist"> 20 <?php foreach ($tabs as $label => $url) : ?> 21 <li class="nav-item" role="presentation"> 22 <a class="nav-link" href="#tab-<?= e(md5($url)) ?>" data-bs-toggle="tab" data-href="<?= e($url) ?>" role="tab"> 23 <?= $label ?> 24 </a> 25 </li> 26 <?php endforeach ?> 27 </ul> 28 29 <div class="tab-content"> 30 <?php foreach ($tabs as $label => $url) : ?> 31 <div class="tab-pane fade wt-ajax-load" role="tabpanel" id="tab-<?= e(md5($url)) ?>"></div> 32 <?php endforeach ?> 33 </div> 34</div> 35 36<?php View::push('javascript') ?> 37<script> 38 "use strict"; 39 40 // Bootstrap tabs - load content dynamically using AJAX 41 $('a[data-bs-toggle="tab"][data-href]').on('show.bs.tab', function () { 42 $(this.getAttribute('href') + ':empty').load($(this).data('href')); 43 }); 44 45 // If the URL contains a fragment, then activate the corresponding tab. 46 // Use a prefix on the fragment, to prevent scrolling to the element. 47 let target = window.location.hash.replace("tab-", ""); 48 let tab = document.querySelector("#statistics-tabs .nav-link[href='" + target + "']"); 49 // If not, then activate the first tab. 50 tab = tab ?? document.querySelector("#statistics-tabs .nav-link"); 51 tab.click(); 52 53 // If the user selects a tab, update the URL to reflect this 54 $('#statistics-tabs a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) { 55 window.location.hash = "tab-" + e.target.href.substring(e.target.href.indexOf('#') + 1); 56 }); 57</script> 58<?php View::endpush() ?> 59