Anchor Links

/* anchor-links */
import $ from 'jQuery'
import Flickity from 'flickity'

$(document).ready(function () {
  let mastheadHeight = $('.masthead').outerHeight()
  let totalOffset = mastheadHeight
  let didScroll = false
  let ieOffset

  if ($('.anchor-links').length) {
    let anchorHeight = $('.anchor-links').outerHeight()
    totalOffset = Number(totalOffset) +  Number(anchorHeight)

    if ($('.hero').length ) {
      let heroHeight = $('.hero').innerHeight()
      ieOffset = Number(heroHeight) -  (Number(mastheadHeight) * 2)
    } else {
      ieOffset = 0
      $('.browser--ie11 .anchor-links').css('top', mastheadHeight)
    }

  }


  // Select all links with hashes
  $('a[href*="#"]').not('[href="#"]').not('[href="#0"]').not('[href="#important-safety-information"]').click(function(event) {
    // On-page links

    console.log(this)

    if (
      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
      && 
      location.hostname == this.hostname
    ) {

      var target = $(this.hash)
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']')

      if (target.length) {
        let calculateOffset = target.offset().top - totalOffset
        let $targetNew  = $(target)
                
        event.preventDefault()

        if ($(target).find('>div>button').attr('aria-expanded')=='false') {
          $(target).find('>div>button').click()
        } 

        // if the mobile nav is open, close it
        if ($('.masthead__mobile__main .mobile-nav__toggle--is-open').length) {
          $('.masthead__mobile__main .mobile-nav__toggle').click()
        }

        $('html, body').animate({
          scrollTop: calculateOffset

        }, 1000, function() {
          $targetNew.focus({preventScroll: true})
          if ($targetNew.find('.accordion-block')) {
            event.stopPropagation()
          }
        })

        if ($targetNew.is(":focus")) { // Checking if the target was focused
          return false

        } else {
          $targetNew.attr('tabindex','-1') // Adding tabindex for elements not focusable
          $targetNew.focus({preventScroll: true}) // Set focus again

        } 
      }
    }
  });

  if ($('.anchor-links__inner').length) {
    var carousel = new Flickity('.anchor-links__inner', {
      prevNextButtons: false,
      pageDots: false,
      contain: true,
      cellAlign: 'center',
    })
    
    carousel.on( 'staticClick', function( event, pointer, cellElement, cellIndex ) {
      if ( typeof cellIndex == 'number' ) {
        carousel.select(cellIndex)
      }
    })
  }

  function selectMenu () {
    $('.block[id]').not('.block[id=""]').each(function(i, obj) {
      let $block = $(this)
      let elementTop = $block.offset().top
      let elementBottom = elementTop + $block.outerHeight()
      let viewportTop = $(window).scrollTop()
      let markerOffset = totalOffset + 100
   
      if ( (elementTop - viewportTop ) < markerOffset && elementBottom > (viewportTop + markerOffset) ) {
  
        if ( i !== carousel.selectedIndex ) {
          carousel.select(i)
        }
      }
    })
  }

  $(window).scroll(function() {
      didScroll = true;
  });
  
  setInterval(function() {
      if ( didScroll ) {
          didScroll = false;

          if ($('.anchor-links__inner').length) {
            selectMenu ()
          }

          /*

          if ($(document).scrollTop() > ieOffset) {
            $('.anchor-links').addClass('fixed')
          } else {
            $('.anchor-links').removeClass('fixed')
          }

          */
      }
  }, 100);
})

// $('a[href*=#]:not([href=#])').click(function() {
//   if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
//       || location.hostname == this.hostname) {

//       var target = $(this.hash);
//       target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
//          if (target.length) {
//            $('html,body').animate({
//                scrollTop: target.offset().top
//           }, 1000);
//           return false;
//         }
//     }
// });