Skip to content

Main.js

We use this file to instantiate our handlers and hook into our Core events (contentReplaced and willReplaceContent).

constructor(payload) {
super({
blazy: {
enable: true,
selector: "g--lazy-01",
},
swup: {
transition: {
forceScrollTop: false,
},
},
Manager: payload.Manager,
boostify: payload.boostify,
terraDebug: payload.terraDebug,
libManager: payload.libManager,
});
this.handler = {
emitter: this.emitter,
boostify: this.boostify,
Manager: this.Manager,
terraDebug: this.terraDebug,
};
this.init();
this.events();
}

We pass all needed information to our Core class using its super() method, including libraries we use from the start such as blazy or swup and create an object to help us pass all of our needed information into our handlers.

init() {
// Loads Core init function
super.init();
new MarqueeHandler({ ...this.handler, name: "MarqueeHandler" });
}

Our init() method is in charge of instantiating our handlers.

events() {
// Loads Core events function
super.events();
}
contentReplaced() {
super.contentReplaced();
this.emitter.emit("MitterContentReplaced");
}
willReplaceContent() {
super.willReplaceContent();
this.emitter.emit("MitterWillReplaceContent");
}

We have our events() and swup hooks coming from our master Core class and here we emit the events that can be heard from our handlers to perform actions on page transitions.

This is a simple file, but can grow. In its basic form, its purpose is to emit our lifecycle events for the rest of our application and to instantiate our handlers. Here we would perform any actions that needed to be hooked into our swup lifecycle at every transition.