Section Anchors

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/mixins/breakpoints";


.block-section-anchors {
	padding: rem-calc(16 0);
	background: #ffffff;
	position: sticky;
	top: 0;
	z-index: 10;
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: rem-calc(4);

	@include bp($xl){
		padding: rem-calc(16 0);
	}	
	&.theme--dark{
		background-color: #000;	
	}

	&.theme--dark &{
		&__item{
			color: #fff;
		}
	}

	&__wrapper{
		text-align: center;
		transition: 0.3s ease padding;
		overflow-y: hidden;
		overflow-x: hidden;
		transition: 0.3s ease padding;
		&:hover{
			padding-bottom: rem-calc(4);
			overflow-x: auto;                
		}

		@media (hover: none) and (pointer: coarse) {
			overflow-x: auto;
			padding-bottom: 0;
		}

		&::-webkit-scrollbar {
			height: 4px;
			@media (hover: none) and (pointer: coarse) {
				height: 0;
			}
		}
		  
		  /* Track */
		&::-webkit-scrollbar-track {
			background: #f1f1f1;
		}
		  
		  /* Handle */
		&::-webkit-scrollbar-thumb {
			background: #888;
		}
		  
		  /* Handle on hover */
		&::-webkit-scrollbar-thumb:hover {
			background: #555;
		}
	}

	&__items{
		display: inline-flex;
	}
	&__items &{
		&__item{
			color: #000;
			padding: rem-calc(8 24);
			text-decoration: none;
			transition: font-weight .25s;
			white-space: nowrap;
			border: 1px solid transparent;
			border-radius: 32px;
			font-size: rem-calc(18);
			line-height: rem-calc(24);
			margin: rem-calc(0 20);
			transition: 0.3s ease border;

			&.active{
				font-weight: 600;
				border-color: $secondary;
			}

			&:hover{
				border-color: $secondary;
			}

		}
	}
}

.admin-bar{
	.block-section-anchors{
		top: 32px;
	}
}

var section = document.querySelectorAll("#content section");
var anchors = document.querySelector(".block-section-anchors");
var header = document.querySelector(".site-header");
var sections = {};
var i = 0;

var topOffset = anchors.offsetHeight + header.offsetHeight;

Array.prototype.forEach.call(section, function(e) {
    sections[e.id] = e;
});

window.onload = function(){
    setHeaderOffset();
    handleScrollSpy();
}

window.onresize = function(){
    setHeaderOffset();
}

window.onscroll = function(){
    handleScrollSpy();
}

function setHeaderOffset(){
    anchors.style.top = header.offsetHeight + 'px';
}

function handleScrollSpy(){
    //var scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
    var anchorBottom = anchors.offsetTop + anchors.offsetHeight;
    for (i in sections) {
        
        if(!i){
            continue;
        }

        var sectionElem = document.querySelector('a[href="#' + i + '"]');   
        if(sectionElem){
            if (anchorBottom >= sections[i].offsetTop && anchorBottom < sections[i].offsetTop + sections[i].offsetHeight) {
                        
            if(sectionElem.classList.contains('active')){
                continue;
            }

            sectionElem.classList.add('active');
            }else{ 
            
                sectionElem.classList.remove("active");
            }
        }
    }
}

(function (d) {
    "use strict";
  
    //lets add the observer element dynamically.
    var newEl = d.createElement("div");
    newEl.classList.add("myObserver");
    var ref = d.querySelector(".block-section-anchors");
    insertBefore(newEl, ref);
    function insertBefore(el, referenceNode) {
      referenceNode.parentNode.insertBefore(el, referenceNode);
    }
  
    var observer = new IntersectionObserver(
      function (entries) {
        if (entries[0].intersectionRatio === 0) {
          d.querySelector(".block-section-anchors").classList.add("sticky-active");
          //newEl.classList.add("sticky-observer");
        } else if (entries[0].intersectionRatio === 1) {
          d.querySelector(".block-section-anchors").classList.remove("sticky-active");
          //newEl.classList.remove("sticky-observer");
        }
      },
      { threshold: [0, 1] }
    );
  
    observer.observe(d.querySelector(".myObserver"));

    var scrollContainer = document.querySelectorAll('.block-section-anchors__wrapper');
    scrollContainer.forEach(function(element){
        element.addEventListener("wheel", function (e) {
            e.preventDefault();
            element.scrollLeft += e.deltaY;
        });
    });

  })(document);

jQuery(function($){
    var $root = $('html, body');
    $(".block-section-anchors").find('a[href^="#"]').each(function(){
        $(this).on('click',function () {
            this.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
            if($( $.attr(this, 'href') ).length>0){
                $root.animate({
                    scrollTop: $( $.attr(this, 'href') ).offset().top - ($('.site-header').height() + 74)
                }, 500);
                return false;
            }
        });
    });
});