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:
52
README.md
52
README.md
@@ -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.
|
||||
|
||||
Reference in New Issue
Block a user