ihk24/storybook/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.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();
      }
    });
  }

  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;

    window.addEventListener("scroll", function () {
      window.requestAnimationFrame(function () {
        t.checkScroll();
      })
    }, {passive: true});
  };

  checkScroll() {
    const t = this;
    const st = this.window.scrollTop();

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

    if (st > 59) {
      this.header.addClass('scrolled');
      this.body.addClass('header-scrolled');
    } else {
      this.header.removeClass('scrolled');
      this.body.removeClass('header-scrolled');
    }

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

  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();
    }
  };

  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');
    })
  }
}

export default IHKHeader;

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