Project.js

In charge of instancing every service we will later use throughout the application.

constructor()

constructor() {
        // Line only added in WordPress to help instance the Project class
        // window.isFired = true;

        this.DOM = {
            boostifyScripts: document.querySelectorAll('script[type="text/boostify"]'),
            revealStack: document.querySelectorAll(".js--reveal-stack"),
            preloader: document.querySelector(".js--preloader"),
        };

        // terra debug mode, add ?debug to the url to enable debug mode
        this.terraDebug = getQueryParam("debug");
        // terra dev debug mode, with panels, always active in dev, add ?dev-debug to enable in deployed version
        this.devDebug = getQueryParam("dev-debug");
        this.debug = {
            import() {},
            instance() {},
            manager() {},
            events() {},
            error() {},
            info() {},
        };

        this.emitter = mitt();

        this.#init();
    }

The constructor in our Project.js needs to perform several actions:

• Captures our reveal animations, boostify scripts and preloader from the initial DOM
• Instances our debuggers
• Instances our mitter for our events
• Calls to our init() method

init()

try {
            if (import.meta.env.MODE === "development" || this.devDebug) {
                const mod = await import("./managers/DebugManager");
                this.debug = mod.debug;
            }

            this.Manager = new Manager({ debug: this.debug });
            this.assetManager = new AssetManager({
                debug: this.debug,
                emitter: this.emitter,
                libraryManager: this.Manager,
            });

            await this.assetManager.getLibraries();
            await this.assetManager.calculateProgress();
            await this.assetManager.loadLibraries();

            var Boostify = this.Manager.getLibrary("Boostify");

            this.boostify = new Boostify({
                debug: this.terraDebug,
                license: "7A878CB9-BDEE4909-8CA2200B-DB650D8C",
            });

            this.GSAPLIB = this.Manager.getLibrary("GSAP");
            this.gsap = this.GSAPLIB.gsap;
            if (!this.GSAPLIB || !this.GSAPLIB.gsap) {
                this.debug.error("GSAP library not found or not properly loaded");
            }
            this.GSAPLIB.gsap.registerPlugin(this.Manager.getLibrary("ScrollTrigger"), this.Manager.getLibrary("Flip"));

            const eventSystemLib = this.Manager.getLibrary("EventSystem");
            this.eventSystem = new eventSystemLib({emitter: this.emitter, debug: this.debug});

            const { default: Main } = await import("@js/Main.js");
            new Main({
                boostify: this.boostify,
                terraDebug: this.terraDebug,
                debug: this.debug,
                Manager: this.Manager,
                emitter: this.emitter,
                assetManager: this.assetManager,
                eventSystem: this.eventSystem
            });
        }

Our init method:

• Detects our environment to instantiate our dev debug
• Instantiates both our Manager (in charge of storing all of our libraries and instances) and our AssetManager (in charge of importing our minimal libraries on load)
• Grabs our Boostify instance from our Manager and instances it, and does the same for our GSAP, which will be used throughout the application to manage animations
• Instances our event system, which will be sent to Main to be accessed by the handlers
• Finally, instances Main, which will in turn instance our handlers and start our libraries import process

        catch (err) {
            this.debug.error(`Error setting up Project.js, check console`);
            console.error(err);
        }

Our catch throws a warning both in our dev debug panels and in our console.

        finally {
            let tl = this.gsap?.timeline({
                defaults: {
                    duration: 0.1,
                    ease: "power1.inOut",
                },
                onStart: () => {
                    this.DOM.preloader.style.pointerEvents = "none";
                    if (this.DOM.boostifyScripts) {
                        this.boostify.onload({
                            maxTime: 1200,
                            callback: async () => {
                                if (!window.dataLayer) window.dataLayer = [];
                                window.dataLayer.push({
                                    event: "VirtualPageview",
                                    virtualPageURL: window.location.href, // full URL
                                    virtualPageTitle: document.title, // Page title
                                    virtualPagePath: window.location.pathname, // Path w/o hostname
                                });
                                console.log("windowdatalayer", window.dataLayer);
                            },
                        });
                    }
                },
            });

            tl.to(this.DOM.preloader, { duration: 0.5, opacity: 0 });

            tl = await this.assetManager.importAutoAnimations({ tl, eventSystem: this.eventSystem });

            if (this.DOM.revealStack) {
                const RevealStack = await this.assetManager.getAnimation("RevealStack");
                this.DOM.revealStack.forEach((element) => {
                    if (this.Manager.libraries.isElementInViewport({ el: element, debug: this.terraDebug })) {
                        tl.add(
                            new RevealStack({
                                play: "instant",
                                container: element,
                                childrenElements: element.children,
                                terraDebug: this.terraDebug,
                                Manager: this.Manager,
                            }),
                            "preloaderFinished"
                        );
                    } else {
                        this.Manager.addInstance({
                            name: "RevealStack",
                            instance: new RevealStack({
                                play: "onscroll",
                                container: element,
                                childrenElements: element.children,
                                terraDebug: this.terraDebug,
                                Manager: this.Manager,
                            }),
                            element,
                        });
                    }
                });
            }
        }

The finally block of our init() method is in charge of:

• Creating the general GSAP timeline
• Sending our first page view to GTM
• Easing our preloader out of view
• If we have some element in our revealStack, adding it to the timeline if it’s in viewport, adding it to our scroll queue if it’s not

Note

If we are in Wordpress, we’ll need this at the end of our file to create the instance of the Project class:

if (!window.isFired) {
    new Project();
}