Section Anchors

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";

.block-section-anchors {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    position: sticky;
    top: 83px;
    z-index: 10;
    .container{
    }
    
    .anchors {
        background-color: white;
        box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
        display: flex;
        overflow-x: auto;
        gap: 1rem 2rem;
        padding: 0 1rem;

        .anchor {
            position: relative;
            padding: 1rem 0;
            text-decoration: none;
            white-space: nowrap;
            font-size: 18px;

            &:hover,&.active {
                font-weight: 800;

                &:after {
                    content: '';
                    left: 0;
                    position: absolute;
                    right: 0;
                    height: 1px;
                    top: calc(100% - 16px);
                    background-color: $secondary;
                }
            }
        }
    }
}

var SectionAnchors = class SectionAnchors {
	/**
	 * Create and initialise objects of this class
	 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor
	 * @param {object} block
	 */
	constructor() {
		this.blocks = document.querySelectorAll('.block-section-anchors');
		this.init();
	}

	/**
	 * SectionAnchors function to run class logic
	 * Can access `this.block`
	 */
	init() {
		this.blocks.forEach((block) => {
			const links = block.querySelectorAll('.anchor[href]');

			links.forEach((link) => {
				link.addEventListener('click', (e) => {
					e.preventDefault();
					const target = document.querySelector('[id~="' + link.getAttribute('href').replace('#', '') + '"]');
					if (!target) return;

					// get padding-top
					let offset = 200;
					const padding = target.computedStyleMap().get('padding-top').value;
					if(padding){
						offset -= parseInt(padding.toString().replace('px', ''));
					}

					// account for existing scroll depth
					window.scrollTo({ top: window.scrollY + target.getBoundingClientRect().top - offset, behavior: 'smooth' });
				});
			})

			// get all elements with ids from links
			const anchors = Array.from(links).map(link => {
				const id = link.getAttribute('href').replace('#', '');
				const element = document.querySelector('*:not(style)[id~="' + id + '"]');
				if (element) {
					return element;
				}
			});
			document.addEventListener('scroll', () => {
				let offScreenAbove = [];
				if(!anchors) return;
				anchors.forEach(anchor => {
					if(!anchor) return;
					const rect = anchor.getBoundingClientRect();

					if (rect.top < 220) {
						offScreenAbove.push(anchor);
					}
				});
				// get last element in offScreenAbove
				const lastOffScreenAbove = offScreenAbove[offScreenAbove.length - 1];
				if (lastOffScreenAbove) {
					this.activateTab(block, lastOffScreenAbove.id);
				}
			}, { passive: true });
		});
	}

	activateTab(block, id) {
		const tabs = block.querySelectorAll('.anchors .anchor');
		tabs.forEach(tab => {
			tab.classList.remove('active');
		});

		// id can be multiple space separated ids, find the anchor with the id
		let ids = id.split(' ');
		let tab = null;
		ids.forEach(id => {
			tab = block.querySelector('.anchors .anchor[href="#' + id + '"]');
			if (tab) {
				return;
			}
		});
		if (tab) {
			tab.classList.add('active');
		}
	}
}

new SectionAnchors();