feat: Enhance MegaMenu with localization, caching, and new properties

- Added localization support for loading states, empty navigation, and submenu actions in both German and English.
- Introduced new properties in IMenuItem for description, openInNewWindow, and external links.
- Updated SPTermStorePickerService to handle cache versioning and language-specific caching.
- Implemented a new MegaMenuCore service for handling term properties, cache management, and navigation URL resolution.
- Refactored TaxonomyNavigationService to build menu hierarchy and filter hidden terms.
- Added automated tests for MegaMenu core functionalities and static asset validation.
- Removed unused ItemDictionary service.
- Created a comprehensive ToDo document outlining the implementation status and future tasks.
This commit is contained in:
Torsten Brendgen
2026-07-20 21:34:24 +02:00
parent bc61166267
commit 50b85468f1
30 changed files with 1394 additions and 294 deletions

View File

@@ -4,7 +4,7 @@ Zentrale, barrierearme Portalnavigation aus SharePoint Managed Metadata für Sha
| Eigenschaft | Wert |
|---|---|
| Version | 2.1.0 |
| Version | 2.2.0 |
| SharePoint Framework | 1.4.1 |
| Node.js für den Build | 8.17.0 |
| Moderne Seiten | SPFx Application Customizer |
@@ -57,6 +57,7 @@ Das SPFx-Paket verwendet `skipFeatureDeployment: true`. Es wird im App Catalog z
"termSetId": "7948e6f9-7af4-431e-b6fe-328122f2746c",
"termSetName": "Global Navigation",
"cacheMinutes": 15,
"cacheVersion": "1",
"menuMode": "megaMenu",
"debug": false
}
@@ -67,6 +68,7 @@ Das SPFx-Paket verwendet `skipFeatureDeployment: true`. Es wird im App Catalog z
| `termSetId` | String | leer | GUID des Termsets; hat Vorrang vor dem Namen |
| `termSetName` | String | leer | Fallback für bestehende Konfigurationen |
| `cacheMinutes` | Number | `15` | Cachezeit von 1 bis 1440 Minuten |
| `cacheVersion` | String | `1` | Frei wählbare Version zur sofortigen Invalidierung vorhandener Browser-Caches |
| `menuMode` | String | `megaMenu` | `megaMenu` oder `flyout` |
| `debug` | Boolean | `false` | ausführliche Browser-Konsolenausgaben |
@@ -78,6 +80,18 @@ Das SPFx-Paket verwendet `skipFeatureDeployment: true`. Es wird im App Catalog z
`"menuMode": "flyout"` zeigt die zweite Ebene als kompaktes Dropdown. Die dritte Ebene öffnet sich seitlich als strukturelles Flyout.
## Lokale Term-Eigenschaften
Die folgenden Eigenschaften werden im Term Store als lokale benutzerdefinierte Eigenschaften am jeweiligen Term gepflegt:
| Eigenschaft | Beispiel | Wirkung |
|---|---|---|
| `MegaMenu.Hidden` | `true` | Term und darunterliegender Navigationszweig werden nicht angezeigt |
| `MegaMenu.OpenInNewWindow` | `true` | Ziel wird sicher in einem neuen Browserfenster geöffnet |
| `MegaMenu.Description` | `Anträge und Vorlagen` | optionale Beschreibung einer Kategorie im Mega-Menu-Modus |
Zusätzlich werden die SharePoint-Navigationseigenschaften `_Sys_Nav_SimpleLinkUrl`, `_Sys_Nav_TargetUrl` und `_Sys_Nav_HoverText` ausgewertet. Unsichere URL-Protokolle werden verworfen.
## Build
```powershell
@@ -90,6 +104,8 @@ npm run package
- das SPFx-Paket für moderne Seiten
- das Classic-Paket unter `classic/dist/`
Vor dem Packaging werden automatisch die Kernlogik-, Classic-Syntax- und statischen Asset-Tests ausgeführt. Bei einem Fehler wird kein Paket erzeugt.
Nur die Classic-Dateien neu erzeugen:
```powershell
@@ -125,6 +141,7 @@ Beispiel für das Mega Menu:
-TermSetId '7948e6f9-7af4-431e-b6fe-328122f2746c' `
-TermSetName 'Global Navigation' `
-CacheMinutes 15 `
-CacheVersion '1' `
-MenuMode megaMenu
```
@@ -162,6 +179,29 @@ classic/dist/
Die Classic-Runtime liest dieselben `ClientSideComponentProperties` der zentralen Site-Collection-Action und unterstützt ebenfalls beide Menümodi. Die Installationsdetails stehen in [classic/classic-deployment.md](classic/classic-deployment.md).
## Mobile Bedienung und Barrierefreiheit
- Unter 768 Pixeln wird die Navigation als Hamburger-Menü mit Accordion-Unterebenen dargestellt.
- Hover bleibt auf Desktop-Geräten als Komfortfunktion erhalten.
- Links und Schaltflächen zum Öffnen eines Untermenüs sind getrennt.
- Touch, Klick und Tastatur werden gleichwertig unterstützt.
- Escape schließt das aktive Menü; Links/Rechts wechselt zwischen Hauptpunkten.
- Fokusmarkierungen, Hochkontrast und reduzierte Bewegung werden unterstützt.
## Cache und Mehrsprachigkeit
Der Session-Cache ist nach Site Collection, Termset, SharePoint-Oberflächensprache, Cache-Schema und `cacheVersion` getrennt. Nach einem temporären Taxonomy-Fehler kann der letzte abgelaufene, aber strukturell gültige Eintrag als Fallback verwendet werden. Eine geänderte `cacheVersion` erzwingt beim nächsten Laden einen neuen Cache.
Term-Labels sowie sichtbare Status- und ARIA-Texte werden anhand der aktuellen SharePoint-Sprache auf Deutsch oder Englisch ausgegeben.
## Automatisierte Tests
```powershell
npm test
```
Die Tests prüfen Term-Eigenschaften, URL-Sicherheit, externe Links, sprachabhängige Labels, Cache-Schlüssel, Hierarchieaufbau und Sortierung.
## Styling
Das moderne Styling liegt in:
@@ -232,6 +272,16 @@ MegaMenu/
## Versionshistorie
### 2.2.0
- mobiles Hamburger-/Accordion-Menü für Modern und Classic
- getrennte Link- und Untermenü-Schaltflächen für Touch und Tastatur
- sichere URL-Prüfung und Unterstützung externer Links
- lokale Term-Eigenschaften für Sichtbarkeit, neues Fenster und Beschreibung
- sprachabhängige Term-Labels, Status- und ARIA-Texte
- versionierter Cache pro Site Collection und Sprache mit Stale-Fallback
- automatisierte Kernlogiktests
### 2.1.0
- SharePoint-ähnliches, helles Navigationsdesign.