Custom Tabs / Вкладки

      /**
 *
 * Custom tabs 1.0.0
 * Вкладки
 *
 * Copyright 2025 Mihail Pridannikov
 *
 * Released on: June 16, 2025
 *
 */

const CustomTabs = function (customSettings) {
    this.deepMergeObjects = function (obj1, obj2) {
        const result = {};
        for (const key in obj2) {
            if (obj2.hasOwnProperty(key)) {
                if (typeof obj2[key] === "object" && obj1.hasOwnProperty(key) && typeof obj1[key] === "object") {
                    result[key] = this.deepMergeObjects(obj1[key], obj2[key]);
                } else {
                    result[key] = obj2[key];
                }
            }
        }
        for (const key in obj1) {
            if (obj1.hasOwnProperty(key) && !result.hasOwnProperty(key)) {
                if (typeof obj1[key] === "object") {
                    result[key] = this.deepMergeObjects(obj1[key], {});
                } else {
                    result[key] = obj1[key];
                }
            }
        }
        return result;
    }

    const TABS = document.querySelectorAll('.tabs');

    const DEFAULT_SETTINGS = {}

    let settings = this.deepMergeObjects(DEFAULT_SETTINGS, customSettings);

    this.init = function() {
        TABS.forEach(tabs => {
            tabs.querySelectorAll('.tabs__tab').forEach(tab => {
                tab.addEventListener('click', e => handlerClickOnTab(e, tabs));
            });
        });
    }

    function handlerClickOnTab(e, tabs) {
        e.preventDefault();
        removeClassOnTabs(tabs);
        removingClassOnContents(tabs);
        addingClass(tabs, e.currentTarget.getAttribute('data-id'));
    }

    function removeClassOnTabs(tabs) {
        tabs.querySelectorAll('.tabs__tab').forEach(tab => {
            tab.classList.remove('is-active');
        });
    }
    function removingClassOnContents(tabs) {
        tabs.querySelectorAll('.tabs__content').forEach(content => {
            content.classList.remove('is-active');
        });
    }
    function addingClass(tabs, id) {
        tabs.querySelector(`.tabs__tab[data-id="${id}"]`).classList.add('is-active');
        tabs.querySelector(`.tabs__content[data-id="${id}"]`).classList.add('is-active');
    }

    TABS ? this.init() : null;

};