db-mainnavigation.tsx

import { Component, Element, h, Prop } from '@stencil/core';
import {
  DbMainnavigationDataType,
  DbMainnavigationItemType
} from './db-mainnavigation-type';
import { parseData } from '../../utils/utils';

const getJsxLinks = (items: DbMainnavigationItemType[]) => {
  return items.map((item, index) => (
    <li key={`mainnavigation-item-${index}`} innerHTML={item.html}>
      {item.children && <ul>{getJsxLinks(item.children)}</ul>}
    </li>
  ));
};

const setupItemsRecursive = (
  children: Element[]
): DbMainnavigationItemType[] => {
  const items: DbMainnavigationItemType[] = [];
  children.forEach((child) => {
    const singleAnchor = child.children.length === 1;

    items.push({
      html: child.outerHTML,
      children:
        !singleAnchor && child.children
          ? setupItemsRecursive(Array.from(child.children))
          : []
    });
  });
  return items;
};
const cleanUpItem = (item: DbMainnavigationItemType) => {
  item.children.forEach((child) => {
    item.html = item.html.replace(child.html, '');
    cleanUpItem(child);
  });
};

const setupOnlyDbLinkNavigation = (
  children: Element[]
): DbMainnavigationItemType[] => {
  const nonDbLinkChildren = children.filter(
    (child) =>
      child.tagName.toLowerCase() !== 'db-link' &&
      child.tagName.toLowerCase() !== 'a'
  );
  if (nonDbLinkChildren.length === 0) {
    const items = setupItemsRecursive(children);
    items.forEach((item) => {
      cleanUpItem(item);
    });
    return items;
  }
  return [];
};

const getCompDataHtml = (compData: DbMainnavigationDataType[]) => {
  let html = '';

  compData.forEach((data) => {
    let listTag = '<li>\n';
    let hasChildren = false;
    if (data.children && data.children.length > 0) {
      listTag = '<li aria-haspopup="true">\n';
      hasChildren = true;
    }

    listTag += `<db-link href="${data.link}" current="${
      data.current ? 'page' : false
    }">${data.label}</db-link>\n`;
    html += listTag;
    if (hasChildren) {
      html += `<ul>\n${getCompDataHtml(data.children)}</ul>\n`;
    }
    html += '</li>';
  });
  return html;
};

const addAreaPopupsRecursive = (children: Element[]) => {
  if (children && children.length > 0) {
    children.forEach((child) => {
      if (child.tagName.toLowerCase() === 'li' && child.children) {
        const subChildren = Array.from(child.children);
        if (
          subChildren.find((sChild) => sChild.tagName.toLowerCase() === 'ul')
        ) {
          child.setAttribute('aria-haspopup', 'true');
        }
        addAreaPopupsRecursive(subChildren);
      }
    });
  }
};

@Component({
  tag: 'db-mainnavigation',
  styleUrl: 'db-mainnavigation.scss'
})
export class DbMainnavigation {
  get onlyLinks(): DbMainnavigationItemType[] {
    return this._onlyLinks;
  }

  set onlyLinks(value: DbMainnavigationItemType[]) {
    this._onlyLinks = value;
  }
  get hasItemsWrapper(): boolean {
    return this._hasItemsWrapper;
  }

  set hasItemsWrapper(value: boolean) {
    this._hasItemsWrapper = value;
  }
  get compData(): DbMainnavigationDataType[] {
    return this._compData;
  }

  set compData(value: DbMainnavigationDataType[]) {
    this._compData = value;
  }
  set children(value: Element[]) {
    this._children = value;
  }
  get children(): Element[] {
    return this._children;
  }
  /**
   * The site-name attribute can be set to have the site name for small screens.
   */
  @Prop({ reflect: true, attribute: 'site-name' }) siteName?: string;

  /**
   * The data attribute can be used to generate main navigation by data.
   */
  @Prop({ reflect: true }) data?: string;

  private _hasItemsWrapper: boolean;

  private _compData: DbMainnavigationDataType[];

  private _children: Element[];
  private _onlyLinks: DbMainnavigationItemType[];

  @Element() host: HTMLDbMainnavigationElement;

  componentWillLoad() {
    if (this.data) {
      this._compData = parseData(this.data);
    } else if (this.host) {
      this._children = Array.from(this.host.children);
      this._onlyLinks = setupOnlyDbLinkNavigation(this._children);
      if (
        this._children.find((child) => child.tagName.toLowerCase() === 'li')
      ) {
        this._hasItemsWrapper = true;
        addAreaPopupsRecursive(this._children);
      } else {
        this.host.innerHTML = '';
      }
    }
  }

  render() {
    return (
      <nav class="cmp-mainnavigation" id="mainnavigation">
        <input type="checkbox" id="toggle_mainnavigation" />
        <label
          htmlFor="toggle_mainnavigation"
          title="Toggle main navigation"
          class="is-site-name"
        >
          {this.siteName}
        </label>
        {this._compData && <ul innerHTML={getCompDataHtml(this._compData)} />}
        {!this._compData && (
          <ul>
            {this._onlyLinks && getJsxLinks(this._onlyLinks)}
            {!this._hasItemsWrapper &&
              !this._onlyLinks &&
              this._children?.map((child, index) => (
                <li
                  key={`cmp-mainnavigation-item-${index}`}
                  innerHTML={child.outerHTML}
                />
              ))}
            {this._hasItemsWrapper && <slot />}
          </ul>
        )}
      </nav>
    );
  }
}