Initial commit

src/extensions/megaMenu/MegaMenuApplicationCustomizer.ts

@@ -0,0 +1,158 @@
+// tslint:disable:max-line-length
+// tslint:disable:match-default-export-name
+// tslint:disable:typedef
+// tslint:disable:variable-name
+
+import { override } from '@microsoft/decorators';
+import {
+  BaseApplicationCustomizer,
+  PlaceholderContent,
+  PlaceholderName
+} from '@microsoft/sp-application-base';
+
+import * as strings from 'MegaMenuApplicationCustomizerStrings';
+import { TaxonomyNavigationService } from '../../services/TaxonomyNavigationService';
+import { MegaMenuRenderer } from './MegaMenuRenderer';
+import { IMenuItem } from '../../services/IMenuItem';
+import { debugError, debugLog, debugWarn } from '../../services/MegaMenuDebug';
+
+import './MegaMenu.module.scss';
+
+const LOG_SOURCE: string = 'MegaMenuApplicationCustomizer';
+export const UserCustomActionMegaMenuId: string = 'abc3361f-bb2d-491f-aba3-cd51c19a299b';
+
+export interface IMegaMenuApplicationCustomizerProperties {
+  termSetName: string;
+  cssUrl?: string;
+  debug?: boolean;
+}
+
+export default class MegaMenuApplicationCustomizer
+  extends BaseApplicationCustomizer<IMegaMenuApplicationCustomizerProperties> {
+
+  private _topPlaceholder: PlaceholderContent | undefined;
+
+  @override
+  public onInit(): Promise<void> {
+    debugLog(this._isDebugEnabled(), LOG_SOURCE, 'Initialized ' + strings.Title);
+
+    if (this.properties.cssUrl) {
+      this._loadExternalCss(this.properties.cssUrl);
+    }
+
+    this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceHolders);
+    this._renderPlaceHolders();
+
+    return Promise.resolve();
+  }
+
+  private _renderPlaceHolders(): void {
+    const availablePlaceholders: string = this.context.placeholderProvider.placeholderNames
+      .map(name => PlaceholderName[name])
+      .join(', ');
+
+    debugLog(this._isDebugEnabled(), LOG_SOURCE, 'Available placeholders:', availablePlaceholders);
+
+    if (!this._topPlaceholder) {
+      this._topPlaceholder = this.context.placeholderProvider.tryCreateContent(
+        PlaceholderName.Top,
+        { onDispose: this._onDispose }
+      );
+
+      if (!this._topPlaceholder) {
+        debugError(this._isDebugEnabled(), LOG_SOURCE, 'The expected placeholder (Top) was not found.');
+        return;
+      }
+
+      if (!this.properties.termSetName) {
+        debugWarn(this._isDebugEnabled(), LOG_SOURCE, 'No termSetName configured. Mega Menu rendering is skipped.');
+        return;
+      }
+
+      this._renderMegaMenu(this.properties.termSetName);
+    }
+  }
+
+  private async _renderMegaMenu(termSetName: string, debug: boolean = this._isDebugEnabled()): Promise<void> {
+    if (!this._topPlaceholder) {
+      return;
+    }
+
+    try {
+      const taxonomyService: TaxonomyNavigationService = new TaxonomyNavigationService(
+        this.context,
+        termSetName,
+        debug
+      );
+
+      const menuItems: IMenuItem[] = await taxonomyService.getMenuItems();
+
+      const renderer: MegaMenuRenderer = new MegaMenuRenderer(
+        menuItems,
+        debug
+      );
+
+      const container = this._getOrCreateContainer('CustomHeader', this._topPlaceholder);
+
+      if (container) {
+        renderer.render(container);
+      } else {
+        renderer.render(this._topPlaceholder.domElement);
+      }
+
+      debugLog(debug, LOG_SOURCE, 'MegaMenu rendered successfully with ' + menuItems.length + ' top-level items.');
+    } catch (error) {
+      debugError(debug, LOG_SOURCE, 'Error rendering MegaMenu.', error);
+    }
+  }
+
+  private _getOrCreateContainer(id: string, placeholder: PlaceholderContent): HTMLElement {
+    const container = document.getElementById(id);
+
+    if (container) {
+      const div = document.createElement('div');
+      container.appendChild(div);
+      return div;
+    }
+
+    return placeholder.domElement;
+  }
+
+  private _loadExternalCss(cssUrl?: string, debug: boolean = this._isDebugEnabled()): void {
+    const externalCssLinkId: string = 'mega-menu-additional-css-34FAB720';
+    let link: HTMLLinkElement = document.getElementById(externalCssLinkId) as HTMLLinkElement;
+
+    if (cssUrl && cssUrl.trim() !== '') {
+      if (!link) {
+        const head: HTMLHeadElement = document.getElementsByTagName('head')[0];
+        link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.type = 'text/css';
+        link.id = externalCssLinkId;
+        link.onload = () => {
+          debugLog(debug, LOG_SOURCE, 'External CSS loaded successfully from:', cssUrl);
+        };
+        link.onerror = () => {
+          debugWarn(debug, LOG_SOURCE, 'Failed to load external CSS from:', cssUrl);
+        };
+        head.appendChild(link);
+      }
+
+      link.href = cssUrl;
+    } else if (link) {
+      link.remove();
+    }
+  }
+
+  private _onDispose = (): void => {
+    debugLog(this._isDebugEnabled(), LOG_SOURCE, 'Disposed custom top placeholder.');
+  }
+
+  private _isDebugEnabled(debugOverride?: boolean): boolean {
+    if (typeof debugOverride === 'boolean') {
+      return debugOverride;
+    }
+
+    return !!(this.properties && this.properties.debug === true);
+  }
+}