Main.js
Is this file modifiable? — YES
Section titled “Is this file modifiable? — YES”We use this file to instantiate our handlers and hook into our Core events (contentReplaced and willReplaceContent).
constructor()
Section titled “constructor()”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()
Section titled “init()”init() { // Loads Core init function super.init();
new MarqueeHandler({ ...this.handler, name: "MarqueeHandler" }); }Our init() method is in charge of instantiating our handlers.
Rest of the file
Section titled “Rest of the file”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.