Athemis/ds4
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

feat: implement clean Foundry V13 compliant tab system

Browse source 
- Remove custom tab implementation in favor of official ApplicationV2 tabs
- Implement ApplicationTab typedef structure for Actor and Item sheets
- Add memory-safe event listener management with proper cleanup
- Update all sheet templates to use standard Foundry tab structure
- Add template safety checks to prevent undefined access errors
- Optimize performance with DOM updates instead of full re-renders
- Maintain backward CSS compatibility during transition
- Add dynamic tab configuration based on item types

Key improvements:
- ~200 lines of custom tab code removed
- Memory leak prevention with proper event cleanup
- Performance optimization (no re-render on tab switch)
- Standards-compliant with Foundry V13 ApplicationV2 API
- Consistent implementation across Actor and Item sheets
- Template safety with Handlebars guards
- Dynamic icon and localization support

All 31 modified files now use the official Foundry VTT v13 tab system.
This commit is contained in:
Alexander Minges 2025-07-29 19:03:58 +02:00
parent 2c4dbb2620
commit 40e14d1196
Signed by: Athemis
GPG key ID: 31FBDEF92DDB162B
31 changed files with 653 additions and 379 deletions
Download patch file Download diff file Expand all files Collapse all files

37
templates/sheets/item/armor-sheet.hbs
View file

@ -9,28 +9,35 @@ SPDX-License-Identifier: MIT
{{> systems/ds4/templates/sheets/item/components/item-header.hbs}}
{{!-- Sheet Tab Navigation --}}
<nav class="ds4-sheet-tab-nav tabs" data-group="primary">
<a class="ds4-sheet-tab-nav__item" data-action="changeTab" data-tab="description">{{localize 'DS4.HeadingDescription'}}</a>
<a class="ds4-sheet-tab-nav__item" data-action="changeTab" data-tab="properties">{{localize 'DS4.HeadingProperties'}}</a>
<a class="ds4-sheet-tab-nav__item" data-action="changeTab" data-tab="effects">{{localize 'DS4.HeadingEffects'}}</a>
<nav class="tabs" data-group="primary">
{{#each tabs}}
<a class="item {{cssClass}}" data-tab="{{id}}" data-group="{{group}}">
{{#if icon}}<i class="{{icon}}"></i>{{/if}}
{{label}}
</a>
{{/each}}
</nav>
{{!-- Sheet Body --}}
<section class="ds4-sheet-body">
<section class="sheet-body">
{{!-- Description Tab --}}
{{> systems/ds4/templates/sheets/item/tabs/description.hbs}}
<div class="tab {{#if tabs.description}}{{tabs.description.cssClass}}{{/if}}" data-tab="description" data-group="primary">
{{> systems/ds4/templates/sheets/item/tabs/description.hbs}}
</div>
{{!-- Properties Tab --}}
{{#> systems/ds4/templates/sheets/item/tabs/properties.hbs}}
{{> systems/ds4/templates/sheets/item/components/properties/armor.hbs}}
{{> systems/ds4/templates/sheets/item/components/properties/protective.hbs}}
{{#if isOwned}}
{{> systems/ds4/templates/sheets/item/components/properties/equipable.hbs}}
{{/if}}
{{> systems/ds4/templates/sheets/item/components/properties/physical.hbs}}
{{/systems/ds4/templates/sheets/item/tabs/properties.hbs}}
<div class="tab {{#if tabs.properties}}{{tabs.properties.cssClass}}{{/if}}" data-tab="properties" data-group="primary">
{{> systems/ds4/templates/sheets/item/components/properties/armor.hbs}}
{{> systems/ds4/templates/sheets/item/components/properties/protective.hbs}}
{{#if isOwned}}
{{> systems/ds4/templates/sheets/item/components/properties/equipable.hbs}}
{{/if}}
{{> systems/ds4/templates/sheets/item/components/properties/physical.hbs}}
</div>
{{!-- Effects Tab --}}
{{> systems/ds4/templates/sheets/item/tabs/effects.hbs}}
<div class="tab {{#if tabs.effects}}{{tabs.effects.cssClass}}{{/if}}" data-tab="effects" data-group="primary">
{{> systems/ds4/templates/sheets/item/tabs/effects.hbs}}
</div>
</section>
</form>