feat: Add support for flyout menu mode in MegaMenu
- Introduced `MegaMenuMode` type and `normalizeMegaMenuMode` function to handle menu modes. - Updated `MegaMenuApplicationCustomizer` to accept `menuMode` property. - Enhanced `MegaMenuRenderer` to render flyout menus based on the selected mode. - Created new HTML previews for both flyout and mega menu modes. - Removed unused mock services and user custom action service interfaces.
This commit is contained in:
Torsten Brendgen
@@ -1,216 +1,62 @@
|
||||
# MegaMenu für klassische SharePoint-Seiten
|
||||
|
||||
Diese Dateien ermöglichen die Verwendung des MegaMenus auf klassischen SharePoint-Seiten (2019/SE) ohne SPFx Framework.
|
||||
Die Classic-Variante verwendet dieselbe Site-Collection-Konfiguration wie der moderne Application Customizer. Sie unterstützt `megaMenu` und `flyout`, wird aber unabhängig von SPFx über ScriptLink geladen.
|
||||
|
||||
## 📁 Dateien
|
||||
## Dateien
|
||||
|
||||
- `megamenu-classic.js` - Hauptlogik für klassische Seiten
|
||||
- `megamenu-classic.css` - Styling für klassische Seiten
|
||||
- `classic-deployment.md` - Diese Dokumentation
|
||||
- `megamenu-classic.css`
|
||||
- `megamenu-services-standalone.js`
|
||||
- `megamenu-classic.js`
|
||||
|
||||
## 🚀 Installation
|
||||
Mit `build-classic.ps1` werden die Dateien nach `classic/dist` kopiert.
|
||||
|
||||
### Option 1: Master Page (empfohlen)
|
||||
## Konfiguration
|
||||
|
||||
1. **Dateien hochladen:**
|
||||
```
|
||||
/SiteAssets/megamenu/megamenu-classic.js
|
||||
/SiteAssets/megamenu/megamenu-classic.css
|
||||
```
|
||||
Die Classic-Variante liest die `ClientSideComponentProperties` der zentralen MegaMenu-Site-Action:
|
||||
|
||||
2. **Master Page bearbeiten:**
|
||||
```html
|
||||
<!-- In den <head> Bereich -->
|
||||
<link rel="stylesheet" type="text/css" href="/SiteAssets/megamenu/megamenu-classic.css" />
|
||||
|
||||
<!-- Vor dem schließenden </body> Tag -->
|
||||
<script type="text/javascript" src="/SiteAssets/megamenu/megamenu-classic.js"></script>
|
||||
```
|
||||
|
||||
### Option 2: ScriptLink über PowerShell
|
||||
|
||||
```powershell
|
||||
# CSS hinzufügen
|
||||
$web = Get-SPWeb "http://your-site-url"
|
||||
$web.AlternateCSSUrl = "/SiteAssets/megamenu/megamenu-classic.css"
|
||||
$web.Update()
|
||||
|
||||
# JavaScript als Custom Action hinzufügen
|
||||
$customAction = $web.UserCustomActions.Add()
|
||||
$customAction.Location = "ScriptLink"
|
||||
$customAction.ScriptSrc = "/SiteAssets/megamenu/megamenu-classic.js"
|
||||
$customAction.Sequence = 1000
|
||||
$customAction.Update()
|
||||
$web.Update()
|
||||
```json
|
||||
{
|
||||
"termSetId": "7948e6f9-7af4-431e-b6fe-328122f2746c",
|
||||
"termSetName": "Global Navigation",
|
||||
"cacheMinutes": 15,
|
||||
"menuMode": "megaMenu",
|
||||
"debug": false
|
||||
}
|
||||
```
|
||||
|
||||
### Option 3: Content Editor Web Part
|
||||
`menuMode` erlaubt `megaMenu` oder `flyout`. `termSetId` hat Vorrang vor `termSetName`.
|
||||
|
||||
## Einbindung
|
||||
|
||||
Die drei Dateien beispielsweise nach `/SiteAssets/megamenu/` hochladen und in dieser Reihenfolge laden:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" type="text/css" href="/SiteAssets/megamenu/megamenu-classic.css" />
|
||||
<script type="text/javascript" src="/SiteAssets/megamenu/megamenu-classic.js"></script>
|
||||
<link rel="stylesheet" href="/SiteAssets/megamenu/megamenu-classic.css" />
|
||||
<script src="/SiteAssets/megamenu/megamenu-services-standalone.js"></script>
|
||||
<script src="/SiteAssets/megamenu/megamenu-classic.js"></script>
|
||||
```
|
||||
|
||||
## ⚙️ Konfiguration
|
||||
Die Einbindung kann über die Masterpage oder eine Site-scoped ScriptLink-CustomAction erfolgen. Der moderne SPFx Application Customizer wird auf klassischen Seiten nicht ausgeführt.
|
||||
|
||||
### Basis-Konfiguration
|
||||
## Optionaler Container
|
||||
|
||||
Vor dem Laden kann ein anderer Zielcontainer gesetzt werden:
|
||||
|
||||
```html
|
||||
<script type="text/javascript">
|
||||
// Konfiguration vor dem Laden des Scripts setzen
|
||||
window.MegaMenuConfig = {
|
||||
termSetName: 'Navigation', // Name des Taxonomy Term Sets
|
||||
cssUrl: '', // Optional: Externe CSS-Datei
|
||||
containerId: 's4-titlerow', // SharePoint Container ID
|
||||
debug: true // Debug-Modus aktivieren
|
||||
};
|
||||
<script>
|
||||
window.MegaMenuConfig = {
|
||||
containerId: 's4-titlerow',
|
||||
debug: true
|
||||
};
|
||||
</script>
|
||||
<script type="text/javascript" src="/SiteAssets/megamenu/megamenu-classic.js"></script>
|
||||
```
|
||||
|
||||
### Container IDs für verschiedene SharePoint-Versionen
|
||||
|
||||
| SharePoint Version | Container ID | Beschreibung |
|
||||
|-------------------|--------------|-------------|
|
||||
| 2019 | `s4-titlerow` | Standard Titel-Bereich |
|
||||
| SE | `suiteBarTop` | Suite Bar Bereich |
|
||||
| Custom | `custom-menu-container` | Eigener Container |
|
||||
|
||||
### Term Set Konfiguration
|
||||
|
||||
Das MegaMenu liest die Navigation aus einem Managed Metadata Term Set:
|
||||
|
||||
```
|
||||
Navigation (Term Set)
|
||||
├── Produkte (Level 1)
|
||||
│ ├── Software (Level 2)
|
||||
│ │ ├── Office 365 (Level 3) → URL
|
||||
│ │ └── SharePoint (Level 3) → URL
|
||||
│ └── Hardware (Level 2)
|
||||
│ ├── Laptops (Level 3) → URL
|
||||
│ └── Server (Level 3) → URL
|
||||
└── Services (Level 1)
|
||||
└── Consulting (Level 2)
|
||||
└── SharePoint Beratung (Level 3) → URL
|
||||
```
|
||||
|
||||
## 🎨 Anpassungen
|
||||
|
||||
### CSS Customization
|
||||
|
||||
```css
|
||||
/* Eigene Farben */
|
||||
#Mega-Menu-Classic {
|
||||
background: #your-color;
|
||||
}
|
||||
|
||||
#Mega-Menu > ul > li > span[role="menuitem"] {
|
||||
color: #your-text-color;
|
||||
}
|
||||
|
||||
/* Eigene Schriftarten */
|
||||
#Mega-Menu {
|
||||
font-family: 'Your Font', Arial, sans-serif;
|
||||
}
|
||||
```
|
||||
|
||||
### JavaScript Events
|
||||
## Diagnose
|
||||
|
||||
```javascript
|
||||
// Nach der Initialisierung eigene Logik hinzufügen
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Warten bis MegaMenu geladen ist
|
||||
setTimeout(function() {
|
||||
if (window.MegaMenuClassic) {
|
||||
console.log('MegaMenu ist bereit!');
|
||||
// Eigene Anpassungen hier...
|
||||
}
|
||||
}, 1000);
|
||||
});
|
||||
typeof window.MegaMenuServices
|
||||
typeof window.MegaMenuClassic
|
||||
window.MegaMenuClassic.reload()
|
||||
```
|
||||
|
||||
## 🔧 Erweiterte Konfiguration
|
||||
|
||||
### Custom URL Mapping
|
||||
|
||||
Die URLs für die Navigation-Links können angepasst werden:
|
||||
|
||||
```javascript
|
||||
// Überschreibe die getTermUrl Funktion
|
||||
window.MegaMenuGetTermUrl = function(term) {
|
||||
var termName = term.get_name();
|
||||
// Eigene URL-Logik
|
||||
return '/custom-pages/' + termName.toLowerCase() + '.aspx';
|
||||
};
|
||||
```
|
||||
|
||||
### Mehrsprachigkeit
|
||||
|
||||
```javascript
|
||||
window.MegaMenuConfig = {
|
||||
termSetName: _spPageContextInfo.currentUICultureName === 'de-DE' ? 'Navigation_DE' : 'Navigation_EN',
|
||||
// ... andere Konfigurationen
|
||||
};
|
||||
```
|
||||
|
||||
## 🐛 Troubleshooting
|
||||
|
||||
### Häufige Probleme
|
||||
|
||||
**Problem:** Menü wird nicht angezeigt
|
||||
**Lösung:**
|
||||
- Browser-Konsole auf Fehler prüfen
|
||||
- Taxonomy Term Set Name überprüfen
|
||||
- Berechtigungen für Term Store prüfen
|
||||
|
||||
**Problem:** JavaScript-Fehler "SP is not defined"
|
||||
**Lösung:**
|
||||
- Script erst nach SharePoint-Bibliotheken laden
|
||||
- `SP.SOD.executeFunc` verwenden
|
||||
|
||||
**Problem:** Styling funktioniert nicht
|
||||
**Lösung:**
|
||||
- CSS-Pfad überprüfen
|
||||
- Cache leeren
|
||||
- CSS-Spezifität erhöhen
|
||||
|
||||
### Debug-Modus
|
||||
|
||||
```javascript
|
||||
window.MegaMenuConfig = {
|
||||
debug: true, // Aktiviert Console-Logging
|
||||
// ... andere Optionen
|
||||
};
|
||||
```
|
||||
|
||||
## 📝 Browser-Unterstützung
|
||||
|
||||
- Internet Explorer 11+
|
||||
- Microsoft Edge (alle Versionen)
|
||||
- Chrome 60+
|
||||
- Firefox 55+
|
||||
- Safari 12+
|
||||
|
||||
## ⚠️ Wichtige Hinweise
|
||||
|
||||
1. **Berechtigungen:** Benutzer benötigen Leserechte auf den Term Store
|
||||
2. **Performance:** Bei großen Term Sets kann das Laden länger dauern
|
||||
3. **Caching:** SharePoint cached Taxonomy-Daten - Änderungen können verzögert sichtbar werden
|
||||
4. **Responsive:** Das Menü ist für mobile Geräte optimiert
|
||||
|
||||
## 🔄 Migration von SPFx Version
|
||||
|
||||
Falls Sie von der SPFx-Version migrieren:
|
||||
|
||||
1. SPFx ApplicationCustomizer deaktivieren
|
||||
2. Klassische Dateien hochladen und einbinden
|
||||
3. Konfiguration anpassen (gleiche Term Sets verwendbar)
|
||||
4. Testen und CSS bei Bedarf anpassen
|
||||
|
||||
## 📞 Support
|
||||
|
||||
Bei Problemen:
|
||||
1. Debug-Modus aktivieren
|
||||
2. Browser-Konsole prüfen
|
||||
3. Term Set Struktur validieren
|
||||
4. Dateipfade und Berechtigungen überprüfen
|
||||
Benutzer benötigen Leserechte auf den verwendeten Managed-Metadata-Termstore.
|
||||
|
||||
Reference in New Issue
Block a user