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