class Header

    0

    5

    Al Bor

    Headerclass

    var Header = require('./components/Header'); Header.init = function() { this.

    Shortcut: Header

    class Header {
      get SELECTORS() {
      return {
        header: '.header',
        menuTrigger: '.header__menu_trigger',
        menuRow: '.menuRow',
        subMenuTrigger: '.subMenuTrigger',
        subMenuItem: '.subMenuItem',
      };
      }
    
      get CLASSNAMES() {
      return {
        bodyOpenMenuState: 'body--open_menu_state',
        subMenuItemStateClassName: 'sub_menu--active_state',
        subMenuTriggerStateClassName: 'menu__btn--active_state',
      };
      }
    
      constructor() {
      this.$body = document.body;
      this.$header = document.querySelector(this.SELECTORS.header);
      this.$menuTrigger = document.querySelectorAll(this.SELECTORS.menuTrigger);
      this.menuRow = document.querySelector(this.SELECTORS.menuRow);
      this.$subMenuTrigges = this.$header.querySelectorAll(this.SELECTORS.subMenuTrigger);
      this.$subMenuItems = this.$header.querySelectorAll(this.SELECTORS.subMenuItem);
      this.openMenuState = false;
      this.windowWidth = window.innerWidth;
      this.mediaPoint_1 = 1300;
    
      this.init = this.init.bind(this);
      this.init();
      }
    
      openMenu() {
      if (!this.openMenuState) {
        this.$body.classList.add(this.CLASSNAMES.bodyOpenMenuState);
        this.openMenuState = true;
    
        if (this.windowWidth < this.mediaPoint_1) {
        const headerHeight = this.$header.clientHeight;
        this.menuRow.style.top = `${headerHeight - 10 }px`; // eslint-disable-line
        }
      } else {
        this.$body.classList.remove(this.CLASSNAMES.bodyOpenMenuState);
        this.openMenuState = false;
      }
      }
    
      removeActiveState() {
      const $activeTriggerMenu = document.querySelector(`.${this.CLASSNAMES.subMenuTriggerStateClassName}`);
      const $activeMenu = document.querySelector(`.${this.CLASSNAMES.subMenuItemStateClassName}`);
    
      if (typeof ($activeTriggerMenu) !== 'undefined' && $activeTriggerMenu != null) {
        $activeTriggerMenu.classList.remove(this.CLASSNAMES.subMenuTriggerStateClassName);
      }
      if (typeof ($activeMenu) !== 'undefined' && $activeMenu != null) {
        $activeMenu.classList.remove(this.CLASSNAMES.subMenuItemStateClassName);
        $activeMenu.style.maxHeight = null;
      }
      }
    
      initsubMenu() {
      if (this.windowWidth < this.mediaPoint_1) {
        this.$subMenuItems.forEach((item) => {
        const $subMenuCloseTrigger = item.querySelector('.subMenuCloseTrigger');
    
        if (typeof ($subMenuCloseTrigger) !== 'undefined' && $subMenuCloseTrigger != null) {
          $subMenuCloseTrigger.addEventListener('click', () => {
          this.removeActiveState();
          });
        }
        });
    
        const menuOpen = (triggerData) => {
        this.$subMenuItems.forEach((menu) => {
          const dataMenu = menu.dataset.menu;
          if (triggerData === dataMenu) {
          menu.classList.add(this.CLASSNAMES.subMenuItemStateClassName);
          menu.style.maxHeight = menu.scrollHeight + 'px'; // eslint-disable-line
          }
        });
        };
    
        this.$subMenuTrigges.forEach((item, index) => {
        item.addEventListener('click', (e) => {
          const dataTriggerMenu = item.dataset.menu;
          if (!item.classList.contains(this.CLASSNAMES.subMenuTriggerStateClassName)) {
          this.removeActiveState();
          item.classList.add(this.CLASSNAMES.subMenuTriggerStateClassName);
          menuOpen(dataTriggerMenu);
          } else {
          if (item.classList.contains(this.CLASSNAMES.subMenuTriggerStateClassName) && !e.composedPath().includes('.sub_menu')) {
            this.removeActiveState();
          }
          }
        });
        });
      }
      }
    
      init() {
      if (typeof (this.$header) !== 'undefined' && this.$header != null) {
        // onWindowScroll(this.headerScroll);
        this.$menuTrigger.forEach(item => {
        item.addEventListener('click', () => {
          this.openMenu();
        });
        });
    
        if (this.$subMenuItems && this.$subMenuTrigges.length) {
        this.initsubMenu();
        }
      }
      }
    }
    
    export default Header;
    // ------------ how init
    // copy past this
    
    // import this and if u need fix path
    // import Header from './components/Header';
    
    // add it in loadFunc
    // const initHeader = new Header();
    
    // this style for body and add some style to header
    // body.body--open_menu_state {
    // 	position: fixed;
    // 	left: 0;
    // 	top: 0;
    
    // 	width: 100%;
    // }
    Codiga Logo
    Codiga Hub
    • Rulesets
    • Playground
    • Snippets
    • Cookbooks
    soc-2 icon

    We are SOC-2 Compliance Certified

    G2 high performer medal

    Codiga – All rights reserved 2022.