ihk24/gfi-ihk-2024/stories/components/header/header.js

import $ from 'jquery';

require('jquery.easing');
import {StudioPreviewUtil} from '../../_global/scripts/utils/StudioPreviewUtil';

class IHKHeader {
  constructor(header) {
    this.header = header.addClass('initiated');
    this.window = $(window);
    this.body = $('body');
    this.overlayOpen = false;
    this.showOpenedNav = this.header.find('.primary').data("show-opened-menu");
    const t = this;

    this.initLogo();
    this.initTopLink();
    this.initScroll();
    this.initSearch();
    this.initPrimaryNav();
    this.initSecondaryNav();
    this.initToggling();
    this.initLanguage();

    if (this.showOpenedNav) {
      t.header.find('.toggle-nav').click();
    }

    this.body.on('open-navigation', function (event, data) {
      if (data.openMenu) {
        t.header.find('.toggle-nav').click();
      }
      t.initPrimaryNav(data.rootUrl);
    });
  }

  initLogo() {
    const t = this;
    const logo = t.header.find('.logo');
    const img = logo.find('img');
    const overlay = $('<span class="logo-overlay" />').appendTo(logo);

    const logoObserver = new ResizeObserver(() => {
      if (img.height() < 44) {
        overlay.css('left', img.height() * 2.1);
      } else {
        overlay.removeAttr('style');
      }
    })

    logoObserver.observe(img.get(0));
  };

  initTopLink() {
    const t = this;
    const toplink = $('<a href="#" class="toplink" tabindex="-1" />').text('Top').prependTo(t.header);

    toplink.on('click', function (e) {
      e.preventDefault();
      $('html, body').animate({'scrollTop': 0}, Math.round($(window).scrollTop() / 12 + 300), 'easeOutQuad');
    })
  }

  initSearch() {
    const t = this;
    const formNav = $('<div class="form-nav" />').appendTo(t.header.find('.search form'));

    t.header.find('nav .secondary').clone().appendTo(formNav);
    t.header.find('nav .meta').clone().appendTo(formNav);

    t.header.find('.open-search, .close-search').on('click', function (e) {
      t.header.toggleClass('search-open').removeClass('nav-open');
      if (t.header.hasClass('search-open')) {
        setTimeout(function () {
          t.header.find('.search-field').focus();
        }, 200)
      }
      t.toggleContentScroll();
    })
  };

  initScroll() {
    const t = this;

    // State Machine für Scroll-Verhalten
    t.scrollState = {
      current: 'top', // 'top', 'scrolling-down', 'scrolled', 'scrolling-up'
      lastPosition: 0,
      transitioning: false
    };

    window.addEventListener("scroll", function () {
      if (t.scrollState.transitioning) return;

      window.requestAnimationFrame(function () {
        t.checkScrollWithStateMachine();
      });
    }, {passive: true});
  }

  checkScrollWithStateMachine() {
    const t = this;
    const st = this.window.scrollTop();
    const state = t.scrollState;

    if (t.overlayOpen || $('.gallery-popup.open').length) {
      return false;
    }

    const delta = st - state.lastPosition;
    const isScrollingDown = delta > 0;
    const isScrollingUp = delta < 0;

    switch (state.current) {
      case 'top':
        if (st > 100 && isScrollingDown) {
          t.transitionTo('scrolled');
        }
        break;

      case 'scrolled':
        if (st < 30 && isScrollingUp) {
          t.transitionTo('top');
        }
        break;
    }

    state.lastPosition = st;

    // Toplink logic
    if (st > this.window.height() * 1.2) {
      this.header.addClass('show-toplink');
    } else {
      this.header.removeClass('show-toplink');
    }
  }

  transitionTo(newState) {
    const t = this;
    t.scrollState.transitioning = true;

    if (newState === 'scrolled') {
      this.header.addClass('scrolled');
      this.body.addClass('header-scrolled');
    } else if (newState === 'top') {
      this.header.removeClass('scrolled');
      this.body.removeClass('header-scrolled');
    }

    t.scrollState.current = newState;

    // Transition Lock
    setTimeout(() => {
      t.scrollState.transitioning = false;
    }, 150);
  }

  initToggling() {
    this.header.find('.overlay-holder').on('click touch', this.toggleNavigation.bind(this));
    this.header.find('.toggle-nav').on('click touch', this.toggleNavigation.bind(this));
  };

  toggleNavigation() {
    const t = this;
    if (StudioPreviewUtil && StudioPreviewUtil.isStudioPreview()) {
      $("html").stop().animate({'scrollTop': 0}, 300, 'swing', function () {
        t.header.toggleClass('nav-open');
        t.toggleContentScroll();
      });
    } else {
      t.header.toggleClass('nav-open');
      t.toggleContentScroll();
    }
  };

  initPrimaryNav(optionalRootUrl) {
    const t = this;
    const primary = t.header.find('.primary');

    $(primary).empty();
    t.baseUrl = primary.attr('data-base-url');
    t.rootUrl = primary.attr('data-root-url');

    if (optionalRootUrl) {
      t.rootUrl = optionalRootUrl;
      primary.off('click', 'a');
    }

    primary.append($('<ul class="current" />').attr('data-json', t.baseUrl + t.rootUrl));

    primary.on('click', 'a', function (e) {
      const a = $(this);
      const li = a.parent();
      const ul = li.parent('ul');

      if (li.hasClass('deep')) {
        e.preventDefault();

        if (a.siblings('ul').length) {
          ul.removeClass('current');
          t.toTop(ul);
          a.siblings('ul').addClass('current');
          li.addClass('open');
          t.manageTabIndex();
        } else {
          const deepUl = $('<ul />').attr('data-json', a.attr('href')).appendTo(li);
          t.loadNav(deepUl);
        }
      } else if (li.hasClass('back')) {
        e.preventDefault();
        t.toTop(ul);

        if (ul.closest('li').length) {
          ul.removeClass('current')
            .closest('li').removeClass('open')
            .parent('ul').addClass('current');
          t.manageTabIndex();
        } else {
          const backUl = $('<ul />').attr('data-json', a.attr('href')).insertBefore(ul);
          t.loadNav(backUl);
        }
      }
    });

    t.loadNav(t.header.find('.primary ul'));
  }

  openMenuByUrlParam(anchor, t) {
    const li = anchor.parent();
    const ul = li.parent('ul');
    if (li.hasClass('deep')) {
      if (anchor.siblings('ul').length) {
        ul.removeClass('current');
        t.toTop(ul);
        anchor.siblings('ul').addClass('current');
        li.addClass('open');
        t.manageTabIndex();
      } else {
        const deepUl = $('<ul />').attr('data-json', anchor.attr('href')).appendTo(li);
        t.loadNav(deepUl);
      }
    }
  }

  initSecondaryNav() {
    // secondary-nav-item
    const t = this;
    const $secondary = t.header.find("nav").find(".secondary");
    const $secondaryItems = $secondary.find(".secondary-nav-item");
    $.each($secondaryItems, function (index, element) {
      $(element).on("click", function (e) {
        if ($(element).data("is-channel")) {
          e.preventDefault();
          const elementRootUrl = $(this).data("root-url");
          t.initPrimaryNav(elementRootUrl);
        } else {
          return true;
        }
      });
    });
  }

  loadNav(ul) {
    const t = this;
    const currentPageId = t.header.find('.primary').data("page-content-id");

    if (ul.parent('li').length) {
      ul.addClass('current');
      setTimeout(function () {
        const parentUl = ul.addClass('loading').parent('li').addClass('open')
          .closest('.current').removeClass('current');
        t.toTop(parentUl);
      }, 20)
    }
    $.ajax({
      url: ul.attr('data-json'),
      type: "GET",
      dataType: "json",
      xhrFields: {withCredentials: true}
    }).done(function (data) {
      ul.attr('data-cm-metadata', '[{"_":{"$Ref":"content/' + data.tocListId + '"}}]');
      if (data.parentId) {
        $('<li class="back" />').appendTo(ul)
          .append($('<a />').attr('href', t.baseUrl + data.parentId).text(data.title));
      }
      if (!data.hideOverview) {
        if (data.showOverview) {
          const overviewElement = $('<li class="overview" />');
          overviewElement.appendTo(ul)
            .append($('<a />').attr('href', data.url).text(window.ihk.translations.overview));

          if (data.contentId === currentPageId.toString()) {
            overviewElement.find("a").addClass("active");
          }
        }
      }
      const parentElement = data;
      $.each(data.items, function () {
        const itemsBaseUrl = ihk.settings.navigationItemsUrl;
        let itemUrl = this.url;
        if (itemsBaseUrl) {
          itemUrl = itemsBaseUrl + itemUrl;
        }

        let li = $('<li />').attr('data-id', this.contentId).attr('data-cm-metadata', '[{"_":{"$Ref":"content/' + this.contentId + '"}}]').appendTo(ul),
          a = $('<a />').html(this.title).appendTo(li);

        switch (this.type) {
          case "CMChannel" :
            li.addClass('deep');
            a.attr('href', t.baseUrl + this.contentId);
            break;
          case "CMArticle" :
            li.addClass('link');
            a.attr('href', itemUrl);
            break;
          default :
            li.addClass('miscellaneous');
            li.attr('data-type', this.type);
            a.attr('href', itemUrl);
        }

        if (this.linktype && this.linktype === 'external') {
          li.addClass('external');
          $(li).find("a").attr("target", "_blank")
        }

        if (this.viewType === 'onlinemagazinstart') {
          // todo als link
          li.removeClass('deep');
          li.addClass('magazine-nav');
          $(li).find("a").attr("href", itemUrl);
          if (this.titleImage) {
            a.text('').append($('<img src="' + this.titleImage + '" alt="' + this.title + '" />'))
          }
        }
        if ((this.viewType === 'themenseite' || this.viewType === 'ihk-wahl-startseite')  && (!parentElement.root || this.skipEmptyMenu)) {
          li.addClass('overview');
          li.removeClass('deep');
          a.attr('href', itemUrl);
        }

        if (this.trackCode && this.trackCode.length > 0) {
          $(li).find("a").attr("onmousedown", this.trackCode);
        }

        if (this.restrictedTo && this.restrictedTo.indexOf('extranet') > -1) {
          li.addClass('extranet');
        } else if (this.restrictedTo && this.restrictedTo.indexOf('intranet') > -1) {
          li.addClass('intranet');
        }

        if (this.linktype && this.linktype === 'document') {
          li.addClass('download');
        }

        if (this.contentId === currentPageId.toString()) {
          $(li).find("a").addClass("active");
        }
      });

      ul.addClass('current').attr('data-id', data.contentId);

      if (ul.parent('li').length) {
        setTimeout(function () {
          const parentUl = ul.removeClass('loading').parent('li').addClass('open')
            .closest('.current').removeClass('current');
          t.toTop(parentUl);
          t.manageTabIndex();
        }, 20)
      } else if (ul.next('ul').length) {
        const innerUl = ul.next('ul');
        let wrapperLi = ul.find('li[data-id="' + innerUl.attr('data-id') + '"]').addClass('open');

        if (!wrapperLi.length) {
          wrapperLi = $('<li />').addClass('open').appendTo(ul);
        }

        wrapperLi.append(innerUl);

        setTimeout(function () {
          innerUl.removeClass('current');
          wrapperLi.removeClass('open');
          t.manageTabIndex();
        }, 20)
      }

      let hash = window.location.hash;
      if (hash) {
        let menuId = hash.substring(1);
        if (!menuId.startsWith('/')) {
          let li = ul.find('li[data-id=' + menuId + ']');
          if (li.length > 0) {
            t.toggleNavigation();
            let anchor = li.find('a');
            if (anchor.length > 0) {
              t.openMenuByUrlParam(anchor, t);
            }
          }
        }
      }
    })
  }

  toggleContentScroll() {
    const t = this;

    if (t.header.hasClass('nav-open') || t.header.hasClass('search-open')) {
      t.overlayOpen = true;
      this.body.trigger('overlay-open');
      t.body.css('top', (t.window.scrollTop() * -1) + 'px').addClass('nav-open');
      if (t.header.hasClass('search-open')) {
        t.body.addClass('search-open');
      }
    } else {
      t.overlayOpen = false;
      this.body.trigger('overlay-close');
      const top = Math.abs(parseInt(t.body.css('top')));
      t.body.removeClass('nav-open').removeClass('search-open').removeAttr('style');
      t.window.scrollTop(top);
    }
  }

  initLanguage() {
    const lang = this.header.find('.language');

    lang.find('button').on('click', function (e) {
      lang.toggleClass('open');
    })

    lang.on('click', function (e) {
      e.stopPropagation();
    })

    this.body.on('click', function () {
      lang.removeClass('open');
    })

    lang.siblings().find('a').on('focus', function () {
      lang.removeClass('open');
    })
  }

  manageTabIndex() {
    this.header.find('.primary a').attr('tabindex', '-1');
    this.header.find('.primary .current > li > a').removeAttr('tabindex');
  }

  toTop(ul) {
    if (ul.scrollTop() > 0) {
      ul.animate({'scrollTop': 0}, 300, 'swing');
    }
  }
}

export default IHKHeader;

$('body').on('ihk-init', function () {
  $('.page-header:not(.initiated)').each((i, el) => {
    new IHKHeader($(el));
  });
});