0

I'm trying to implement my code in module like Fullpage. I rewrote code, made it with class etc, but I'm getting defining errors. I've tried to solve it myself but it's still not really clear for me. Here is the error I got: ReferenceError: activeSectionHandler is not defined. So I thought that it will work if I write this.activeSectionHandler in method sectionWatcherCallback. But I get another error this.activeSectionHandler is not a function. What is the problem and what should I do and what should I do further for not getting similiar errors?

export class Scroll {
    constructor(options) {
        let defaultOptions = {
            container: '',
        };
        this.options = Object.assign({}, defaultOptions, options);
        this.nodeList = this.options.container.children;
        this.sectionWatcherOptions = {
            threshold: 0.6,
        };
        this.navLinks = this.options.navLinks;
        this.navBtns = this.options.navBtns;
        this.activeSection = 0;


        // calling functions here
        this.checkOptions();
        this.sectionWatcher();
        this.scrollKeyHandler();

    }

    checkOptions() {
        if (!this.options.container) {
            throw new Error('container is required');
        }
        return console.log(this);
    }

    // IntersectionObserver stuff

    sectionWatcherCallback(allSections, sectionWatcher) {
        this.nodeList = allSections;
        Array.from(allSections).forEach(section => {
            if (!section.isIntersecting) {
                return;
            }
            activeSectionHandler(section.target.className);
            setActiveSection(section.target);

        });
    }


    sectionWatcher() {
        const sectionWatcherOptions = this.sectionWatcherOptions;
        const allSections = this.nodeList;
        const sectionWatcher = new IntersectionObserver(this.sectionWatcherCallback, sectionWatcherOptions);
        Array.from(allSections).forEach(section => {

            sectionWatcher.observe(section);
        });
    }

    // sections handler 

    activeSectionHandler(currentSectionClassName) {
        if (this.options.navLinks) {
            const navLinks = this.navLinks;
            navLinks.forEach(link => {
                if (link.dataset.scroll === currentSectionClassName) {
                    link.classList.add('link--active');
                    return;
                } else {
                    link.classList.remove('link--active');
                }

            });
            if (this.options.navBtns) {
                const navBtns = this.navBtns;
                navBtns.forEach(btn => {
                    if (btn.dataset.scroll === currentSectionClassName) {
                        btn.classList.add('button--active');
                        return;
                    } else {
                        btn.classList.remove('button--active');
                    }

                });
            }
        }
    }

 
    setActiveSection(section) {
        activeSection = section;
    }


    showPrevSection() {
        const prevSection = activeSection.previousElementSibling;
        if (prevSection) {
            prevSection.scrollIntoView();
        }
        return
    }

    showNextSection() {
        const nextSection = activeSection.nextElementSibling;
        if (nextSection) {
            nextSection.scrollIntoView();
        }
        return
    }

    //scrolling stuff 


    keyEventHandler(keycode) {
        if (keycode === 'ArrowUp') {
            showPrevSection();
        }
        if (keycode === 'ArrowDown') {
            showNextSection();
        }
    }


    scrollKeyHandler() {
        window.addEventListener('keydown', (key) => {
            key.preventDefault();
            keyEventHandler(key.code);
        });

        window.addEventListener('mousewheel', (e) => {
            e.preventDefault();
            if (e.wheelDelta >= 0) {
                showPrevSection();
            } else {
                showNextSection();
            }

        }, {
            passive: false
        });

    }

} 

That's how I'm calling this module if you need it too:

 new Scroll({
    container: document.querySelector('.main'),
    navLinks: document.querySelectorAll('.nav__list-link')
}
    

);
  • 1
    The problem’s here: `new IntersectionObserver(this.sectionWatcherCallback, sectionWatcherOptions);`. That should be `new IntersectionObserver(this.sectionWatcherCallback.bind(this), sectionWatcherOptions);`. Add `.bind(this)` when assigning (e.g. passing) methods. Several method names are missing `this.`. – Sebastian Simon Sep 21 '21 at 14:16

0 Answers0