Course Overview: Default

import { gsap } from 'gsap';
import { ScrollToPlugin } from 'gsap/ScrollToPlugin';

export default parentElement => {
  const bookCourse = parentElement.querySelector('#efl-online-book-course');
  const findCOurse = parentElement.querySelector('#efl-offline-find-course');
  const courseAvail = document.querySelector(
    '[data-behavior=course-availability]'
  );
  const courseAvail2 = document.querySelector('.membership-signpost');
  const boxWidth = parentElement.clientWidth;
  const boxHeight = parentElement.clientHeight;
  const MOBILE_BREAKPOINT = 820;
  const mobTouch = parentElement.querySelector('.course-overview_show-hide');
  const mobSwipe = parentElement.querySelector('.course-overview__inner');
  const defaultWidth = window.innerWidth;

  gsap.registerPlugin(ScrollToPlugin);

  const courseJourneyTwo = () => {
    if (!courseAvail) {
      return false;
    }

    gsap.to(window, {
      duration: 5,
      scrollTo: { y: courseAvail.offsetTop },
      ease: 'power2',
    });
    // window.scroll(0, courseAvail.offsetTop);
    return true;
  };

  const courseJourneyFour = () => {
    if (!courseAvail2) {
      return false;
    }
    gsap.to(window, {
      duration: 5,
      scrollTo: { y: courseAvail2.offsetTop },
      ease: 'power2',
    });
    // window.scroll(0, courseAvail2.offsetTop);
    return true;
  };

  const setContainerSize = () => {
    // eslint-disable-next-line no-param-reassign
    parentElement.style.width = `${boxWidth}px`;
    // eslint-disable-next-line no-param-reassign
    parentElement.style.height = `${boxHeight}px`;
  };

  const findPos = obj => {
    // eslint-disable-next-line no-unused-vars
    let curleft = 0;
    let curtop = 0;

    if (obj.offsetParent) {
      curleft = obj.offsetLeft;
      curtop = obj.offsetTop;

      // eslint-disable-next-line no-param-reassign, no-cond-assign
      while ((obj = obj.offsetParent)) {
        curleft += obj.offsetLeft;
        curtop += obj.offsetTop;
      }
    }
    return curtop;
  };

  if (bookCourse) {
    if (courseAvail) {
      const titleTxt = courseAvail.querySelector('h2').innerText;

      bookCourse.setAttribute(
        'aria-label',
        `${bookCourse.innerText} jump to ${titleTxt} section`
      );
    } else {
      bookCourse.setAttribute(
        'aria-label',
        `Course overview - ${bookCourse.innerText}`
      );
    }
    bookCourse.addEventListener('click', () => courseJourneyTwo());

    bookCourse.addEventListener('keyup', event => {
      if (event.keyCode === 13) {
        // Cancel the default action, if needed
        event.preventDefault();
        bookCourse.click();
      }
    });
  }

  if (findCOurse) {
    if (courseAvail2) {
      const titleTxt2 = courseAvail2.querySelector('h3').innerText;

      findCOurse.setAttribute(
        'aria-label',
        `${findCOurse.innerText} jump to ${titleTxt2} section`
      );
    } else {
      findCOurse.setAttribute(
        'aria-label',
        `Course overview - ${findCOurse.innerText}`
      );
    }
    findCOurse.addEventListener('click', () => courseJourneyFour());

    findCOurse.addEventListener('keyup', event => {
      if (event.keyCode === 13) {
        // Cancel the default action, if needed
        event.preventDefault();
        findCOurse.click();
      }
    });
  }

  setContainerSize();
  // eslint-disable-next-line complexity
  window.addEventListener('scroll', () => {
    const courseOverviewInner = parentElement.querySelector(
      '.course-overview__inner'
    );

    if (window.innerWidth > MOBILE_BREAKPOINT) {
      if (
        parentElement.querySelector('article').getAttribute('aria-expanded') ===
        'true'
      ) {
        mobTouch.innerHTML = 'Hide Course Overview';
      } else {
        mobTouch.innerHTML = 'Show Course Overview';
      }
    } else {
      mobTouch.innerHTML = null;
    }

    if (findPos(parentElement) + parentElement.clientHeight < window.scrollY) {
      if (
        !parentElement.classList.contains('sticky') &&
        findPos(parentElement) + parentElement.clientHeight + 200 >
          window.scrollY
      ) {
        parentElement.classList.add('sliding');
      }
      parentElement.classList.add('sticky');
      if (
        !parentElement.querySelector('article').getAttribute('aria-expanded')
      ) {
        // eslint-disable-next-line no-param-reassign
        parentElement
          .querySelector('article')
          .setAttribute('aria-expanded', 'false');
      }

      setTimeout(() => {
        parentElement.classList.remove('sliding');
      }, 305);
    } else {
      parentElement.classList.remove('sliding');
      parentElement.classList.remove('sticky');
      // eslint-disable-next-line no-param-reassign
      parentElement.querySelector('article').removeAttribute('aria-expanded');
    }

    // Removing Course Overview
    // landing page, default variant
    if (courseAvail) {
      if (
        window.innerWidth > MOBILE_BREAKPOINT &&
        window.scrollY + window.innerHeight > findPos(courseAvail)
      ) {
        parentElement.classList.remove('sticky');
      } else if (
        window.innerWidth < MOBILE_BREAKPOINT &&
        window.scrollY + window.innerHeight > findPos(courseAvail)
      ) {
        parentElement.classList.remove('sticky');
      }
    }

    // landing page, find-course variant
    if (courseAvail2) {
      if (
        window.innerWidth > MOBILE_BREAKPOINT &&
        window.scrollY >
          findPos(courseAvail2) - courseOverviewInner.clientHeight - 100
      ) {
        parentElement.classList.remove('sticky');
      } else if (
        window.innerWidth < MOBILE_BREAKPOINT &&
        window.scrollY + window.innerHeight > findPos(courseAvail2)
      ) {
        parentElement.classList.remove('sticky');
      }
    }
  });

  window.addEventListener('load', () => {
    let startX;
    let startY;
    let dist;
    const threshold = 150; // required min distance traveled to be considered swipe
    const allowedTime = 500; // maximum time allowed to travel that distance
    let elapsedTime;
    let startTime;

    function handleswipe(isupswipe) {
      if (isupswipe) {
        if (
          parentElement
            .querySelector('article')
            .getAttribute('aria-expanded') === 'true'
        ) {
          // eslint-disable-next-line no-param-reassign
          parentElement
            .querySelector('article')
            .setAttribute('aria-expanded', 'false');
        } else {
          // eslint-disable-next-line no-param-reassign
          parentElement
            .querySelector('article')
            .setAttribute('aria-expanded', 'true');
        }
      }
    }
    mobTouch.addEventListener('click', () => {
      if (
        parentElement.querySelector('article').getAttribute('aria-expanded') ===
        'true'
      ) {
        // eslint-disable-next-line no-param-reassign
        parentElement
          .querySelector('article')
          .setAttribute('aria-expanded', 'false');
        if (window.innerWidth > MOBILE_BREAKPOINT) {
          mobTouch.innerHTML = 'Show Course Overview';
        }
      } else {
        // eslint-disable-next-line no-param-reassign
        parentElement
          .querySelector('article')
          .setAttribute('aria-expanded', 'true');
        if (window.innerWidth > MOBILE_BREAKPOINT) {
          mobTouch.innerHTML = 'Hide Course Overview';
        }
      }
    });

    mobSwipe.addEventListener('touchstart', e => {
      const touchobj = e.changedTouches[0];

      dist = 0;
      startX = touchobj.pageX;
      startY = touchobj.pageY;
      startTime = new Date().getTime(); // record time when finger first makes contact with surface
      // e.preventDefault();
    });

    mobSwipe.addEventListener('touchmove', () => {
      // e.preventDefault(); // prevent scrolling when inside DIV
    });

    mobSwipe.addEventListener('touchend', e => {
      const touchobj = e.changedTouches[0];
      let swipedownBol = null;
      let swipeupBol = null;
      // check that elapsed time is within horizontal & vertical dist traveled >= threshold

      dist = touchobj.pageY - startY; // get total dist traveled by finger while in contact
      elapsedTime = new Date().getTime() - startTime; // get time elapsed
      swipeupBol =
        elapsedTime <= allowedTime &&
        -dist >= threshold &&
        Math.abs(touchobj.pageX - startX) <= 100;

      swipedownBol =
        elapsedTime <= allowedTime &&
        dist >= threshold &&
        Math.abs(touchobj.pageX - startX) <= 100;
      // depending whether the tab is expanded or not, checking for up or down swipe
      if (
        parentElement.querySelector('article').getAttribute('aria-expanded') ===
        'true'
      ) {
        handleswipe(swipedownBol);
      } else {
        handleswipe(swipeupBol);
      }

      // e.preventDefault();
    });
  });

  // touch to expand, specifically for the nudge only
  mobTouch.addEventListener('touchstart', () => {
    if (
      parentElement.querySelector('article').getAttribute('aria-expanded') ===
        'true' &&
      window.innerWidth < MOBILE_BREAKPOINT
    ) {
      // eslint-disable-next-line no-param-reassign
      parentElement
        .querySelector('article')
        .setAttribute('aria-expanded', 'false');
    } else if (window.innerWidth < MOBILE_BREAKPOINT) {
      // eslint-disable-next-line no-param-reassign
      parentElement
        .querySelector('article')
        .setAttribute('aria-expanded', 'true');
    }
  });

  window.addEventListener('resize', () => {
    if (defaultWidth !== window.innerWidth) {
      parentElement.removeAttribute('style');
      parentElement.classList.remove('sliding');
    }
  });
};