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')
}
);