accordion-item.tsx

import {Component, Listen, Prop, State, Element, h} from '@stencil/core';

@Component({
  tag: 'hy-accordion-item',
  styleUrl: 'accordion-item.scss',
  shadow: false
})
export class AccordionItem {
  @Element() el: HTMLElement;
  @Prop() accordiontitle?: string;
  @State() ready: boolean = false;

  @Listen('window:hashchange')
  onHashChange() {
    let anchor = window.location.hash;

    if (anchor.length > 0) {
      //console.log(anchor);
      //console.log('Please Open the Panel');

      let target = document.querySelectorAll(`${anchor}`)[0];
      let targetParent = target.closest('.hy-accordion__item');
      let targetContent = targetParent.querySelectorAll('.hy-accordion__content')[0];
      this.expandSection1(targetContent);
    }
  }

  componentDidLoad() {
    this.ready = true;
  }

  componentDidRender() {
    let anchor = window.location.hash;

    if (anchor.length > 0) {
      console.log(anchor);
      console.log('Please Open the Panel');

      let target = document.querySelectorAll(`${anchor}`)[0];
      let targetParent = target.closest('.hy-accordion__item');
      let targetContent = targetParent.querySelectorAll('.hy-accordion__content')[0];
      this.expandSection1(targetContent);
    }
  }

  collapseSection1(element) {
    element.style.height = 0 + 'px';
    element.setAttribute('data-collapsed', 'true');
    setTimeout(() => {
      element.style.display = 'none';
    }, 250);
  }

  expandSection1(element) {
    element.style.display = 'block';
    element.style.height = element.scrollHeight + 'px';
    element.setAttribute('data-collapsed', 'false');
  }

  render() {
    const containerId = this.el.parentElement.id;

    function collapseSection(element) {
      element.style.height = 0 + 'px';
      element.setAttribute('data-collapsed', 'true');
      setTimeout(() => {
        element.style.display = 'none';
      }, 250);
    }

    function expandSection(element) {
      element.style.display = 'block';
      element.style.height = element.scrollHeight + 'px';
      element.setAttribute('data-collapsed', 'false');
    }

    if (this.ready && containerId.length > 0) {
      document.querySelectorAll(`#${containerId}`).forEach(function (accordion) {
        const allowMultiple = accordion.hasAttribute('data-allow-multiple');
        const allowToggle = allowMultiple ? allowMultiple : accordion.hasAttribute('data-allow-toggle');

        const triggers = Array.prototype.slice.call(accordion.querySelectorAll('.hy-accordion__button'));

        accordion.addEventListener('click', function (event) {
          let target = event.target as HTMLTextAreaElement;
          const targetElement = target.tagName.toLowerCase();
          const possibleTags = [targetElement].some((r) => ['svg', 'path', 'button'].indexOf(r) >= 0);

          if (target && possibleTags) {
            if (targetElement !== 'button') {
              target = target.closest('.hy-accordion__button');
            }
            let targetParent = target.closest('.hy-accordion__item');
            let targetContent = targetParent.querySelectorAll('.hy-accordion__content')[0];
            const isExpanded = target.getAttribute('aria-expanded') == 'true';
            const active = accordion.querySelector('[aria-expanded="true"]');

            if (!allowMultiple && active && active !== target) {
              active.setAttribute('aria-expanded', 'false');
              collapseSection(targetContent);
              if (targetParent.classList.contains('hy-accordion__item__is-open')) {
                targetParent.classList.remove('hy-accordion__item__is-open');
              }
              accordion.querySelector(`#${active.getAttribute('aria-controls')}`).setAttribute('aria-hidden', 'true');

              if (!allowToggle) {
                active.removeAttribute('aria-disabled');
              }
            }

            if (!isExpanded) {
              expandSection(targetContent);
              target.setAttribute('aria-expanded', 'true');
              targetParent.classList.add('hy-accordion__item__is-open');

              accordion.querySelector(`#${target.getAttribute('aria-controls')}`).setAttribute('aria-hidden', 'false');

              if (!allowToggle) {
                target.setAttribute('aria-disabled', 'true');
              }
            } else if (allowToggle && isExpanded) {
              target.setAttribute('aria-expanded', 'false');
              collapseSection(targetContent);
              if (targetParent.classList.contains('hy-accordion__item__is-open')) {
                targetParent.classList.remove('hy-accordion__item__is-open');
              }
              accordion.querySelector(`#${target.getAttribute('aria-controls')}`).setAttribute('aria-hidden', 'true');
            }

            event.preventDefault();
            event.stopImmediatePropagation();
          }
        });

        if (accordion) {
          accordion.addEventListener('keydown', function (event: KeyboardEvent) {
            const target = event.target as HTMLButtonElement;
            const key = event.which.toString();

            // 33 = Page Up, 34 = Page Down
            const ctrlModifier = event.ctrlKey && key.match(/33|34/);

            if (target.classList.contains('hy-accordion__button')) {
              // Up/ Down arrow and Control + Page Up/ Page Down keyboard operations
              // 38 = Up, 40 = Down
              if (key.match(/38|40/) || ctrlModifier) {
                const index = triggers.indexOf(target);
                const direction = key.match(/34|40/) ? 1 : -1;
                const length = triggers.length;
                const newIndex = (index + length + direction) % length;
                triggers[newIndex].focus();

                event.preventDefault();
              } else if (key.match(/35|36/)) {
                // 35 = End, 36 = Home keyboard operations
                switch (key) {
                  // Go to first accordion
                  case '36':
                    triggers[0].focus();
                    break;
                  // Go to last accordion
                  case '35':
                    triggers[triggers.length - 1].focus();
                    break;
                }
                event.preventDefault();
              }
            }
          });

          accordion.querySelectorAll('.hy-accordion__button').forEach(function (trigger) {
            trigger.addEventListener('focus', function () {
              trigger.classList.add('focus');
            });
            trigger.addEventListener('blur', function () {
              trigger.classList.remove('focus');
            });
          });
        }
      });
    }

    const classAttributes = ['hy-accordion__item'];
    const titleAsId = this.accordiontitle.toLowerCase().replace(/\W/g, '-');
    const accordionItemHref = '#' + titleAsId + '--title';

    return (
      <div class={classAttributes.join(' ')}>
        <div class="hy-accordion--heading">
          <a href={accordionItemHref} class="hy-accordion__link">
            <button
              aria-expanded="false"
              aria-controls={`${titleAsId}--content`}
              class="hy-accordion__button"
              id={`${titleAsId}--title`}
            >
              <span class="hy-accordion--heading__icon">
                <hy-icon icon={'hy-icon-caret-down'} size={20} />
              </span>
              {this.accordiontitle}
            </button>
          </a>
        </div>
        <div
          aria-labelledBy={`${titleAsId}--title`}
          class="hy-accordion__content"
          id={`${titleAsId}--content`}
          role="region"
          aria-hidden="true"
          style={{display: 'none'}}
        >
          <hy-box pt="1.5" pb="3" pl="2" pr="2">
            <div class="hy-accordion__content--inner-wrapper">
              <slot></slot>
            </div>
          </hy-box>
        </div>
      </div>
    );

    /*
    return (
      <div class={classAttributes.join(' ')}>
        <div class="hy-accordion--heading">
            <button
              aria-expanded="false"
              aria-controls={`${titleAsId}--content`}
              class="hy-accordion__button"
              id={`${titleAsId}--title`}
            >
              <span class="hy-accordion--heading__icon">
                <hy-icon icon={'hy-icon-caret-down'} size={20} />
              </span>
              {this.accordiontitle}
            </button>
        </div>
        <div
          aria-labelledBy={`${titleAsId}--title`}
          class="hy-accordion__content"
          id={`${titleAsId}--content`}
          role="region"
          aria-hidden="true"
          style={{display: 'none'}}
        >
          <hy-box pt="1.5" pb="3" pl="2" pr="2">
            <div class="hy-accordion__content--inner-wrapper">
              <slot></slot>
            </div>
          </hy-box>
        </div>
      </div>
    );
    */
  }
}