Main.js

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

constructor()

    constructor(payload) {
        const { terraDebug, Manager, emitter, assetManager, debug, boostify, eventSystem } = payload;

        super({
            blazy: {
                enable: true,
                selector: "g--lazy-01",
            },
            form7: {
                enable: false,
            },
            swup: {
                enable: true
            },
            terraDebug: terraDebug,
            Manager: Manager,
            assetManager,
            debug,
            eventSystem
        });
        this.emitter = emitter
        this.boostify = boostify

        this.handler = {
            emitter: this.emitter,
            boostify: this.boostify,
            terraDebug: this.terraDebug,
            Manager: this.Manager,
            debug,
            eventSystem: this.eventSystem,
        };

        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. Then, we instantiate our EventSystem, which will wrap our emitter to make it friendlier to use throughout the application, and we create our handler object, with all the information our handlers require to function.

init()

    async init() {
        super.init();
        new MarqueeHandler({ ...this.handler, name: "MarqueeHandler" });
        new Modal({ ...this.handler, name: "Modal" });
        new Collapsify({ ...this.handler, name: "Collapsify" });
        new Lottie({ ...this.handler, name: "Lottie" });
        new Slider({ ...this.handler, name: "Slider" });
        new MotionFooter({ ...this.handler, name: "MotionFooter" });
        new Form({ ...this.handler, name: "Form" });
        new AnchorTo({ ...this.handler, name: "AnchorTo" });
        new ThreeGL({ ...this.handler, name: "ThreeGL" });
        new Condition({...this.handler,name:"Condition"})
    }

Our init() method is in charge of instantiating our handlers and activating the init() method of its parent class, Core.

Rest of the file

    events() {
        super.events();
    }
    // Method triggered when the content is replaced
    async contentReplaced() {
        super.contentReplaced();
        this.emitter.emit("MitterContentReplaced");
    }

    // Method triggered before content replacement
    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.