Alexander Bocken
0369f781fa
SVG-based sidebar widget displaying immediate family relationships (parents, siblings, spouses, children) with compact card layout, multi-spouse routing, wrapped rows, and ancestor/descendant indicators.
90 lines
2.5 KiB
PHTML
90 lines
2.5 KiB
PHTML
<?php
|
|
|
|
declare(strict_types=1);
|
|
|
|
use Fisharebest\Webtrees\Individual;
|
|
use Fisharebest\Webtrees\Tree;
|
|
use FamilyNavGraph\Module;
|
|
|
|
/**
|
|
* @var Module $module
|
|
* @var Individual $individual
|
|
* @var Tree $tree
|
|
* @var string $tree_data
|
|
* @var string $javascript_url
|
|
* @var string $stylesheet_url
|
|
*/
|
|
|
|
$containerId = 'family-nav-graph-' . $individual->xref();
|
|
?>
|
|
|
|
<link rel="stylesheet" href="<?= e($stylesheet_url) ?>">
|
|
|
|
<div class="wt-sidebar-content wt-sidebar-family-nav-graph">
|
|
<div id="<?= $containerId ?>" class="fng-container">
|
|
<div class="full-diagram-chart"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
var data = <?= $tree_data ?>;
|
|
|
|
function expandAccordion() {
|
|
var container = document.getElementById('<?= $containerId ?>');
|
|
if (!container) return;
|
|
var collapse = container.closest('.accordion-collapse');
|
|
if (collapse && !collapse.classList.contains('show')) {
|
|
var bsCollapse = new bootstrap.Collapse(collapse, { toggle: true });
|
|
}
|
|
}
|
|
|
|
function initSidebar() {
|
|
if (typeof window.FamilyNavGraphChart === 'undefined') {
|
|
setTimeout(initSidebar, 100);
|
|
return;
|
|
}
|
|
|
|
expandAccordion();
|
|
|
|
var container = document.getElementById('<?= $containerId ?>');
|
|
if (!container) return;
|
|
|
|
var chartEl = container.querySelector('.full-diagram-chart');
|
|
if (chartEl && chartEl.getBoundingClientRect().width > 0) {
|
|
renderChart();
|
|
return;
|
|
}
|
|
|
|
// Accordion may be animating — wait for it to finish
|
|
var accordion = container.closest('.accordion-collapse');
|
|
if (accordion) {
|
|
accordion.addEventListener('shown.bs.collapse', function handler() {
|
|
accordion.removeEventListener('shown.bs.collapse', handler);
|
|
renderChart();
|
|
});
|
|
// Already open (no animation)
|
|
if (accordion.classList.contains('show')) {
|
|
renderChart();
|
|
}
|
|
} else {
|
|
renderChart();
|
|
}
|
|
}
|
|
|
|
function renderChart() {
|
|
var chart = new window.FamilyNavGraphChart('#<?= $containerId ?>', data);
|
|
chart.render().catch(function(err) {
|
|
console.error('Family Nav Graph: render failed', err);
|
|
});
|
|
}
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', initSidebar);
|
|
} else {
|
|
initSidebar();
|
|
}
|
|
})();
|
|
</script>
|
|
<script src="<?= e($javascript_url) ?>"></script>
|