Add homepage block, reactive controls, i18n, and full-width layout

- Implement ModuleBlockInterface for tree/user homepage embedding
  with configurable individual and generation settings
- Make generation sliders reactive (auto-navigate on change)
- Persist generation counts when clicking between persons
- Expand chart to full viewport width and remaining height
- Add German and Dutch translations for all custom strings
- Pass translated labels to JS bio card tooltip via window.fullDiagramI18n
- Use webtrees core translation keys where available
- Increase default generations to 4, remove show siblings checkbox
- Expose Chart class globally for block instantiation
This commit is contained in:
2026-03-14 19:53:12 +01:00
parent 273e398431
commit 04ff9f4711
10 changed files with 485 additions and 73 deletions

View File

@@ -2,6 +2,7 @@
declare(strict_types=1);
use Fisharebest\Webtrees\I18N;
use Fisharebest\Webtrees\Individual;
use Fisharebest\Webtrees\Module\ModuleChartInterface;
use Fisharebest\Webtrees\Tree;
@@ -13,17 +14,50 @@ use Fisharebest\Webtrees\Tree;
* @var string $tree_data
* @var string $javascript_url
* @var string $stylesheet_url
* @var int $ancestor_generations
* @var int $descendant_generations
* @var bool $show_siblings
*/
?>
<link rel="stylesheet" href="<?= e($stylesheet_url) ?>">
<div id="full-diagram-container" class="full-diagram-container wt-chart" data-tree-name="<?= e($tree->name()) ?>" style="width:100%;height:700px;">
<div id="full-diagram-container" class="full-diagram-container wt-chart" data-tree-name="<?= e($tree->name()) ?>">
<div class="full-diagram-chart"></div>
</div>
<script>
(function() {
var el = document.getElementById('full-diagram-container');
function resize() {
var rect = el.getBoundingClientRect();
el.style.height = Math.max(400, window.innerHeight - rect.top - 16) + 'px';
}
resize();
window.addEventListener('resize', resize);
})();
</script>
<script>
window.fullDiagramI18n = <?= json_encode([
'Born' => I18N::translate('Born'),
'Baptism' => I18N::translate('Baptism'),
'Marriage' => I18N::translate('Marriage'),
'Died' => I18N::translate('Died'),
'Occupation' => I18N::translate('Occupation'),
'Residence' => I18N::translate('Residence'),
'View profile' => I18N::translate('View profile'),
'Died at age %s' => I18N::translate('Died at age %s', '__AGE__'),
'Deceased' => I18N::translate('Deceased'),
'Age ~%s' => I18N::translate('Age ~%s', '__AGE__'),
], JSON_THROW_ON_ERROR) ?>;
window.fullDiagramData = <?= $tree_data ?>;
window.fullDiagramBaseUrl = <?= json_encode(route($module::ROUTE_NAME, ['tree' => $tree->name(), 'xref' => '__XREF__']), JSON_THROW_ON_ERROR) ?>;
window.fullDiagramBaseUrl = <?= json_encode(route($module::ROUTE_NAME, [
'tree' => $tree->name(),
'xref' => '__XREF__',
'ancestor_generations' => $ancestor_generations,
'descendant_generations' => $descendant_generations,
'show_siblings' => $show_siblings ? '1' : '0',
]), JSON_THROW_ON_ERROR) ?>;
</script>
<script src="<?= e($javascript_url) ?>"></script>