@chateleon/sdk-public/integration-kit/v0/guvi/custom_v0.0.1.js

Chateleon sdk public packages

(function (win, doc) {

    win.ChateleonCustom = (function () {
        console.info("Chatleon Custom SDK loaded");

        const custom = function (configs) {
            var MASCOT_CONTAINER_ID = configs.id ? ["chateleon-container", configs.id].join("-") : "chateleon-container";

            const addGuviClickListener = () => {
                var chateleonContainer = document.getElementById(MASCOT_CONTAINER_ID);
                var ymDivBarContainer = document.getElementById('ymDivBar');

                chateleonContainer.addEventListener('click', function () {
                    ymDivBarContainer.click();
                });
            };

            // Callback function to execute when mutations are observed
            const bodyCallback = (mutationList, observer) => {
                for (const mutation of mutationList) {
                    if (mutation.type === "childList") {
                        console.log(`The impact was in ${mutation.target} element. - ${mutation.target.id}`);

                        if (mutation.addedNodes[0]?.id == 'ymPluginDivContainerInitial') {
                            console.log('ymPluginDivContainerInitial container added');

                            const mascotCallback = function (container, mascot) {
                                // mascot.unsubscribe();
                            };

                            configs.isCustom = false;
                            configs.customImpl = customImpl;

                            const chateleon = new Chateleon(configs);
                            chateleon.subscribe(mascotCallback);

                            // Add mutation observer for chatBox
                            addChatBoxObserver();
                        }

                        if (mutation.addedNodes[0]?.id == MASCOT_CONTAINER_ID) {
                            console.log(MASCOT_CONTAINER_ID + ' container added');
                            addGuviClickListener();
                            observer.disconnect();
                        }
                    }
                }
            };

            const chatBoxCallback = (mutationList, observer) => {
                for (const mutation of mutationList) {
                    if (mutation.type === "attributes") {
                        // console.log(`The ${mutation.attributeName} attribute was modified.`);

                        if (mutation.attributeName === 'style') {
                            if (mutation.target.id === 'ymDivBar') {
                                var guviChatImage = document.querySelector('#ymDivBar img');
                                guviChatImage.style.display = 'none';

                                var chateleonContainer = document.getElementById(MASCOT_CONTAINER_ID);

                                if (chateleonContainer && mutation.target.style.display === 'none') {
                                    chateleonContainer.style.display = 'none';
                                } else if (chateleonContainer) {
                                    chateleonContainer.style.display = 'block';
                                }
                            }
                        }
                    }
                }
            };

            const customImpl = (filteredGif, id, trackEvent) => {
                var elem = document.createElement("img");
                elem.setAttribute("src", filteredGif.original);
                elem.style.cssText = 'height: 149px; width: 172px';
                elem.onmouseover = trackEvent;
                elem.onclick = trackEvent;

                var elemDiv = document.createElement('div');
                elemDiv.id = id;
                elemDiv.style.cssText = 'position: fixed; bottom: -15px; right: -43px; z-index: 99998; cursor: pointer;';
                document.body.appendChild(elemDiv);
                elemDiv.appendChild(elem);
            };

            const guviBodyNode = document.body;
            const config = { childList: true };
            const bodyObserver = new MutationObserver(bodyCallback);
            bodyObserver.observe(guviBodyNode, config);

            const addChatBoxObserver = function () {
                const chatBoxContainer = document.getElementById('ymPluginDivContainerInitial');
                const chatBoxObserver = new MutationObserver(chatBoxCallback);
                const config = { attributes: true, subtree: true };
                chatBoxObserver.observe(chatBoxContainer, config);
            }
        };

        return custom;
    })();

})(window, document)