Initial commit
This commit is contained in:
Torsten Brendgen
199
README.md
Normal file
199
README.md
Normal file
@@ -0,0 +1,199 @@
|
||||
# SharePoint MegaMenu Extension
|
||||
|
||||
**Version:** 1.0.2
|
||||
**Framework:** SharePoint Framework (SPFx) 1.4.1
|
||||
**Node.js:** v8.17.0
|
||||
|
||||
Eine moderne, barrierefreie Mega-Menü-Lösung für SharePoint 2019 oder SharePoint SE als ApplicationCustomizer Extension.
|
||||
|
||||
## 🌟 Features
|
||||
|
||||
- **3-stufige Navigationshierarchie** basierend auf SharePoint Managed Metadata (Taxonomy)
|
||||
- **Responsive Design** mit automatischer Anpassung an verschiedene Bildschirmgrößen
|
||||
- **Barrierefreiheit** mit vollständiger Tastaturnavigation und Screenreader-Unterstützung
|
||||
- **Einstellungs-Panel** für Administratoren zur Konfiguration
|
||||
- **Externe CSS-Unterstützung** für individuelle Anpassungen
|
||||
- **Office UI Fabric Integration** für konsistente SharePoint-Optik
|
||||
|
||||
## 📋 Voraussetzungen
|
||||
|
||||
- SharePoint 2019 oder SharePoint SE (Subscription Edition)
|
||||
- Node.js v8.17.0 (empfohlen)
|
||||
- SharePoint Framework Development Tools (SPFx 1.4.1)
|
||||
|
||||
## 🚀 Installation & Entwicklung
|
||||
|
||||
### 1. Repository klonen und Abhängigkeiten installieren
|
||||
|
||||
```bash
|
||||
git clone <repository-url>
|
||||
cd MegaMenu
|
||||
npm install
|
||||
```
|
||||
|
||||
### 2. Entwicklungsserver starten
|
||||
|
||||
```bash
|
||||
gulp serve
|
||||
```
|
||||
|
||||
### 3. Produktionspaket erstellen
|
||||
|
||||
```bash
|
||||
gulp clean
|
||||
gulp bundle --ship
|
||||
gulp package-solution --ship
|
||||
```
|
||||
|
||||
## 📁 Projektstruktur
|
||||
|
||||
```
|
||||
src/
|
||||
├── extensions/
|
||||
│ └── megaMenu/
|
||||
│ ├── MegaMenuApplicationCustomizer.ts # Haupteinstiegspunkt
|
||||
│ ├── MegaMenuRenderer.ts # Menü-Rendering-Logik
|
||||
│ ├── MegaMenuSettings.ts # Einstellungs-Panel
|
||||
│ └── MegaMenu.css # Styling
|
||||
├── services/
|
||||
│ ├── TaxonomyNavigationService.ts # Taxonomy-Datenabfrage
|
||||
│ ├── UserCustomActionService/ # UserCustomAction-Verwaltung
|
||||
│ └── ...
|
||||
└── deployment/
|
||||
├── add-megamenu.ps1 # Installations-Script
|
||||
└── remove-megamenu.ps1 # Deinstallations-Script
|
||||
```
|
||||
|
||||
## ⚙️ Konfiguration
|
||||
|
||||
### Einstellungs-Panel (Admin-Bereich)
|
||||
|
||||
Das MegaMenu verfügt über ein Einstellungs-Panel, das über das Zahnrad-Icon (⚙️) im Menü zugänglich ist:
|
||||
|
||||
1. **Name des Navigations-Termsets**: Der Name des Managed Metadata Termsets, das als Datenquelle dient
|
||||
2. **Pfad zu zusätzlicher CSS-Datei**: Optional - URL zu einer benutzerdefinierten CSS-Datei
|
||||
|
||||
### PowerShell-Deployment
|
||||
|
||||
```powershell
|
||||
# Installation
|
||||
.\src\deployment\add-megamenu.ps1
|
||||
|
||||
# Deinstallation
|
||||
.\src\deployment\remove-megamenu.ps1
|
||||
```
|
||||
|
||||
## 🎨 Anpassungen
|
||||
|
||||
### CSS-Customization
|
||||
|
||||
Das MegaMenu kann über externe CSS-Dateien angepasst werden. Wichtige CSS-Klassen:
|
||||
|
||||
```css
|
||||
/* Haupt-Container */
|
||||
#Mega-Menu { }
|
||||
|
||||
/* Top-Level Menüpunkte */
|
||||
#Mega-Menu > ul > li > a { }
|
||||
|
||||
/* Mega-Menü Dropdown */
|
||||
.mega-menu { }
|
||||
|
||||
/* Kategorien im Dropdown */
|
||||
.mega-menu-category { }
|
||||
|
||||
/* Links in Kategorien */
|
||||
.mega-menu-category ul li a { }
|
||||
|
||||
/* Einstellungs-Panel */
|
||||
.mm-settings-panel { }
|
||||
```
|
||||
|
||||
### Accessibility Features
|
||||
|
||||
- **Skip-Links** für Screenreader
|
||||
- **ARIA-Rollen** und Labels
|
||||
- **Fokus-Management** mit sichtbaren Fokus-Indikatoren
|
||||
- **Tastaturnavigation** mit Tab/Shift+Tab/Escape
|
||||
- **High Contrast Modus** Unterstützung
|
||||
|
||||
## 🔧 Build-Befehle
|
||||
|
||||
| Befehl | Beschreibung |
|
||||
|--------|-------------|
|
||||
| `gulp serve` | Entwicklungsserver mit Live-Reload |
|
||||
| `gulp build` | Entwicklungs-Build (Debug-Modus) |
|
||||
| `gulp bundle --ship` | Produktions-Build (Optimiert) |
|
||||
| `gulp package-solution --ship` | SharePoint Package (.sppkg) erstellen |
|
||||
| `gulp clean` | Build-Artifacts löschen |
|
||||
| `gulp test` | Unit-Tests ausführen |
|
||||
|
||||
## 📦 Deployment
|
||||
|
||||
1. **Paket erstellen:**
|
||||
```bash
|
||||
gulp clean && gulp bundle --ship && gulp package-solution --ship
|
||||
```
|
||||
|
||||
2. **SharePoint App Catalog:**
|
||||
- `.sppkg` Datei aus `sharepoint/solution/` hochladen
|
||||
- App genehmigen und für alle Sites verfügbar machen
|
||||
|
||||
3. **Site-spezifische Aktivierung:**
|
||||
- PowerShell-Scripts verwenden
|
||||
|
||||
## 🐛 Troubleshooting
|
||||
|
||||
### Häufige Probleme
|
||||
|
||||
**Problem:** Menü wird nicht angezeigt
|
||||
**Lösung:** Termset-Name in den Einstellungen prüfen
|
||||
|
||||
**Problem:** CSS-Styling funktioniert nicht
|
||||
**Lösung:** Externe CSS-URL und CORS-Einstellungen überprüfen
|
||||
|
||||
**Problem:** Build-Fehler
|
||||
**Lösung:** Node.js Version prüfen (v8.17.0 empfohlen)
|
||||
|
||||
### Debug-Modus
|
||||
|
||||
```bash
|
||||
# Detaillierte Build-Ausgabe
|
||||
gulp bundle --verbose
|
||||
|
||||
# TypeScript-Fehler anzeigen
|
||||
gulp build
|
||||
```
|
||||
|
||||
## 🔄 Versionshistorie
|
||||
|
||||
### v1.0.2 (Aktuell)
|
||||
- Einstellungs-Panel implementiert
|
||||
- Fokus-Management verbessert
|
||||
- CSS-Optimierungen für SharePoint-Konsistenz
|
||||
- Barrierefreiheit-Verbesserungen
|
||||
|
||||
### v1.0.1
|
||||
- Responsive Design hinzugefügt
|
||||
- Performance-Optimierungen
|
||||
|
||||
### v1.0.0
|
||||
- Initiale Release
|
||||
- 3-stufige Navigation
|
||||
- Grundlegende Accessibility
|
||||
|
||||
## 👥 Mitwirkende
|
||||
|
||||
- Entwicklung: Matthias Glubrecht
|
||||
- Framework: SharePoint Framework (Microsoft)
|
||||
- UI: Office UI Fabric (Microsoft)
|
||||
|
||||
## 📄 Lizenz
|
||||
|
||||
tbd
|
||||
|
||||
## 🆘 Support
|
||||
|
||||
Bei Fragen oder Problemen:
|
||||
1. Issues im Repository erstellen
|
||||
2. Dokumentation und Troubleshooting-Bereich prüfen
|
||||
Reference in New Issue
Block a user