SPFx-Projekte/Megamenu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Update MegaMenu Application Customizer: Version bump to 1.1.0, localization support added, and unnecessary files removed

Browse Source 
- Deleted obsolete localization file for English (en-us).
- Updated version number from 1.0.4 to 1.1.0 in manifests.js and manifests.json.
- Added localization support for German (de-de) in a new localization file.
- Removed unnecessary dependencies from manifests.
- Added .gitignore to exclude build artifacts and temporary files.
This commit is contained in:
Torsten Brendgen
2026-07-16 22:43:31 +02:00
parent a2b8165262
commit 97d2b6b5d2
53 changed files with 1071 additions and 1065 deletions
Download Patch File Download Diff File Expand all files Collapse all files

324
lib/extensions/megaMenu/MegaMenuRenderer.js
View File

@@ -2,109 +2,88 @@
// tslint:disable:match-default-export-name
// tslint:disable:typedef
// tslint:disable:variable-name
import { SPPermission } from '@microsoft/sp-page-context';
import { MegaMenuSettingsPanel } from './MegaMenuSettings';
import { debugLog } from '../../services/MegaMenuDebug';
var LOG_SOURCE = 'MegaMenuRenderer';
var MegaMenuRenderer = (function () {
function MegaMenuRenderer(context, menuItems, updateCallback) {
this.context = context;
function MegaMenuRenderer(menuItems, debug) {
if (debug === void 0) { debug = false; }
this.menuItems = menuItems;
this.updateCallback = updateCallback;
this.debug = debug;
}
MegaMenuRenderer.prototype.render = function (container) {
var _this = this;
// Clear any existing content
this.dispose();
this._container = container;
container.innerHTML = '';
container.id = 'CustomNavigation';
// Create the main nav element
var nav = document.createElement('nav');
nav.id = 'Mega-Menu';
nav.className = 'mega-menu-main';
nav.setAttribute('role', 'navigation');
nav.setAttribute('aria-label', 'Hauptnavigation');
// Create the top-level menubar
var topLevelUl = document.createElement('ul');
topLevelUl.setAttribute('role', 'menubar');
// Process each top-level menu item
topLevelUl.className = 'mega-menu-top-level';
this.menuItems.forEach(function (topLevelItem) {
var topLevelLi = _this.createTopLevelItem(topLevelItem);
topLevelUl.appendChild(topLevelLi);
});
// Only if current user has ManageWeb permissions in this website can they access the settings
if (this.context.pageContext.web.permissions.hasPermission(SPPermission.manageWeb)) {
topLevelUl.appendChild(this.createSettingsItem());
}
nav.appendChild(topLevelUl);
container.appendChild(nav);
// Attach accessibility event listeners after rendering
this.attachEventListeners();
this.createScreenReaderAnnouncer();
};
MegaMenuRenderer.prototype.createSettingsItem = function () {
var _this = this;
var li = document.createElement('li');
li.setAttribute('role', 'none');
// Verwenden eines Links-ähnlichen Buttons damit Styling identisch zu Top-Level Items ist
var btn = document.createElement('button');
btn.type = 'button';
btn.className = 'menu-item-link menu-item-settings'; // reuse same base styles
btn.setAttribute('role', 'menuitem');
btn.setAttribute('tabindex', '0');
btn.setAttribute('aria-haspopup', 'false');
btn.setAttribute('aria-label', 'Einstellungen');
btn.title = 'Einstellungen';
// Nur EIN Icon: Wenn Fabric Icons geladen sind, zeigt ms-Icon das Symbol. Fallback via aria-label für Screenreader
var icon = document.createElement('span');
icon.className = 'ms-Icon ms-Icon--Settings menu-item-settings__icon';
icon.setAttribute('aria-hidden', 'true');
btn.appendChild(icon);
btn.addEventListener('click', function () { return _this.openSettings(); });
btn.addEventListener('keydown', function (e) {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
_this.openSettings();
}
});
li.appendChild(btn);
return li;
};
MegaMenuRenderer.prototype.openSettings = function () {
if (!this._settingsPanel) {
this._settingsPanel = new MegaMenuSettingsPanel(this.context, this.updateCallback);
MegaMenuRenderer.prototype.dispose = function () {
if (this._documentKeydownHandler) {
document.removeEventListener('keydown', this._documentKeydownHandler);
this._documentKeydownHandler = undefined;
}
this._settingsPanel.open();
if (this._documentClickHandler) {
document.removeEventListener('click', this._documentClickHandler);
this._documentClickHandler = undefined;
}
if (this._announcer && this._announcer.parentElement) {
this._announcer.parentElement.removeChild(this._announcer);
}
this._announcer = undefined;
if (this._container) {
this._container.innerHTML = '';
}
this._container = undefined;
};
// Panel logic moved to MegaMenuSettingsPanel
MegaMenuRenderer.prototype.createTopLevelItem = function (item) {
var li = document.createElement('li');
li.setAttribute('role', 'none');
// Create the top-level element (link or span)
var topElement = this.createTopLevelElement(item);
var hasChildren = item.hasChildren() && item.items && item.items.length > 0;
var isActive = this.isItemActive(item);
var isCurrent = this.isCurrentUrl(item.url);
li.className = this.joinClasses('mega-menu-top-item', hasChildren ? 'has-children' : undefined, isActive ? 'is-active' : undefined, isCurrent ? 'is-current' : undefined);
var topElement = this.createTopLevelElement(item, hasChildren, isActive, isCurrent);
li.appendChild(topElement);
// If the item has children, create the mega menu
if (item.hasChildren() && item.items && item.items.length > 0) {
if (hasChildren) {
var megaMenu = this.createMegaMenu(item);
li.appendChild(megaMenu);
}
return li;
};
MegaMenuRenderer.prototype.createTopLevelElement = function (item) {
MegaMenuRenderer.prototype.createTopLevelElement = function (item, hasChildren, isActive, isCurrent) {
var element;
if (item.url) {
// Create as link
element = document.createElement('a');
element.href = item.url;
element.className = 'menu-item-link';
}
else {
// Create as span (no link)
element = document.createElement('span');
element.className = 'menu-item-text';
element.setAttribute('tabindex', '0');
}
element.setAttribute('role', 'menuitem');
element.setAttribute('aria-haspopup', 'true');
element.setAttribute('aria-expanded', 'false');
element.textContent = item.label;
element.className = this.joinClasses(element.className, hasChildren ? 'menu-item-has-children' : undefined, isActive ? 'is-active' : undefined, isCurrent ? 'is-current' : undefined);
if (hasChildren) {
element.setAttribute('aria-haspopup', 'true');
element.setAttribute('aria-expanded', 'false');
}
if (isCurrent && item.url) {
element.setAttribute('aria-current', 'page');
}
if (item.hoverText) {
element.title = item.hoverText;
}
@@ -114,11 +93,11 @@ var MegaMenuRenderer = (function () {
var _this = this;
var megaMenuDiv = document.createElement('div');
megaMenuDiv.className = 'mega-menu';
megaMenuDiv.setAttribute('role', 'menu');
megaMenuDiv.setAttribute('aria-label', parentItem.label + " Unterkategorien");
megaMenuDiv.setAttribute('aria-expanded', 'false');
megaMenuDiv.setAttribute('aria-label', parentItem.label + ' Unterkategorien');
var gridDiv = document.createElement('div');
gridDiv.className = 'mega-menu-grid';
// Process second-level items (categories)
gridDiv.style.setProperty('--megaMenuColumnCount', this.getColumnCount(parentItem.items));
if (parentItem.items) {
parentItem.items.forEach(function (secondLevelItem) {
var categoryDiv = _this.createCategorySection(secondLevelItem);
@@ -129,38 +108,51 @@ var MegaMenuRenderer = (function () {
return megaMenuDiv;
};
MegaMenuRenderer.prototype.createCategorySection = function (item) {
var _this = this;
var categoryDiv = document.createElement('div');
categoryDiv.className = 'mega-menu-category';
// Create the category header (h3)
var isActive = this.isItemActive(item);
var isCurrent = this.isCurrentUrl(item.url);
categoryDiv.className = this.joinClasses('mega-menu-category', isActive ? 'is-active' : undefined, isCurrent ? 'is-current' : undefined);
var h3 = document.createElement('h3');
h3.className = 'mega-menu-category-title';
if (item.url) {
// Category header as link
var link = document.createElement('a');
link.href = item.url;
link.textContent = item.label;
link.className = this.joinClasses(isActive ? 'is-active' : undefined, isCurrent ? 'is-current' : undefined);
if (isCurrent) {
link.setAttribute('aria-current', 'page');
}
if (item.hoverText) {
link.title = item.hoverText;
}
h3.appendChild(link);
}
else {
// Category header as span (no link)
var span = document.createElement('span');
span.textContent = item.label;
span.className = this.joinClasses(isActive ? 'is-active' : undefined);
if (item.hoverText) {
span.title = item.hoverText;
}
h3.appendChild(span);
}
categoryDiv.appendChild(h3);
// Create the third-level items list if they exist
if (item.hasChildren() && item.items && item.items.length > 0) {
var ul_1 = document.createElement('ul');
ul_1.className = 'mega-menu-links';
item.items.forEach(function (thirdLevelItem) {
var li = document.createElement('li');
var link = document.createElement('a');
var isLinkActive = _this.isItemActive(thirdLevelItem);
var isLinkCurrent = _this.isCurrentUrl(thirdLevelItem.url);
li.className = _this.joinClasses(isLinkActive ? 'is-active' : undefined, isLinkCurrent ? 'is-current' : undefined);
link.href = thirdLevelItem.url || '#';
link.textContent = thirdLevelItem.label;
link.className = _this.joinClasses(isLinkActive ? 'is-active' : undefined, isLinkCurrent ? 'is-current' : undefined);
if (isLinkCurrent && thirdLevelItem.url) {
link.setAttribute('aria-current', 'page');
}
if (thirdLevelItem.hoverText) {
link.title = thirdLevelItem.hoverText;
}
@@ -172,7 +164,7 @@ var MegaMenuRenderer = (function () {
return categoryDiv;
};
MegaMenuRenderer.prototype.attachEventListeners = function () {
var headings = document.querySelectorAll('#Mega-Menu > ul > li > a, #Mega-Menu > ul > li > span[role="menuitem"]');
var headings = document.querySelectorAll('#Mega-Menu > ul > li > a, #Mega-Menu > ul > li > .menu-item-text');
for (var i = 0; i < headings.length; i++) {
var heading = headings[i];
var megaMenu = heading.nextElementSibling;
@@ -182,86 +174,101 @@ var MegaMenuRenderer = (function () {
this.attachFocusManagement(heading, megaMenu);
}
}
// Global keyboard navigation
this.attachGlobalKeyboardNavigation();
this.attachGlobalClickOutsideHandler();
};
MegaMenuRenderer.prototype.attachKeyboardNavigation = function (heading, megaMenu) {
var _this = this;
heading.addEventListener('keydown', function (e) {
if (e.key === 'Enter') {
// Enter: Navigation (nur bei Links ohne Mega-Menu-Override)
if (heading.tagName === 'A') {
// Lasse normale Link-Navigation zu (KEIN preventDefault!)
return;
}
else {
// Bei span: Toggle Menu
e.preventDefault();
_this.toggleMegaMenu(heading, megaMenu);
}
e.preventDefault();
_this.toggleMegaMenu(heading, megaMenu);
}
else if (e.key === ' ') {
// Space: Toggle Dropdown (immer)
e.preventDefault();
_this.toggleMegaMenu(heading, megaMenu);
}
else if (e.key === 'ArrowDown') {
// Pfeil runter: Menü öffnen + erster Link
e.preventDefault();
_this.openMegaMenu(heading, megaMenu);
_this.focusFirstLink(megaMenu);
}
else if (e.key === 'ArrowUp') {
// Pfeil hoch: Menü schließen
e.preventDefault();
_this.closeMegaMenu(heading, megaMenu);
}
else if (e.key === 'Escape') {
// Escape: Menü schließen
e.preventDefault();
_this.closeMegaMenu(heading, megaMenu);
heading.focus();
}
});
// Click Event für Top-Level Links - NORMALE Navigation erlauben
if (heading.tagName === 'A') {
heading.addEventListener('click', function (e) {
// Links sollen normal navigieren, nicht das Mega-Menu toglen
// Wenn der User das Menu öffnen will, soll er Space oder Pfeil↓ nutzen
console.log('Link geklickt:', heading.href);
// KEIN preventDefault() - normale Link-Navigation
heading.addEventListener('click', function () {
debugLog(_this.debug, LOG_SOURCE, 'Link clicked:', heading.href);
});
}
// Focus Management - KEIN automatisches Öffnen oder Schließen
heading.addEventListener('focus', function () {
console.log('Focus auf:', heading.textContent);
// Einfach nur fokussiert - keine automatischen Aktionen!
debugLog(_this.debug, LOG_SOURCE, 'Focus moved to:', heading.textContent);
});
};
MegaMenuRenderer.prototype.attachMouseEvents = function (heading, megaMenu) {
var _this = this;
var parentLi = heading.parentElement;
var openTimeout;
var closeTimeout;
var clearOpenTimeout = function () {
if (typeof openTimeout === 'number') {
window.clearTimeout(openTimeout);
openTimeout = undefined;
}
};
var clearCloseTimeout = function () {
if (typeof closeTimeout === 'number') {
window.clearTimeout(closeTimeout);
closeTimeout = undefined;
}
};
parentLi.addEventListener('mouseenter', function () {
_this.openMegaMenu(heading, megaMenu);
clearCloseTimeout();
if (megaMenu.classList.contains('js-open')) {
return;
}
clearOpenTimeout();
openTimeout = window.setTimeout(function () {
_this.openMegaMenu(heading, megaMenu);
openTimeout = undefined;
}, MegaMenuRenderer.hoverOpenDelayMs);
});
parentLi.addEventListener('mouseleave', function () {
_this.closeMegaMenu(heading, megaMenu);
clearOpenTimeout();
clearCloseTimeout();
closeTimeout = window.setTimeout(function () {
_this.closeMegaMenu(heading, megaMenu);
closeTimeout = undefined;
}, MegaMenuRenderer.hoverCloseDelayMs);
});
heading.addEventListener('focus', function () {
clearCloseTimeout();
});
megaMenu.addEventListener('mouseenter', function () {
clearCloseTimeout();
});
};
MegaMenuRenderer.prototype.attachFocusManagement = function (heading, megaMenu) {
var _this = this;
// Focus-Verlust-Behandlung - vereinfacht
megaMenu.addEventListener('focusout', function (e) {
// Kurz warten, um zu prüfen ob Focus innerhalb des Mega-Menus bleibt
megaMenu.addEventListener('focusout', function () {
setTimeout(function () {
var focusedElement = document.activeElement;
var isInsideThisMenu = megaMenu.contains(focusedElement);
var isOnThisTrigger = focusedElement === heading;
var isInAnyMegaMenu = focusedElement.closest('.mega-menu');
var isOnAnyTopLevel = focusedElement.closest('#Mega-Menu > ul > li > a, #Mega-Menu > ul > li > span');
// Nur schließen wenn Focus komplett außerhalb der Navigation ist
if (!isInsideThisMenu && !isOnThisTrigger && !isInAnyMegaMenu && !isOnAnyTopLevel) {
console.log('Schließe Menu wegen Focus-Verlust');
debugLog(_this.debug, LOG_SOURCE, 'Closing menu because focus left the navigation.');
_this.closeMegaMenu(heading, megaMenu);
}
}, 150);
@@ -269,7 +276,7 @@ var MegaMenuRenderer = (function () {
};
MegaMenuRenderer.prototype.attachGlobalKeyboardNavigation = function () {
var _this = this;
document.addEventListener('keydown', function (e) {
this._documentKeydownHandler = function (e) {
var activeElement = document.activeElement;
if (e.key === 'Escape') {
var openMenu = document.querySelector('.mega-menu[aria-expanded="true"]');
@@ -279,16 +286,13 @@ var MegaMenuRenderer = (function () {
triggerLink.focus();
}
}
// Tab-Navigation: Nur bei spezifischen Übergängen eingreifen
if (e.key === 'Tab') {
// Von Top-Level zum ersten Link im offenen Menu
if (!e.shiftKey) {
var currentTopLevel = activeElement.closest('#Mega-Menu > ul > li > a, #Mega-Menu > ul > li > span');
if (currentTopLevel) {
var parentLi = currentTopLevel.closest('li');
var megaMenu = parentLi.querySelector('.mega-menu.js-open');
if (megaMenu) {
// Nur eingreifen wenn wir vom Trigger weg-tabben
e.preventDefault();
var firstLink = megaMenu.querySelector('a');
if (firstLink) {
@@ -298,13 +302,11 @@ var MegaMenuRenderer = (function () {
}
}
}
// Shift+Tab: Vom ersten Link im Menu zurück zum Trigger
if (e.shiftKey) {
var megaMenu = activeElement.closest('.mega-menu');
if (megaMenu && megaMenu.classList.contains('js-open')) {
var allLinksInMenu = megaMenu.querySelectorAll('a');
var firstLinkInMenu = allLinksInMenu[0];
// Nur eingreifen wenn wir beim ersten Link sind
if (activeElement === firstLinkInMenu) {
e.preventDefault();
var triggerElement = megaMenu.previousElementSibling;
@@ -313,21 +315,41 @@ var MegaMenuRenderer = (function () {
}
}
}
// Ansonsten: Normale Tab-Navigation nicht unterbrechen!
}
});
};
document.addEventListener('keydown', this._documentKeydownHandler);
};
MegaMenuRenderer.prototype.attachGlobalClickOutsideHandler = function () {
var _this = this;
this._documentClickHandler = function (e) {
var eventTarget = e.target;
var isInsideNavigation = !!(eventTarget && typeof eventTarget.closest === 'function' &&
eventTarget.closest('#CustomNavigation'));
if (isInsideNavigation) {
return;
}
var openMenu = document.querySelector('.mega-menu.js-open');
if (openMenu) {
debugLog(_this.debug, LOG_SOURCE, 'Closing menu because of outside click.');
_this.closeAllMegaMenus();
}
};
document.addEventListener('click', this._documentClickHandler);
};
MegaMenuRenderer.prototype.openMegaMenu = function (trigger, menu) {
this.closeAllMegaMenus(menu);
trigger.setAttribute('aria-expanded', 'true');
menu.setAttribute('aria-expanded', 'true');
menu.classList.add('js-open');
console.log('Menu geöffnet:', trigger.textContent);
this.announce((trigger.textContent || '') + ' geöffnet');
debugLog(this.debug, LOG_SOURCE, 'Menu opened:', trigger.textContent);
};
MegaMenuRenderer.prototype.closeMegaMenu = function (trigger, menu) {
trigger.setAttribute('aria-expanded', 'false');
menu.setAttribute('aria-expanded', 'false');
menu.classList.remove('js-open');
console.log('Menu geschlossen:', trigger.textContent);
this.announce((trigger.textContent || '') + ' geschlossen');
debugLog(this.debug, LOG_SOURCE, 'Menu closed:', trigger.textContent);
};
MegaMenuRenderer.prototype.toggleMegaMenu = function (trigger, menu) {
var isOpen = trigger.getAttribute('aria-expanded') === 'true';
@@ -335,36 +357,112 @@ var MegaMenuRenderer = (function () {
this.closeMegaMenu(trigger, menu);
}
else {
this.closeAllMegaMenus();
this.openMegaMenu(trigger, menu);
}
};
MegaMenuRenderer.prototype.closeAllMegaMenus = function () {
MegaMenuRenderer.prototype.closeAllMegaMenus = function (exceptMenu) {
var allTriggers = document.querySelectorAll('#Mega-Menu > ul > li > a[aria-expanded="true"], #Mega-Menu > ul > li > span[aria-expanded="true"]');
for (var i = 0; i < allTriggers.length; i++) {
var trigger = allTriggers[i];
var menu = trigger.nextElementSibling;
if (menu) {
if (menu && menu !== exceptMenu) {
this.closeMegaMenu(trigger, menu);
}
}
};
// removed unused closeOtherMegaMenus (was previously declared but not used)
MegaMenuRenderer.prototype.focusFirstLink = function (megaMenu) {
var firstLink = megaMenu.querySelector('a');
if (firstLink) {
firstLink.focus();
}
};
MegaMenuRenderer.prototype.isItemActive = function (item) {
if (this.isCurrentUrl(item.url)) {
return true;
}
if (!item.items || item.items.length === 0) {
return false;
}
for (var i = 0; i < item.items.length; i++) {
if (this.isItemActive(item.items[i])) {
return true;
}
}
return false;
};
MegaMenuRenderer.prototype.isCurrentUrl = function (url) {
var currentPath = this.normalizePath(window.location.href);
var itemPath = this.normalizePath(url);
if (!currentPath || !itemPath) {
return false;
}
if (itemPath === '/') {
return currentPath === '/';
}
if (currentPath === itemPath) {
return true;
}
return currentPath.indexOf(itemPath + '/') === 0;
};
MegaMenuRenderer.prototype.normalizePath = function (url) {
if (!url) {
return '';
}
try {
var parsedUrl = new URL(url, window.location.origin);
var pathname = (parsedUrl.pathname || '/').replace(/\/+$/, '');
return (pathname || '/').toLowerCase();
}
catch (error) {
return '';
}
};
MegaMenuRenderer.prototype.getColumnCount = function (items) {
var itemCount = items ? items.length : 0;
var columnCount = Math.min(Math.max(itemCount, 1), 4);
return columnCount.toString();
};
MegaMenuRenderer.prototype.joinClasses = function () {
var classNames = [];
for (var _i = 0; _i < arguments.length; _i++) {
classNames[_i] = arguments[_i];
}
var filteredClassNames = [];
for (var i = 0; i < classNames.length; i++) {
if (classNames[i]) {
filteredClassNames.push(classNames[i]);
}
}
return filteredClassNames.join(' ');
};
MegaMenuRenderer.prototype.createScreenReaderAnnouncer = function () {
// Screenreader-Ankündigungen
var existingAnnouncer = document.getElementById('mega-menu-sr-announcer');
if (existingAnnouncer) {
this._announcer = existingAnnouncer;
return;
}
var srAnnouncer = document.createElement('div');
srAnnouncer.id = 'mega-menu-sr-announcer';
srAnnouncer.setAttribute('aria-live', 'polite');
srAnnouncer.setAttribute('aria-atomic', 'true');
srAnnouncer.className = 'sr-only';
document.body.appendChild(srAnnouncer);
console.log('Screenreader-Ankündigungen sind jetzt bereit');
this._announcer = srAnnouncer;
debugLog(this.debug, LOG_SOURCE, 'Screen reader announcer is ready.');
};
MegaMenuRenderer.prototype.announce = function (message) {
var _this = this;
if (this._announcer) {
this._announcer.textContent = '';
window.setTimeout(function () {
if (_this._announcer) {
_this._announcer.textContent = message;
}
}, 20);
}
};
MegaMenuRenderer.hoverOpenDelayMs = 140;
MegaMenuRenderer.hoverCloseDelayMs = 180;
return MegaMenuRenderer;
}());
export { MegaMenuRenderer };