ihk24/storybook/stories/components/a-z/a-z.js

import $ from 'jquery';
import {getUrlVars} from "../../_global/scripts/helpers";

class IHKIndex {
  constructor(section) {
    this.anchorLink = window.location.href.match(/#(.*)/);

    this.section = section.addClass('initiated');
    this.letterWrapper = section.find('.letters');
    this.letters = this.letterWrapper.find('a');
    this.contentWrapper = $('<div class="letter-content" />').insertAfter(this.letterWrapper);

    this.initContentWrappers();
    this.handleClicks();
    // this.initHeightCheck();
  }

  initContentWrappers() {
    this.letters.each((i, el) => {
      const letter = $(el).attr('data-index', i);
      const wrapper = $('<div class="a-z-content-wrapper" />').attr('data-source', letter.attr('href'));
      wrapper.appendTo(this.contentWrapper);
    })

    this.contents = this.contentWrapper.children();
  }

  handleClicks() {
    const urlParamsObj = getUrlVars();
    const letterInUrlParams = urlParamsObj.letter;
    const letterElementFromParams = this.section.find("[data-letter='" + letterInUrlParams + "']");

    this.letters.on('click', (e) => {
      e.preventDefault();

      const a = $(e.currentTarget);
      const index = parseInt(a.attr('data-index'));

      a.parent('li').addClass('active').siblings('.active').removeClass('active');

      this.contentWrapper.css('height', this.contentWrapper.outerHeight() + 'px');
      this.contents.eq(index).addClass('current').siblings('.current').removeClass('current');

      if (!this.contents.eq(index).hasClass('loading') && !this.contents.eq(index).hasClass('loaded')) {
        this.loadContent(index);
      } else {
        this.updateHeight();
      }
    });

    if (letterInUrlParams && letterElementFromParams.length > 0) {
      letterElementFromParams.find("a").trigger("click");
    } else {
      this.letters.first().trigger("click");
    }
  }

  initHeightCheck() {
    $(window).on('resize', (e) => {
      this.handleResize();
    })
    this.handleResize();
  }

  handleResize() {
    if (this.letterWrapper.height() > 60) {
      this.letterWrapper.addClass('not-sticky');
    } else {
      this.letterWrapper.removeClass('not-sticky');
    }
  }

  loadContent(index) {
    const t = this;
    const wrapper = this.contents.eq(index).addClass('loading');
    const outer = $('<div class="outer" />').appendTo(wrapper);
    let dataSource = this.section.attr('data-letter-content-url');
    const letterToLoad = this.letters.eq(index).parent().data("letter");
    if (!dataSource) {
      dataSource = this.letters.eq(index).attr('href');
    }

    const dataObj = {
      letter: letterToLoad
    };
    $.ajax({
      url: dataSource,
      data: dataObj,
      type: "GET",
      success: (result) => {
        outer.html(result);
        wrapper.removeClass('loading').addClass('loaded');
        $('body').trigger('dynamic-component-loaded');
        t.updateHeight();
      }
    });
  }

  updateHeight() {
    setTimeout(() => {
      this.contentWrapper.css('height', this.contentWrapper.children('.current').outerHeight() + 'px');
    }, 40)
    setTimeout(() => {
      this.contentWrapper.removeAttr('style');
    }, 500)

    if (this.anchorLink != null) {
      const anchorLinkElementText = (this.anchorLink[1].length > 10) ? this.anchorLink[1].substr(0, this.anchorLink[1].indexOf('&')) : this.anchorLink[1];
      const anchorLinkElement = $("#" + anchorLinkElementText);
      anchorLinkElement.css("display", "block");
      anchorLinkElement.parent().addClass("open");
      this.scrollToTarget(anchorLinkElement);
      this.anchorLink = null;
    } else {
      let target = this.section.offset().top - 100;

      if ($(window).width() < 768) {
        target = this.section.offset().top - 80;
      }
      if ($(window).scrollTop() > target) {
        $('html, body').animate({'scrollTop': target}, 500, 'easeInOutQuad');
      }
    }
  }

  scrollToTarget(anchorLinkElement) {
    // const anchorLinkElement = $("#" + anchorLink[1]);
    if (anchorLinkElement.length > 0) {
      $('html, body').animate({
        scrollTop: anchorLinkElement.first().offset().top - 250
      }, 200);
    }
  }
}

export default IHKIndex;

$('body').on('ihk-init dynamic-component-loaded gfi-dynamic-init', function () {
  $('.a-z:not(.initiated)').each(function (i) {
    new IHKIndex($(this));
  });
});