10f5fd22fSGreg Roach<?php 20f5fd22fSGreg Roach 3*10e06497SGreg Roachdeclare(strict_types=1); 4*10e06497SGreg Roach 50f5fd22fSGreg Roachuse Fisharebest\Webtrees\Individual; 60f5fd22fSGreg Roachuse Fisharebest\Webtrees\Module\ModuleTabInterface; 70f5fd22fSGreg Roachuse Fisharebest\Webtrees\View; 80f5fd22fSGreg Roachuse Illuminate\Support\Collection; 90f5fd22fSGreg Roach 100f5fd22fSGreg Roach/** 110f5fd22fSGreg Roach * @var Individual $record 1236779af1SGreg Roach * @var Collection<int,ModuleTabInterface> $tabs 130f5fd22fSGreg Roach */ 140f5fd22fSGreg Roach?> 150f5fd22fSGreg Roach 160f5fd22fSGreg Roach<div class="wt-tabs-individual" id="individual-tabs"> 170f5fd22fSGreg Roach <ul class="nav nav-tabs flex-wrap" role="tablist"> 180f5fd22fSGreg Roach <?php foreach ($tabs as $tab) : ?> 190f5fd22fSGreg Roach <li class="nav-item" role="presentation"> 20d4786c66SGreg Roach <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() ?>"> 210f5fd22fSGreg Roach <?= $tab->tabTitle() ?> 220f5fd22fSGreg Roach </a> 230f5fd22fSGreg Roach </li> 240f5fd22fSGreg Roach <?php endforeach ?> 250f5fd22fSGreg Roach </ul> 260f5fd22fSGreg Roach 270f5fd22fSGreg Roach <div class="tab-content"> 280f5fd22fSGreg Roach <?php foreach ($tabs as $tab) : ?> 29bd29d468SGreg Roach <div id="<?= $tab->name() ?>" class="tab-pane fade wt-ajax-load" role="tabpanel"> 30bd29d468SGreg Roach <?php if (!$tab->canLoadAjax()) : ?> 31bd29d468SGreg Roach <?= $tab->getTabContent($record) ?> 32bd29d468SGreg Roach <?php endif ?> 33bd29d468SGreg Roach </div> 340f5fd22fSGreg Roach <?php endforeach ?> 350f5fd22fSGreg Roach </div> 360f5fd22fSGreg Roach</div> 370f5fd22fSGreg Roach 380f5fd22fSGreg Roach<?php View::push('javascript') ?> 390f5fd22fSGreg Roach<script> 40ffb44950SGreg Roach 'use strict'; 410f5fd22fSGreg Roach 420f5fd22fSGreg Roach // Bootstrap tabs - load content dynamically using AJAX 43d4786c66SGreg Roach $('a[data-bs-toggle="tab"][data-wt-href]').on('show.bs.tab', function () { 440f5fd22fSGreg Roach let target = $(this.hash + ':empty'); 450f5fd22fSGreg Roach if (target.length > 0) { 460f5fd22fSGreg Roach // Start the download immediately... 47313cf418SGreg Roach let download = webtrees.httpGet(this.dataset.wtHref); 480f5fd22fSGreg Roach 490f5fd22fSGreg Roach // ...but don't insert it until the tab is ready. 500f5fd22fSGreg Roach $(this).one('shown.bs.tab', () => { 510f5fd22fSGreg Roach download 520f5fd22fSGreg Roach .then(data => data.text()) 530f5fd22fSGreg Roach .then(data => target.html(data)); 540f5fd22fSGreg Roach }); 550f5fd22fSGreg Roach } 560f5fd22fSGreg Roach }); 570f5fd22fSGreg Roach 580f5fd22fSGreg Roach // If the URL contains a fragment, then activate the corresponding tab. 590f5fd22fSGreg Roach // Use a prefix on the fragment, to prevent scrolling to the element. 600f5fd22fSGreg Roach let target = window.location.hash.replace("tab-", ""); 61315eb316SGreg Roach let tab = document.querySelector("#individual-tabs .nav-link[href='" + target + "']"); 620f5fd22fSGreg Roach // If not, then activate the first tab. 63315eb316SGreg Roach tab = tab ?? document.querySelector("#individual-tabs .nav-link"); 64315eb316SGreg Roach tab.click(); 650f5fd22fSGreg Roach 660f5fd22fSGreg Roach // If the user selects a tab, update the URL to reflect this 67315eb316SGreg Roach $('#individual-tabs a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) { 680f5fd22fSGreg Roach window.location.hash = "tab-" + e.target.href.substring(e.target.href.indexOf('#') + 1); 690f5fd22fSGreg Roach }); 700f5fd22fSGreg Roach</script> 710f5fd22fSGreg Roach<?php View::endpush() ?> 72