diff --git a/README.md b/README.md index a42fa9b..87598eb 100644 --- a/README.md +++ b/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. diff --git a/ToDo.md b/ToDo.md new file mode 100644 index 0000000..a1f7f50 --- /dev/null +++ b/ToDo.md @@ -0,0 +1,59 @@ +# MegaMenu – Arbeitsplan Version 2.2 + +Status: Implementierung abgeschlossen; Ship-Build auf der vorgesehenen Node-8-Buildumgebung ausstehend + +## Funktionsumfang + +- [x] Mobile Navigation als Hamburger-Menü mit aufklappbaren Unterebenen umsetzen. +- [x] Hover als Komfortfunktion beibehalten; Bedienung per Klick, Touch und Tastatur gleichwertig unterstützen. +- [x] Für Menüpunkte mit Ziel und Unterpunkten eine getrennte Öffnen-Schaltfläche anbieten. +- [x] Navigations-URLs validieren und unsichere Protokolle blockieren. +- [x] Externe Links und `MegaMenu.OpenInNewWindow` sicher unterstützen. +- [x] Lade-, Leer- und Fehlerzustände verständlich und barrierearm darstellen. + +## Lokale Term-Eigenschaften + +- [x] `MegaMenu.Hidden` zum gezielten Ausblenden eines Terms unterstützen. +- [x] `MegaMenu.OpenInNewWindow` für ein neues Browserfenster unterstützen. +- [x] `MegaMenu.Description` als optionale Linkbeschreibung unterstützen. +- [x] Eigenschaften in Modern und Classic identisch auswerten. + +Die Eigenschaften werden im Term Store als lokale benutzerdefinierte Eigenschaften am jeweiligen Term gepflegt. Styling bleibt Aufgabe der Solution Custom Branding. + +## Cache + +- [x] Cache-Schlüssel um Site Collection, Sprache und Schemaversion erweitern. +- [x] Konfigurierbare `cacheVersion` zur administrativen Invalidierung ergänzen. +- [x] Abgelaufene und ungültige Cache-Einträge sicher entfernen. +- [x] Bei einem temporären Taxonomy-Fehler auf den letzten vorhandenen Cache zurückfallen. + +## Mehrsprachigkeit + +- [x] Sämtliche sichtbaren Status- und ARIA-Texte lokalisieren. +- [x] Bevorzugtes Term-Label anhand der aktuellen SharePoint-Sprache verwenden. +- [x] Cache nach Sprache trennen. +- [x] Deutsche und englische Ressourcen pflegen. + +## Barrierefreiheit + +- [x] Semantische Schaltflächen für das Öffnen von Untermenüs verwenden. +- [x] Vollständige Tastaturbedienung inklusive Pfeiltasten und Escape sicherstellen. +- [x] Fokus beim Öffnen und Schließen nachvollziehbar führen. +- [x] Mobile Accordion-Zustände über `aria-expanded` kommunizieren. +- [x] Fokusdarstellung, Hochkontrast und reduzierte Bewegung berücksichtigen. + +## Qualitätssicherung + +- [x] Automatisierte Tests für URL-Validierung und externe Links ergänzen. +- [x] Automatisierte Tests für lokale Term-Eigenschaften ergänzen. +- [x] Automatisierte Tests für Cache-Schlüssel und Cache-Verhalten ergänzen. +- [x] Automatisierte Tests für Hierarchie, Sortierung und aktive URLs ergänzen. +- [x] TypeScript-, Classic-Syntax-, Classic-Build- und statische Asset-Prüfungen ausführen. +- [ ] `npm run package` mit Node.js 8.17.0 auf der vorgesehenen Buildumgebung ausführen. + +Der lokale SPFx-Gulp-Build wurde mit Node.js 24 gestartet und erwartungsgemäß durch die alte Gulp-3-Abhängigkeit mit `primordials is not defined` beendet. Das ist kein TypeScript- oder Projektfehler; SPFx 1.4.1 benötigt für diesen Schritt Node.js 8.17.0. + +## Nicht Bestandteil dieses Durchlaufs + +- [ ] PortalSettings in Version 3 als SPFx-Webpart neu aufbauen. +- [ ] MegaMenu-Diagnose und Live-Vorschau in PortalSettings integrieren. diff --git a/classic/classic-deployment.md b/classic/classic-deployment.md index 8e85530..5015d32 100644 --- a/classic/classic-deployment.md +++ b/classic/classic-deployment.md @@ -19,6 +19,7 @@ Die Classic-Variante liest die `ClientSideComponentProperties` der zentralen Meg "termSetId": "7948e6f9-7af4-431e-b6fe-328122f2746c", "termSetName": "Global Navigation", "cacheMinutes": 15, + "cacheVersion": "1", "menuMode": "megaMenu", "debug": false } @@ -26,6 +27,8 @@ Die Classic-Variante liest die `ClientSideComponentProperties` der zentralen Meg `menuMode` erlaubt `megaMenu` oder `flyout`. `termSetId` hat Vorrang vor `termSetName`. +Die lokalen benutzerdefinierten Term-Eigenschaften `MegaMenu.Hidden`, `MegaMenu.OpenInNewWindow` und `MegaMenu.Description` werden wie in der modernen Variante ausgewertet. Der Cache ist nach Site Collection, Sprache und `cacheVersion` getrennt. + ## Einbindung Die drei Dateien beispielsweise nach `/SiteAssets/megamenu/` hochladen und in dieser Reihenfolge laden: diff --git a/classic/megamenu-classic.css b/classic/megamenu-classic.css index 532792e..6729724 100644 --- a/classic/megamenu-classic.css +++ b/classic/megamenu-classic.css @@ -1,4 +1,4 @@ -/* SharePoint MegaMenu 2.1.0 - Classic pages */ +/* SharePoint MegaMenu 2.2.0 - Classic pages */ :root { --megaMenuBarHeight: 44px; --megaMenuContentWidth: 1200px; @@ -28,6 +28,17 @@ color: #323130; } +.mega-menu-status { + box-sizing: border-box; + padding: 10px 24px; + border-bottom: 1px solid #edebe9; + background: #f3f9fd; + color: #323130; + font-size: 13px; +} + +.mega-menu-mobile-toggle { display: none; } + .mega-menu-top-level { display: flex; align-items: stretch; @@ -71,19 +82,38 @@ outline: none; } -.menu-item-text[aria-haspopup="true"]::after { +.menu-item-toggle { + position: relative; + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + width: 32px; + min-height: var(--megaMenuBarHeight); + margin: 0 8px 0 -10px; + padding: 0; + border: 0; + background: transparent; + color: #323130; + cursor: pointer; +} + +.menu-item-toggle > span::after { content: ""; + display: block; width: 6px; height: 6px; - margin: -3px 0 0 10px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); } +.menu-item-toggle[aria-expanded="true"] > span::after { transform: rotate(225deg); } + .menu-item-link:hover, .menu-item-text:hover, -.menu-item-text[aria-expanded="true"] { +.menu-item-toggle:hover, +.menu-item-toggle[aria-expanded="true"] { background: #f3f2f1; color: #323130; text-decoration: none; @@ -91,6 +121,8 @@ .menu-item-link:focus, .menu-item-text:focus, +.menu-item-toggle:focus, +.mega-menu-mobile-toggle:focus, .mega-menu-category a:focus, .flyout-link:focus { outline: 2px solid #0078d4; @@ -132,6 +164,13 @@ padding-bottom: 8px; } +.mega-menu-description { + margin: -4px 0 12px; + color: #605e5c; + font-size: 12px; + line-height: 18px; +} + .mega-menu-category h3 { margin: 0 0 10px; padding: 0 0 8px; @@ -225,19 +264,34 @@ color: #323130; } -.flyout-link-has-children::after { - content: ""; +.flyout-toggle { position: absolute; - top: 50%; - right: 18px; + top: 0; + right: 0; + display: flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + padding: 0; + border: 0; + background: transparent; + color: #323130; + cursor: pointer; +} + +.flyout-toggle > span::after { + content: ""; + display: block; width: 6px; height: 6px; - margin-top: -4px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); } +.flyout-toggle:focus { outline: 2px solid #0078d4; outline-offset: -2px; } + .flyout-level-3 { position: absolute; top: -9px; @@ -250,7 +304,8 @@ } .flyout-item:hover > .flyout-level-3, -.flyout-item:focus-within > .flyout-level-3 { +.flyout-item:focus-within > .flyout-level-3, +.flyout-item.is-open > .flyout-level-3 { display: block; } @@ -267,9 +322,61 @@ } @media (max-width: 767px) { + .mega-menu-mobile-toggle { + display: flex; + align-items: center; + width: 100%; + min-height: var(--megaMenuBarHeight); + padding: 0 16px; + border: 0; + background: #fff; + color: #323130; + cursor: pointer; + font: inherit; + font-weight: 600; + } + + .mega-menu-mobile-icon, + .mega-menu-mobile-icon::before, + .mega-menu-mobile-icon::after { + display: block; + width: 18px; + height: 2px; + background: currentColor; + } + + .mega-menu-mobile-icon { position: relative; margin-right: 12px; } + .mega-menu-mobile-icon::before, + .mega-menu-mobile-icon::after { content: ""; position: absolute; left: 0; } + .mega-menu-mobile-icon::before { top: -6px; } + .mega-menu-mobile-icon::after { top: 6px; } + .mega-menu-top-level { - flex-wrap: wrap; - padding: 0 8px; + display: none; + flex-direction: column; + padding: 0; + border-top: 1px solid #edebe9; + } + + .mega-menu-main.is-mobile-open .mega-menu-top-level { display: flex; } + + .mega-menu-top-item, + .mega-menu-mode-flyout .mega-menu-top-item { + position: relative; + display: grid; + grid-template-columns: minmax(0, 1fr) 44px; + border-bottom: 1px solid #edebe9; + } + + .menu-item-toggle { width: 44px; margin: 0; border-left: 1px solid #edebe9; } + + .mega-menu { + position: static; + grid-column: 1 / -1; + width: 100%; + border-right: 0; + border-left: 0; + box-shadow: none; } .mega-menu-grid { @@ -279,12 +386,14 @@ .flyout-level-3 { position: static; - display: block; + display: none; width: 100%; border: 0; box-shadow: none; padding-left: 16px; } + + .flyout-item.is-open > .flyout-level-3 { display: block; } } @media print { diff --git a/classic/megamenu-classic.js b/classic/megamenu-classic.js index 4d7e5af..d3ee66e 100644 --- a/classic/megamenu-classic.js +++ b/classic/megamenu-classic.js @@ -1,6 +1,6 @@ /** * SharePoint MegaMenu for Classic Pages - * Version: 2.1.0 + * Version: 2.2.0 * * This version uses standalone services that replicate the SPFx logic * without requiring the SharePoint Framework. @@ -25,6 +25,41 @@ config.containerId = config.containerId || 's4-titlerow'; config.debug = config.debug === true; + function getLanguageLcid() { + return Number(window._spPageContextInfo && _spPageContextInfo.currentLanguage) || 1033; + } + + function getStrings() { + return getLanguageLcid() === 1031 ? { + navigationLabel: 'Hauptnavigation', openNavigation: 'Hauptnavigation öffnen', closeNavigation: 'Hauptnavigation schließen', + openSubmenu: 'Untermenü öffnen für', closeSubmenu: 'Untermenü schließen für', submenuLabel: 'Untermenü', + externalLink: 'externer Link', loading: 'Navigation wird geladen…', missing: 'Die Navigation ist nicht konfiguriert.', + empty: 'Die Navigation enthält keine sichtbaren Einträge.', error: 'Die Navigation konnte nicht geladen werden.' + } : { + navigationLabel: 'Main navigation', openNavigation: 'Open main navigation', closeNavigation: 'Close main navigation', + openSubmenu: 'Open submenu for', closeSubmenu: 'Close submenu for', submenuLabel: 'submenu', + externalLink: 'external link', loading: 'Loading navigation…', missing: 'Navigation is not configured.', + empty: 'The navigation does not contain any visible entries.', error: 'Navigation could not be loaded.' + }; + } + + function showStatus(message) { + var existing = document.querySelector('.megamenu-classic-container'); + var container = existing || document.createElement('div'); + container.className = 'megamenu-classic-container'; + container.innerHTML = ''; + var status = document.createElement('div'); + status.className = 'mega-menu-status'; + status.setAttribute('role', 'status'); + status.textContent = message; + container.appendChild(status); + if (!existing) { + var anchor = document.getElementById(config.containerId) || document.body.firstChild; + anchor.parentNode.insertBefore(container, anchor.nextSibling); + } + return container; + } + function log(message, data) { if (config.debug && console && console.log) { console.log('[MegaMenu Classic] ' + message, data || ''); @@ -94,16 +129,16 @@ callback(props); } catch (e) { log('Error parsing UserCustomAction properties: ' + e.message); - callback({ termSetName: 'Navigation', menuMode: 'megaMenu', debug: false }); + callback({}); } } else { log('No UserCustomAction found - using defaults'); - callback({ termSetName: 'Navigation', menuMode: 'megaMenu', debug: false }); + callback({}); } }) .catch(function(error) { log('Error reading configuration: ' + error.message); - callback({ termSetName: 'Navigation', menuMode: 'megaMenu', debug: false }); + callback({}); }); } @@ -120,20 +155,39 @@ readMegaMenuConfiguration(function(props) { config.debug = props.debug === true || config.debug === true; log('Using configuration:', props); + var strings = getStrings(); + var termSetIdentifier = props.termSetId || props.termSetName; + if (!termSetIdentifier) { + showStatus(strings.missing); + return; + } + var loadingContainer = showStatus(strings.loading); // Create context var context = createClassicContext(); // Create taxonomy service using standalone implementation var taxonomyService = new window.MegaMenuServices.TaxonomyNavigationService( - context, - props.termSetId || props.termSetName + context, + termSetIdentifier, + { + cacheMinutes: props.cacheMinutes, + cacheVersion: props.cacheVersion, + languageLcid: getLanguageLcid() + } ); // Load menu items taxonomyService.getMenuItems() .then(function(menuItems) { log('Menu items loaded:', menuItems); + if (!menuItems || menuItems.length === 0) { + showStatus(strings.empty); + return; + } + if (loadingContainer && loadingContainer.parentNode) { + loadingContainer.parentNode.removeChild(loadingContainer); + } // Find target container var container = document.getElementById(config.containerId); @@ -160,7 +214,8 @@ var renderer = new window.MegaMenuServices.MegaMenuRenderer( context, menuItems, - props.menuMode === 'flyout' ? 'flyout' : 'megaMenu' + props.menuMode === 'flyout' ? 'flyout' : 'megaMenu', + strings ); // Render the menu @@ -170,21 +225,7 @@ }) .catch(function(error) { console.error('[MegaMenu] Error loading menu items:', error); - - // Show error message to user - var container = document.getElementById(config.containerId); - if (container) { - var errorDiv = document.createElement('div'); - errorDiv.style.cssText = 'background:#ffebee;color:#c62828;padding:10px;border:1px solid #ef5350;margin:5px 0;'; - errorDiv.innerHTML = 'MegaMenu Error: ' + error.message + - '
Check browser console for details.'; - - if (container.nextSibling) { - container.parentNode.insertBefore(errorDiv, container.nextSibling); - } else { - container.parentNode.appendChild(errorDiv); - } - } + showStatus(strings.error); }); }); } diff --git a/classic/megamenu-services-standalone.js b/classic/megamenu-services-standalone.js index 1342ba3..c0ff4ae 100644 --- a/classic/megamenu-services-standalone.js +++ b/classic/megamenu-services-standalone.js @@ -30,6 +30,10 @@ constructor(term, depth, siteCollectionUrl) { this.title = term.Name; this.url = this._getNavigationUrl(term, siteCollectionUrl); + const properties = term.LocalCustomProperties || {}; + this.description = String(properties['MegaMenu.Description'] || '').trim(); + this.openInNewWindow = this._asBoolean(properties['MegaMenu.OpenInNewWindow']); + this.external = this._isExternal(this.url, siteCollectionUrl); this.items = []; this.pathDepth = this._calculateDepth(term.PathOfTerm); this.parentId = this._getParentId(term.PathOfTerm); @@ -56,9 +60,27 @@ if (!rawUrl) { return undefined; } - return rawUrl.indexOf('~sitecollection') === 0 + if (/[\u0000-\u001f\u007f]/.test(String(rawUrl))) { + return undefined; + } + const resolved = rawUrl.indexOf('~sitecollection') === 0 ? siteCollectionUrl + rawUrl.substring('~sitecollection'.length) : rawUrl; + const protocol = String(resolved).match(/^([a-z][a-z0-9+.-]*):/i); + if (protocol && ['http', 'https', 'mailto'].indexOf(protocol[1].toLowerCase()) < 0) { + return undefined; + } + return resolved; + } + + _asBoolean(value) { + return value === true || ['true', '1', 'yes', 'ja'].indexOf(String(value || '').toLowerCase()) >= 0; + } + + _isExternal(url, siteCollectionUrl) { + const target = String(url || '').match(/^(?:(https?):)?\/\/([^/]+)/i); + const current = String(siteCollectionUrl || '').match(/^(https?):\/\/([^/]+)/i); + return !!target && (!current || (target[1] || current[1]).toLowerCase() !== current[1].toLowerCase() || target[2].toLowerCase() !== current[2].toLowerCase()); } } @@ -67,21 +89,65 @@ // =========================================== class TaxonomyNavigationService { - constructor(context, termSetIdentifier) { + constructor(context, termSetIdentifier, options) { this.context = context; this.termSetIdentifier = termSetIdentifier; + this.options = options || {}; this._siteCollectionUrl = context.pageContext.site.absoluteUrl; + this._languageLcid = Number(this.options.languageLcid) || 1033; + this._cacheMinutes = Math.min(Math.max(Number(this.options.cacheMinutes) || 15, 1), 1440); + this._cacheVersion = String(this.options.cacheVersion || '1'); } async getMenuItems() { console.log('[TaxonomyService] Loading terms for:', this.termSetIdentifier); - + const cached = this._getCache(false); + if (cached) { + return this._processTerms(cached); + } + const stale = this._getCache(true); try { const termSet = await this._loadTermSet(this.termSetIdentifier); + this._setCache(termSet); return this._processTerms(termSet); } catch (error) { console.error('[TaxonomyService] Error loading terms:', error); - return [this._createNoTermsItem()]; + if (stale) { + console.warn('[TaxonomyService] Using stale cache after taxonomy error.'); + return this._processTerms(stale); + } + throw error; + } + } + + _cacheKey() { + const normalize = value => encodeURIComponent(String(value || '').trim().toLowerCase()); + return 'MegaMenu:TermSet:v3:' + normalize(this._siteCollectionUrl) + ':' + normalize(this.termSetIdentifier) + ':' + this._languageLcid + ':' + normalize(this._cacheVersion); + } + + _getCache(allowExpired) { + try { + const serialized = window.sessionStorage.getItem(this._cacheKey()); + if (!serialized) return null; + const entry = JSON.parse(serialized); + if (!entry || !entry.value || !entry.expiresAt) { + window.sessionStorage.removeItem(this._cacheKey()); + return null; + } + return entry.expiresAt > Date.now() || allowExpired ? entry.value : null; + } catch (error) { + return null; + } + } + + _setCache(value) { + try { + window.sessionStorage.setItem(this._cacheKey(), JSON.stringify({ + expiresAt: Date.now() + this._cacheMinutes * 60 * 1000, + value: value + })); + } catch (error) { + console.warn('[TaxonomyService] Cache could not be written.', error); } } @@ -97,7 +163,7 @@ return; } - const termSets = termStore.getTermSetsByName(termSetIdentifier, 1033); + const termSets = termStore.getTermSetsByName(termSetIdentifier, this._languageLcid); context.load(termSets); context.executeQueryAsync( @@ -123,14 +189,15 @@ const enumerator = terms.getEnumerator(); while (enumerator.moveNext()) { const term = enumerator.get_current(); - if (!term.get_isAvailableForTagging() || term.get_isDeprecated()) { + const properties = this._getCustomProperties(term); + if (!term.get_isAvailableForTagging() || term.get_isDeprecated() || this._asBoolean(properties['MegaMenu.Hidden'])) { continue; } processedTerms.push({ Id: term.get_id().toString(), Name: term.get_name(), PathOfTerm: term.get_pathOfTerm(), - LocalCustomProperties: this._getCustomProperties(term), + LocalCustomProperties: properties, IsRoot: term.get_pathOfTerm().split(';').length === 1 }); } @@ -147,13 +214,20 @@ return { _Sys_Nav_SimpleLinkUrl: props._Sys_Nav_SimpleLinkUrl || null, _Sys_Nav_TargetUrl: props._Sys_Nav_TargetUrl || null, - _Sys_Nav_HoverText: props._Sys_Nav_HoverText || null + _Sys_Nav_HoverText: props._Sys_Nav_HoverText || null, + 'MegaMenu.Hidden': props['MegaMenu.Hidden'] || null, + 'MegaMenu.OpenInNewWindow': props['MegaMenu.OpenInNewWindow'] || null, + 'MegaMenu.Description': props['MegaMenu.Description'] || null }; } catch (e) { return {}; } } + _asBoolean(value) { + return value === true || ['true', '1', 'yes', 'ja'].indexOf(String(value || '').toLowerCase()) >= 0; + } + _processTerms(termsData) { const itemsDict = new ItemDictionary(); const itemsByPath = {}; @@ -202,10 +276,11 @@ // =========================================== class MegaMenuRenderer { - constructor(context, menuItems, menuMode) { + constructor(context, menuItems, menuMode, strings) { this.context = context; this.menuItems = menuItems; this.menuMode = menuMode === 'flyout' ? 'flyout' : 'megaMenu'; + this.strings = strings || { navigationLabel: 'Main navigation', openNavigation: 'Open navigation', closeNavigation: 'Close navigation', openSubmenu: 'Open submenu for', closeSubmenu: 'Close submenu for', submenuLabel: 'submenu', externalLink: 'external link' }; } render(container) { @@ -215,12 +290,21 @@ nav.id = 'Mega-Menu'; nav.className = 'mega-menu-main mega-menu-mode-' + this.menuMode; nav.setAttribute('data-menu-mode', this.menuMode); - nav.setAttribute('role', 'navigation'); - nav.setAttribute('aria-label', 'Hauptnavigation'); + nav.setAttribute('aria-label', this.strings.navigationLabel); + + const mobileToggle = document.createElement('button'); + mobileToggle.type = 'button'; + mobileToggle.className = 'mega-menu-mobile-toggle'; + mobileToggle.setAttribute('aria-expanded', 'false'); + mobileToggle.setAttribute('aria-controls', 'Mega-Menu-Items'); + mobileToggle.setAttribute('aria-label', this.strings.openNavigation); + mobileToggle.innerHTML = ''; + mobileToggle.querySelector('.mega-menu-mobile-label').textContent = this.strings.navigationLabel; + nav.appendChild(mobileToggle); const topLevelUl = document.createElement('ul'); topLevelUl.className = 'mega-menu-top-level'; - topLevelUl.setAttribute('role', 'menubar'); + topLevelUl.id = 'Mega-Menu-Items'; this.menuItems.forEach(topLevelItem => { const topLevelLi = this.createTopLevelItem(topLevelItem); @@ -236,35 +320,42 @@ createTopLevelItem(item) { const li = document.createElement('li'); - li.className = 'mega-menu-top-item'; - li.setAttribute('role', 'none'); + const hasChildren = item.items && item.items.length > 0; + li.className = hasChildren ? 'mega-menu-top-item has-children' : 'mega-menu-top-item'; - if (item.url && item.items.length === 0) { - // Simple link + if (item.url) { const a = document.createElement('a'); a.href = item.url; a.textContent = item.title; a.className = 'menu-item-link'; - a.setAttribute('role', 'menuitem'); - a.setAttribute('tabindex', '0'); + this.applyLinkBehavior(a, item); li.appendChild(a); } else { - // Menu with submenu const span = document.createElement('span'); span.textContent = item.title; span.className = 'menu-item-text'; - span.setAttribute('role', 'menuitem'); - span.setAttribute('tabindex', '0'); - span.setAttribute('aria-haspopup', 'true'); - span.setAttribute('aria-expanded', 'false'); + if (!hasChildren) span.setAttribute('tabindex', '0'); li.appendChild(span); + } - if (item.items.length > 0) { - const megaMenu = this.menuMode === 'flyout' - ? this.createFlyoutMenu(item.items) - : this.createMegaMenu(item.items); - li.appendChild(megaMenu); - } + if (hasChildren) { + const toggle = document.createElement('button'); + const menuId = 'Mega-Menu-Panel-' + String(item.id).replace(/[^a-z0-9_-]/gi, ''); + toggle.type = 'button'; + toggle.className = 'menu-item-toggle'; + toggle.setAttribute('aria-haspopup', 'true'); + toggle.setAttribute('aria-expanded', 'false'); + toggle.setAttribute('aria-controls', menuId); + toggle.setAttribute('aria-label', this.strings.openSubmenu + ' ' + item.title); + toggle.innerHTML = ''; + li.appendChild(toggle); + const megaMenu = this.menuMode === 'flyout' + ? this.createFlyoutMenu(item.items) + : this.createMegaMenu(item.items); + megaMenu.id = menuId; + megaMenu.setAttribute('aria-expanded', 'false'); + megaMenu.setAttribute('aria-label', item.title + ' ' + this.strings.submenuLabel); + li.appendChild(megaMenu); } return li; @@ -273,7 +364,6 @@ createMegaMenu(categories) { const megaMenuDiv = document.createElement('div'); megaMenuDiv.className = 'mega-menu'; - megaMenuDiv.setAttribute('role', 'menu'); const gridDiv = document.createElement('div'); gridDiv.className = 'mega-menu-grid'; @@ -297,7 +387,7 @@ const a = document.createElement('a'); a.href = category.url; a.textContent = category.title; - a.setAttribute('tabindex', '0'); + this.applyLinkBehavior(a, category); h3.appendChild(a); } else { const span = document.createElement('span'); @@ -307,19 +397,23 @@ categoryDiv.appendChild(h3); + if (category.description) { + const description = document.createElement('p'); + description.className = 'mega-menu-description'; + description.textContent = category.description; + categoryDiv.appendChild(description); + } + if (category.items.length > 0) { const ul = document.createElement('ul'); - ul.setAttribute('role', 'group'); category.items.forEach(link => { const li = document.createElement('li'); - li.setAttribute('role', 'none'); const a = document.createElement('a'); - a.href = link.url; + a.href = link.url || '#'; a.textContent = link.title; - a.setAttribute('role', 'menuitem'); - a.setAttribute('tabindex', '0'); + this.applyLinkBehavior(a, link); li.appendChild(a); ul.appendChild(li); @@ -334,7 +428,6 @@ createFlyoutMenu(items) { const flyout = document.createElement('div'); flyout.className = 'mega-menu mega-menu-flyout'; - flyout.setAttribute('role', 'menu'); const list = document.createElement('ul'); list.className = 'flyout-list flyout-level-2'; @@ -352,21 +445,28 @@ const element = document.createElement(item.url ? 'a' : 'span'); if (item.url) { element.href = item.url; + this.applyLinkBehavior(element, item); } else { element.setAttribute('tabindex', '0'); } element.textContent = item.title; element.className = hasChildren ? 'flyout-link flyout-link-has-children' : 'flyout-link'; - element.setAttribute('role', 'menuitem'); - if (hasChildren) { - element.setAttribute('aria-haspopup', 'true'); - } li.appendChild(element); if (hasChildren) { + const toggle = document.createElement('button'); + const childId = 'Mega-Menu-Flyout-' + String(item.id).replace(/[^a-z0-9_-]/gi, ''); + toggle.type = 'button'; + toggle.className = 'flyout-toggle'; + toggle.setAttribute('aria-expanded', 'false'); + toggle.setAttribute('aria-controls', childId); + toggle.setAttribute('aria-label', this.strings.openSubmenu + ' ' + item.title); + toggle.innerHTML = ''; + li.appendChild(toggle); const childList = document.createElement('ul'); childList.className = 'flyout-list flyout-level-3'; - childList.setAttribute('role', 'menu'); + childList.id = childId; + childList.setAttribute('aria-label', item.title + ' ' + this.strings.submenuLabel); item.items.forEach(child => childList.appendChild(this.createFlyoutItem(child))); li.appendChild(childList); } @@ -375,15 +475,78 @@ } attachEventListeners() { - // Keyboard and mouse event handling (simplified) - const menuItems = document.querySelectorAll('#Mega-Menu [role="menuitem"]'); - menuItems.forEach(item => { - item.addEventListener('keydown', this.handleKeyDown.bind(this)); - - const parent = item.parentElement; - if (parent && parent.querySelector('.mega-menu')) { - parent.addEventListener('mouseenter', this.showMegaMenu); - parent.addEventListener('mouseleave', this.hideMegaMenu); + const renderer = this; + const toggles = document.querySelectorAll('#Mega-Menu > ul > li > .menu-item-toggle'); + Array.prototype.forEach.call(toggles, toggle => { + const parent = toggle.parentElement; + const panel = parent.querySelector('.mega-menu'); + const setOpen = open => { + renderer.closeAll(panel); + toggle.setAttribute('aria-expanded', String(open)); + toggle.setAttribute('aria-label', (open ? renderer.strings.closeSubmenu : renderer.strings.openSubmenu) + ' ' + renderer.getToggleLabel(toggle)); + panel.setAttribute('aria-expanded', String(open)); + panel.classList.toggle('js-open', open); + }; + toggle.addEventListener('click', event => { event.preventDefault(); setOpen(toggle.getAttribute('aria-expanded') !== 'true'); }); + toggle.addEventListener('keydown', event => { + if (event.key === 'ArrowDown') { + event.preventDefault(); setOpen(true); + const firstLink = panel.querySelector('a'); + if (firstLink) firstLink.focus(); + } else if (event.key === 'Escape' || event.key === 'ArrowUp') { + event.preventDefault(); setOpen(false); toggle.focus(); + } + }); + let closeTimer; + parent.addEventListener('mouseenter', () => { window.clearTimeout(closeTimer); setOpen(true); }); + parent.addEventListener('mouseleave', () => { closeTimer = window.setTimeout(() => setOpen(false), 180); }); + }); + + const flyoutToggles = document.querySelectorAll('#Mega-Menu .flyout-toggle'); + Array.prototype.forEach.call(flyoutToggles, toggle => { + const parent = toggle.parentElement; + const setOpen = open => { + toggle.setAttribute('aria-expanded', String(open)); + const label = parent.querySelector('.flyout-link'); + toggle.setAttribute('aria-label', (open ? renderer.strings.closeSubmenu : renderer.strings.openSubmenu) + ' ' + (label ? label.textContent : '')); + parent.classList.toggle('is-open', open); + }; + toggle.addEventListener('click', event => { event.preventDefault(); setOpen(toggle.getAttribute('aria-expanded') !== 'true'); }); + toggle.addEventListener('keydown', event => { if (event.key === 'Escape') { event.preventDefault(); setOpen(false); toggle.focus(); } }); + parent.addEventListener('mouseenter', () => setOpen(true)); + parent.addEventListener('mouseleave', () => setOpen(false)); + parent.addEventListener('focusin', () => setOpen(true)); + parent.addEventListener('focusout', () => window.setTimeout(() => { if (!parent.contains(document.activeElement)) setOpen(false); }, 0)); + }); + + const mobileToggle = document.querySelector('#Mega-Menu > .mega-menu-mobile-toggle'); + if (mobileToggle) { + mobileToggle.addEventListener('click', () => { + const nav = mobileToggle.parentElement; + const open = mobileToggle.getAttribute('aria-expanded') !== 'true'; + mobileToggle.setAttribute('aria-expanded', String(open)); + mobileToggle.setAttribute('aria-label', open ? renderer.strings.closeNavigation : renderer.strings.openNavigation); + nav.classList.toggle('is-mobile-open', open); + if (!open) renderer.closeAll(); + }); + } + + document.addEventListener('keydown', event => { + if (event.key === 'Escape') { + const openPanel = document.querySelector('#Mega-Menu .mega-menu.js-open'); + if (openPanel) { + const toggle = openPanel.previousElementSibling; + renderer.closePanel(toggle, openPanel); + toggle.focus(); + } + } + if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight') && document.activeElement.closest('.mega-menu-top-item')) { + const items = Array.prototype.slice.call(document.querySelectorAll('#Mega-Menu > ul > .mega-menu-top-item')); + const current = document.activeElement.closest('.mega-menu-top-item'); + const index = items.indexOf(current); + const target = items[(index + (event.key === 'ArrowRight' ? 1 : -1) + items.length) % items.length]; + const focusTarget = target.querySelector('a, .menu-item-toggle'); + if (focusTarget) { event.preventDefault(); focusTarget.focus(); } } }); } @@ -398,49 +561,32 @@ document.body.appendChild(announcer); } - showMegaMenu() { - const megaMenu = this.querySelector('.mega-menu'); - if (megaMenu) { - megaMenu.classList.add('js-open'); - const menuItem = this.querySelector('[role="menuitem"]'); - if (menuItem) { - menuItem.setAttribute('aria-expanded', 'true'); - } - } + closePanel(toggle, panel) { + toggle.setAttribute('aria-expanded', 'false'); + toggle.setAttribute('aria-label', this.strings.openSubmenu + ' ' + this.getToggleLabel(toggle)); + panel.setAttribute('aria-expanded', 'false'); + panel.classList.remove('js-open'); } - hideMegaMenu() { - const megaMenu = this.querySelector('.mega-menu'); - if (megaMenu) { - megaMenu.classList.remove('js-open'); - const menuItem = this.querySelector('[role="menuitem"]'); - if (menuItem) { - menuItem.setAttribute('aria-expanded', 'false'); - } - } + closeAll(exceptPanel) { + const panels = document.querySelectorAll('#Mega-Menu .mega-menu.js-open'); + Array.prototype.forEach.call(panels, panel => { + if (panel !== exceptPanel) this.closePanel(panel.previousElementSibling, panel); + }); } - handleKeyDown(e) { - // Keyboard navigation logic (simplified) - if (e.key === 'Enter' || e.key === ' ') { - e.preventDefault(); - const parent = e.target.parentElement; - const megaMenu = parent.querySelector('.mega-menu'); - if (megaMenu) { - megaMenu.classList.toggle('js-open'); - e.target.setAttribute('aria-expanded', - megaMenu.classList.contains('js-open') ? 'true' : 'false'); - } - } else if (e.key === 'Escape') { - const megaMenu = document.querySelector('.mega-menu.js-open'); - if (megaMenu) { - megaMenu.classList.remove('js-open'); - const menuItem = megaMenu.parentElement.querySelector('[role="menuitem"]'); - if (menuItem) { - menuItem.setAttribute('aria-expanded', 'false'); - menuItem.focus(); - } - } + getToggleLabel(toggle) { + const label = toggle.parentElement.querySelector('.menu-item-link, .menu-item-text'); + return label ? label.textContent : ''; + } + + applyLinkBehavior(link, item) { + if (item.openInNewWindow) { + link.target = '_blank'; + link.rel = 'noopener noreferrer'; + } + if (item.external) { + link.setAttribute('aria-label', item.title + ' (' + this.strings.externalLink + ')'); } } diff --git a/config/package-solution.json b/config/package-solution.json index 82ded7c..9afec36 100644 --- a/config/package-solution.json +++ b/config/package-solution.json @@ -3,7 +3,7 @@ "solution": { "name": "mega-menu-client-side-solution", "id": "f4660e06-ce08-43ee-bfb7-5c4464e01133", - "version": "2.1.0.0", + "version": "2.2.0.0", "includeClientSideAssets": true, "skipFeatureDeployment": true }, diff --git a/config/serve.json b/config/serve.json index 0c3dfa9..e8e5697 100644 --- a/config/serve.json +++ b/config/serve.json @@ -11,6 +11,7 @@ "properties": { "termSetName": "Horizontale Navigation", "cacheMinutes": 15, + "cacheVersion": "1", "menuMode": "megaMenu", "debug": true } @@ -25,6 +26,7 @@ "properties": { "termSetName": "Global Navigation", "cacheMinutes": 15, + "cacheVersion": "1", "menuMode": "flyout", "debug": true } diff --git a/deployment/add-megamenu.ps1 b/deployment/add-megamenu.ps1 index 7a3c4d0..10b8889 100644 --- a/deployment/add-megamenu.ps1 +++ b/deployment/add-megamenu.ps1 @@ -9,6 +9,8 @@ param( [ValidateRange(1, 1440)] [int]$CacheMinutes = 15, + [string]$CacheVersion = '1', + [ValidateSet('megaMenu', 'flyout')] [string]$MenuMode = 'megaMenu', @@ -41,6 +43,7 @@ $properties = [string](@{ termSetName = $TermSetName.Trim() termSetId = $TermSetId.Trim() cacheMinutes = $CacheMinutes + cacheVersion = $CacheVersion menuMode = $MenuMode debug = [bool]$EnableDebug.IsPresent } | ConvertTo-Json -Depth 10 -Compress) diff --git a/package-lock.json b/package-lock.json index 868836f..90a690d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "mega-menu", - "version": "2.1.0", + "version": "2.2.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 5300538..d0795c9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mega-menu", - "version": "2.1.0", + "version": "2.2.0", "private": true, "main": "lib/index.js", "engines": { @@ -10,8 +10,8 @@ "build:classic": "powershell -NoProfile -ExecutionPolicy Bypass -File .\\build-classic.ps1", "build": "npm run build:classic && gulp bundle", "clean": "gulp clean", - "test": "gulp test", - "package": "npm run build:classic && gulp clean && gulp bundle --ship && gulp package-solution --ship" + "test": "tsc -p tests/tsconfig.json && node temp/tests/tests/MegaMenuCore.test.js && node --check classic/megamenu-services-standalone.js && node --check classic/megamenu-classic.js && node tests/validate-static-assets.js", + "package": "npm test && npm run build:classic && gulp clean && gulp bundle --ship && gulp package-solution --ship" }, "dependencies": { "@microsoft/decorators": "~1.4.1", diff --git a/preview/flyout-menu-preview.html b/preview/flyout-menu-preview.html index 07497b0..d81ce3b 100644 --- a/preview/flyout-menu-preview.html +++ b/preview/flyout-menu-preview.html @@ -37,19 +37,23 @@