Handler examples

IMPORTANT: these are examples of handlers already implemented for cases with ‘complex’ configurations

These are to be used as a reference, but use the sample handler to create a new one when you need it.

This is not all the needed configuration for a library to function, refer to our documentation to see a detailed guide on implementation.

Collapsify

Uses library

import CoreHandler from "../CoreHandler";

class Handler extends CoreHandler {
    constructor(payload) {
        super(payload);
        this.init();
        this.events();
        this.config = {
            activeClass: "--is-active",
            isAnimation: true,
            animationSpeed: 300,
            cssEasing: "ease-in-out",
        };
    }

    get updateTheDOM() {
        return {
            accordionElements: document.querySelectorAll(`.js--accordion-primary`),
            accordionElementsSecondary: document.querySelectorAll(`.js--accordion-secondary`),
        };
    }

    init() {
        super.init();
        super.getLibraryName("Collapsify");
    }

    events() {
        super.events();
        this.emitter.on("MitterContentReplaced", async () => {
            this.DOM = this.updateTheDOM; // Re-query elements each time this is called
            this.Manager.instances.Collapsify = [];

            super.assignInstances({
                elementGroups: [
                    {
                        elements: this.DOM.accordionElements,
                        config: { ...this.config, closeOthers: true, nameSpace: "accordion" },
                        boostify: { distance: 30 },
                    },
                    {
                        elements: this.DOM.accordionElementsSecondary,
                        config: { ...this.config, closeOthers: false, nameSpace: "accordion-2" },
                    },
                ],
            });
        });

        this.emitter.on("MitterWillReplaceContent", () => {
            if(this.DOM.accordionElements.length || this.DOM.accordionElementsSecondary.length) {
                super.destroyInstances({libraryName: 'Collapsify'})
            }
        });
    }
}

export default Handler;

Infinite marquee

Uses class in our file system

import CoreHandler from "../CoreHandler";

class Handler extends CoreHandler {
    constructor(payload) {
        super(payload);
        this.init();
        this.events();
        this.config = (marquee) => ({
            speed: parseFloat(marquee.getAttribute("data-speed")),
            controlsOnHover: marquee.getAttribute("data-controls-on-hover") === "true",
            reversed: marquee.getAttribute("data-reversed"),
        });
    }

    get updateTheDOM() {
        return {
            marqueeElements: document.querySelectorAll(`.js--marquee`),
        };
    }

    init() {
        super.getLibraryName("InfiniteMarquee");
    }

    events() {
        super.events();
        this.emitter.on("MitterContentReplaced", async () => {
            this.DOM = this.updateTheDOM; // Re-query elements each time this is called
            this.Manager.instances["InfiniteMarquee"] = [];

            // Marquee import
            super.assignInstances({
                elementGroups: [
                    {
                        elements: this.DOM.marqueeElements,
                        config: this.config,
                    },
                ],
            });
        });

        this.emitter.on("MitterWillReplaceContent", () => {
            if (this.DOM.marqueeElements.length) {
                super.destroyInstances({ libraryName: "InfiniteMarquee" });
            }
        });
    }
}

export default Handler;

Slider

Uses class in our file system

import CoreHandler from "../CoreHandler";

class Handler extends CoreHandler {
    constructor(payload) {
        super(payload);
        this.init();
        this.events();
        this.commonConfig = {
            items: 1,
            autoplay: false,
            loop: false,
            rewind: false,
            controls: true,
            swipeAngle: 80,
            speed: 600,
            easing: "ease-in-out",
            mouseDrag: true,
            nav: false,
            preventActionWhenRunning: true,
            preventScrollOnTouch: true,
            responsive: {
                1700: {
                    items: 4.8,
                },
                1025: {
                    items: 3.8,
                },

                810: {
                    items: 2.8,
                },
                580: {
                    items: 2,
                },
            },
        };
        this.configSlider1 = (slider) => ({
            config: {
                ...this.commonConfig,
                container: slider.querySelector(".js--slider-a-primary-container"),
                // En vez de tener clase, next element sibling del container
                controlsContainer: slider.querySelector(".js--slider-a-primary-controls"),
                slideBy: "1",
            },
            onComplete: () => {},
        });
        this.configSlider2 = (slider) => ({
            config: {
                ...this.commonConfig,
                container: slider.querySelector(".js--slider-a-secondary-container"),
                controlsContainer: slider.querySelector(".js--slider-a-secondary-controls"),
                slideBy: "3",
            },
            onComplete: () => {},
        });
    }

    // Get all the elements where the library is going to be inserted
    get updateTheDOM() {
        return {
            sliderElements: document.querySelectorAll(`.js--slider-a-primary`),
            sliderElementsSecondary: document.querySelectorAll(`.js--slider-a-secondary`),
        };
    }

    init() {
        super.getLibraryName("Slider");
    }

    events() {
        // When entering the page, create all necessary instances
        this.emitter.on("MitterContentReplaced", async () => {
            this.Manager.instances["Slider"] = [];
            this.DOM = this.updateTheDOM; // Re-query elements each time this is called

            super.assignInstances({
                elementGroups: [
                    {
                        elements: this.DOM.sliderElements,
                        config: this.configSlider1,
                    },
                    {
                        elements: this.DOM.sliderElementsSecondary,
                        config: this.configSlider2,
                    },
                ],
            });
        });

        // When exiting the page, destroy all instances and clean up the array
        this.emitter.on("MitterWillReplaceContent", () => {
            if (this.DOM.sliderElements.length) {
                super.destroyInstances({ libraryName: "Slider" });
            }
        });
    }
}

export default Handler;

Modal

Uses library

import CoreHandler from "../CoreHandler";

class Handler extends CoreHandler {
    constructor(payload) {
        super(payload);
        this.init();
        this.events();
        this.config = (modal) => ({
            selector: `#modal-a`,
            openClass: `c--modal-a--is-open`,
            beforeOpen: () => {
            }
        });
    }

    get updateTheDOM() {
        return {
            modalElements: document.querySelectorAll(`.js--modal`),
        };
    }

    init() {
        super.init();
        super.getLibraryName("Modal");
    }

    events() {
        super.events();
        this.emitter.on("MitterContentReplaced", async () => {
            this.DOM = this.updateTheDOM; // Re-query elements each time this is called
            this.Manager.instances["Modal"] = [];

            // Marquee import
            super.assignInstances({
                elementGroups: [
                    {
                        elements: this.DOM.modalElements,
                        config: this.config,
                    },
                ],
            });
        });

        this.emitter.on("MitterWillReplaceContent", () => {
            if (this.DOM.modalElements.length) {
                super.destroyInstances({ libraryName: "Modal" });
            }
        });
    }
}

export default Handler;