<commit_before>/* global document window */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import SprkMastheadMenuIcon from './components/SprkMastheadMenuIcon/SprkMastheadMenuIcon';
import SprkMastheadLittleNav from './components/SprkMastheadLittleNav/SprkMastheadLittleNav';
import SprkMastheadNarrowNav from './components/SprkMastheadNarrowNav/SprkMastheadNarrowNav';
import SprkMastheadBigNav from './components/SprkMastheadBigNav/SprkMastheadBigNav';
import SprkLink from '../SprkLink/SprkLink';
import { isElementVisible, scrollYDirection } from '@sparkdesignsystem/spark';
import throttle from 'lodash/throttle';

class SprkMasthead extends Component {
  constructor() {
    super();
    this.state = {
      narrowNavOpen: false,
      isScrolled: false,
      isHidden: false,
      isNarrowLayout: false,
      scrollDirection: 'up',
      currentLayout: false,
    };
    this.toggleNarrowNav = this.toggleNarrowNav.bind(this);
    this.toggleScrollEvent = this.toggleScrollEvent.bind(this);
    this.checkScrollDirection = this.checkScrollDirection.bind(this);
    this.throttledCheckScrollDirection = throttle(this.checkScrollDirection, 500);
    this.toggleMenu = this.toggleMenu.bind(this);
    this.checkIfNarrowLayout = this.checkIfNarrowLayout.bind(this);
    this.checkLayoutOnResize = this.checkLayoutOnResize.bind(this);
    this.throttledCheckLayoutOnResize = throttle(this.checkLayoutOnResize, 500);
    this.closeNarrowNavMenu = this.closeNarrowNavMenu.bind(this);
    this.setIsScrolled = this.setIsScrolled.bind(this);
    this.getCurrentLayout = this.getCurrentLayout.bind(this);
  }

  componentDidMount() {
    this.setState({ isNarrowLayout : isElementVisible('.sprk-c-Masthead__menu') });

    window.addEventListener('scroll', this.setIsScrolled);
    window.addEventListener('orientationchange', this.closeNarrowNavMenu);
    window.addEventListener('resize', this.throttledCheckLayoutOnResize);
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.setIsScrolled, false);
    window.removeEventListener('scroll', this.throttledCheckScrollDirection, false);
    window.removeEventListener('orientationchange', this.closeNarrowNavMenu, false);
    window.removeEventListener('resize', this.throttledCheckIfNarrowLayout, false);
  }

  toggleNarrowNav() {
    document.body.classList.toggle('sprk-u-Overflow--hidden');
    document.documentElement.classList.toggle('sprk-u-Overflow--hidden');

    this.setState(prevState => ({
      narrowNavOpen: !prevState.narrowNavOpen,
    }));

    // Don't add height: 100% if site's html & body el already have it (reapplying makes page jump)
    if (document.documentElement.style.height !== '100%') {
      document.documentElement.classList.toggle('sprk-u-Height--100');
    }
    if (document.body.style.height !== '100%') {
      document.body.classList.toggle('sprk-u-Height--100');
    }
  }

  closeNarrowNavMenu() {
    this.setState({ narrowNavOpen: false });
  }

  setIsScrolled() {
    if (window.scrollY >= 10) {
      this.setState({ isScrolled: true });
    } else {
      this.setState({ isScrolled: false });
    }
  }

  getCurrentLayout() {
    this.setState({ currentLayout : isElementVisible('.sprk-c-Masthead__menu')});
  }

  checkIfNarrowLayout() {
    if (this.state.isNarrowLayout !== this.state.currentLayout) {
      this.setState({ isNarrowLayout : this.state.currentLayout });
      this.toggleScrollEvent();
      if(!this.state.isNarrowLayout) {
        this.setState({ isHidden : false });
      }
    }
  }

  checkLayoutOnResize() {
    this.getCurrentLayout();
    this.checkIfNarrowLayout();
  }

  toggleMenu() {
    if(this.state.scrollDirection === 'down') {
      this.setState({ isHidden : true });
    } else {
      this.setState({ isHidden : false });
    }
  }

  checkScrollDirection() {
    const newDirection = scrollYDirection();
    if(this.state.scrollDirection !== newDirection) {
      this.setState({ scrollDirection : newDirection });
      this.toggleMenu();
    }
  }

  toggleScrollEvent() {
    if(this.state.isNarrowLayout) {
      window.addEventListener('scroll', this.throttledCheckScrollDirection);
    } else {
      window.removeEventListener('scroll', this.throttledCheckScrollDirection, false);
    }
  }

  render() {
    const {
      additionalClasses,
      analyticsString,
      bigNavLinks,
      idString,
      littleNavLinks,
      narrowNavLinks,
      narrowSelector,
      siteLogo,
      selector,
      utilityContents,
      variant,
      logoLink,
      logoLinkElement,
      navLink,
    } = this.props;
    const { isScrolled, narrowNavOpen, isHidden } = this.state;

    // On render check whether to add the scroll event
    this.toggleScrollEvent();<commit_msg>clean up if statements<commit_after>/* global document window */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import SprkMastheadMenuIcon from './components/SprkMastheadMenuIcon/SprkMastheadMenuIcon';
import SprkMastheadLittleNav from './components/SprkMastheadLittleNav/SprkMastheadLittleNav';
import SprkMastheadNarrowNav from './components/SprkMastheadNarrowNav/SprkMastheadNarrowNav';
import SprkMastheadBigNav from './components/SprkMastheadBigNav/SprkMastheadBigNav';
import SprkLink from '../SprkLink/SprkLink';
import { isElementVisible, scrollYDirection } from '@sparkdesignsystem/spark';
import throttle from 'lodash/throttle';

class SprkMasthead extends Component {
  constructor() {
    super();
    this.state = {
      narrowNavOpen: false,
      isScrolled: false,
      isHidden: false,
      isNarrowLayout: false,
      scrollDirection: 'up',
      currentLayout: false,
    };
    this.toggleNarrowNav = this.toggleNarrowNav.bind(this);
    this.toggleScrollEvent = this.toggleScrollEvent.bind(this);
    this.checkScrollDirection = this.checkScrollDirection.bind(this);
    this.throttledCheckScrollDirection = throttle(this.checkScrollDirection, 500);
    this.toggleMenu = this.toggleMenu.bind(this);
    this.checkIfNarrowLayout = this.checkIfNarrowLayout.bind(this);
    this.checkLayoutOnResize = this.checkLayoutOnResize.bind(this);
    this.throttledCheckLayoutOnResize = throttle(this.checkLayoutOnResize, 500);
    this.closeNarrowNavMenu = this.closeNarrowNavMenu.bind(this);
    this.setIsScrolled = this.setIsScrolled.bind(this);
    this.getCurrentLayout = this.getCurrentLayout.bind(this);
  }

  componentDidMount() {
    this.setState({ isNarrowLayout : isElementVisible('.sprk-c-Masthead__menu') });

    window.addEventListener('scroll', this.setIsScrolled);
    window.addEventListener('orientationchange', this.closeNarrowNavMenu);
    window.addEventListener('resize', this.throttledCheckLayoutOnResize);
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.setIsScrolled, false);
    window.removeEventListener('scroll', this.throttledCheckScrollDirection, false);
    window.removeEventListener('orientationchange', this.closeNarrowNavMenu, false);
    window.removeEventListener('resize', this.throttledCheckIfNarrowLayout, false);
  }

  toggleNarrowNav() {
    document.body.classList.toggle('sprk-u-Overflow--hidden');
    document.documentElement.classList.toggle('sprk-u-Overflow--hidden');

    this.setState(prevState => ({
      narrowNavOpen: !prevState.narrowNavOpen,
    }));

    // Don't add height: 100% if site's html & body el already have it (reapplying makes page jump)
    if (document.documentElement.style.height !== '100%') {
      document.documentElement.classList.toggle('sprk-u-Height--100');
    }
    if (document.body.style.height !== '100%') {
      document.body.classList.toggle('sprk-u-Height--100');
    }
  }

  closeNarrowNavMenu() {
    this.setState({ narrowNavOpen: false });
  }

  setIsScrolled() {
    if (window.scrollY >= 10) {
      this.setState({ isScrolled: true });
    } else {
      this.setState({ isScrolled: false });
    }
  }

  getCurrentLayout() {
    this.setState({ currentLayout : isElementVisible('.sprk-c-Masthead__menu')});
  }

  checkIfNarrowLayout() {
    if (this.state.isNarrowLayout !== this.state.currentLayout) {
      this.setState({ isNarrowLayout : this.state.currentLayout });
      this.toggleScrollEvent();
      if (!this.state.isNarrowLayout) {
        this.setState({ isHidden : false });
      }
    }
  }

  checkLayoutOnResize() {
    this.getCurrentLayout();
    this.checkIfNarrowLayout();
  }

  toggleMenu() {
    if (this.state.scrollDirection === 'down') {
      this.setState({ isHidden : true });
    } else {
      this.setState({ isHidden : false });
    }
  }

  checkScrollDirection() {
    const newDirection = scrollYDirection();
    if (this.state.scrollDirection !== newDirection) {
      this.setState({ scrollDirection : newDirection });
      this.toggleMenu();
    }
  }

  toggleScrollEvent() {
    if (this.state.isNarrowLayout) {
      window.addEventListener('scroll', this.throttledCheckScrollDirection);
    } else {
      window.removeEventListener('scroll', this.throttledCheckScrollDirection, false);
    }
  }

  render() {
    const {
      additionalClasses,
      analyticsString,
      bigNavLinks,
      idString,
      littleNavLinks,
      narrowNavLinks,
      narrowSelector,
      siteLogo,
      selector,
      utilityContents,
      variant,
      logoLink,
      logoLinkElement,
      navLink,
    } = this.props;
    const { isScrolled, narrowNavOpen, isHidden } = this.state;

    // On render check whether to add the scroll event
    this.toggleScrollEvent();
{'fraction_non_alphanumeric': 0.12164542534452388, 'fraction_numerical': 0.0047663454564293856, 'mean_word_length': 3.850251256281407, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 7, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3019243', 'n_tokens_mistral': 2944, 'n_tokens_neox': 2887, 'n_words': 478}