Added sub-subtabs with poor visual

custom_subtabs/public/css/custom_subtabs.css

@@ -1,14 +1,25 @@
-/* Убираем анимацию скрытия Bootstrap */
+/* Main tab styling */
-.tab-pane.fade:not(.show) {
+.nav-item.active {
-    opacity: 0 !important; /* Только убираем анимацию, не меняем display */
+    border-bottom: 2px solid #171717 !important;
+    font-weight: bold !important;
+    color: #171717 !important;
 }
 
-/* Скрываем все вкладки, кроме активной */
+/* Subtab styling */
-.tab-pane {
+.sub-tab.active {
-    display: none;
+    border-bottom: 2px solid #171717 !important;
+    font-weight: bold !important;
+    color: #171717 !important;
 }
 
-/* Показываем активную вкладку */
+/* Sub-subtab styling */
-.tab-pane.active {
+.sub-sub-tab.active {
-    display: block !important;
+    border-bottom: 2px solid #171717 !important;
+    font-weight: bold !important;
+    color: #171717 !important;
+}
+
+/* Remove double line */
+.nav-item, .sub-tab, .sub-sub-tab {
+    border-bottom: none !important;
 }

custom_subtabs/public/js/custom_subtabs.js

@@ -1,9 +1,7 @@
 frappe.ui.form.Layout.prototype.setup_tab_events = function () {
-    console.log("Setting up tab events...");
+    console.log("Initializing tab system...");
 
     setTimeout(() => {
-        console.log("Initializing tabs...");
-
         const tabs = this.wrapper.find("ul.form-tabs > li.nav-item");
         console.log(`Found ${tabs.length} main tabs.`);
 
@@ -11,18 +9,18 @@ frappe.ui.form.Layout.prototype.setup_tab_events = function () {
         const hierarchy = frappe.boot.tab_hierarchy[doctype];
 
         if (!hierarchy) {
-            console.warn(`No tab hierarchy found for Doctype: ${doctype}`);
+            console.warn(`No hierarchy found for Doctype: ${doctype}`);
             return;
         }
 
         const subtabs = hierarchy.subtabs || {};
+        console.log("Subtabs:", subtabs);
 
-        // Process subtabs and parent tabs
+        // Process subtabs
         tabs.each((index, tab) => {
             const tabLabel = $(tab).text().trim();
+            console.log(`Processing subtabs for main tab: '${tabLabel}'`);
             if (subtabs[tabLabel]) {
-                console.log(`Processing subtabs for parent tab: '${tabLabel}'`);
-
                 let subtabContainer = $(tab).find(".sub-tab-container");
                 if (!subtabContainer.length) {
                     subtabContainer = $("<ul class='sub-tab-container nav'></ul>");
@@ -36,126 +34,99 @@ frappe.ui.form.Layout.prototype.setup_tab_events = function () {
                         const subtabClone = subtabElement.clone();
                         subtabClone.addClass("sub-tab").find("a").removeAttr("href");
                         subtabContainer.append(subtabClone);
-
-                        // Удаляем лишние классы и стили у субтаба
                         subtabElement.remove();
+
+                        console.log(`Processed subtab: '${subtab}' under main tab '${tabLabel}'`);
+
+                        // Process sub-subtabs
+                        if (subtabs[subtab]) {
+                            let subsubtabContainer = subtabClone.find(".sub-sub-tab-container");
+                            if (!subsubtabContainer.length) {
+                                subsubtabContainer = $("<ul class='sub-sub-tab-container nav'></ul>");
+                                subtabClone.append(subsubtabContainer);
+                            }
+
+                            subtabs[subtab].forEach((subsubtab) => {
+                                const subsubtabElement = tabs.filter((_, el) => $(el).text().trim() === subsubtab);
+
+                                if (subsubtabElement.length) {
+                                    const subsubtabClone = subsubtabElement.clone();
+                                    subsubtabClone.addClass("sub-sub-tab").find("a").removeAttr("href");
+                                    subsubtabContainer.append(subsubtabClone);
+                                    subsubtabElement.remove();
+
+                                    console.log(`Processed sub-subtab: '${subsubtab}' under subtab '${subtab}'`);
+                                } else {
+                                    console.warn(`Sub-subtab element not found for '${subsubtab}'`);
+                                }
+                            });
+                        }
+                    } else {
+                        console.warn(`Subtab element not found for '${subtab}'`);
                     }
                 });
             }
         });
 
-        // Handle main tab clicks
+        // Handle tab activation
         $(".nav-item").on("click", function () {
             const clickedTab = $(this);
             const tabId = clickedTab.find("a").attr("aria-controls");
 
             console.log(`Activating main tab: '${clickedTab.text().trim()}' (ID: ${tabId})`);
 
-            // Hide all tabs
+            $(".form-tab-content > .tab-pane").removeClass("active show").css("display", "none");
-            $(".form-tab-content > .tab-pane").each(function () {
-                const pane = $(this);
-                pane.removeClass("active show").css("display", "none").addClass("tab-pane fade");
-            });
-
-            // Activate the clicked tab
             const tabContent = document.querySelector(`#${tabId}`);
             if (tabContent) {
-                tabContent.style.display = "block";
+                $(tabContent).addClass("active show").css("display", "block");
-                tabContent.classList.add("active", "show");
             } else {
                 console.warn(`Tab content not found for ID: ${tabId}`);
             }
 
+            $(".nav-item").removeClass("active");
             clickedTab.addClass("active");
         });
 
-        // Handle subtab clicks
+        // Handle subtab activation
         $(".sub-tab").on("click", function (event) {
-            event.stopPropagation(); // Предотвращаем срабатывание событий родительских вкладок
+            event.stopPropagation();
 
             const clickedSubtab = $(this);
             const subtabId = clickedSubtab.find("a").attr("aria-controls");
-            const subtabName = clickedSubtab.text().trim();
 
-            console.log(`Activating subtab: '${subtabName}' (ID: ${subtabId})`);
+            console.log(`Activating subtab: '${clickedSubtab.text().trim()}' (ID: ${subtabId})`);
 
-            // Найти имя родительской вкладки через объект иерархии
+            $(".form-tab-content > .tab-pane").removeClass("active show").css("display", "none");
-            let parentTabName = null;
-            Object.keys(subtabs).forEach((parent) => {
-                if (subtabs[parent].includes(subtabName)) {
-                    parentTabName = parent;
-                    console.log(`Found parent tab for '${subtabName}': '${parentTabName}'`);
-                }
-            });
-        
-            if (!parentTabName) {
-                console.warn(`Parent tab not found for subtab: '${subtabName}'`);
-                return;
-            }
-        
-            // Получить ID родительской вкладки через href
-            const parentTabId = $(`ul.form-tabs a:contains('${parentTabName}')`).attr("aria-controls");
-        
-            if (!parentTabId) {
-                console.warn(`Parent tab ID not found for: '${parentTabName}'`);
-                return;
-            } else {
-                console.log(`Parent tab ID for '${parentTabName}': ${parentTabId}`);
-            }
-        
-            // Обработать родительскую вкладку
-            const parentTabContent = document.querySelector(`#${parentTabId}`);
-            if (parentTabContent) {
-                console.log(`Parent tab content found:`, parentTabContent);
-        
-                // Убираем классы и стили, чтобы показать родительскую вкладку
-                parentTabContent.style.display = "block";
-                parentTabContent.classList.add("active", "show");
-                parentTabContent.classList.remove("tab-pane", "fade");
-        
-                console.log(`Parent tab '${parentTabName}' is now visible.`);
-            } else {
-                console.warn(`Parent tab content not found for ID: ${parentTabId}`);
-            }
-        
-            // Активировать текущую субвкладку
             const subtabContent = document.querySelector(`#${subtabId}`);
             if (subtabContent) {
-                console.log(`Subtab content found:`, subtabContent);
+                $(subtabContent).addClass("active show").css("display", "block");
-        
-                // Убираем классы и стили, чтобы показать субвкладку
-                subtabContent.style.display = "block";
-                subtabContent.classList.add("active", "show");
-                subtabContent.classList.remove("tab-pane", "fade");
-        
-                console.log(`Subtab '${subtabName}' content activated.`);
             } else {
                 console.warn(`Subtab content not found for ID: ${subtabId}`);
             }
 
+            $(".sub-tab").removeClass("active");
             clickedSubtab.addClass("active");
+        });
 
-            // Скрыть все другие вкладки, кроме текущей субвкладки и родительской
+        // Handle sub-subtab activation
-            $(".form-tab-content > .tab-pane").each(function () {
+        $(".sub-sub-tab").on("click", function (event) {
-                const pane = $(this);
+            event.stopPropagation();
-                if (pane.attr("id") !== subtabId && pane.attr("id") !== parentTabId) {
-                    console.log(`Hiding tab content for ID: ${pane.attr("id")}`);
 
-                    pane.removeClass("active show").css("display", "none").addClass("tab-pane fade");
+            const clickedSubsubtab = $(this);
+            const subsubtabId = clickedSubsubtab.find("a").attr("aria-controls");
+
+            console.log(`Activating sub-subtab: '${clickedSubsubtab.text().trim()}' (ID: ${subsubtabId})`);
+
+            $(".form-tab-content > .tab-pane").removeClass("active show").css("display", "none");
+            const subsubtabContent = document.querySelector(`#${subsubtabId}`);
+            if (subsubtabContent) {
+                $(subsubtabContent).addClass("active show").css("display", "block");
+            } else {
+                console.warn(`Sub-subtab content not found for ID: ${subsubtabId}`);
             }
-            });
-        });
 
-        // Reset subtabs when switching to another main tab
+            $(".sub-sub-tab").removeClass("active");
-        $(".nav-item").on("click", function () {
+            clickedSubsubtab.addClass("active");
-            $(".sub-tab").each(function () {
-                const subtabId = $(this).find("a").attr("aria-controls");
-                const subtabPane = document.querySelector(`#${subtabId}`);
-                if (subtabPane) {
-                    subtabPane.style.display = "none";
-                    subtabPane.classList.add("tab-pane", "fade");
-                }
         });
-        });
+    }, 500);
-    }, 500); // Задержка для загрузки DOM
 };