From 1a0be36b245f7fb77acf6ea68d9432d87913eb28 Mon Sep 17 00:00:00 2001 From: Awey01 <010109ali@gmail.com> Date: Tue, 3 Dec 2024 11:26:02 +0000 Subject: [PATCH] Added sub-subtabs with poor visual --- custom_subtabs/public/css/custom_subtabs.css | 31 ++-- custom_subtabs/public/js/custom_subtabs.js | 165 ++++++++----------- 2 files changed, 89 insertions(+), 107 deletions(-) diff --git a/custom_subtabs/public/css/custom_subtabs.css b/custom_subtabs/public/css/custom_subtabs.css index 0326604..a1444e3 100644 --- a/custom_subtabs/public/css/custom_subtabs.css +++ b/custom_subtabs/public/css/custom_subtabs.css @@ -1,14 +1,25 @@ -/* Убираем анимацию скрытия Bootstrap */ -.tab-pane.fade:not(.show) { - opacity: 0 !important; /* Только убираем анимацию, не меняем display */ +/* Main tab styling */ +.nav-item.active { + border-bottom: 2px solid #171717 !important; + font-weight: bold !important; + color: #171717 !important; } -/* Скрываем все вкладки, кроме активной */ -.tab-pane { - display: none; +/* Subtab styling */ +.sub-tab.active { + border-bottom: 2px solid #171717 !important; + font-weight: bold !important; + color: #171717 !important; } -/* Показываем активную вкладку */ -.tab-pane.active { - display: block !important; -} \ No newline at end of file +/* Sub-subtab styling */ +.sub-sub-tab.active { + 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; +} diff --git a/custom_subtabs/public/js/custom_subtabs.js b/custom_subtabs/public/js/custom_subtabs.js index a6996ac..87c8f88 100644 --- a/custom_subtabs/public/js/custom_subtabs.js +++ b/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 = $(""); @@ -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 = $(""); + 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").each(function () { - const pane = $(this); - pane.removeClass("active show").css("display", "none").addClass("tab-pane fade"); - }); - - // Activate the clicked tab + $(".form-tab-content > .tab-pane").removeClass("active show").css("display", "none"); const tabContent = document.querySelector(`#${tabId}`); if (tabContent) { - tabContent.style.display = "block"; - tabContent.classList.add("active", "show"); + $(tabContent).addClass("active show").css("display", "block"); } 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})`); - - // Найти имя родительской вкладки через объект иерархии - 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}`); - } - - // Активировать текущую субвкладку + + console.log(`Activating subtab: '${clickedSubtab.text().trim()}' (ID: ${subtabId})`); + + $(".form-tab-content > .tab-pane").removeClass("active show").css("display", "none"); const subtabContent = document.querySelector(`#${subtabId}`); if (subtabContent) { - console.log(`Subtab content found:`, subtabContent); - - // Убираем классы и стили, чтобы показать субвкладку - subtabContent.style.display = "block"; - subtabContent.classList.add("active", "show"); - subtabContent.classList.remove("tab-pane", "fade"); - - console.log(`Subtab '${subtabName}' content activated.`); + $(subtabContent).addClass("active show").css("display", "block"); } else { console.warn(`Subtab content not found for ID: ${subtabId}`); } - + + $(".sub-tab").removeClass("active"); clickedSubtab.addClass("active"); - - // Скрыть все другие вкладки, кроме текущей субвкладки и родительской - $(".form-tab-content > .tab-pane").each(function () { - const pane = $(this); - 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"); - } - }); }); - - // Reset subtabs when switching to another main tab - $(".nav-item").on("click", function () { - $(".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"); - } - }); + + // Handle sub-subtab activation + $(".sub-sub-tab").on("click", function (event) { + event.stopPropagation(); + + 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}`); + } + + $(".sub-sub-tab").removeClass("active"); + clickedSubsubtab.addClass("active"); }); - }, 500); // Задержка для загрузки DOM + }, 500); };